@tinybigui/react 0.13.0 → 0.15.0

package/dist/index.js

@@ -2113,277 +2113,332 @@ var FAB = forwardRef(
   }
 );
 FAB.displayName = "FAB";
-var textFieldContainerVariants = cva(
+var textFieldRootVariants = cva(["relative inline-flex flex-col"], {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "w-auto"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+var textFieldFieldVariants = cva(
   [
-    // Base container styles
-    "relative inline-flex flex-col"
+    "relative flex items-center w-full min-h-14",
+    // Cursor — disabled via group-data
+    "group-data-[disabled]/text-field:cursor-not-allowed",
+    "group-data-[disabled]/text-field:pointer-events-none"
   ],
   {
     variants: {
-      fullWidth: {
-        true: "w-full",
-        false: "w-auto"
+      variant: {
+        filled: [
+          "rounded-t-xs bg-surface-container-highest",
+          // Disabled: background fades to on-surface/4
+          "group-data-[disabled]/text-field:bg-on-surface/4"
+        ],
+        outlined: ["rounded-xs bg-transparent"]
       }
     },
     defaultVariants: {
-      fullWidth: false
+      variant: "filled"
     }
   }
 );
-var textFieldWrapperVariants = cva(
+var textFieldStateLayerVariants = cva([
+  "absolute inset-0 rounded-t-xs pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition — no spatial overshoot on opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/text-field:opacity-8",
+  // Focus: 10% (focus wins over hover via cascade order — placed after)
+  "group-data-[focused]/text-field:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/text-field:hidden"
+]);
+var textFieldActiveIndicatorVariants = cva([
+  "absolute bottom-0 left-0 right-0 pointer-events-none",
+  // Spatial transition: height is a spatial property
+  "transition-[height,background-color]",
+  "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base
+  "h-px bg-on-surface-variant",
+  // Hover
+  "group-data-[hovered]/text-field:bg-on-surface",
+  // Focused — 2px + primary color (focused placed after hovered to win cascade)
+  "group-data-[focused]/text-field:h-0.5 group-data-[focused]/text-field:bg-primary",
+  // Invalid
+  "group-data-[invalid]/text-field:bg-error",
+  // Invalid + focused
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:bg-error",
+  // Disabled: hidden
+  "group-data-[disabled]/text-field:hidden"
+]);
+var textFieldOutlineVariants = cva([
+  "absolute inset-0 rounded-xs m-0 px-2 pointer-events-none",
+  "border border-outline",
+  // Effects transition for color; spatial for border-width
+  "transition-[border-color,border-width]",
+  "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover
+  "group-data-[hovered]/text-field:border-on-surface",
+  // Focused — 2px + primary color
+  "group-data-[focused]/text-field:border-2 group-data-[focused]/text-field:border-primary",
+  // Invalid
+  "group-data-[invalid]/text-field:border-error",
+  // Invalid + focused
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:border-2",
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:border-error",
+  // Disabled
+  "group-data-[disabled]/text-field:border-on-surface/12"
+]);
+var textFieldNotchVariants = cva([
+  "invisible whitespace-nowrap text-body-small px-1",
+  // 0 width when not floating (no gap)
+  "max-w-0 overflow-hidden",
+  // Full width when floating (gap opens)
+  "group-data-[float]/text-field:max-w-full",
+  // Spatial transition for max-width change
+  "transition-[max-width] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial"
+]);
+var textFieldLabelVariants = cva(
   [
-    // Base wrapper styles
-    "relative inline-flex items-center w-full",
-    "transition-all duration-200",
-    "rounded-t"
+    "absolute pointer-events-none origin-top-left select-none",
+    "text-body-large text-on-surface-variant",
+    // Spatial + effects both use standard fast — no overshoot on font/color
+    "transition-[transform,font-size,color,line-height]",
+    "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38",
+    // Invalid (placed after default, before focused so focused invalid wins)
+    "group-data-[invalid]/text-field:text-error",
+    // Focused (singly-chained wins by cascade order)
+    "group-data-[focused]/text-field:text-primary",
+    // Invalid + focused — doubly-chained, wins over single-chained focused
+    "group-data-[invalid]/text-field:group-data-[focused]/text-field:text-error"
   ],
   {
     variants: {
       variant: {
-        filled: ["bg-surface-container-highest", "border-b-2 border-on-surface-variant"],
-        outlined: ["bg-transparent", "border border-outline", "rounded-b"]
-      },
-      size: {
-        small: "min-h-10",
-        medium: "min-h-12",
-        large: "min-h-14"
-      },
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-38"],
-        false: ""
-      },
-      error: {
-        true: "",
-        false: ""
-      },
-      focused: {
-        true: "",
-        false: ""
+        /**
+         * Filled: label rests at center (top-1/2 -translate-y-1/2).
+         * When floating: moves up to top-2 (8dp) with body-small size.
+         */
+        filled: [
+          "top-1/2 -translate-y-1/2 left-4",
+          // Floated position — sits in the top 8dp zone
+          "group-data-[float]/text-field:top-2 group-data-[float]/text-field:-translate-y-0",
+          "group-data-[float]/text-field:text-body-small",
+          // Leading-icon offset
+          "group-data-[with-leading-icon]/text-field:left-[52px]"
+        ],
+        /**
+         * Outlined: label rests at center (top-1/2 -translate-y-1/2).
+         * When floating: moves up to sit on the top border (-translate-y-1/2 from top-0).
+         */
+        outlined: [
+          "top-1/2 -translate-y-1/2 left-3",
+          // bg-surface ensures label text punches through the border
+          "bg-surface px-1",
+          // Floated: sits on the top border
+          "group-data-[float]/text-field:top-0 group-data-[float]/text-field:-translate-y-1/2",
+          "group-data-[float]/text-field:text-body-small",
+          // Leading-icon offset
+          "group-data-[with-leading-icon]/text-field:left-[52px]"
+        ]
       }
     },
-    compoundVariants: [
-      // FILLED VARIANT - Focused state
-      {
-        variant: "filled",
-        focused: true,
-        error: false,
-        className: "border-primary"
-      },
-      // FILLED VARIANT - Error state
-      {
-        variant: "filled",
-        error: true,
-        className: "border-error"
-      },
-      // FILLED VARIANT - Hover state (handled via group-hover in parent)
-      {
-        variant: "filled",
-        disabled: false,
-        className: "hover:bg-on-surface/[0.08]"
-      },
-      // OUTLINED VARIANT - Focused state
-      {
-        variant: "outlined",
-        focused: true,
-        error: false,
-        className: "border-2 border-primary"
-      },
-      // OUTLINED VARIANT - Error state
-      {
-        variant: "outlined",
-        error: true,
-        className: "border-2 border-error"
-      },
-      // OUTLINED VARIANT - Hover state
-      {
-        variant: "outlined",
-        disabled: false,
-        className: "hover:border-on-surface"
-      }
-    ],
     defaultVariants: {
-      variant: "filled",
-      size: "medium",
-      disabled: false,
-      error: false,
-      focused: false
+      variant: "filled"
     }
   }
 );
 var textFieldInputVariants = cva(
   [
-    // Base input styles
-    "w-full bg-transparent outline-none",
-    "text-on-surface text-base",
-    "placeholder:text-on-surface-variant placeholder:opacity-60",
-    "transition-colors duration-200"
+    "relative z-10 w-full bg-transparent outline-none border-none",
+    "text-body-large text-on-surface",
+    "placeholder:text-on-surface-variant",
+    // Placeholder hidden unless field is floating (avoids overlap with label)
+    "placeholder:opacity-0",
+    "group-data-[float]/text-field:placeholder:opacity-100",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38",
+    "group-data-[disabled]/text-field:cursor-not-allowed",
+    // Readonly
+    "group-data-[readonly]/text-field:cursor-default",
+    // Effects transition for color
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       variant: {
-        filled: "px-4",
-        outlined: "px-4"
-      },
-      size: {
-        small: "h-10 py-2 text-sm",
-        medium: "h-12 py-3 text-base",
-        large: "h-14 py-4 text-lg"
-      },
-      disabled: {
-        true: "cursor-not-allowed",
-        false: ""
-      },
-      hasLeadingIcon: {
-        true: "pl-12",
-        false: ""
-      },
-      hasTrailingIcon: {
-        true: "pr-12",
-        false: ""
+        /**
+         * Filled: top padding creates room for floating label (label rests at 8dp).
+         * Horizontal padding: 16dp left / 16dp right — but yielded to prefix/suffix
+         * when they are present so the affix handles the edge spacing instead.
+         */
+        filled: [
+          "pt-6 pb-2 px-4",
+          // No label present: vertically center
+          "group-data-[no-label]/text-field:py-4",
+          // Leading icon horizontal offset
+          "group-data-[with-leading-icon]/text-field:pl-[52px]",
+          // Trailing icon horizontal offset
+          "group-data-[with-trailing-icon]/text-field:pr-[52px]",
+          // Prefix present: prefix handles left edge — remove input's left padding
+          "group-data-[with-prefix]/text-field:pl-0",
+          // Leading icon + prefix together: compound wins over both singles
+          "group-data-[with-leading-icon]/text-field:group-data-[with-prefix]/text-field:pl-0",
+          // Suffix present: suffix handles right edge — remove input's right padding
+          "group-data-[with-suffix]/text-field:pr-0",
+          // Trailing icon + suffix together: compound wins over both singles
+          "group-data-[with-trailing-icon]/text-field:group-data-[with-suffix]/text-field:pr-0"
+        ],
+        /**
+         * Outlined: label sits on the border, no extra top padding needed.
+         * Horizontal padding: 16dp — yielded to prefix/suffix when present.
+         */
+        outlined: [
+          "py-4 px-4",
+          // Leading icon horizontal offset
+          "group-data-[with-leading-icon]/text-field:pl-[52px]",
+          // Trailing icon horizontal offset
+          "group-data-[with-trailing-icon]/text-field:pr-[52px]",
+          // Prefix present: prefix handles left edge
+          "group-data-[with-prefix]/text-field:pl-0",
+          "group-data-[with-leading-icon]/text-field:group-data-[with-prefix]/text-field:pl-0",
+          // Suffix present: suffix handles right edge
+          "group-data-[with-suffix]/text-field:pr-0",
+          "group-data-[with-trailing-icon]/text-field:group-data-[with-suffix]/text-field:pr-0"
+        ]
       },
       multiline: {
-        true: "resize-y",
-        false: ""
+        true: "resize-y min-h-[1.5rem]",
+        false: "h-full"
       }
     },
     defaultVariants: {
       variant: "filled",
-      size: "medium",
-      disabled: false,
-      hasLeadingIcon: false,
-      hasTrailingIcon: false,
       multiline: false
     }
   }
 );
-var textFieldLabelVariants = cva(
+var textFieldIconVariants = cva(
   [
-    // Base label styles
-    "absolute left-4 transition-all duration-200 pointer-events-none",
-    "text-on-surface-variant origin-top-left"
+    "absolute z-10 flex items-center justify-center size-6 pointer-events-none",
+    "text-on-surface-variant",
+    // Effects transition
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38"
   ],
   {
     variants: {
-      variant: {
-        filled: "top-2.5",
-        outlined: "top-2.5 bg-surface px-1"
-      },
-      size: {
-        small: "text-sm",
-        medium: "text-base",
-        large: "text-lg"
-      },
-      floating: {
-        true: "-translate-y-5 scale-75",
-        false: "scale-100"
-      },
-      focused: {
-        true: "text-primary",
-        false: ""
-      },
-      error: {
-        true: "text-error",
-        false: ""
-      },
-      disabled: {
-        true: "text-on-surface/38",
-        false: ""
-      },
-      hasLeadingIcon: {
-        true: "left-12",
-        false: ""
+      position: {
+        leading: "left-3",
+        trailing: [
+          "right-3",
+          // Trailing → error color when invalid
+          "group-data-[invalid]/text-field:text-error"
+        ]
       }
     },
-    compoundVariants: [
-      // Outlined variant floating label positioning
-      {
-        variant: "outlined",
-        floating: true,
-        className: "top-2.5"
-      }
-    ],
     defaultVariants: {
-      variant: "filled",
-      size: "medium",
-      floating: false,
-      focused: false,
-      error: false,
-      disabled: false,
-      hasLeadingIcon: false
+      position: "leading"
     }
   }
 );
-var textFieldIconVariants = cva(
+var textFieldAffixVariants = cva(
   [
-    // Base icon styles
-    "absolute flex items-center justify-center",
-    "text-on-surface-variant transition-colors duration-200",
-    "pointer-events-none"
+    "relative z-10 text-body-large text-on-surface-variant select-none shrink-0",
+    "opacity-0 pointer-events-none",
+    // Visible once label is floated
+    "group-data-[float]/text-field:opacity-100 group-data-[float]/text-field:pointer-events-auto",
+    // Effects transition
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38"
   ],
   {
     variants: {
-      position: {
-        leading: "left-3",
-        trailing: "right-3"
-      },
-      size: {
-        small: "w-5 h-5",
-        medium: "w-6 h-6",
-        large: "w-7 h-7"
+      variant: {
+        /**
+         * Filled: mirror the input's pt-6 pb-2 so the text sits in the same
+         * vertical zone. When no label is present, the input uses py-4 — match
+         * that too so the affix stays centred with the input text.
+         */
+        filled: [
+          "pt-6 pb-2",
+          "group-data-[no-label]/text-field:pt-4 group-data-[no-label]/text-field:pb-4"
+        ],
+        /**
+         * Outlined: input uses py-4 and h-full; items-center on the content
+         * column already centres the naturally-sized affix at the same 28px
+         * midpoint as the input text. No extra vertical padding needed.
+         */
+        outlined: []
       },
-      disabled: {
-        true: "opacity-38",
-        false: ""
+      position: {
+        /**
+         * Prefix: sits before the input in the flex row.
+         * pl-4 aligns the left text edge to the 16dp field margin.
+         * With a leading icon that shifts to 52dp to clear the icon.
+         * pr-0.5 is a small gap between prefix text and the input cursor.
+         */
+        prefix: ["pl-4", "group-data-[with-leading-icon]/text-field:pl-[52px]", "pr-0.5"],
+        /**
+         * Suffix: sits after the input in the flex row.
+         * pl-0.5 is a small gap between the input text and the suffix.
+         * pr-4 keeps 16dp from the right field edge.
+         * With a trailing icon that shifts to 52dp to avoid overlap.
+         */
+        suffix: ["pl-0.5", "pr-4", "group-data-[with-trailing-icon]/text-field:pr-[52px]"]
       }
     },
     defaultVariants: {
-      position: "leading",
-      size: "medium",
-      disabled: false
+      variant: "filled",
+      position: "prefix"
     }
   }
 );
-var textFieldHelperTextVariants = cva(
+var textFieldSupportingRowVariants = cva([
+  "flex items-start justify-between w-full gap-4 px-4 pt-1"
+]);
+var textFieldSupportingTextVariants = cva(
   [
-    // Base helper text styles
-    "text-xs mt-1 px-4 transition-colors duration-200"
+    "text-body-small",
+    // Effects transition for color
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       type: {
         description: "text-on-surface-variant",
         error: "text-error"
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
       }
     },
     defaultVariants: {
-      type: "description",
-      disabled: false
+      type: "description"
     }
   }
 );
-var textFieldCharacterCountVariants = cva(
+var textFieldCounterVariants = cva(
   [
-    // Base character counter styles
-    "text-xs mt-1 px-4 text-right text-on-surface-variant transition-colors duration-200"
+    "text-body-small shrink-0 text-right",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       exceeded: {
         true: "text-error",
-        false: ""
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
+        false: "text-on-surface-variant"
       }
     },
     defaultVariants: {
-      exceeded: false,
-      disabled: false
+      exceeded: false
     }
   }
 );
@@ -2495,12 +2550,13 @@ TextFieldHeadless.displayName = "TextFieldHeadless";
 var TextField = forwardRef(
   ({
     variant = "filled",
-    size = "medium",
     label,
     description,
     errorMessage,
     leadingIcon,
     trailingIcon,
+    prefix,
+    suffix,
     characterCount = false,
     maxLength,
     fullWidth = false,
@@ -2520,6 +2576,7 @@ var TextField = forwardRef(
     ...props
   }, ref) => {
     const spellCheckProp = spellCheck === void 0 ? void 0 : typeof spellCheck === "string" ? spellCheck === "true" : spellCheck;
+    const { isHovered, hoverProps } = useHover({ isDisabled });
     const headlessProps = {
       ...label !== void 0 ? { label } : {},
       ...description !== void 0 ? { description } : {},
@@ -2546,149 +2603,131 @@ var TextField = forwardRef(
       errorMessageProps,
       isInvalid: fieldIsInvalid,
       isFocused,
+      isFocusVisible,
       currentValue,
       inputRef
     }) => {
       const hasValue = currentValue.length > 0;
-      const shouldFloatLabel = isFocused || hasValue;
+      const hasPlaceholder = !!props.placeholder;
+      const hasPrefix = !!prefix;
+      const hasSuffix = !!suffix;
+      const shouldFloat = isFocused || hasValue || hasPlaceholder || hasPrefix;
       const characterLength = currentValue.length;
       const isCharacterLimitExceeded = maxLength ? characterLength > maxLength : false;
-      return /* @__PURE__ */ jsxs("div", { className: cn(textFieldContainerVariants({ fullWidth }), className), children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              textFieldWrapperVariants({
-                variant,
-                size,
-                disabled: isDisabled,
-                error: fieldIsInvalid,
-                focused: isFocused
-              })
-            ),
-            children: [
+      const hasLeadingIcon = !!leadingIcon;
+      const hasTrailingIcon = !!trailingIcon;
+      const hasLabel = !!label;
+      const showDescription = !!description && !fieldIsInvalid;
+      const showError = fieldIsInvalid && !!errorMessage;
+      const showCounter = characterCount && maxLength !== void 0;
+      const showSupportingRow = showDescription || showError || showCounter;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(textFieldRootVariants({ fullWidth }), "group/text-field", className),
+          ...getInteractionDataAttributes({
+            isHovered,
+            isFocusVisible,
+            isDisabled,
+            isReadOnly,
+            isInvalid: fieldIsInvalid
+          }),
+          "data-focused": isFocused ? "" : void 0,
+          "data-float": shouldFloat ? "" : void 0,
+          "data-with-leading-icon": hasLeadingIcon ? "" : void 0,
+          "data-with-trailing-icon": hasTrailingIcon ? "" : void 0,
+          "data-with-prefix": hasPrefix ? "" : void 0,
+          "data-with-suffix": hasSuffix ? "" : void 0,
+          "data-no-label": !hasLabel ? "" : void 0,
+          "data-multiline": multiline ? "" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("div", { ...hoverProps, className: cn(textFieldFieldVariants({ variant })), children: [
+              variant === "filled" && /* @__PURE__ */ jsx("span", { className: cn(textFieldStateLayerVariants()), "aria-hidden": "true" }),
               leadingIcon && /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: textFieldIconVariants({
-                    position: "leading",
-                    size,
-                    disabled: isDisabled
-                  }),
+                  className: cn(textFieldIconVariants({ position: "leading" })),
+                  "aria-hidden": "true",
                   children: leadingIcon
                 }
               ),
-              label && /* @__PURE__ */ jsxs(
-                "label",
+              /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [
+                label && /* @__PURE__ */ jsxs("label", { ...labelProps, className: cn(textFieldLabelVariants({ variant })), children: [
+                  label,
+                  isRequired && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2009*" })
+                ] }),
+                prefix && /* @__PURE__ */ jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "prefix" })), children: prefix }),
+                multiline ? /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: true })),
+                    rows,
+                    spellCheck: spellCheckProp
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: false })),
+                    spellCheck: spellCheckProp
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "suffix" })), children: suffix })
+              ] }),
+              trailingIcon && /* @__PURE__ */ jsx(
+                "span",
                 {
-                  ...labelProps,
-                  className: cn(
-                    textFieldLabelVariants({
-                      variant,
-                      size,
-                      floating: shouldFloatLabel,
-                      focused: isFocused,
-                      error: fieldIsInvalid,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon
-                    })
-                  ),
-                  children: [
-                    label,
-                    isRequired && " *"
-                  ]
+                  className: cn(textFieldIconVariants({ position: "trailing" })),
+                  "aria-hidden": "true",
+                  children: trailingIcon
                 }
               ),
-              multiline ? /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ...inputProps,
-                  ref: inputRef,
-                  className: cn(
-                    textFieldInputVariants({
-                      variant,
-                      size,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon,
-                      hasTrailingIcon: !!trailingIcon,
-                      multiline: true
-                    }),
-                    label && "placeholder:opacity-0"
-                  ),
-                  rows,
-                  spellCheck: spellCheckProp
-                }
-              ) : /* @__PURE__ */ jsx(
-                "input",
+              variant === "filled" && /* @__PURE__ */ jsx("span", { className: cn(textFieldActiveIndicatorVariants()), "aria-hidden": "true" }),
+              variant === "outlined" && /* @__PURE__ */ jsx("fieldset", { "aria-hidden": "true", className: cn(textFieldOutlineVariants()), children: /* @__PURE__ */ jsx("legend", { className: cn(textFieldNotchVariants()), children: label && /* @__PURE__ */ jsxs("span", { children: [
+                label,
+                isRequired && "\u2009*"
+              ] }) }) })
+            ] }),
+            showSupportingRow && /* @__PURE__ */ jsxs("div", { className: cn(textFieldSupportingRowVariants()), children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                showDescription && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...descriptionProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "description" })),
+                    children: description
+                  }
+                ),
+                showError && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...errorMessageProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "error" })),
+                    children: errorMessage
+                  }
+                )
+              ] }),
+              showCounter && /* @__PURE__ */ jsxs(
+                "span",
                 {
-                  ...inputProps,
-                  ref: inputRef,
                   className: cn(
-                    textFieldInputVariants({
-                      variant,
-                      size,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon,
-                      hasTrailingIcon: !!trailingIcon,
-                      multiline: false
-                    }),
-                    label && "placeholder:opacity-0"
-                    // Hide placeholder when there's a value to prevent overlap with floating label
+                    textFieldCounterVariants({ exceeded: isCharacterLimitExceeded })
                   ),
-                  spellCheck: spellCheckProp
-                }
-              ),
-              trailingIcon && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: textFieldIconVariants({
-                    position: "trailing",
-                    size,
-                    disabled: isDisabled
-                  }),
-                  children: trailingIcon
+                  "aria-live": "polite",
+                  children: [
+                    characterLength,
+                    "\u2009/\u2009",
+                    maxLength
+                  ]
                 }
               )
-            ]
-          }
-        ),
-        description && !fieldIsInvalid && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...descriptionProps,
-            className: textFieldHelperTextVariants({
-              type: "description",
-              disabled: isDisabled
-            }),
-            children: description
-          }
-        ),
-        fieldIsInvalid && errorMessage && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...errorMessageProps,
-            className: textFieldHelperTextVariants({
-              type: "error",
-              disabled: isDisabled
-            }),
-            children: errorMessage
-          }
-        ),
-        characterCount && maxLength && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: textFieldCharacterCountVariants({
-              exceeded: isCharacterLimitExceeded,
-              disabled: isDisabled
-            }),
-            children: [
-              characterLength,
-              " / ",
-              maxLength
-            ]
-          }
-        )
-      ] });
+            ] })
+          ]
+        }
+      );
     } });
   }
 );
@@ -7944,37 +7983,150 @@ InteractiveListItem.displayName = "InteractiveListItem";
 var listVariants = cva("w-full bg-surface");
 var listItemVariants = cva(
   [
-    "group relative flex items-center overflow-hidden px-4 py-2 cursor-pointer",
-    "transition-[background-color] duration-short4 ease-standard"
+    // Layout
+    "relative flex items-center overflow-hidden px-4 py-2 select-none",
+    // Color transition — effects spring (no spatial overshoot on color)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Cursor: non-interactive base; data-[interactive] overrides
+    "cursor-default",
+    "data-[interactive]:cursor-pointer",
+    // Selected: secondary-container background
+    "group-data-[selected]/list-item:bg-secondary-container",
+    // Disabled: self-targeting selectors (not group, since root is the group)
+    "data-[disabled]:opacity-38 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
+      /**
+       * Visual density — derived from content, not a user prop.
+       * one-line:   headline only (56dp)
+       * two-line:   headline + supportingText (72dp)
+       * three-line: overline + headline + supportingText (88dp)
+       */
       density: {
         "one-line": "min-h-14",
         "two-line": "min-h-18",
         "three-line": "min-h-22 items-start"
-      },
-      isSelected: {
-        true: "bg-secondary-container text-on-secondary-container",
-        false: ""
-      },
-      isDisabled: {
-        true: "opacity-38 pointer-events-none",
-        false: ""
-      },
-      isInteractive: {
-        true: "",
-        false: "cursor-default"
       }
     },
     defaultVariants: {
-      density: "one-line",
-      isSelected: false,
-      isDisabled: false,
-      isInteractive: true
+      density: "one-line"
     }
   }
 );
+var listItemStateLayerVariants = cva([
+  "absolute inset-0 pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition for opacity — no spatial overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/list-item:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/list-item:opacity-10",
+  // Pressed: 10%, doubled selector beats hover
+  "group-data-[pressed]/list-item:group-data-[pressed]/list-item:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/list-item:hidden"
+]);
+var listItemFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/list-item:opacity-100"
+]);
+var listItemLeadingVariants = cva(
+  [
+    "mr-4 flex shrink-0 items-center",
+    // Effects transition for icon color changes
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      type: {
+        icon: [
+          "size-6",
+          "text-on-surface-variant",
+          // Selected: icon color changes to on-secondary-container
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          // Disabled: 38% (inherited from root opacity-38, but also explicit for color accuracy)
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        avatar: [
+          "size-10 overflow-hidden rounded-full"
+          // Avatar color provided by content; no token overrides needed
+        ],
+        checkbox: [],
+        radio: []
+      }
+    },
+    defaultVariants: {
+      type: "icon"
+    }
+  }
+);
+var listItemTrailingVariants = cva(
+  [
+    "ml-auto flex shrink-0 items-center",
+    // Effects transition for color changes
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      type: {
+        icon: [
+          "size-6",
+          "text-on-surface-variant",
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        text: [
+          "text-label-small",
+          "text-on-surface-variant",
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        checkbox: [],
+        radio: []
+      }
+    },
+    defaultVariants: {
+      type: "icon"
+    }
+  }
+);
+var listItemOverlineVariants = cva([
+  "text-label-small",
+  "text-on-surface-variant",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: opacity inherited from root; explicit for color
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
+var listItemHeadlineVariants = cva([
+  "text-body-large",
+  "text-on-surface",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: 38% color via CSS (opacity-38 on root handles all descendants, but
+  // explicit token ensures predictable rendering when color is specified).
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
+var listItemSupportingTextVariants = cva([
+  "text-body-medium",
+  "text-on-surface-variant",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: 38% color
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
 function interleaveWithDividers(children) {
   const items = Children.toArray(children);
   return items.reduce((acc, child, index) => {
@@ -7999,51 +8151,25 @@ var List = forwardRef(function List2({ className, showDividers = false, children
   return /* @__PURE__ */ jsx(ListHeadless, { ref, className: cn(listVariants(), className), ...props, children: renderedChildren });
 });
 List.displayName = "List";
-var typeClasses = {
-  icon: "size-6 text-on-surface-variant",
-  avatar: "size-10 overflow-hidden rounded-full",
-  checkbox: "",
-  radio: ""
-};
 var ListItemLeading = forwardRef(
   function ListItemLeading2({ type, children, className }, ref) {
     const isControl = type === "checkbox" || type === "radio";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("mr-4 flex shrink-0 items-center", typeClasses[type], className),
-        children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(listItemLeadingVariants({ type }), className), children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children });
   }
 );
 ListItemLeading.displayName = "ListItemLeading";
-var typeClasses2 = {
-  icon: "size-6 text-on-surface-variant",
-  text: "text-on-surface-variant text-label-small",
-  checkbox: "",
-  radio: ""
-};
 var ListItemTrailing = forwardRef(
   function ListItemTrailing2({ type, children, className }, ref) {
     const isControl = type === "checkbox" || type === "radio";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("ml-auto flex shrink-0 items-center", typeClasses2[type], className),
-        children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(listItemTrailingVariants({ type }), className), children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children });
   }
 );
 ListItemTrailing.displayName = "ListItemTrailing";
 var ListItemText = forwardRef(function ListItemText2({ headline, supportingText, overline, className }, ref) {
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("min-w-0 flex-1", className), children: [
-    overline && /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-label-small", children: overline }),
-    /* @__PURE__ */ jsx("p", { className: "text-on-surface text-body-large", children: headline }),
-    supportingText && /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-body-medium", children: supportingText })
+    overline && /* @__PURE__ */ jsx("p", { className: cn(listItemOverlineVariants()), children: overline }),
+    /* @__PURE__ */ jsx("p", { className: cn(listItemHeadlineVariants()), children: headline }),
+    supportingText && /* @__PURE__ */ jsx("p", { className: cn(listItemSupportingTextVariants()), children: supportingText })
   ] });
 });
 ListItemText.displayName = "ListItemText";
@@ -8087,44 +8213,72 @@ var ListItem = forwardRef(function ListItem2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    "li",
+  return /* @__PURE__ */ jsx(
+    StaticStyledListItem,
     {
       ref: forwardedRef,
-      role: "listitem",
-      className: cn(
-        listItemVariants({
-          density,
-          isSelected: false,
-          isDisabled,
-          isInteractive: false
-        }),
-        className
-      ),
-      children: [
-        leadingSlot && /* @__PURE__ */ jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
-        /* @__PURE__ */ jsx(
-          ListItemText,
-          {
-            headline,
-            ...supportingText !== void 0 ? { supportingText } : {},
-            ...overline !== void 0 ? { overline } : {}
-          }
-        ),
-        trailingSlot && /* @__PURE__ */ jsx(ListItemTrailing, { type: trailingType ?? "icon", children: trailingSlot }),
-        insetDivider && /* @__PURE__ */ jsx(
-          Divider,
-          {
-            orientation: "horizontal",
-            inset: "start",
-            className: "absolute right-0 bottom-0 left-0"
-          }
-        )
-      ]
+      value,
+      headline,
+      ...supportingText !== void 0 ? { supportingText } : {},
+      ...overline !== void 0 ? { overline } : {},
+      ...leadingSlot !== void 0 ? { leadingSlot } : {},
+      ...leadingType !== void 0 ? { leadingType } : {},
+      ...trailingSlot !== void 0 ? { trailingSlot } : {},
+      ...trailingType !== void 0 ? { trailingType } : {},
+      density,
+      isDisabled,
+      insetDivider,
+      ...className !== void 0 ? { className } : {}
     }
   );
 });
 ListItem.displayName = "ListItem";
+var StaticStyledListItem = forwardRef(
+  function StaticStyledListItem2({
+    headline,
+    supportingText,
+    overline,
+    leadingSlot,
+    leadingType,
+    trailingSlot,
+    trailingType,
+    density,
+    isDisabled,
+    insetDivider,
+    className
+  }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        role: "listitem",
+        className: cn(listItemVariants({ density }), "group/list-item", className),
+        ...getInteractionDataAttributes({ isDisabled }),
+        children: [
+          leadingSlot && /* @__PURE__ */ jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              headline,
+              ...supportingText !== void 0 ? { supportingText } : {},
+              ...overline !== void 0 ? { overline } : {}
+            }
+          ),
+          trailingSlot && /* @__PURE__ */ jsx(ListItemTrailing, { type: trailingType ?? "icon", children: trailingSlot }),
+          insetDivider && /* @__PURE__ */ jsx(
+            Divider,
+            {
+              orientation: "horizontal",
+              inset: "start",
+              className: "absolute right-0 bottom-0 left-0"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StaticStyledListItem.displayName = "StaticStyledListItem";
 var InteractiveStyledListItem = forwardRef(
   function InteractiveStyledListItem2({
     value,
@@ -8142,36 +8296,36 @@ var InteractiveStyledListItem = forwardRef(
   }, forwardedRef) {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
-    const { optionProps, isSelected, isDisabled } = useOption({ key: value }, state, ref);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const mergedProps = mergeProps(optionProps, { onMouseDown: handleRipple });
+    const { optionProps, isSelected, isDisabled, isPressed, isFocusVisible } = useOption(
+      { key: value },
+      state,
+      ref
+    );
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const mergedProps = mergeProps(optionProps, hoverProps, { onMouseDown: handleRipple });
+    const hasLeading = !!leadingSlot;
+    const hasTrailing = !!trailingSlot;
     return /* @__PURE__ */ jsxs(
       "li",
       {
         ...mergedProps,
         ref,
-        className: cn(
-          listItemVariants({
-            density,
-            isSelected,
-            isDisabled,
-            isInteractive: true
-          }),
-          className
-        ),
-        "data-selected": isSelected || void 0,
-        "data-disabled": isDisabled || void 0,
+        className: cn(listItemVariants({ density }), "group/list-item", className),
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled
+        }),
+        "data-interactive": "",
+        "data-with-leading": hasLeading ? "" : void 0,
+        "data-with-trailing": hasTrailing ? "" : void 0,
         children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "bg-on-surface duration-short2 ease-standard pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-8 group-active:opacity-12"
-            }
-          ),
           ripples,
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(listItemStateLayerVariants()) }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(listItemFocusRingVariants()) }),
           leadingSlot && /* @__PURE__ */ jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
           /* @__PURE__ */ jsx(
             ListItemText,