feat(#2955): update Text Input component for V2

[twjeffery]

Summary

Updates the Input (TextField) component to support V2 design system styling
while maintaining full backward compatibility with V1.

Changes

New Props

• version ("1" | "2", default "1"): Controls V1 vs V2 styling
• size ("default" | "compact", default "default"): Controls input
  height (56px vs 40px)

V2 Styling Updates

Focus State

• V2 focus shows only the blue focus border (no layered default border)
• Maintains V1 behavior with layered borders when version="1"

Size Variants

• Default: 56px height with updated padding (9px 16px 11px)
• Compact: 40px height with updated padding (4px 12px)
• Leading/trailing content automatically adjusts to match input size

State Styling

• Disabled: Updated text color using inputs/color/text/disabled token
  for input text and leading/trailing content
• Readonly: New readonly state with distinct background
  (inputs/color/background/readonly) and border
  (inputs/color/border/readonly)
• Placeholder: Updated to use inputs/color/text/placeholder token

Other Improvements

• Fixed disabled hover state (no longer shows hover border)
• Added autofill styling to match default input appearance
• Leading/trailing content now uses component typography tokens

Technical Implementation

Token Remapping Pattern

• Input-level remapping for compact sizing (height, padding, typography)
• Container-level remapping for leading/trailing content (sibling elements)
• Uses CSS custom property fallbacks for V1 compatibility

V2 CSS Scoping

• All V2-specific styles use .v2 class selector
• V1 behavior preserved exactly as-is

Testing

All changes tested in web components playground with:

• Default and compact sizes
• All input states (default, hover, focus, disabled, readonly, error)
• Leading/trailing content combinations
• Autofill behavior

Screenshots

Before

After

Related

• Parent issue: Design system 2.0 coded component update #2998
• Design tokens PR for Text input: feat(#2955): Text input component design tokens for v2 styling design-tokens#91
• V2 Figma component

[bdfranck]

Looking good! I have some questions and recommendations about the CSS. Let me know if you want to discuss anything.

[twjeffery]

Looking good! I have some questions and recommendations about the CSS. Let me know if you want to discuss anything.

Thanks @bdfranck, all changes made. I also noticed a couple small issues with the styling on the text and border of the trailing/leading content specifically on the disabled state, fixed that as well.

[bdfranck]

Looks good! Just one more small tweak.

[twjeffery]

Looks good! Just one more small tweak.

@bdfranck Updated!