chore: textfield visuals fixed

src/components/text-field/index.tsx

@@ -63,11 +63,16 @@ function diffChars(prev: ReadonlyArray<{ id: number; char: string }>, next: stri
   return { reusedId, keptPrev };
 }
 
+/** Browsers render password glyphs as this bullet; match it in the overlay
+ *  so animated fields don't leak the real characters visually. */
+const PASSWORD_MASK_CHAR = '•';
+
 function useFieldAnimation(
   multiline: boolean,
   externalRef: Ref<FieldElement>,
   controlledValue: ComponentPropsWithoutRef<'input'>['value'],
   initial: ComponentPropsWithoutRef<'input'>['defaultValue'],
+  masked = false,
 ) {
   const innerRef = useRef<FieldElement | null>(null);
   const overlayRef = useRef<HTMLDivElement | null>(null);
@@ -144,33 +149,34 @@ function useFieldAnimation(
 
   const overlay = (
     <div
-      ref={overlayRef}
       aria-hidden="true"
       className={cx('modern-sk-field-overlay', multiline && 'modern-sk-field-overlay--multiline')}
     >
-      {entries.map((e) =>
+      <div ref={overlayRef} className="modern-sk-field-overlay-content">
-        e.leaving ? (
+        {entries.map((e) =>
-          <span
+          e.leaving ? (
-            key={`${idPrefix}-${e.id}`}
+            <span
-            className="modern-sk-field-char modern-sk-field-char--leaving"
+              key={`${idPrefix}-${e.id}`}
-            style={{ left: e.x, top: e.y }}
+              className="modern-sk-field-char modern-sk-field-char--leaving"
-            onAnimationEnd={() => onLeaveEnd(e.id)}
+              style={{ left: e.x, top: e.y }}
-          >
+              onAnimationEnd={() => onLeaveEnd(e.id)}
-            {e.char}
+            >
-          </span>
+              {masked ? PASSWORD_MASK_CHAR : e.char}
-        ) : (
+            </span>
-          <span
+          ) : (
-            key={`${idPrefix}-${e.id}`}
+            <span
-            ref={(node) => {
+              key={`${idPrefix}-${e.id}`}
-              if (node) spanRefs.current.set(e.id, node);
+              ref={(node) => {
-              else spanRefs.current.delete(e.id);
+                if (node) spanRefs.current.set(e.id, node);
-            }}
+                else spanRefs.current.delete(e.id);
-            className={cx('modern-sk-field-char', !multiline && 'modern-sk-field-char--composited')}
+              }}
-          >
+              className={cx('modern-sk-field-char', !multiline && 'modern-sk-field-char--composited')}
-            {e.char}
+            >
-          </span>
+              {masked ? PASSWORD_MASK_CHAR : e.char}
-        ),
+            </span>
-      )}
+          ),
+        )}
+      </div>
     </div>
   );
 
@@ -187,6 +193,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       ref,
       props.value,
       props.defaultValue,
+      props.type === 'password',
     );
     if (!animated) {
       return (

src/stories/TextField.stories.tsx

@@ -34,7 +34,9 @@ export const Playground: Story = {};
 export const Disabled: Story = { args: { disabled: true, value: 'Read only' } };
 
 export const Multiline: Story = {
-  render: () => <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />,
+  render: () => (
+    <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />
+  ),
 };
 
 export const Search: Story = {
@@ -46,3 +48,5 @@ export const Search: Story = {
     />
   ),
 };
+
+export const Password: Story = { args: { type: 'password', defaultValue: 'hi!' } };

src/styles/components.css

@@ -215,6 +215,7 @@ textarea.modern-sk-field {
 .modern-sk-search .ph {
   position: absolute;
   left: 11px;
+  z-index: 1;
   color: var(--fg-3);
   font-size: 16px;
   pointer-events: none;
@@ -255,13 +256,19 @@ textarea.modern-sk-field {
   color: var(--fg-1);
   white-space: pre;
   text-align: left;
-  will-change: transform;
 }
 .modern-sk-field-overlay--multiline {
   white-space: pre-wrap;
   overflow-wrap: break-word;
   line-height: 1.5;
 }
+/* Scroll-sync transform lives on this inner div, not the clipping parent above —
+   transforming the overflow:hidden box itself would drag its clip region along
+   with the content and let overflowing lines spill outside the field's border. */
+.modern-sk-field-overlay-content {
+  position: relative;
+  will-change: transform;
+}
 .modern-sk-search .modern-sk-field-overlay {
   padding-left: 34px;
 }