@tinybigui/react 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -8616,6 +8616,30 @@ var InteractiveStyledListItem = React.forwardRef(
   }
 );
 InteractiveStyledListItem.displayName = "InteractiveStyledListItem";
+var ArrowBackIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+  }
+);
+var CloseIcon3 = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+  }
+);
 var SearchBarHeadless = React.forwardRef(
   ({
     value,
@@ -8631,7 +8655,9 @@ var SearchBarHeadless = React.forwardRef(
     "aria-label": ariaLabel,
     className,
     onFocus,
-    onBlur
+    onBlur,
+    inputClassName,
+    trailingActionsClassName
   }, forwardedRef) => {
     const inputRef = React.useRef(null);
     const internalFormRef = React.useRef(null);
@@ -8665,8 +8691,17 @@ var SearchBarHeadless = React.forwardRef(
     );
     return /* @__PURE__ */ jsxRuntime.jsxs("form", { ref: formRef, role: "search", className, onSubmit: handleFormSubmit, children: [
       leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "leading-icon", children: leadingIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-action", children: action }, index)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...inputProps,
+          ref: inputRef,
+          role: "searchbox",
+          "data-slot": "input",
+          className: inputClassName
+        }
+      ),
+      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions }),
       avatar && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "avatar", children: avatar })
     ] });
   }
@@ -8686,32 +8721,45 @@ var SearchViewHeadless = React.forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout = "fullscreen",
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     if (!isOpen) {
       return null;
     }
-    return reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SearchViewPanel,
-        {
-          ref: forwardedRef,
-          onClose,
-          ariaLabel,
-          ...className !== void 0 ? { className } : {},
-          ...leadingIcon !== void 0 ? { leadingIcon } : {},
-          ...trailingActions !== void 0 ? { trailingActions } : {},
-          ...showDivider !== void 0 ? { showDivider } : {},
-          ...value !== void 0 ? { value } : {},
-          ...defaultValue !== void 0 ? { defaultValue } : {},
-          ...onChange !== void 0 ? { onChange } : {},
-          ...onSubmit !== void 0 ? { onSubmit } : {},
-          ...placeholder !== void 0 ? { placeholder } : {},
-          children
-        }
-      ),
-      document.body
-    );
+    const panelProps = {
+      onClose,
+      ariaLabel,
+      layout,
+      children,
+      ...className !== void 0 ? { className } : {},
+      ...leadingIcon !== void 0 ? { leadingIcon } : {},
+      ...trailingActions !== void 0 ? { trailingActions } : {},
+      ...showDivider !== void 0 ? { showDivider } : {},
+      ...value !== void 0 ? { value } : {},
+      ...defaultValue !== void 0 ? { defaultValue } : {},
+      ...onChange !== void 0 ? { onChange } : {},
+      ...onSubmit !== void 0 ? { onSubmit } : {},
+      ...placeholder !== void 0 ? { placeholder } : {},
+      headerClassName,
+      backButtonClassName,
+      clearButtonClassName,
+      inputClassName,
+      trailingActionsClassName,
+      dividerClassName,
+      contentClassName
+    };
+    if (layout === "docked") {
+      return /* @__PURE__ */ jsxRuntime.jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps });
+    }
+    return reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps }), document.body);
   }
 );
 SearchViewHeadless.displayName = "SearchViewHeadless";
@@ -8728,12 +8776,21 @@ var SearchViewPanel = React.forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout,
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     const panelRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const ref = forwardedRef ?? panelRef;
-    reactAria.usePreventScroll();
+    const isFullscreen = layout === "fullscreen";
+    reactAria.usePreventScroll({ isDisabled: !isFullscreen });
     const { overlayProps } = reactAria.useOverlay(
       {
         isOpen: true,
@@ -8766,7 +8823,17 @@ var SearchViewPanel = React.forwardRef(
     const handleBackClick = React.useCallback(() => {
       onClose();
     }, [onClose]);
-    const defaultBackArrow = /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Back", onClick: handleBackClick, "data-slot": "back-button", children: "\u2190" });
+    const defaultBackButton = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Back",
+        onClick: handleBackClick,
+        "data-slot": "back-button",
+        className: backButtonClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowBackIcon, {})
+      }
+    );
     const clearButton = state.value ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -8775,66 +8842,109 @@ var SearchViewPanel = React.forwardRef(
         type: "button",
         "aria-label": "Clear search",
         "data-slot": "clear-button",
-        children: "\u2715"
+        className: clearButtonClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon3, {})
       }
     ) : null;
-    return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "leading-icon", children: leadingIcon ?? defaultBackArrow }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-        clearButton,
-        trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-action", children: action }, index)) })
-      ] }),
-      showDivider && /* @__PURE__ */ jsxRuntime.jsx("hr", { "data-slot": "divider" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "content", "aria-live": "polite", children })
-    ] }) });
+    return (
+      // Focus containment only for fullscreen — docked uses restoreFocus + autoFocus only
+      // so tabbing can naturally leave the widget.
+      /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: isFullscreen, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "header", className: headerClassName, children: [
+          leadingIcon ?? defaultBackButton,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...inputProps,
+              ref: inputRef,
+              role: "searchbox",
+              "data-slot": "input",
+              className: inputClassName
+            }
+          ),
+          clearButton,
+          trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions })
+        ] }),
+        showDivider && /* @__PURE__ */ jsxRuntime.jsx("hr", { "data-slot": "divider", className: dividerClassName }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "content", "aria-live": "polite", className: contentClassName, children })
+      ] }) })
+    );
   }
 );
 SearchViewPanel.displayName = "SearchViewPanel";
-var searchBarVariants = classVarianceAuthority.cva(
+var searchBarRootVariants = classVarianceAuthority.cva(
   [
-    "relative flex items-center h-14 rounded-full bg-surface-container-high",
-    "shadow-elevation-3 w-full text-body-large cursor-text"
+    "relative flex items-center h-14 rounded-full",
+    "bg-surface-container-high shadow-elevation-3",
+    "w-full text-body-large cursor-text",
+    // Disabled — self-targeting; pointer-events lets ripple/hover stop cleanly
+    "data-[disabled]:opacity-38 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
+      /**
+       * Visual style of the search bar.
+       * - contained: M3 Expressive — fills container, expressive motion, adjustable spacing
+       * - divided: Baseline — 16dp fixed spacing, no expressive motion
+       */
       style: {
-        contained: "",
+        /**
+         * Contained (Expressive): spacing governed by data-[with-actions] content flag.
+         *   With actions:    px-1 gap-1 (4dp each)
+         *   Without actions: px-4      (16dp each)
+         */
+        contained: [
+          "px-4",
+          // default: no-actions 16dp
+          "data-[with-actions]:px-1 data-[with-actions]:gap-1"
+          // with-actions: 4dp
+        ],
+        /**
+         * Divided (Baseline): fixed 16dp side padding, 16dp icon-label gap.
+         */
         divided: "px-4 gap-4"
-      },
-      noActions: {
-        true: "",
-        false: ""
-      },
-      focused: {
-        true: "",
-        false: ""
-      },
-      disabled: {
-        true: "opacity-38 pointer-events-none",
-        false: ""
       }
     },
-    compoundVariants: [
-      {
-        style: "contained",
-        noActions: false,
-        class: "px-1 gap-1"
-      },
-      {
-        style: "contained",
-        noActions: true,
-        class: "px-4"
-      }
-    ],
-    defaultVariants: {
-      style: "contained",
-      noActions: false,
-      focused: false,
-      disabled: false
-    }
+    defaultVariants: { style: "contained" }
   }
 );
+var searchBarStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition — no overshoot on opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/search:opacity-8",
+  // Pressed: 10%, doubled selector wins over hover at equal cascade position
+  "group-data-[pressed]/search:group-data-[pressed]/search:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/search:hidden"
+]);
+var searchBarFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-[3px] outline-offset-0 outline-secondary",
+  // Effects transition
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/search:opacity-100"
+]);
+var searchBarLeadingIconVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface"
+]);
+var searchBarTrailingActionVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchBarAvatarVariants = classVarianceAuthority.cva(["flex size-12 shrink-0 items-center justify-center"]);
+var searchBarTrailingActionsVariants = classVarianceAuthority.cva(["flex items-center"]);
+var searchBarInputVariants = classVarianceAuthority.cva([
+  "flex-1 min-w-0 bg-transparent outline-none",
+  "text-body-large text-on-surface",
+  "placeholder:text-on-surface-variant",
+  "focus-visible:outline-none",
+  // Hide native browser search affordances — our MD3 clear button handles clearing
+  "[&::-webkit-search-cancel-button]:appearance-none",
+  "[&::-webkit-search-decoration]:appearance-none"
+]);
 var searchViewVariants = classVarianceAuthority.cva(["flex flex-col shadow-elevation-3 z-50 overflow-hidden"], {
   variants: {
     style: {
@@ -8847,31 +8957,32 @@ var searchViewVariants = classVarianceAuthority.cva(["flex flex-col shadow-eleva
     }
   },
   compoundVariants: [
+    // Contained + fullscreen: surface-container-low, square corners
     {
       style: "contained",
       layout: "fullscreen",
       class: "bg-surface-container-low rounded-none"
     },
+    // Contained + docked: surface-container-high, 12dp results rounding, 2dp gap
     {
       style: "contained",
       layout: "docked",
       class: "bg-surface-container-high rounded-xl gap-0.5"
     },
+    // Divided + fullscreen: surface-container-high, square corners
     {
       style: "divided",
       layout: "fullscreen",
       class: "bg-surface-container-high rounded-none"
     },
+    // Divided + docked: surface-container-high, extra-large rounding (28dp)
     {
       style: "divided",
       layout: "docked",
       class: "bg-surface-container-high rounded-[28px]"
     }
   ],
-  defaultVariants: {
-    style: "contained",
-    layout: "fullscreen"
-  }
+  defaultVariants: { style: "contained", layout: "fullscreen" }
 });
 var searchViewHeaderVariants = classVarianceAuthority.cva(
   ["flex items-center w-full bg-surface-container-high gap-1"],
@@ -8882,14 +8993,50 @@ var searchViewHeaderVariants = classVarianceAuthority.cva(
         divided: "h-[72px] px-4"
       },
       layout: {
+        // Docked overrides height to 56dp regardless of style
         docked: "h-14",
         fullscreen: ""
       }
     },
-    defaultVariants: {
-      style: "contained",
-      layout: "fullscreen"
-    }
+    defaultVariants: { style: "contained", layout: "fullscreen" }
+  }
+);
+var searchViewBackButtonVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center",
+  "text-on-surface rounded-full",
+  "cursor-pointer"
+]);
+var searchViewClearButtonVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center",
+  "text-on-surface-variant rounded-full",
+  "cursor-pointer",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+]);
+var searchViewTrailingActionVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchViewTrailingActionsVariants = classVarianceAuthority.cva(["flex items-center"]);
+var searchViewInputVariants = classVarianceAuthority.cva([
+  "flex-1 min-w-0 bg-transparent outline-none",
+  "text-body-large text-on-surface",
+  "placeholder:text-on-surface-variant",
+  "focus-visible:outline-none",
+  // Hide native browser search affordances
+  "[&::-webkit-search-cancel-button]:appearance-none",
+  "[&::-webkit-search-decoration]:appearance-none"
+]);
+var searchViewDividerVariants = classVarianceAuthority.cva(["border-t border-outline w-full"]);
+var searchViewContentVariants = classVarianceAuthority.cva(["flex-1 overflow-y-auto"]);
+var DefaultSearchIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })
   }
 );
 var SearchBar = React.forwardRef(
@@ -8910,7 +9057,7 @@ var SearchBar = React.forwardRef(
     onFocus,
     onBlur
   }, ref) => {
-    const hasNoActions = (!trailingActions || trailingActions.length === 0) && !avatar;
+    const hasActions = trailingActions != null && trailingActions.length > 0 || !!avatar;
     const reducedMotion = useReducedMotion();
     const [isFocused, setIsFocused] = React.useState(false);
     const handleFocusInternal = React.useCallback(() => {
@@ -8921,83 +9068,85 @@ var SearchBar = React.forwardRef(
       setIsFocused(false);
       onBlur?.();
     }, [onBlur]);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const styledLeadingIcon = leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-6", children: leadingIcon }) }) : void 0;
-    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "text-on-surface-variant flex size-12 shrink-0 items-center justify-center",
-        children: action
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = reactAria.useFocusRing({ within: true });
+    const [isPressed, setIsPressed] = React.useState(false);
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        setIsPressed(true);
+        handleRipple(e);
       },
-      index
-    ));
-    const styledAvatar = avatar ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[30px] overflow-hidden rounded-full", children: avatar }) }) : void 0;
+      [handleRipple]
+    );
+    const handleMouseUp = React.useCallback(() => setIsPressed(false), []);
+    const styledLeadingIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarLeadingIconVariants()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-6", children: leadingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultSearchIcon, {}) }) });
+    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarTrailingActionVariants()), children: action }, index));
+    const styledAvatar = avatar ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarAvatarVariants()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[30px] overflow-hidden rounded-full", children: avatar }) }) : void 0;
+    const paneMarginClass = searchStyle === "contained" ? isFocused ? "mx-3" : "mx-6" : "";
+    const paneTransitionClass = searchStyle === "contained" && !reducedMotion ? "transition-[margin] duration-expressive-fast-spatial ease-expressive-fast-spatial" : "";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(
-          reducedMotion ? "" : "duration-short4 ease-standard transition-[margin]",
-          isFocused ? "mx-3" : "mx-6"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            role: "presentation",
-            className: cn(
-              "group relative overflow-hidden rounded-full",
-              "has-[:focus-visible]:ring-secondary has-[:focus-visible]:ring-3",
-              searchBarVariants({
-                style: searchStyle,
-                noActions: hasNoActions,
-                disabled: isDisabled
+        role: "presentation",
+        ...reactAria.mergeProps(hoverProps, focusProps),
+        className: cn(paneTransitionClass, paneMarginClass),
+        onMouseUp: handleMouseUp,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "presentation", className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarFocusRingVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "presentation",
+              ...getInteractionDataAttributes({
+                isHovered,
+                isFocusVisible,
+                isPressed,
+                isDisabled
               }),
-              className
-            ),
-            onMouseDown: handleRipple,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    "bg-on-surface pointer-events-none absolute inset-0 rounded-full opacity-0",
-                    "group-hover:opacity-8 group-active:opacity-10",
-                    "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SearchBarHeadless,
-                {
-                  ref,
-                  ...value !== void 0 ? { value } : {},
-                  ...defaultValue !== void 0 ? { defaultValue } : {},
-                  ...onChange !== void 0 ? { onChange } : {},
-                  ...onSubmit !== void 0 ? { onSubmit } : {},
-                  ...onClear !== void 0 ? { onClear } : {},
-                  ...placeholder !== void 0 ? { placeholder } : {},
-                  ...styledLeadingIcon !== void 0 ? { leadingIcon: styledLeadingIcon } : {},
-                  ...styledTrailingActions !== void 0 ? { trailingActions: styledTrailingActions } : {},
-                  ...styledAvatar !== void 0 ? { avatar: styledAvatar } : {},
-                  ...isDisabled !== void 0 ? { isDisabled } : {},
-                  ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
-                  onFocus: handleFocusInternal,
-                  onBlur: handleBlurInternal,
-                  className: cn(
-                    "relative z-0 flex h-full w-full items-center",
-                    "[&_input]:flex-1 [&_input]:bg-transparent [&_input]:outline-none",
-                    "[&_input]:text-body-large [&_input]:text-on-surface",
-                    "[&_input]:placeholder:text-on-surface-variant",
-                    "[&_input]:focus-visible:outline-none"
-                  )
-                }
+              "data-with-actions": hasActions ? "" : void 0,
+              className: cn(
+                "group/search overflow-hidden",
+                searchBarRootVariants({ style: searchStyle }),
+                className
               ),
-              ripples
-            ]
-          }
-        )
+              onMouseDown: (e) => handleMouseDown(e),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-slot": "state-layer",
+                    className: cn(searchBarStateLayerVariants()),
+                    "aria-hidden": "true"
+                  }
+                ),
+                ripples,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SearchBarHeadless,
+                  {
+                    ref,
+                    ...value !== void 0 ? { value } : {},
+                    ...defaultValue !== void 0 ? { defaultValue } : {},
+                    ...onChange !== void 0 ? { onChange } : {},
+                    ...onSubmit !== void 0 ? { onSubmit } : {},
+                    ...onClear !== void 0 ? { onClear } : {},
+                    ...placeholder !== void 0 ? { placeholder } : {},
+                    leadingIcon: styledLeadingIcon,
+                    ...styledTrailingActions !== void 0 ? { trailingActions: styledTrailingActions } : {},
+                    ...styledAvatar !== void 0 ? { avatar: styledAvatar } : {},
+                    isDisabled,
+                    ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+                    onFocus: handleFocusInternal,
+                    onBlur: handleBlurInternal,
+                    className: "relative z-0 flex h-full w-full items-center",
+                    inputClassName: cn(searchBarInputVariants()),
+                    trailingActionsClassName: cn(searchBarTrailingActionsVariants())
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     );
   }
@@ -9022,21 +9171,29 @@ var SearchView = React.forwardRef(
     showDivider
   }, ref) => {
     const resolvedShowDivider = showDivider ?? searchStyle === "divided";
+    const enterMotionClass = layout === "docked" ? "animate-md-scale-in" : "animate-md-fade-in";
+    const containerClass = cn(
+      searchViewVariants({ style: searchStyle, layout }),
+      enterMotionClass,
+      className
+    );
+    const headerClass = cn(searchViewHeaderVariants({ style: searchStyle, layout }));
+    const backButtonClass = cn(searchViewBackButtonVariants());
+    const clearButtonClass = cn(searchViewClearButtonVariants());
+    const trailingActionClass = cn(searchViewTrailingActionVariants());
+    const trailingActionsGroupClass = cn(searchViewTrailingActionsVariants());
+    const inputClass = cn(searchViewInputVariants());
+    const dividerClass = cn(searchViewDividerVariants());
+    const contentClass = cn(searchViewContentVariants());
     const styledLeadingIcon = leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface flex size-12 shrink-0 items-center justify-center", children: leadingIcon }) : void 0;
-    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "text-on-surface-variant flex size-12 shrink-0 items-center justify-center",
-        children: action
-      },
-      index
-    ));
+    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: trailingActionClass, children: action }, index));
     return /* @__PURE__ */ jsxRuntime.jsx(
       SearchViewHeadless,
       {
         ref,
         isOpen,
         onClose,
+        layout,
         ...value !== void 0 ? { value } : {},
         ...defaultValue !== void 0 ? { defaultValue } : {},
         ...onChange !== void 0 ? { onChange } : {},
@@ -9046,53 +9203,20 @@ var SearchView = React.forwardRef(
         ...styledLeadingIcon !== void 0 ? { leadingIcon: styledLeadingIcon } : {},
         ...styledTrailingActions !== void 0 ? { trailingActions: styledTrailingActions } : {},
         showDivider: resolvedShowDivider,
-        className: cn(
-          searchViewVariants({ style: searchStyle, layout }),
-          "animate-md-scale-in",
-          getHeaderClasses(searchStyle, layout),
-          slotClasses,
-          className
-        ),
+        className: containerClass,
+        headerClassName: headerClass,
+        backButtonClassName: backButtonClass,
+        clearButtonClassName: clearButtonClass,
+        inputClassName: inputClass,
+        trailingActionsClassName: trailingActionsGroupClass,
+        dividerClassName: dividerClass,
+        contentClassName: contentClass,
         children
       }
     );
   }
 );
 SearchView.displayName = "SearchView";
-var slotClasses = cn(
-  // Input styling
-  "[&_input]:flex-1 [&_input]:bg-transparent [&_input]:outline-none",
-  "[&_input]:text-body-large [&_input]:text-on-surface",
-  "[&_input]:placeholder:text-on-surface-variant",
-  // Divider
-  "[&>[data-slot=divider]]:border-outline",
-  // Content area
-  "[&>[data-slot=content]]:flex-1 [&>[data-slot=content]]:overflow-y-auto",
-  // Clear button
-  "[&_[data-slot=clear-button]]:size-12 [&_[data-slot=clear-button]]:flex",
-  "[&_[data-slot=clear-button]]:items-center [&_[data-slot=clear-button]]:justify-center",
-  "[&_[data-slot=clear-button]]:text-on-surface-variant",
-  "[&_[data-slot=clear-button]]:transition-opacity [&_[data-slot=clear-button]]:duration-short4",
-  "[&_[data-slot=clear-button]]:ease-standard",
-  // Back button
-  "[&_[data-slot=back-button]]:size-12 [&_[data-slot=back-button]]:flex",
-  "[&_[data-slot=back-button]]:items-center [&_[data-slot=back-button]]:justify-center",
-  "[&_[data-slot=back-button]]:text-on-surface"
-);
-function getHeaderClasses(style, layout) {
-  const base = "[&>[data-slot=header]]:flex [&>[data-slot=header]]:items-center [&>[data-slot=header]]:w-full [&>[data-slot=header]]:bg-surface-container-high [&>[data-slot=header]]:gap-1";
-  if (layout === "docked") {
-    return cn(
-      base,
-      "[&>[data-slot=header]]:h-14",
-      style === "contained" ? "[&>[data-slot=header]]:px-3" : "[&>[data-slot=header]]:px-4"
-    );
-  }
-  if (style === "contained") {
-    return cn(base, "[&>[data-slot=header]]:h-14 [&>[data-slot=header]]:px-3");
-  }
-  return cn(base, "[&>[data-slot=header]]:h-[72px] [&>[data-slot=header]]:px-4");
-}
 var Search = React.forwardRef(
   ({
     isOpen: controlledIsOpen,
@@ -10290,9 +10414,12 @@ function SliderThumbInternal({
   state,
   trackRef,
   isDisabled,
+  orientation,
   formatValue: formatValue2,
   className,
   "data-direction": dataDirection,
+  renderContent,
+  onDraggingChange,
   ...ariaProps
 }) {
   const inputRef = React.useRef(null);
@@ -10307,33 +10434,70 @@ function SliderThumbInternal({
     state
   );
   const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
+  React.useEffect(() => {
+    onDraggingChange?.(isDragging);
+  }, [isDragging, onDraggingChange]);
   const currentValue = state.getThumbValue(index);
   const ariaValueText = formatValue2 ? formatValue2(currentValue) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const thumbPercent = state.getThumbPercent(index);
+  const positionStyle = orientation === "horizontal" ? {
+    position: "absolute",
+    left: `${thumbPercent * 100}%`,
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: 10
+  } : {
+    position: "absolute",
+    bottom: `${thumbPercent * 100}%`,
+    left: "50%",
+    transform: "translate(-50%, 50%)",
+    zIndex: 10
+  };
+  const renderState = {
+    index,
+    value: currentValue,
+    isDragging,
+    isFocusVisible,
+    isHovered,
+    isDisabled
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ...thumbProps,
+      ...reactAria.mergeProps(thumbProps, hoverProps, { style: positionStyle }),
+      "data-slot": "slider-thumb",
       "data-dragging": isDragging || void 0,
       "data-focused": isFocused || void 0,
-      "data-focus-visible": isFocusVisible || void 0,
-      "data-disabled": isDisabled || void 0,
       ...dataDirection !== void 0 ? { "data-direction": dataDirection } : {},
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed: isDragging,
+        isDisabled
+      }),
       className: cn(
+        // Group scope: interaction selectors on children target this element
+        "group/slider-thumb",
+        // Accessibility: remove default outline (custom focus ring via data-[focus-visible])
         "outline-none",
-        // Focus ring visible only on keyboard focus — matches project pattern (md3-design.mdc §Accessibility)
+        // Focus ring visible only on keyboard focus — matches project pattern
         "data-[focus-visible]:ring-3",
         "data-[focus-visible]:ring-secondary",
         "data-[focus-visible]:ring-offset-2",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref: inputRef,
-          ...reactAria.mergeProps(inputProps, focusProps),
-          ...ariaValueText !== void 0 ? { "aria-valuetext": ariaValueText } : {}
-        }
-      ) })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            ...reactAria.mergeProps(inputProps, focusProps),
+            ...ariaValueText !== void 0 ? { "aria-valuetext": ariaValueText } : {}
+          }
+        ) }),
+        renderContent?.(renderState)
+      ]
     }
   );
 }
@@ -10356,6 +10520,9 @@ var SliderHeadless = React.forwardRef(
       className,
       style,
       children,
+      trackClassName,
+      renderThumbContent,
+      onThumbDraggingChange,
       ...ariaProps
     } = props;
     const trackRef = React.useRef(null);
@@ -10417,7 +10584,18 @@ var SliderHeadless = React.forwardRef(
         "data-variant": variant,
         ...zeroPercent !== void 0 ? { "data-zero-percent": zeroPercent } : {},
         children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx("label", { ...labelProps, children: label }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("label", { ...labelProps, className: cn(orientation === "vertical" && "sr-only"), children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "output",
+            {
+              ...outputProps,
+              className: cn(
+                orientation === "horizontal" && "justify-self-end",
+                orientation === "vertical" && "sr-only"
+              ),
+              children: isRange ? formatValue2 ? `${formatValue2(state.getThumbValue(0))} \u2013 ${formatValue2(state.getThumbValue(1))}` : `${state.getThumbValueLabel(0)} \u2013 ${state.getThumbValueLabel(1)}` : formatValue2 ? formatValue2(state.getThumbValue(0)) : state.getThumbValueLabel(0)
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -10426,6 +10604,10 @@ var SliderHeadless = React.forwardRef(
               "data-orientation": orientation,
               "data-track": true,
               ...zeroPercent !== void 0 ? { "data-zero-percent": zeroPercent } : {},
+              className: cn(
+                trackClassName ?? "relative w-full",
+                orientation === "vertical" && !trackClassName && "h-full"
+              ),
               children: [
                 children,
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -10435,9 +10617,12 @@ var SliderHeadless = React.forwardRef(
                     state,
                     trackRef,
                     isDisabled,
+                    orientation,
                     ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {},
                     ...thumb0Label !== void 0 ? { "aria-label": thumb0Label } : {},
-                    ...direction !== void 0 ? { "data-direction": direction } : {}
+                    ...direction !== void 0 ? { "data-direction": direction } : {},
+                    ...renderThumbContent !== void 0 ? { renderContent: renderThumbContent } : {},
+                    ...onThumbDraggingChange !== void 0 ? { onDraggingChange: (d) => onThumbDraggingChange(0, d) } : {}
                   }
                 ),
                 isRange && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10447,144 +10632,174 @@ var SliderHeadless = React.forwardRef(
                     state,
                     trackRef,
                     isDisabled,
+                    orientation,
                     ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {},
-                    "aria-label": thumbLabels?.[1] ?? "Maximum"
+                    "aria-label": thumbLabels?.[1] ?? "Maximum",
+                    ...renderThumbContent !== void 0 ? { renderContent: renderThumbContent } : {},
+                    ...onThumbDraggingChange !== void 0 ? { onDraggingChange: (d) => onThumbDraggingChange(1, d) } : {}
                   }
                 )
               ]
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("output", { ...outputProps, children: isRange ? formatValue2 ? `${formatValue2(state.getThumbValue(0))} \u2013 ${formatValue2(state.getThumbValue(1))}` : `${state.getThumbValueLabel(0)} \u2013 ${state.getThumbValueLabel(1)}` : formatValue2 ? formatValue2(state.getThumbValue(0)) : state.getThumbValueLabel(0) })
+          )
         ]
       }
     );
   }
 );
 SliderHeadless.displayName = "SliderHeadless";
-var sliderContainerVariants = classVarianceAuthority.cva(
+var sliderContainerVariants = classVarianceAuthority.cva(["group/slider", "relative", "select-none"], {
+  variants: {
+    orientation: {
+      // Grid: 1fr for label, auto for output value; gap-x for label↔output spacing
+      horizontal: "grid grid-cols-[1fr_auto] items-center gap-x-2 w-full",
+      // Flex column: label → track → output stacked; width = handle height (per size)
+      vertical: "flex flex-col items-center h-full"
+    },
+    size: {
+      // Vertical orientation: container width = handle height (dimensions transposed)
+      // Applied only for vertical via compoundVariants below
+      // NOTE: measurement-derived values from MD3 spec §4.2; permitted exception
+      xsmall: "",
+      small: "",
+      medium: "",
+      large: "",
+      xlarge: ""
+    }
+  },
+  compoundVariants: [
+    // Vertical: container WIDTH = handle height (MD3 §10.9 — dimensions transposed)
+    // NOTE: measurement-derived values from MD3 spec §4.2; permitted exception
+    { orientation: "vertical", size: "xsmall", class: "w-[44px]" },
+    { orientation: "vertical", size: "small", class: "w-[44px]" },
+    { orientation: "vertical", size: "medium", class: "w-[52px]" },
+    { orientation: "vertical", size: "large", class: "w-[68px]" },
+    { orientation: "vertical", size: "xlarge", class: "w-[108px]" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "xsmall"
+  }
+});
+var sliderTrackRegionVariants = classVarianceAuthority.cva(["relative", "touch-none"], {
+  variants: {
+    orientation: {
+      horizontal: "col-span-2 w-full",
+      // flex-1 fills the vertical container reliably; h-full collapses when the
+      // container itself is a flex item without an explicit pixel height (CSS spec).
+      // min-h-0 allows the flex child to shrink below its natural size if needed.
+      vertical: "flex-1 min-h-0"
+    },
+    size: {
+      // Horizontal: size controls track region HEIGHT (= handle height)
+      // Vertical: size controls track region WIDTH (= handle height, dimensions transposed)
+      // Applied as compound variants below to avoid cross-orientation conflicts
+      xsmall: "",
+      small: "",
+      medium: "",
+      large: "",
+      xlarge: ""
+    }
+  },
+  compoundVariants: [
+    // Horizontal: height = handle height per MD3 §4.2
+    { orientation: "horizontal", size: "xsmall", class: "h-[44px]" },
+    { orientation: "horizontal", size: "small", class: "h-[44px]" },
+    { orientation: "horizontal", size: "medium", class: "h-[52px]" },
+    { orientation: "horizontal", size: "large", class: "h-[68px]" },
+    { orientation: "horizontal", size: "xlarge", class: "h-[108px]" },
+    // Vertical: width = handle height (transposed per MD3 §10.9)
+    { orientation: "vertical", size: "xsmall", class: "w-[44px]" },
+    { orientation: "vertical", size: "small", class: "w-[44px]" },
+    { orientation: "vertical", size: "medium", class: "w-[52px]" },
+    { orientation: "vertical", size: "large", class: "w-[68px]" },
+    { orientation: "vertical", size: "xlarge", class: "w-[108px]" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "xsmall"
+  }
+});
+var sliderTrackLayoutVariants = classVarianceAuthority.cva(["absolute", "inset-0", "pointer-events-none"]);
+var sliderActiveTrackVariants = classVarianceAuthority.cva(
   [
-    "relative",
-    "flex",
-    "items-center",
-    "w-full",
-    "touch-none",
-    // NOTE: measurement-derived value from MD3 spec; permitted exception — prevents browser scroll on drag
-    "select-none"
+    // Color
+    "bg-primary",
+    // Disabled — driven by root group/slider data-disabled attr
+    "group-data-[disabled]/slider:bg-on-surface",
+    "group-data-[disabled]/slider:opacity-38",
+    // Layout — absolute fill within the track region
+    "absolute",
+    "overflow-hidden"
   ],
   {
     variants: {
       size: {
-        // NOTE: measurement-derived values from MD3 spec §4.2; permitted exception
-        xsmall: "h-[44px]",
-        small: "h-[44px]",
-        medium: "h-[52px]",
-        large: "h-[68px]",
-        xlarge: "h-[108px]"
+        // Horizontal: left (start) = outer corner, right (near handle) = 2dp inner
+        // NOTE: measurement-derived values from MD3 spec §4.2, §6; permitted exception
+        xsmall: "h-[16px] rounded-l-[16px] rounded-r-[2px]",
+        small: "h-[16px] rounded-l-[16px] rounded-r-[2px]",
+        medium: "h-[40px] rounded-l-[12px] rounded-r-[2px]",
+        large: "h-[56px] rounded-l-[16px] rounded-r-[2px]",
+        xlarge: "h-[96px] rounded-l-[28px] rounded-r-[2px]"
       },
       orientation: {
-        // Horizontal: w-full already in base; flex-row is default flex direction
-        horizontal: "",
-        // Vertical: transposed — container height fills parent, width = handle height (per size)
-        // flex-col stacks label → track → output vertically
-        // NOTE: h-full requires a parent with defined height; w-[...] set via compound variants
-        vertical: "h-full flex-col"
-      },
-      disabled: {
-        true: "cursor-not-allowed pointer-events-none",
-        false: "cursor-pointer"
+        // Horizontal: center vertically within track region
+        horizontal: "top-1/2 -translate-y-1/2",
+        // Vertical: center horizontally; length controlled by inline top/height styles
+        vertical: "left-1/2 -translate-x-1/2"
       }
     },
     compoundVariants: [
-      // Vertical: container WIDTH = handle height (MD3 §10.9 — dimensions transposed)
-      // Overrides w-full from base via tailwind-merge in cn()
-      // NOTE: measurement-derived values from MD3 spec §4.2; permitted exception
-      { orientation: "vertical", size: "xsmall", className: "w-[44px]" },
-      { orientation: "vertical", size: "small", className: "w-[44px]" },
-      { orientation: "vertical", size: "medium", className: "w-[52px]" },
-      { orientation: "vertical", size: "large", className: "w-[68px]" },
-      { orientation: "vertical", size: "xlarge", className: "w-[108px]" }
-    ],
-    defaultVariants: {
-      size: "xsmall",
-      orientation: "horizontal",
-      disabled: false
-    }
-  }
-);
-var sliderActiveTrackVariants = classVarianceAuthority.cva(
-  ["bg-primary", "flex-shrink-0", "overflow-hidden", "relative"],
-  {
-    variants: {
-      size: {
-        // NOTE: measurement-derived values from MD3 spec §4.2, §6 Corner tokens; permitted exception
-        // Corner classes are in compound variants to avoid conflicts with vertical orientation corners
-        xsmall: "h-[16px] rounded-l-[16px] rounded-r-[2px]",
-        // corner.large outer (16dp), 2dp inner
-        small: "h-[16px] rounded-l-[16px] rounded-r-[2px]",
-        medium: "h-[40px] rounded-l-[12px] rounded-r-[2px]",
-        // corner.medium outer (12dp), 2dp inner
-        large: "h-[56px] rounded-l-[16px] rounded-r-[2px]",
-        // corner.large outer (16dp), 2dp inner
-        xlarge: "h-[96px] rounded-l-[28px] rounded-r-[2px]"
-        // corner.extra-large outer (28dp), 2dp inner
-      },
-      orientation: {
-        horizontal: "",
-        // Vertical: track thickness is now width; flex-basis (inline style) controls height.
-        // h-[...] from size variant is overridden by flex-basis in a flex-col container.
-        // Individual corner classes (rounded-tl/tr/bl/br) override the horizontal rounded-l/r
-        // via tailwind-merge conflict resolution in cn().
-        vertical: ""
-      },
-      disabled: {
-        true: "bg-on-surface opacity-38",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Vertical: width = track thickness, corners transposed (bottom = outer, top = inner near handle)
-      // Using individual corner utilities so tailwind-merge correctly resolves conflicts with
-      // the horizontal rounded-l/rounded-r classes from size variants.
-      // NOTE: measurement-derived values from MD3 spec §4.2, §6 Corner tokens; permitted exception
+      // Vertical: width = track thickness; bottom = outer corner, top = 2dp inner (near handle)
+      // NOTE: measurement-derived values from MD3 spec §4.2, §6; permitted exception
       {
         orientation: "vertical",
         size: "xsmall",
-        className: "w-[16px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[16px] rounded-br-[16px]"
+        class: "w-[16px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[16px] rounded-br-[16px]"
       },
       {
         orientation: "vertical",
         size: "small",
-        className: "w-[16px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[16px] rounded-br-[16px]"
+        class: "w-[16px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[16px] rounded-br-[16px]"
       },
       {
         orientation: "vertical",
         size: "medium",
-        className: "w-[40px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[12px] rounded-br-[12px]"
+        class: "w-[40px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[12px] rounded-br-[12px]"
       },
       {
         orientation: "vertical",
         size: "large",
-        className: "w-[56px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[16px] rounded-br-[16px]"
+        class: "w-[56px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[16px] rounded-br-[16px]"
       },
       {
         orientation: "vertical",
         size: "xlarge",
-        className: "w-[96px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[28px] rounded-br-[28px]"
+        class: "w-[96px] rounded-tl-[2px] rounded-tr-[2px] rounded-bl-[28px] rounded-br-[28px]"
       }
     ],
     defaultVariants: {
       size: "xsmall",
-      orientation: "horizontal",
-      disabled: false
+      orientation: "horizontal"
     }
   }
 );
 var sliderInactiveTrackVariants = classVarianceAuthority.cva(
-  ["bg-secondary-container", "flex-1", "overflow-hidden", "relative"],
+  [
+    // Color
+    "bg-secondary-container",
+    // Disabled — driven by root group/slider data-disabled attr
+    "group-data-[disabled]/slider:bg-on-surface/10",
+    // Layout — absolute fill within the track region
+    "absolute",
+    "overflow-hidden"
+  ],
   {
     variants: {
       size: {
-        // NOTE: measurement-derived values from MD3 spec §4.2, §6 Corner tokens; permitted exception
+        // Horizontal: left (near handle) = 2dp inner, right (end) = outer corner
+        // NOTE: measurement-derived values from MD3 spec §4.2, §6; permitted exception
         xsmall: "h-[16px] rounded-l-[2px] rounded-r-[16px]",
         small: "h-[16px] rounded-l-[2px] rounded-r-[16px]",
         medium: "h-[40px] rounded-l-[2px] rounded-r-[12px]",
@@ -10592,68 +10807,65 @@ var sliderInactiveTrackVariants = classVarianceAuthority.cva(
         xlarge: "h-[96px] rounded-l-[2px] rounded-r-[28px]"
       },
       orientation: {
-        horizontal: "",
-        // Vertical: track thickness is width; flex-1 controls height growth.
-        // Individual corner classes override horizontal rounded-l/r via tailwind-merge.
-        vertical: ""
-      },
-      disabled: {
-        true: "bg-on-surface/10",
-        // MD3 §8.2: 10% opacity via background alpha
-        false: ""
+        // Horizontal: center vertically within track region
+        horizontal: "top-1/2 -translate-y-1/2",
+        // Vertical: center horizontally; length controlled by inline top/height styles
+        vertical: "left-1/2 -translate-x-1/2"
       }
     },
     compoundVariants: [
-      // Vertical: width = track thickness, corners transposed (top = outer, bottom = inner near handle)
-      // NOTE: measurement-derived values from MD3 spec §4.2, §6 Corner tokens; permitted exception
+      // Vertical: width = track thickness; top = outer corner, bottom = 2dp inner (near handle)
+      // NOTE: measurement-derived values from MD3 spec §4.2, §6; permitted exception
       {
         orientation: "vertical",
         size: "xsmall",
-        className: "w-[16px] rounded-tl-[16px] rounded-tr-[16px] rounded-bl-[2px] rounded-br-[2px]"
+        class: "w-[16px] rounded-tl-[16px] rounded-tr-[16px] rounded-bl-[2px] rounded-br-[2px]"
       },
       {
         orientation: "vertical",
         size: "small",
-        className: "w-[16px] rounded-tl-[16px] rounded-tr-[16px] rounded-bl-[2px] rounded-br-[2px]"
+        class: "w-[16px] rounded-tl-[16px] rounded-tr-[16px] rounded-bl-[2px] rounded-br-[2px]"
       },
       {
         orientation: "vertical",
         size: "medium",
-        className: "w-[40px] rounded-tl-[12px] rounded-tr-[12px] rounded-bl-[2px] rounded-br-[2px]"
+        class: "w-[40px] rounded-tl-[12px] rounded-tr-[12px] rounded-bl-[2px] rounded-br-[2px]"
       },
       {
         orientation: "vertical",
         size: "large",
-        className: "w-[56px] rounded-tl-[16px] rounded-tr-[16px] rounded-bl-[2px] rounded-br-[2px]"
+        class: "w-[56px] rounded-tl-[16px] rounded-tr-[16px] rounded-bl-[2px] rounded-br-[2px]"
       },
       {
         orientation: "vertical",
         size: "xlarge",
-        className: "w-[96px] rounded-tl-[28px] rounded-tr-[28px] rounded-bl-[2px] rounded-br-[2px]"
+        class: "w-[96px] rounded-tl-[28px] rounded-tr-[28px] rounded-bl-[2px] rounded-br-[2px]"
       }
     ],
     defaultVariants: {
       size: "xsmall",
-      orientation: "horizontal",
-      disabled: false
+      orientation: "horizontal"
     }
   }
 );
 var sliderHandleVariants = classVarianceAuthority.cva(
   [
+    // Color
     "bg-primary",
+    // Disabled — driven by thumb group/slider-thumb data-disabled attr
+    "group-data-[disabled]/slider-thumb:bg-on-surface",
+    "group-data-[disabled]/slider-thumb:opacity-38",
+    // Pressed width (MD3: 4dp → 2dp on press, spatial spring)
+    "group-data-[pressed]/slider-thumb:w-[2px]",
+    // Shape
     "rounded-[2px]",
-    // NOTE: measurement-derived value from MD3 spec §10.3 (2dp handle border-radius); permitted exception
+    // Layout
     "flex-shrink-0",
-    "relative",
-    "z-10",
-    "outline-none"
-    // Motion classes applied conditionally in Slider.tsx via useReducedMotion guard
+    "pointer-events-none"
   ],
   {
     variants: {
       size: {
-        // NOTE: measurement-derived values from MD3 spec §4.2, §10.3; permitted exception
         xsmall: "w-[4px] h-[44px]",
         small: "w-[4px] h-[44px]",
         medium: "w-[4px] h-[52px]",
@@ -10662,79 +10874,99 @@ var sliderHandleVariants = classVarianceAuthority.cva(
       },
       orientation: {
         horizontal: "",
-        // Vertical: dimensions transposed. h-[4px] overrides size-variant h-[...] via tailwind-merge;
-        // w-full overrides size-variant w-[4px] via tailwind-merge (both in cn() call at styled layer).
-        // NOTE: measurement-derived value from MD3 spec §10.3 (4dp handle width); permitted exception
-        vertical: "h-[4px] w-full"
-      },
-      pressed: {
-        true: "w-[2px]",
-        // NOTE: measurement-derived value from MD3 spec §10.3 (2dp pressed width); permitted exception
-        false: ""
-      },
-      disabled: {
-        true: "bg-on-surface opacity-38",
-        false: ""
+        // Vertical: handle is a thin horizontal bar. h-[4px] overrides the base
+        // h-[44px..108px]. Width is explicitly set per size below so the RA thumb
+        // (which is shrink-to-fit) assumes the correct measured width — this also
+        // fixes the hit-area (w-full) and state-layer (inset-0) widths.
+        vertical: "h-[4px]"
       }
     },
+    compoundVariants: [
+      // Vertical: override to height-based narrowing on press
+      {
+        orientation: "vertical",
+        class: "group-data-[pressed]/slider-thumb:h-[2px]"
+      },
+      // Vertical per-size widths (transposed handle length = track region width per MD3 §10.9)
+      // NOTE: measurement-derived values from MD3 spec §4.2; permitted exception
+      { orientation: "vertical", size: "xsmall", class: "w-[44px]" },
+      { orientation: "vertical", size: "small", class: "w-[44px]" },
+      { orientation: "vertical", size: "medium", class: "w-[52px]" },
+      { orientation: "vertical", size: "large", class: "w-[68px]" },
+      { orientation: "vertical", size: "xlarge", class: "w-[108px]" }
+    ],
     defaultVariants: {
       size: "xsmall",
-      orientation: "horizontal",
-      pressed: false,
-      disabled: false
-    }
-  }
-);
-var sliderHandleStateLayerVariants = classVarianceAuthority.cva(
-  [
-    "absolute",
-    "inset-0",
-    "rounded-[4px]",
-    // NOTE: measurement-derived value from MD3 spec §10.3 (4dp state layer border-radius); permitted exception
-    "bg-on-primary",
-    "pointer-events-none"
-    // Motion classes applied conditionally in Slider.tsx via useReducedMotion guard
-  ],
-  {
-    variants: {
-      state: {
-        enabled: "opacity-0",
-        hovered: "opacity-8",
-        // MD3 §8.3: 8% hover
-        pressed: "opacity-10",
-        // MD3 §8.3: 10% pressed
-        focused: "opacity-10",
-        // MD3 §8.3: 10% focus
-        disabled: "opacity-0"
-      }
-    },
-    defaultVariants: {
-      state: "enabled"
+      orientation: "horizontal"
     }
   }
 );
-var sliderTrackLayoutVariants = classVarianceAuthority.cva(
-  [
-    "relative",
-    "flex",
-    "items-center",
-    "gap-[6px]"
-    // NOTE: measurement-derived value from MD3 spec §2, §6 (thumbTrackGapSize: 6dp); permitted exception
-  ],
-  {
-    variants: {
-      orientation: {
-        // Horizontal: full width, left-to-right fill
-        horizontal: "flex-row w-full",
-        // Vertical: full height, bottom-to-top fill (flex-col-reverse places active track at bottom)
-        vertical: "flex-col-reverse h-full"
-      }
+var sliderHandleStateLayerVariants = classVarianceAuthority.cva([
+  // Color
+  "bg-primary",
+  // Positioning — covers the handle
+  "absolute",
+  "inset-0",
+  "rounded-[2px]",
+  // Interaction: hidden by default
+  "opacity-0",
+  "pointer-events-none",
+  // State opacities — driven by group/slider-thumb data attrs
+  "group-data-[hovered]/slider-thumb:opacity-8",
+  "group-data-[focus-visible]/slider-thumb:opacity-10",
+  "group-data-[pressed]/slider-thumb:opacity-10",
+  // Disabled: hide state layer (no interaction feedback)
+  "group-data-[disabled]/slider-thumb:hidden",
+  // Motion: effects spring (opacity transition only)
+  "transition-opacity",
+  "duration-spring-standard-fast-effects",
+  "ease-spring-standard-fast-effects"
+]);
+var sliderValueIndicatorVariants = classVarianceAuthority.cva([
+  // Positioning: float above handle center
+  "absolute",
+  "left-1/2",
+  "-translate-x-1/2",
+  "bottom-[calc(100%+4px)]",
+  // Shape & color
+  "bg-inverse-surface",
+  "rounded-full",
+  "px-[12px]",
+  "py-[6px]",
+  "min-w-[48px]",
+  "text-center",
+  // Hidden by default; revealed when thumb group has data-pressed
+  "opacity-0",
+  "scale-0",
+  "group-data-[pressed]/slider-thumb:opacity-100",
+  "group-data-[pressed]/slider-thumb:scale-100",
+  // Prevent interaction (value display only)
+  "pointer-events-none",
+  // Z-index above track overlays
+  "z-10",
+  // In Tailwind v4, scale-* maps to the CSS `scale` property (not `transform`),
+  // so we must list `scale` here — not `transform` — to animate the reveal.
+  "will-change-[scale,opacity]"
+]);
+var sliderStopDotVariants = classVarianceAuthority.cva(["rounded-full", "flex-shrink-0", "pointer-events-none"], {
+  variants: {
+    region: {
+      active: "bg-on-primary",
+      inactive: "bg-on-secondary-container"
     },
-    defaultVariants: {
-      orientation: "horizontal"
+    size: {
+      xsmall: "w-[4px] h-[4px]",
+      small: "w-[4px] h-[4px]",
+      medium: "w-[6px] h-[6px]",
+      large: "w-[6px] h-[6px]",
+      xlarge: "w-[8px] h-[8px]"
     }
+  },
+  defaultVariants: {
+    region: "inactive",
+    size: "xsmall"
   }
-);
+});
 var sliderStopsContainerVariants = classVarianceAuthority.cva([
   "absolute",
   "inset-0",
@@ -10742,58 +10974,22 @@ var sliderStopsContainerVariants = classVarianceAuthority.cva([
   "items-center",
   "justify-between",
   "px-[4px]",
-  // NOTE: measurement-derived value from MD3 spec §10.5 (stopPadding: 4dp); permitted exception
   "pointer-events-none",
-  "z-0"
+  "z-10"
 ]);
-var sliderStopDotVariants = classVarianceAuthority.cva(
-  [
-    "rounded-full",
-    "flex-shrink-0",
-    "w-[4px]",
-    // NOTE: measurement-derived value from MD3 spec §10.5 (stopIndicatorSize: 4dp); permitted exception
-    "h-[4px]"
-  ],
-  {
-    variants: {
-      /**
-       * Whether this dot is positioned on the active track portion.
-       * Determines the dot color per MD3 spec §5.2.
-       */
-      onActiveTrack: {
-        true: "bg-on-primary",
-        // Light dots on primary background
-        false: "bg-on-secondary-container"
-        // Dark dots on secondary-container background
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      onActiveTrack: false,
-      disabled: false
-    }
-  }
-);
 var sliderTrackStopVariants = classVarianceAuthority.cva(
   [
     "absolute",
-    "top-1/2",
-    "-translate-y-1/2",
-    "w-[4px]",
-    // NOTE: measurement-derived value from MD3 spec §10.6 (trackStopDiameter: 4dp); permitted exception
-    "h-[4px]",
     "rounded-full",
     "bg-on-secondary-container",
-    "pointer-events-none"
+    "pointer-events-none",
+    "w-[4px]",
+    "h-[4px]"
   ],
   {
     variants: {
       position: {
         start: "left-[4px]",
-        // NOTE: measurement-derived (trackStopOffset: 4dp); permitted exception
         end: "right-[4px]"
       }
     },
@@ -10802,64 +10998,23 @@ var sliderTrackStopVariants = classVarianceAuthority.cva(
     }
   }
 );
-var sliderValueIndicatorVariants = classVarianceAuthority.cva(
-  [
-    "absolute",
-    "left-1/2",
-    "-translate-x-1/2",
-    "bottom-[calc(100%+4px)]",
-    // NOTE: measurement-derived (4dp gap above handle); permitted exception
-    "bg-inverse-surface",
-    "rounded-full",
-    // pill shape (1000dp radius)
-    "px-[16px]",
-    // NOTE: measurement-derived (valueIndicatorPaddingH: 16dp); permitted exception
-    "py-[12px]",
-    // NOTE: measurement-derived (valueIndicatorPaddingV: 12dp); permitted exception
-    "min-w-[48px]",
-    // NOTE: measurement-derived (valueIndicatorWidth: 48dp); permitted exception
-    "flex",
-    "items-center",
-    "justify-center",
-    "pointer-events-none",
-    "z-20"
-    // Motion classes (transition-[transform,opacity] with directional easing) applied
-    // conditionally in SliderValueIndicator.tsx via useReducedMotion guard.
-  ],
-  {
-    variants: {
-      visible: {
-        true: "opacity-100 scale-100",
-        false: "opacity-0 scale-0"
-      }
-    },
-    defaultVariants: {
-      visible: false
-    }
-  }
-);
 var sliderValueIndicatorTextVariants = classVarianceAuthority.cva([
   "text-inverse-on-surface",
   "text-label-large",
-  // MD3 Label Large typescale token
-  "whitespace-nowrap",
-  "text-center"
+  "select-none",
+  "whitespace-nowrap"
 ]);
 var sliderInsetIconVariants = classVarianceAuthority.cva(
   ["absolute", "text-on-primary", "pointer-events-none", "flex", "items-center", "justify-center"],
   {
     variants: {
       size: {
-        // NOTE: measurement-derived values from MD3 spec §10.7 (icon sizes); permitted exception
         medium: "w-[24px] h-[24px]",
         large: "w-[24px] h-[24px]",
         xlarge: "w-[32px] h-[32px]"
       },
       orientation: {
-        // Horizontal: 8dp from active track left edge, vertically centered
-        // NOTE: measurement-derived value from MD3 spec §10.7 (iconOffset: 8dp); permitted exception
         horizontal: "left-[8px] top-1/2 -translate-y-1/2",
-        // Vertical: 8dp from active track bottom edge (outer end), horizontally centered
         vertical: "bottom-[8px] left-1/2 -translate-x-1/2"
       }
     },
@@ -10890,7 +11045,7 @@ function SliderStops({
   step,
   values,
   variant,
-  isDisabled,
+  size = "xsmall",
   className
 }) {
   const stopCount = Math.floor((maxValue - minValue) / step) + 1;
@@ -10908,7 +11063,10 @@ function SliderStops({
           {
             "data-slot": "stop-dot",
             className: cn(
-              sliderStopDotVariants({ onActiveTrack: isOnActive, disabled: isDisabled })
+              sliderStopDotVariants({
+                region: isOnActive ? "active" : "inactive",
+                size
+              })
             )
           },
           i
@@ -10919,27 +11077,19 @@ function SliderStops({
 }
 function SliderValueIndicator({
   value,
-  isVisible,
   formatValue: formatValue2,
   className
 }) {
   const displayValue = formatValue2 ? formatValue2(value) : `${Math.round(value)}`;
   const reducedMotion = useReducedMotion();
-  const transitionClasses = reducedMotion ? "" : cn(
-    "transition-[transform,opacity]",
-    isVisible ? "duration-short3 ease-standard-decelerate" : "duration-short2 ease-standard-accelerate"
-  );
+  const transitionClasses = reducedMotion ? "" : "transition-[scale,opacity] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-slot": "value-indicator",
-      className: cn(
-        sliderValueIndicatorVariants({ visible: isVisible }),
-        transitionClasses,
-        className
-      ),
+      className: cn(sliderValueIndicatorVariants(), transitionClasses, className),
       role: "tooltip",
-      "aria-hidden": !isVisible,
+      "aria-hidden": "true",
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: sliderValueIndicatorTextVariants(), children: displayValue })
     }
   );
@@ -10952,6 +11102,16 @@ function resolveDefaultValue(variant, minValue) {
   if (variant === "centered") return [0];
   return [minValue];
 }
+var GAP_PX = 3;
+function segmentStyle(orientation, opts) {
+  const { start, end, startGap = 0, endGap = 0 } = opts;
+  const startVal = start !== null ? `calc(${start}% + ${startGap}px)` : `${startGap}px`;
+  const endVal = end !== null ? `calc(${100 - end}% + ${endGap}px)` : `${endGap}px`;
+  if (orientation === "horizontal") {
+    return { left: startVal, right: endVal };
+  }
+  return { bottom: startVal, top: endVal };
+}
 var Slider = React.forwardRef(
   ({
     size = "xsmall",
@@ -10985,103 +11145,75 @@ var Slider = React.forwardRef(
       },
       [value, onChange]
     );
-    const thumbCount = variant === "range" ? 2 : 1;
-    const [thumbStates, setThumbStates] = React.useState(
-      () => Array(thumbCount).fill("enabled")
-    );
-    const isDragging = thumbStates.some((s) => s === "pressed");
-    const trackTransition = reducedMotion || isDragging ? "" : "transition-[flex-basis] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial";
-    const handleMotion = reducedMotion ? "" : "transition-[width] duration-short2 ease-standard";
-    const stateLayerMotion = reducedMotion ? "" : "transition-opacity duration-short1 ease-standard";
+    const [anyThumbDragging, setAnyThumbDragging] = React.useState(false);
+    const handleThumbDraggingChange = React.useCallback((_index, isDragging) => {
+      setAnyThumbDragging(isDragging);
+    }, []);
+    const springTokens = "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial";
+    const trackTransition = reducedMotion || anyThumbDragging ? "" : orientation === "vertical" ? `transition-[top,bottom,height] ${springTokens}` : `transition-[left,width,right] ${springTokens}`;
+    const handleMotion = reducedMotion ? "" : "transition-[width] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial";
     const isRange = variant === "range";
     const isCentered = variant === "centered";
     const showIcon = icon !== void 0 && variant === "standard" && (size === "medium" || size === "large" || size === "xlarge");
+    const renderThumbContent = React.useCallback(
+      ({ value: thumbValue }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute",
+              "left-1/2",
+              "top-1/2",
+              "-translate-x-1/2",
+              "-translate-y-1/2",
+              orientation === "vertical" ? "h-[20px] w-full" : "h-full w-[20px]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "handle",
+            className: cn(sliderHandleVariants({ size, orientation }), handleMotion)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "state-layer", className: cn(sliderHandleStateLayerVariants()) }),
+        showValueIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+          SliderValueIndicator,
+          {
+            value: thumbValue,
+            ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
+          }
+        )
+      ] }),
+      [size, orientation, showValueIndicator, formatValue2, handleMotion]
+    );
     const renderStandardTrack = () => {
       const pct = clampPercent(currentValues[0] ?? minValue, minValue, maxValue);
-      const thumb0State = isDisabled ? "disabled" : thumbStates[0] ?? "enabled";
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-slot": "active-track",
-            className: cn(
-              sliderActiveTrackVariants({ size, disabled: isDisabled, orientation }),
-              trackTransition
-            ),
-            style: { flexBasis: `${pct}%` },
+            className: cn(sliderActiveTrackVariants({ size, orientation }), trackTransition),
+            style: segmentStyle(orientation, { start: null, end: pct, endGap: GAP_PX }),
             children: showIcon && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 "data-slot": "inset-icon",
-                className: cn(
-                  sliderInsetIconVariants({
-                    size,
-                    orientation
-                  })
-                ),
+                className: cn(sliderInsetIconVariants({ size, orientation })),
                 children: icon
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            "data-slot": "handle",
-            className: cn(
-              sliderHandleVariants({
-                size,
-                disabled: isDisabled,
-                pressed: thumb0State === "pressed",
-                orientation
-              }),
-              handleMotion
-            ),
-            onPointerEnter: () => {
-              if (!isDisabled) setThumbStates(["hovered"]);
-            },
-            onPointerLeave: () => {
-              if (!isDisabled) setThumbStates(["enabled"]);
-            },
-            onPointerDown: (e) => {
-              e.stopPropagation();
-              if (!isDisabled) setThumbStates(["pressed"]);
-            },
-            onPointerUp: (e) => {
-              e.stopPropagation();
-              if (!isDisabled) setThumbStates(["enabled"]);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    sliderHandleStateLayerVariants({ state: thumb0State }),
-                    stateLayerMotion
-                  )
-                }
-              ),
-              showValueIndicator && /* @__PURE__ */ jsxRuntime.jsx(
-                SliderValueIndicator,
-                {
-                  value: currentValues[0] ?? minValue,
-                  isVisible: thumb0State === "pressed",
-                  ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-                }
-              )
-            ]
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-slot": "inactive-track",
-            className: cn(
-              sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-              trackTransition
-            ),
-            style: { flexBasis: `${100 - pct}%` },
+            className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+            style: segmentStyle(orientation, { start: pct, startGap: GAP_PX, end: null }),
             children: showStops && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -11096,20 +11228,13 @@ var Slider = React.forwardRef(
     const renderRangeTrack = () => {
       const leftPct = clampPercent(currentValues[0] ?? minValue, minValue, maxValue);
       const rightPct = clampPercent(currentValues[1] ?? maxValue, minValue, maxValue);
-      const thumb0State = isDisabled ? "disabled" : thumbStates[0] ?? "enabled";
-      const thumb1State = isDisabled ? "disabled" : thumbStates[1] ?? "enabled";
-      const setThumb0 = (next) => setThumbStates((s) => [next, s[1] ?? "enabled"]);
-      const setThumb1 = (next) => setThumbStates((s) => [s[0] ?? "enabled", next]);
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-slot": "inactive-track-left",
-            className: cn(
-              sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-              trackTransition
-            ),
-            style: { flexBasis: `${leftPct}%` },
+            className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+            style: segmentStyle(orientation, { start: null, end: leftPct, endGap: GAP_PX }),
             children: showStops && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -11119,128 +11244,30 @@ var Slider = React.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            "data-slot": "handle",
-            "data-index": "0",
-            className: cn(
-              sliderHandleVariants({
-                size,
-                disabled: isDisabled,
-                pressed: thumb0State === "pressed",
-                orientation
-              }),
-              handleMotion
-            ),
-            onPointerEnter: () => {
-              if (!isDisabled) setThumb0("hovered");
-            },
-            onPointerLeave: () => {
-              if (!isDisabled) setThumb0("enabled");
-            },
-            onPointerDown: (e) => {
-              e.stopPropagation();
-              if (!isDisabled) setThumb0("pressed");
-            },
-            onPointerUp: (e) => {
-              e.stopPropagation();
-              if (!isDisabled) setThumb0("enabled");
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    sliderHandleStateLayerVariants({ state: thumb0State }),
-                    stateLayerMotion
-                  )
-                }
-              ),
-              showValueIndicator && /* @__PURE__ */ jsxRuntime.jsx(
-                SliderValueIndicator,
-                {
-                  value: currentValues[0] ?? minValue,
-                  isVisible: thumb0State === "pressed",
-                  ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-                }
-              )
-            ]
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-slot": "active-track",
             className: cn(
-              sliderActiveTrackVariants({ size, disabled: isDisabled, orientation }),
+              sliderActiveTrackVariants({ size, orientation }),
               "rounded-[2px]",
-              // Both ends near handles: 2dp (MD3 §10.2)
+              // Both ends near handles: 2dp inner (MD3 §10.2)
               trackTransition
             ),
-            style: { flexBasis: `${rightPct - leftPct}%` }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            "data-slot": "handle",
-            "data-index": "1",
-            className: cn(
-              sliderHandleVariants({
-                size,
-                disabled: isDisabled,
-                pressed: thumb1State === "pressed",
-                orientation
-              }),
-              handleMotion
-            ),
-            onPointerEnter: () => {
-              if (!isDisabled) setThumb1("hovered");
-            },
-            onPointerLeave: () => {
-              if (!isDisabled) setThumb1("enabled");
-            },
-            onPointerDown: (e) => {
-              e.stopPropagation();
-              if (!isDisabled) setThumb1("pressed");
-            },
-            onPointerUp: (e) => {
-              e.stopPropagation();
-              if (!isDisabled) setThumb1("enabled");
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    sliderHandleStateLayerVariants({ state: thumb1State }),
-                    stateLayerMotion
-                  )
-                }
-              ),
-              showValueIndicator && /* @__PURE__ */ jsxRuntime.jsx(
-                SliderValueIndicator,
-                {
-                  value: currentValues[1] ?? maxValue,
-                  isVisible: thumb1State === "pressed",
-                  ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-                }
-              )
-            ]
+            style: segmentStyle(orientation, {
+              start: leftPct,
+              startGap: GAP_PX,
+              end: rightPct,
+              endGap: GAP_PX
+            })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-slot": "inactive-track-right",
-            className: cn(
-              sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-              trackTransition
-            ),
-            style: { flexBasis: `${100 - rightPct}%` },
+            className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+            style: segmentStyle(orientation, { start: rightPct, startGap: GAP_PX, end: null }),
             children: showStops && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -11255,126 +11282,65 @@ var Slider = React.forwardRef(
     const renderCenteredTrack = () => {
       const thumbPct = clampPercent(currentValues[0] ?? minValue, minValue, maxValue);
       const zeroPct = minValue >= 0 ? 0 : maxValue <= 0 ? 100 : (0 - minValue) / (maxValue - minValue) * 100;
-      const thumb0State = isDisabled ? "disabled" : thumbStates[0] ?? "enabled";
-      const handleEl = /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          "data-slot": "handle",
-          className: cn(
-            sliderHandleVariants({
-              size,
-              disabled: isDisabled,
-              pressed: thumb0State === "pressed",
-              orientation
-            }),
-            handleMotion
-          ),
-          onPointerEnter: () => {
-            if (!isDisabled) setThumbStates(["hovered"]);
-          },
-          onPointerLeave: () => {
-            if (!isDisabled) setThumbStates(["enabled"]);
-          },
-          onPointerDown: (e) => {
-            e.stopPropagation();
-            if (!isDisabled) setThumbStates(["pressed"]);
-          },
-          onPointerUp: (e) => {
-            e.stopPropagation();
-            if (!isDisabled) setThumbStates(["enabled"]);
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                "data-slot": "state-layer",
-                className: cn(sliderHandleStateLayerVariants({ state: thumb0State }), stateLayerMotion)
-              }
-            ),
-            showValueIndicator && /* @__PURE__ */ jsxRuntime.jsx(
-              SliderValueIndicator,
-              {
-                value: currentValues[0] ?? minValue,
-                isVisible: thumb0State === "pressed",
-                ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-              }
-            )
-          ]
-        }
-      );
       if (thumbPct >= zeroPct) {
-        const activePct = thumbPct - zeroPct;
         return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "inactive-track-left",
-              className: cn(
-                sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-                trackTransition
-              ),
-              style: { flexBasis: `${zeroPct}%` }
+              className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+              style: segmentStyle(orientation, { start: null, end: zeroPct })
             }
           ),
-          handleEl,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "active-track",
-              className: cn(
-                sliderActiveTrackVariants({ size, disabled: isDisabled, orientation }),
-                trackTransition
-              ),
-              style: { flexBasis: `${activePct}%` }
+              className: cn(sliderActiveTrackVariants({ size, orientation }), trackTransition),
+              style: segmentStyle(orientation, {
+                start: zeroPct,
+                end: thumbPct,
+                endGap: GAP_PX
+              })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "inactive-track-right",
-              className: cn(
-                sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-                trackTransition
-              ),
-              style: { flexBasis: `${100 - zeroPct - activePct}%` }
+              className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+              style: segmentStyle(orientation, { start: thumbPct, startGap: GAP_PX, end: null })
             }
           )
         ] });
       } else {
-        const activePct = zeroPct - thumbPct;
         return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "inactive-track-left",
-              className: cn(
-                sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-                trackTransition
-              ),
-              style: { flexBasis: `${thumbPct}%` }
+              className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+              style: segmentStyle(orientation, { start: null, end: thumbPct, endGap: GAP_PX })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "active-track",
-              className: cn(
-                sliderActiveTrackVariants({ size, disabled: isDisabled, orientation }),
-                trackTransition
-              ),
-              style: { flexBasis: `${activePct}%` }
+              className: cn(sliderActiveTrackVariants({ size, orientation }), trackTransition),
+              style: segmentStyle(orientation, {
+                start: thumbPct,
+                startGap: GAP_PX,
+                end: zeroPct
+              })
             }
           ),
-          handleEl,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "inactive-track-right",
-              className: cn(
-                sliderInactiveTrackVariants({ size, disabled: isDisabled, orientation }),
-                trackTransition
-              ),
-              style: { flexBasis: `${100 - zeroPct}%` }
+              className: cn(sliderInactiveTrackVariants({ size, orientation }), trackTransition),
+              style: segmentStyle(orientation, { start: zeroPct, end: null })
             }
           )
         ] });
@@ -11397,11 +11363,11 @@ var Slider = React.forwardRef(
         ...value !== void 0 ? { value } : {},
         ...defaultValue !== void 0 ? { defaultValue } : {},
         ...onChangeEnd !== void 0 ? { onChangeEnd } : {},
-        className: cn(
-          sliderContainerVariants({ size, disabled: isDisabled, orientation }),
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "track-layout", className: cn(sliderTrackLayoutVariants({ orientation })), children: [
+        renderThumbContent,
+        onThumbDraggingChange: handleThumbDraggingChange,
+        className: cn(sliderContainerVariants({ size, orientation }), className),
+        trackClassName: sliderTrackRegionVariants({ size, orientation }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "track-layout", className: cn(sliderTrackLayoutVariants()), children: [
           isRange ? renderRangeTrack() : isCentered ? renderCenteredTrack() : renderStandardTrack(),
           canShowStops && /* @__PURE__ */ jsxRuntime.jsx(
             SliderStops,
@@ -11411,7 +11377,7 @@ var Slider = React.forwardRef(
               step,
               values: currentValues,
               variant,
-              isDisabled
+              size
             }
           )
         ] })
@@ -16121,8 +16087,22 @@ exports.remToPx = remToPx;
 exports.rgbToHex = rgbToHex;
 exports.richTooltipVariants = richTooltipVariants;
 exports.scrimVariants = scrimVariants2;
-exports.searchBarVariants = searchBarVariants;
+exports.searchBarAvatarVariants = searchBarAvatarVariants;
+exports.searchBarFocusRingVariants = searchBarFocusRingVariants;
+exports.searchBarInputVariants = searchBarInputVariants;
+exports.searchBarLeadingIconVariants = searchBarLeadingIconVariants;
+exports.searchBarRootVariants = searchBarRootVariants;
+exports.searchBarStateLayerVariants = searchBarStateLayerVariants;
+exports.searchBarTrailingActionVariants = searchBarTrailingActionVariants;
+exports.searchBarTrailingActionsVariants = searchBarTrailingActionsVariants;
+exports.searchViewBackButtonVariants = searchViewBackButtonVariants;
+exports.searchViewClearButtonVariants = searchViewClearButtonVariants;
+exports.searchViewContentVariants = searchViewContentVariants;
+exports.searchViewDividerVariants = searchViewDividerVariants;
 exports.searchViewHeaderVariants = searchViewHeaderVariants;
+exports.searchViewInputVariants = searchViewInputVariants;
+exports.searchViewTrailingActionVariants = searchViewTrailingActionVariants;
+exports.searchViewTrailingActionsVariants = searchViewTrailingActionsVariants;
 exports.searchViewVariants = searchViewVariants;
 exports.sliderActiveTrackVariants = sliderActiveTrackVariants;
 exports.sliderContainerVariants = sliderContainerVariants;