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,10 +149,10 @@ function useFieldAnimation(
 
   const overlay = (
     <div
-      ref={overlayRef}
       aria-hidden="true"
       className={cx('modern-sk-field-overlay', multiline && 'modern-sk-field-overlay--multiline')}
     >
+      <div ref={overlayRef} className="modern-sk-field-overlay-content">
         {entries.map((e) =>
           e.leaving ? (
             <span
@@ -156,7 +161,7 @@ function useFieldAnimation(
               style={{ left: e.x, top: e.y }}
               onAnimationEnd={() => onLeaveEnd(e.id)}
             >
-            {e.char}
+              {masked ? PASSWORD_MASK_CHAR : e.char}
             </span>
           ) : (
             <span
@@ -167,11 +172,12 @@ function useFieldAnimation(
               }}
               className={cx('modern-sk-field-char', !multiline && 'modern-sk-field-char--composited')}
             >
-            {e.char}
+              {masked ? PASSWORD_MASK_CHAR : e.char}
             </span>
           ),
         )}
       </div>
+    </div>
   );
 
   return { setRef, overlay, handleChange, syncScroll };
@@ -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;
 }