@tinybigui/react 0.17.0 → 0.19.0

package/dist/index.js

@@ -8611,6 +8611,30 @@ var InteractiveStyledListItem = forwardRef(
   }
 );
 InteractiveStyledListItem.displayName = "InteractiveStyledListItem";
+var ArrowBackIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+  }
+);
+var CloseIcon3 = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ 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 = forwardRef(
   ({
     value,
@@ -8626,7 +8650,9 @@ var SearchBarHeadless = forwardRef(
     "aria-label": ariaLabel,
     className,
     onFocus,
-    onBlur
+    onBlur,
+    inputClassName,
+    trailingActionsClassName
   }, forwardedRef) => {
     const inputRef = useRef(null);
     const internalFormRef = useRef(null);
@@ -8660,8 +8686,17 @@ var SearchBarHeadless = forwardRef(
     );
     return /* @__PURE__ */ jsxs("form", { ref: formRef, role: "search", className, onSubmit: handleFormSubmit, children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { "data-slot": "leading-icon", children: leadingIcon }),
-      /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsx("span", { "data-slot": "trailing-action", children: action }, index)) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...inputProps,
+          ref: inputRef,
+          role: "searchbox",
+          "data-slot": "input",
+          className: inputClassName
+        }
+      ),
+      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions }),
       avatar && /* @__PURE__ */ jsx("span", { "data-slot": "avatar", children: avatar })
     ] });
   }
@@ -8681,32 +8716,45 @@ var SearchViewHeadless = forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout = "fullscreen",
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     if (!isOpen) {
       return null;
     }
-    return createPortal(
-      /* @__PURE__ */ 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__ */ jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps });
+    }
+    return createPortal(/* @__PURE__ */ jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps }), document.body);
   }
 );
 SearchViewHeadless.displayName = "SearchViewHeadless";
@@ -8723,12 +8771,21 @@ var SearchViewPanel = forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout,
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     const panelRef = useRef(null);
     const inputRef = useRef(null);
     const ref = forwardedRef ?? panelRef;
-    usePreventScroll();
+    const isFullscreen = layout === "fullscreen";
+    usePreventScroll({ isDisabled: !isFullscreen });
     const { overlayProps } = useOverlay(
       {
         isOpen: true,
@@ -8761,7 +8818,17 @@ var SearchViewPanel = forwardRef(
     const handleBackClick = useCallback(() => {
       onClose();
     }, [onClose]);
-    const defaultBackArrow = /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Back", onClick: handleBackClick, "data-slot": "back-button", children: "\u2190" });
+    const defaultBackButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Back",
+        onClick: handleBackClick,
+        "data-slot": "back-button",
+        className: backButtonClassName,
+        children: /* @__PURE__ */ jsx(ArrowBackIcon, {})
+      }
+    );
     const clearButton = state.value ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -8770,66 +8837,109 @@ var SearchViewPanel = forwardRef(
         type: "button",
         "aria-label": "Clear search",
         "data-slot": "clear-button",
-        children: "\u2715"
+        className: clearButtonClassName,
+        children: /* @__PURE__ */ jsx(CloseIcon3, {})
       }
     ) : null;
-    return /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
-      /* @__PURE__ */ jsxs("div", { "data-slot": "header", children: [
-        /* @__PURE__ */ jsx("span", { "data-slot": "leading-icon", children: leadingIcon ?? defaultBackArrow }),
-        /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-        clearButton,
-        trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsx("span", { "data-slot": "trailing-action", children: action }, index)) })
-      ] }),
-      showDivider && /* @__PURE__ */ jsx("hr", { "data-slot": "divider" }),
-      /* @__PURE__ */ 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__ */ jsx(FocusScope, { contain: isFullscreen, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "header", className: headerClassName, children: [
+          leadingIcon ?? defaultBackButton,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref: inputRef,
+              role: "searchbox",
+              "data-slot": "input",
+              className: inputClassName
+            }
+          ),
+          clearButton,
+          trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions })
+        ] }),
+        showDivider && /* @__PURE__ */ jsx("hr", { "data-slot": "divider", className: dividerClassName }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "content", "aria-live": "polite", className: contentClassName, children })
+      ] }) })
+    );
   }
 );
 SearchViewPanel.displayName = "SearchViewPanel";
-var searchBarVariants = cva(
+var searchBarRootVariants = 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 = 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 = 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 = cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface"
+]);
+var searchBarTrailingActionVariants = cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchBarAvatarVariants = cva(["flex size-12 shrink-0 items-center justify-center"]);
+var searchBarTrailingActionsVariants = cva(["flex items-center"]);
+var searchBarInputVariants = 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 = cva(["flex flex-col shadow-elevation-3 z-50 overflow-hidden"], {
   variants: {
     style: {
@@ -8842,31 +8952,32 @@ var searchViewVariants = cva(["flex flex-col shadow-elevation-3 z-50 overflow-hi
     }
   },
   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 = cva(
   ["flex items-center w-full bg-surface-container-high gap-1"],
@@ -8877,14 +8988,50 @@ var searchViewHeaderVariants = 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 = cva([
+  "flex size-12 shrink-0 items-center justify-center",
+  "text-on-surface rounded-full",
+  "cursor-pointer"
+]);
+var searchViewClearButtonVariants = 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 = cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchViewTrailingActionsVariants = cva(["flex items-center"]);
+var searchViewInputVariants = 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 = cva(["border-t border-outline w-full"]);
+var searchViewContentVariants = cva(["flex-1 overflow-y-auto"]);
+var DefaultSearchIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ 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 = forwardRef(
@@ -8905,7 +9052,7 @@ var SearchBar = 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] = useState(false);
     const handleFocusInternal = useCallback(() => {
@@ -8916,83 +9063,85 @@ var SearchBar = forwardRef(
       setIsFocused(false);
       onBlur?.();
     }, [onBlur]);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const styledLeadingIcon = leadingIcon ? /* @__PURE__ */ jsx("span", { className: "text-on-surface flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-6", children: leadingIcon }) }) : void 0;
-    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "text-on-surface-variant flex size-12 shrink-0 items-center justify-center",
-        children: action
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing({ within: true });
+    const [isPressed, setIsPressed] = useState(false);
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const handleMouseDown = useCallback(
+      (e) => {
+        setIsPressed(true);
+        handleRipple(e);
       },
-      index
-    ));
-    const styledAvatar = avatar ? /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-[30px] overflow-hidden rounded-full", children: avatar }) }) : void 0;
+      [handleRipple]
+    );
+    const handleMouseUp = useCallback(() => setIsPressed(false), []);
+    const styledLeadingIcon = /* @__PURE__ */ jsx("span", { className: cn(searchBarLeadingIconVariants()), children: /* @__PURE__ */ jsx("span", { className: "size-6", children: leadingIcon ?? /* @__PURE__ */ jsx(DefaultSearchIcon, {}) }) });
+    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsx("span", { className: cn(searchBarTrailingActionVariants()), children: action }, index));
+    const styledAvatar = avatar ? /* @__PURE__ */ jsx("span", { className: cn(searchBarAvatarVariants()), children: /* @__PURE__ */ 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__ */ jsx(
       "div",
       {
-        className: cn(
-          reducedMotion ? "" : "duration-short4 ease-standard transition-[margin]",
-          isFocused ? "mx-3" : "mx-6"
-        ),
-        children: /* @__PURE__ */ 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",
+        ...mergeProps$1(hoverProps, focusProps),
+        className: cn(paneTransitionClass, paneMarginClass),
+        onMouseUp: handleMouseUp,
+        children: /* @__PURE__ */ jsxs("div", { role: "presentation", className: "relative", children: [
+          /* @__PURE__ */ jsx("span", { className: cn(searchBarFocusRingVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "presentation",
+              ...getInteractionDataAttributes({
+                isHovered,
+                isFocusVisible,
+                isPressed,
+                isDisabled
               }),
-              className
-            ),
-            onMouseDown: handleRipple,
-            children: [
-              /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "state-layer",
+                    className: cn(searchBarStateLayerVariants()),
+                    "aria-hidden": "true"
+                  }
+                ),
+                ripples,
+                /* @__PURE__ */ 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())
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     );
   }
@@ -9017,21 +9166,29 @@ var SearchView = 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__ */ 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__ */ 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__ */ jsx("span", { className: trailingActionClass, children: action }, index));
     return /* @__PURE__ */ jsx(
       SearchViewHeadless,
       {
         ref,
         isOpen,
         onClose,
+        layout,
         ...value !== void 0 ? { value } : {},
         ...defaultValue !== void 0 ? { defaultValue } : {},
         ...onChange !== void 0 ? { onChange } : {},
@@ -9041,53 +9198,20 @@ var SearchView = 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 = forwardRef(
   ({
     isOpen: controlledIsOpen,
@@ -10285,9 +10409,12 @@ function SliderThumbInternal({
   state,
   trackRef,
   isDisabled,
+  orientation,
   formatValue: formatValue2,
   className,
   "data-direction": dataDirection,
+  renderContent,
+  onDraggingChange,
   ...ariaProps
 }) {
   const inputRef = useRef(null);
@@ -10302,33 +10429,70 @@ function SliderThumbInternal({
     state
   );
   const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled });
+  useEffect(() => {
+    onDraggingChange?.(isDragging);
+  }, [isDragging, onDraggingChange]);
   const currentValue = state.getThumbValue(index);
   const ariaValueText = formatValue2 ? formatValue2(currentValue) : void 0;
-  return /* @__PURE__ */ 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__ */ jsxs(
     "div",
     {
-      ...thumbProps,
+      ...mergeProps$1(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__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          ...mergeProps$1(inputProps, focusProps),
-          ...ariaValueText !== void 0 ? { "aria-valuetext": ariaValueText } : {}
-        }
-      ) })
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            ...mergeProps$1(inputProps, focusProps),
+            ...ariaValueText !== void 0 ? { "aria-valuetext": ariaValueText } : {}
+          }
+        ) }),
+        renderContent?.(renderState)
+      ]
     }
   );
 }
@@ -10351,6 +10515,9 @@ var SliderHeadless = forwardRef(
       className,
       style,
       children,
+      trackClassName,
+      renderThumbContent,
+      onThumbDraggingChange,
       ...ariaProps
     } = props;
     const trackRef = useRef(null);
@@ -10412,7 +10579,18 @@ var SliderHeadless = forwardRef(
         "data-variant": variant,
         ...zeroPercent !== void 0 ? { "data-zero-percent": zeroPercent } : {},
         children: [
-          label && /* @__PURE__ */ jsx("label", { ...labelProps, children: label }),
+          label && /* @__PURE__ */ jsx("label", { ...labelProps, className: cn(orientation === "vertical" && "sr-only"), children: label }),
+          /* @__PURE__ */ 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__ */ jsxs(
             "div",
             {
@@ -10421,6 +10599,10 @@ var SliderHeadless = 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__ */ jsx(
@@ -10430,9 +10612,12 @@ var SliderHeadless = 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__ */ jsx(
@@ -10442,144 +10627,174 @@ var SliderHeadless = 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__ */ 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 = cva(
+var sliderContainerVariants = 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 = 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 = cva(["absolute", "inset-0", "pointer-events-none"]);
+var sliderActiveTrackVariants = 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 = 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 = 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]",
@@ -10587,68 +10802,65 @@ var sliderInactiveTrackVariants = 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 = 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]",
@@ -10657,79 +10869,99 @@ var sliderHandleVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva([
   "absolute",
   "inset-0",
@@ -10737,58 +10969,22 @@ var sliderStopsContainerVariants = 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 = 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 = 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]"
       }
     },
@@ -10797,64 +10993,23 @@ var sliderTrackStopVariants = cva(
     }
   }
 );
-var sliderValueIndicatorVariants = 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 = cva([
   "text-inverse-on-surface",
   "text-label-large",
-  // MD3 Label Large typescale token
-  "whitespace-nowrap",
-  "text-center"
+  "select-none",
+  "whitespace-nowrap"
 ]);
 var sliderInsetIconVariants = 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"
       }
     },
@@ -10885,7 +11040,7 @@ function SliderStops({
   step,
   values,
   variant,
-  isDisabled,
+  size = "xsmall",
   className
 }) {
   const stopCount = Math.floor((maxValue - minValue) / step) + 1;
@@ -10903,7 +11058,10 @@ function SliderStops({
           {
             "data-slot": "stop-dot",
             className: cn(
-              sliderStopDotVariants({ onActiveTrack: isOnActive, disabled: isDisabled })
+              sliderStopDotVariants({
+                region: isOnActive ? "active" : "inactive",
+                size
+              })
             )
           },
           i
@@ -10914,27 +11072,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__ */ 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__ */ jsx("span", { className: sliderValueIndicatorTextVariants(), children: displayValue })
     }
   );
@@ -10947,6 +11097,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 = forwardRef(
   ({
     size = "xsmall",
@@ -10980,103 +11140,75 @@ var Slider = forwardRef(
       },
       [value, onChange]
     );
-    const thumbCount = variant === "range" ? 2 : 1;
-    const [thumbStates, setThumbStates] = 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] = useState(false);
+    const handleThumbDraggingChange = 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 = useCallback(
+      ({ value: thumbValue }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            "data-slot": "handle",
+            className: cn(sliderHandleVariants({ size, orientation }), handleMotion)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-slot": "state-layer", className: cn(sliderHandleStateLayerVariants()) }),
+        showValueIndicator && /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ 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__ */ jsx(
               "span",
               {
                 "data-slot": "inset-icon",
-                className: cn(
-                  sliderInsetIconVariants({
-                    size,
-                    orientation
-                  })
-                ),
+                className: cn(sliderInsetIconVariants({ size, orientation })),
                 children: icon
               }
             )
           }
         ),
-        /* @__PURE__ */ 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__ */ jsx(
-                "div",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    sliderHandleStateLayerVariants({ state: thumb0State }),
-                    stateLayerMotion
-                  )
-                }
-              ),
-              showValueIndicator && /* @__PURE__ */ jsx(
-                SliderValueIndicator,
-                {
-                  value: currentValues[0] ?? minValue,
-                  isVisible: thumb0State === "pressed",
-                  ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-                }
-              )
-            ]
-          }
-        ),
         /* @__PURE__ */ 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__ */ jsx(
               "span",
               {
@@ -11091,20 +11223,13 @@ var Slider = 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__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ 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__ */ jsx(
               "span",
               {
@@ -11114,128 +11239,30 @@ var Slider = forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ 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__ */ jsx(
-                "div",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    sliderHandleStateLayerVariants({ state: thumb0State }),
-                    stateLayerMotion
-                  )
-                }
-              ),
-              showValueIndicator && /* @__PURE__ */ jsx(
-                SliderValueIndicator,
-                {
-                  value: currentValues[0] ?? minValue,
-                  isVisible: thumb0State === "pressed",
-                  ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-                }
-              )
-            ]
-          }
-        ),
         /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                "div",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    sliderHandleStateLayerVariants({ state: thumb1State }),
-                    stateLayerMotion
-                  )
-                }
-              ),
-              showValueIndicator && /* @__PURE__ */ 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__ */ 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__ */ jsx(
               "span",
               {
@@ -11250,126 +11277,65 @@ var Slider = 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__ */ 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__ */ jsx(
-              "div",
-              {
-                "data-slot": "state-layer",
-                className: cn(sliderHandleStateLayerVariants({ state: thumb0State }), stateLayerMotion)
-              }
-            ),
-            showValueIndicator && /* @__PURE__ */ jsx(
-              SliderValueIndicator,
-              {
-                value: currentValues[0] ?? minValue,
-                isVisible: thumb0State === "pressed",
-                ...formatValue2 !== void 0 ? { formatValue: formatValue2 } : {}
-              }
-            )
-          ]
-        }
-      );
       if (thumbPct >= zeroPct) {
-        const activePct = thumbPct - zeroPct;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ 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__ */ 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__ */ 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 })
             }
           )
         ] });
@@ -11392,11 +11358,11 @@ var Slider = forwardRef(
         ...value !== void 0 ? { value } : {},
         ...defaultValue !== void 0 ? { defaultValue } : {},
         ...onChangeEnd !== void 0 ? { onChangeEnd } : {},
-        className: cn(
-          sliderContainerVariants({ size, disabled: isDisabled, orientation }),
-          className
-        ),
-        children: /* @__PURE__ */ 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__ */ jsxs("div", { "data-slot": "track-layout", className: cn(sliderTrackLayoutVariants()), children: [
           isRange ? renderRangeTrack() : isCentered ? renderCenteredTrack() : renderStandardTrack(),
           canShowStops && /* @__PURE__ */ jsx(
             SliderStops,
@@ -11406,7 +11372,7 @@ var Slider = forwardRef(
               step,
               values: currentValues,
               variant,
-              isDisabled
+              size
             }
           )
         ] })
@@ -15911,6 +15877,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map