@maxsteinwender/sort-ui 1.0.7 → 1.1.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import * as React77 from 'react';
+import * as React78 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -79,11 +79,11 @@ var accordionItemVariants = cva(
           "shadow-card",
           /* inset bottom shadow via combined card token */
           "relative after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",
-          "hover:bg-sui-bg-state-secondary-hover"
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover"
         ],
         soft: [
           "bg-sui-bg-state-soft rounded-card-sm",
-          "hover:bg-sui-bg-state-soft-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover",
           /* always-present border prevents layout shift on open */
           "border border-transparent",
           /* opened → switches to secondary/card appearance */
@@ -92,11 +92,11 @@ var accordionItemVariants = cva(
           "data-[state=open]:border-sui-border-default",
           "data-[state=open]:shadow-card",
           "data-[state=open]:after:shadow-none",
-          "data-[state=open]:hover:bg-sui-bg-state-secondary-hover"
+          "data-[state=open]:[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover"
         ],
         ghost: [
           "bg-sui-bg-state-ghost rounded-card-sm",
-          "hover:bg-sui-bg-state-ghost-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
           /* always-present border prevents layout shift on open */
           "border border-transparent",
           /* opened → switches to secondary/card appearance */
@@ -105,11 +105,11 @@ var accordionItemVariants = cva(
           "data-[state=open]:border-sui-border-default",
           "data-[state=open]:shadow-card",
           "data-[state=open]:after:shadow-none",
-          "data-[state=open]:hover:bg-sui-bg-state-secondary-hover"
+          "data-[state=open]:[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover"
         ],
         line: [
           "border-b border-sui-border-default",
-          "hover:border-sui-border-strong"
+          "[@media(hover:hover)]:hover:border-sui-border-strong"
         ]
       }
     },
@@ -118,7 +118,7 @@ var accordionItemVariants = cva(
     }
   }
 );
-var AccordionItem = React77.forwardRef((_a, ref) => {
+var AccordionItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
@@ -129,7 +129,7 @@ var AccordionItem = React77.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React77.forwardRef((_a, ref) => {
+var AccordionTrigger = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
@@ -151,7 +151,7 @@ var AccordionTrigger = React77.forwardRef((_a, ref) => {
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React77.forwardRef((_a, ref) => {
+var AccordionContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
@@ -196,7 +196,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React77.forwardRef((_a, ref) => {
+var Alert = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -208,7 +208,7 @@ var Alert = React77.forwardRef((_a, ref) => {
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React77.forwardRef((_a, ref) => {
+var AlertTitle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "h5",
@@ -219,7 +219,7 @@ var AlertTitle = React77.forwardRef((_a, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React77.forwardRef((_a, ref) => {
+var AlertDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -230,6 +230,19 @@ var AlertDescription = React77.forwardRef((_a, ref) => {
   );
 });
 AlertDescription.displayName = "AlertDescription";
+function useDevWarnIconOnlyAriaLabel(isIconOnly, ariaLabel, ariaLabelledBy, componentName) {
+  const warnedRef = React78.useRef(false);
+  React78.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    if (warnedRef.current) return;
+    if (!isIconOnly) return;
+    if (ariaLabel || ariaLabelledBy) return;
+    console.warn(
+      `[Sort UI] <${componentName}> with iconOnly is missing an aria-label. Screen reader users will have no accessible name for this control. Pass aria-label (or aria-labelledby) describing the action. See Web Interface Guidelines #47.`
+    );
+    warnedRef.current = true;
+  }, [isIconOnly, ariaLabel, ariaLabelledBy, componentName]);
+}
 var buttonVariants = cva(
   // Sort UI base: font-medium, Remixicon via [&_i], SVG via [&_svg]; shape variant controls border-radius
   // ghost + ghost-muted hover intentionally identical per Sort UI spec
@@ -349,13 +362,13 @@ var loadingTextColorMap = {
   "ghost-muted": "text-sui-text-muted"
 };
 var loadingShadowVariants = /* @__PURE__ */ new Set(["default", "outline", "destructive"]);
-var Button = React77.forwardRef(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+var Button = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, shape, iconOnly, loading, leadIcon: _leadIcon, tailIcon: _tailIcon, badgeLeft: _badgeLeft, badgeRight: _badgeRight, asChild = false, children, showSeparator: _showSeparator } = _b, props = __objRest(_b, ["className", "variant", "size", "shape", "iconOnly", "loading", "leadIcon", "tailIcon", "badgeLeft", "badgeRight", "asChild", "children", "showSeparator"]);
     const Comp = asChild ? Slot : "button";
     const resolvedSize = size != null ? size : "lg";
     const resolvedVariant = variant != null ? variant : "default";
+    useDevWarnIconOnlyAriaLabel(iconOnly, props["aria-label"], props["aria-labelledby"], "Button");
     const isLoading = loading && !asChild;
     const hasBadges = !iconOnly && !asChild;
     const badgeColor = badgeColorMap[resolvedVariant];
@@ -420,7 +433,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React77.forwardRef((_a, ref) => {
+var AlertDialogOverlay = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Overlay,
@@ -435,7 +448,7 @@ var AlertDialogOverlay = React77.forwardRef((_a, ref) => {
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React77.forwardRef((_a, ref) => {
+var AlertDialogContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
@@ -486,7 +499,7 @@ var AlertDialogFooter = (_a) => {
   );
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React77.forwardRef((_a, ref) => {
+var AlertDialogTitle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Title,
@@ -497,7 +510,7 @@ var AlertDialogTitle = React77.forwardRef((_a, ref) => {
   );
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React77.forwardRef((_a, ref) => {
+var AlertDialogDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Description,
@@ -508,7 +521,7 @@ var AlertDialogDescription = React77.forwardRef((_a, ref) => {
   );
 });
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React77.forwardRef((_a, ref) => {
+var AlertDialogAction = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Action,
@@ -519,7 +532,7 @@ var AlertDialogAction = React77.forwardRef((_a, ref) => {
   );
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React77.forwardRef((_a, ref) => {
+var AlertDialogCancel = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Cancel,
@@ -558,11 +571,11 @@ var awayIconSize = {
   "lg": "14px",
   "default": "16px"
 };
-var StatusBadge = React77.forwardRef(
+var StatusBadge = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant, size = "default", src, className } = _b, props = __objRest(_b, ["variant", "size", "src", "className"]);
-    const [imgError, setImgError] = React77.useState(false);
-    React77.useEffect(() => {
+    const [imgError, setImgError] = React78.useState(false);
+    React78.useEffect(() => {
       setImgError(false);
     }, [src]);
     const sizeClass = containerSize[size];
@@ -775,12 +788,12 @@ function extractInitials(value) {
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
-var AvatarContext = React77.createContext({
+var AvatarContext = React78.createContext({
   size: "md",
   shape: "circular",
   color: "gray"
 });
-var Avatar = React77.forwardRef((_a, ref) => {
+var Avatar = React78.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     size = "md",
@@ -934,7 +947,7 @@ var Avatar = React77.forwardRef((_a, ref) => {
   ) });
 });
 Avatar.displayName = "Avatar";
-var AvatarImage = React77.forwardRef((_a, ref) => {
+var AvatarImage = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Image,
@@ -945,10 +958,10 @@ var AvatarImage = React77.forwardRef((_a, ref) => {
   );
 });
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React77.forwardRef((_a, ref) => {
+var AvatarFallback = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
   var _a2, _b2, _c;
-  const { size, shape, color } = React77.useContext(AvatarContext);
+  const { size, shape, color } = React78.useContext(AvatarContext);
   const shapeClass = shape === "rounded" ? "rounded-sm" : "rounded-full";
   const fontClass = (_a2 = initialsFontSize[size]) != null ? _a2 : "text-sm";
   const iconClass = (_b2 = iconSize[size]) != null ? _b2 : "text-lg";
@@ -982,8 +995,8 @@ var avatarButtonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-sui-bg-state-secondary border border-sui-border-darker shadow-default hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press disabled:bg-sui-bg-state-disabled disabled:border-sui-border-default disabled:shadow-none",
-        soft: "bg-sui-bg-state-soft hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press"
+        default: "bg-sui-bg-state-secondary border border-sui-border-darker shadow-default [@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press disabled:bg-sui-bg-state-disabled disabled:border-sui-border-default disabled:shadow-none",
+        soft: "bg-sui-bg-state-soft [@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press"
       },
       size: {
         // py-1.5 (6px × 2) + avatar 20px = 32px visible; after:-inset-y-1.5 adds 6px top+bottom → 44px hit area
@@ -998,7 +1011,7 @@ var avatarButtonVariants = cva(
     }
   }
 );
-var AvatarButton = React77.forwardRef(
+var AvatarButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1092,7 +1105,7 @@ var paddingBySize = {
   "2xl": "pr-sui-10",
   "3xl": "pr-sui-12"
 };
-var AvatarGroup = React77.forwardRef(
+var AvatarGroup = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size = "md", stacking = "last-on-top", items } = _b, props = __objRest(_b, ["className", "size", "stacking", "items"]);
     const isFirstOnTop = stacking === "first-on-top";
@@ -1134,7 +1147,7 @@ var AvatarGroup = React77.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarUpload = React77.forwardRef(
+var AvatarUpload = React78.forwardRef(
   ({
     src,
     alt = "",
@@ -1202,8 +1215,8 @@ var controlButtonVariants = cva(
   {
     variants: {
       variant: {
-        default: "text-icon-default-muted bg-transparent hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
-        inverted: "text-icon-inverted-default bg-transparent hover:bg-sui-bg-state-ghost-hover-inverted active:bg-sui-bg-state-ghost-press-inverted"
+        default: "text-icon-default-muted bg-transparent [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
+        inverted: "text-icon-inverted-default bg-transparent [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover-inverted active:bg-sui-bg-state-ghost-press-inverted"
       },
       size: {
         // lg: 24px — meets WCAG 2.5.8 AA minimum (24×24px)
@@ -1227,7 +1240,7 @@ var controlButtonVariants = cva(
     }
   }
 );
-var ControlButton = React77.forwardRef(
+var ControlButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1395,12 +1408,12 @@ function Badge(_a) {
     })
   );
 }
-var Breadcrumb = React77.forwardRef((_a, ref) => {
+var Breadcrumb = React78.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
 });
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React77.forwardRef((_a, ref) => {
+var BreadcrumbList = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ol",
@@ -1414,7 +1427,7 @@ var BreadcrumbList = React77.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React77.forwardRef((_a, ref) => {
+var BreadcrumbItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "li",
@@ -1425,7 +1438,7 @@ var BreadcrumbItem = React77.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React77.forwardRef((_a, ref) => {
+var BreadcrumbLink = React78.forwardRef((_a, ref) => {
   var _b = _a, { asChild, className } = _b, props = __objRest(_b, ["asChild", "className"]);
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
@@ -1433,14 +1446,15 @@ var BreadcrumbLink = React77.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "rounded-sm transition-colors hover:text-sui-text-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sui-border-highlight",
+        // Web Interface Guidelines #42 — focus ring via box-shadow (ring), not outline.
+        "rounded-sm transition-colors [@media(hover:hover)]:hover:text-sui-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-sui-border-highlight",
         className
       )
     }, props)
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React77.forwardRef((_a, ref) => {
+var BreadcrumbPage = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "span",
@@ -1512,7 +1526,7 @@ function BreadcrumbDivider({ variant }) {
     variant === "dot" && /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
   ] });
 }
-var SortBreadcrumb = React77.forwardRef(
+var SortBreadcrumb = React78.forwardRef(
   ({ items, variant = "slash", className }, ref) => {
     return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx(
       "ol",
@@ -1523,7 +1537,7 @@ var SortBreadcrumb = React77.forwardRef(
         ),
         children: items.map((item, index) => {
           const isLast = index === items.length - 1;
-          return /* @__PURE__ */ jsxs(React77.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React78.Fragment, { children: [
             /* @__PURE__ */ jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsx(
               SortBreadcrumbItem,
               __spreadProps(__spreadValues({}, item), {
@@ -1559,7 +1573,8 @@ function SortBreadcrumbItem({
       className: cn(
         "inline-flex items-center select-none",
         type === "avatar" ? "gap-sui-6" : "gap-sui-4",
-        Comp === "a" && "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+        // Web Interface Guidelines #42 — focus ring via box-shadow (ring), not outline.
+        Comp === "a" && "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default",
         className
       )
     }), isCurrent ? { "aria-current": "page" } : {}), {
@@ -1614,7 +1629,7 @@ var verticalChildRadius = {
   xs: "[&>button:first-child]:rounded-t-md [&>button:last-of-type]:rounded-b-md",
   "2xs": "[&>button:first-child]:rounded-t-sm [&>button:last-of-type]:rounded-b-sm"
 };
-var ButtonGroup = React77.forwardRef(
+var ButtonGroup = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "lg", orientation = "horizontal", className, children } = _b, props = __objRest(_b, ["size", "orientation", "className", "children"]);
     const isVertical = orientation === "vertical";
@@ -1633,9 +1648,9 @@ var ButtonGroup = React77.forwardRef(
           className
         )
       }, props), {
-        children: React77.Children.map(children, (child, index) => {
-          if (React77.isValidElement(child)) {
-            return React77.cloneElement(
+        children: React78.Children.map(children, (child, index) => {
+          if (React78.isValidElement(child)) {
+            return React78.cloneElement(
               child,
               {
                 showSeparator: index > 0,
@@ -1654,7 +1669,8 @@ var buttonGroupItemVariants = cva(
   // Base: layout, focus ring, icon sizing, transition
   [
     "relative inline-flex items-center justify-center select-none cursor-pointer transition-colors",
-    "focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-sui-border-highlight focus-visible:outline-offset-[1px] focus-visible:z-10",
+    // Web Interface Guidelines #42 — focus ring via box-shadow (ring), not outline, so it respects border-radius.
+    "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-sui-border-highlight focus-visible:ring-offset-[1px] focus-visible:z-10",
     "[&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:text-md [&_i]:leading-[1] [&_i]:h-4",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
   ],
@@ -1676,7 +1692,7 @@ var buttonGroupItemVariants = cva(
 var stateStyles = [
   "bg-sui-bg-state-ghost text-sui-text-subtle",
   "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
-  "hover:bg-sui-bg-state-ghost-hover",
+  "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
   "active:bg-sui-bg-state-ghost-press active:text-sui-text-default"
 ].join(" ");
 var disabledStyles = [
@@ -1704,7 +1720,7 @@ var badgeClasses = {
   xs: "text-xs font-medium leading-4 py-sui-2",
   "2xs": "text-xs font-medium leading-4 py-0"
 };
-var ButtonGroupItem = React77.forwardRef(
+var ButtonGroupItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1731,6 +1747,7 @@ var ButtonGroupItem = React77.forwardRef(
     ]);
     const s = size != null ? size : "lg";
     const Comp = asChild ? Slot : "button";
+    useDevWarnIconOnlyAriaLabel(iconOnly, props["aria-label"], props["aria-labelledby"], "ButtonGroupItem");
     return /* @__PURE__ */ jsxs(
       Comp,
       __spreadProps(__spreadValues({
@@ -1791,7 +1808,7 @@ var filterButtonVariants = cva(
 );
 var getVisualStateClasses = (selected) => selected ? "bg-sui-bg-state-secondary border border-solid border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-default" : "bg-sui-bg-state-secondary border border-dashed border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted";
 var SUB_BUTTON_FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-1 rounded-sm";
-var FilterButton = React77.forwardRef(
+var FilterButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1918,7 +1935,7 @@ var FilterButton = React77.forwardRef(
         className: cn(
           filterButtonVariants({ size, shape }),
           getVisualStateClasses(selected),
-          "hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press",
           className
         ),
         ref,
@@ -1960,9 +1977,9 @@ var linkButtonVariants = cva(
   {
     variants: {
       variant: {
-        default: "text-sui-text-default hover:text-sui-text-muted",
-        muted: "text-sui-text-muted hover:text-sui-text-default",
-        informative: "text-sui-text-informative hover:text-sui-text-informative"
+        default: "text-sui-text-default [@media(hover:hover)]:hover:text-sui-text-muted",
+        muted: "text-sui-text-muted [@media(hover:hover)]:hover:text-sui-text-default",
+        informative: "text-sui-text-informative [@media(hover:hover)]:hover:text-sui-text-informative"
       },
       size: {
         sm: "text-xs leading-4",
@@ -1981,11 +1998,18 @@ var underlineOffsetMap = {
   md: "after:bottom-0",
   lg: "after:bottom-0"
 };
-var LinkButton = React77.forwardRef(
+var LinkButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, asChild = false, leadIcon, tailIcon, disabled, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "leadIcon", "tailIcon", "disabled", "children"]);
     const Comp = asChild ? Slot : "button";
     const resolvedSize = size != null ? size : "lg";
+    const isIconOnly = (children == null || children === false || children === "") && Boolean(leadIcon || tailIcon);
+    useDevWarnIconOnlyAriaLabel(
+      isIconOnly,
+      props["aria-label"],
+      props["aria-labelledby"],
+      "LinkButton"
+    );
     const iconColor = disabled ? "text-icon-default-disabled" : variant === "informative" ? "text-icon-informative" : "text-icon-default-muted";
     const underlineColor = disabled ? "var(--border-darker)" : variant === "informative" ? "var(--border-informative)" : "var(--border-darker)";
     return /* @__PURE__ */ jsxs(
@@ -1997,8 +2021,9 @@ var LinkButton = React77.forwardRef(
           // pointer-events-none prevents click; aria-disabled="true" is set below.
           disabled && "pointer-events-none text-sui-text-hint",
           // Focus ring: encloses the full component (WCAG 2.4.11 AA).
+          // Web Interface Guidelines #42 — box-shadow (ring) respects border-radius, outline did not pre-Safari 16.4.
           // focus-visible scopes to keyboard navigation only — no ring on mouse click.
-          "rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-informative)]",
+          "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--border-informative)]",
           className
         ),
         ref,
@@ -2056,7 +2081,7 @@ var brandMap = {
   dropbox: { icon: "ri-dropbox-fill", label: "Dropbox", bg: "var(--social-brand-dropbox)" },
   github: { icon: "ri-github-fill", label: "Github" }
 };
-var SocialButton = React77.forwardRef(
+var SocialButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, shape, brand, iconOnly, asChild = false, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "brand", "iconOnly", "asChild", "children"]);
     const Comp = asChild ? Slot : "button";
@@ -2261,8 +2286,8 @@ function CalendarDayButton(_a) {
     "modifiers"
   ]);
   const defaultClassNames = getDefaultClassNames();
-  const ref = React77.useRef(null);
-  React77.useEffect(() => {
+  const ref = React78.useRef(null);
+  React78.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -2288,18 +2313,18 @@ function CalendarDayButton(_a) {
         // Default state
         "bg-sui-bg-state-ghost text-sui-text-default",
         // Hover
-        "hover:bg-sui-bg-state-ghost-hover",
+        "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
         // Focus
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-0",
         // Disabled
         "disabled:pointer-events-none disabled:text-sui-text-hint",
         // Selected (single date)
-        "data-[selected-single=true]:bg-sui-bg-state-brand data-[selected-single=true]:text-sui-text-white-default data-[selected-single=true]:hover:bg-sui-bg-state-brand-hover",
+        "data-[selected-single=true]:bg-sui-bg-state-brand data-[selected-single=true]:text-sui-text-white-default data-[selected-single=true]:[@media(hover:hover)]:hover:bg-sui-bg-state-brand-hover",
         // Range start & end
         "data-[range-start=true]:bg-sui-bg-state-brand data-[range-start=true]:text-sui-text-white-default data-[range-start=true]:rounded-xs",
         "data-[range-end=true]:bg-sui-bg-state-brand data-[range-end=true]:text-sui-text-white-default data-[range-end=true]:rounded-xs",
         // Range middle
-        "data-[range-middle=true]:bg-sui-bg-state-soft data-[range-middle=true]:text-sui-text-informative data-[range-middle=true]:rounded-none data-[range-middle=true]:hover:bg-sui-bg-state-soft-hover",
+        "data-[range-middle=true]:bg-sui-bg-state-soft data-[range-middle=true]:text-sui-text-informative data-[range-middle=true]:rounded-none data-[range-middle=true]:[@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover",
         // Today indicator (red circle)
         "data-[today=true]:relative",
         // Focus ring on parent
@@ -2334,20 +2359,30 @@ var cardVariants = cva(
     }
   }
 );
-var Card = React77.forwardRef(
+var Card = React78.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+    var _b = _a, { className, variant, interactive, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "interactive", "asChild"]);
+    const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
-      "div",
+      Comp,
       __spreadValues({
         ref,
-        className: cn(cardVariants({ variant }), className)
+        className: cn(
+          cardVariants({ variant }),
+          interactive && [
+            "cursor-pointer transition-transform duration-fast",
+            "[@media(hover:hover)]:hover:shadow-modal-sm",
+            "active:scale-press",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default"
+          ],
+          className
+        )
       }, props)
     );
   }
 );
 Card.displayName = "Card";
-var CardHeader = React77.forwardRef((_a, ref) => {
+var CardHeader = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2358,7 +2393,7 @@ var CardHeader = React77.forwardRef((_a, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React77.forwardRef((_a, ref) => {
+var CardTitle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2372,7 +2407,7 @@ var CardTitle = React77.forwardRef((_a, ref) => {
   );
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React77.forwardRef((_a, ref) => {
+var CardDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2383,12 +2418,12 @@ var CardDescription = React77.forwardRef((_a, ref) => {
   );
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React77.forwardRef((_a, ref) => {
+var CardContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React77.forwardRef((_a, ref) => {
+var CardFooter = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2399,7 +2434,7 @@ var CardFooter = React77.forwardRef((_a, ref) => {
   );
 });
 CardFooter.displayName = "CardFooter";
-var CardCover = React77.forwardRef(
+var CardCover = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, flush = false, aspectRatio = "3/2", style, children } = _b, props = __objRest(_b, ["className", "flush", "aspectRatio", "style", "children"]);
     return /* @__PURE__ */ jsx(
@@ -2420,17 +2455,17 @@ var CardCover = React77.forwardRef(
 );
 CardCover.displayName = "CardCover";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React77.createContext(null);
+var ChartContext = React78.createContext(null);
 function useChart() {
-  const context = React77.useContext(ChartContext);
+  const context = React78.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React77.forwardRef((_a, ref) => {
+var ChartContainer = React78.forwardRef((_a, ref) => {
   var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
-  const uniqueId = React77.useId();
+  const uniqueId = React78.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2477,7 +2512,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
-var ChartTooltipContent = React77.forwardRef(
+var ChartTooltipContent = React78.forwardRef(
   ({
     active,
     payload,
@@ -2494,7 +2529,7 @@ var ChartTooltipContent = React77.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React77.useMemo(() => {
+    const tooltipLabel = React78.useMemo(() => {
       var _a;
       if (hideLabel || !(payload == null ? void 0 : payload.length)) {
         return null;
@@ -2591,7 +2626,7 @@ var ChartTooltipContent = React77.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React77.forwardRef(
+var ChartLegendContent = React78.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!(payload == null ? void 0 : payload.length)) {
@@ -2667,12 +2702,12 @@ var checkboxVariants = cva(
     "data-[state=indeterminate]:bg-sui-bg-checkbox-active",
     "data-[state=indeterminate]:border-sui-bg-checkbox-active",
     // Hover unchecked: stronger border
-    "hover:data-[state=unchecked]:border-sui-border-strong",
+    "[@media(hover:hover)]:hover:data-[state=unchecked]:border-sui-border-strong",
     // Hover checked/indeterminate: hover bg + matching border
-    "hover:data-[state=checked]:bg-sui-bg-checkbox-active-hover",
-    "hover:data-[state=checked]:border-sui-bg-checkbox-active-hover",
-    "hover:data-[state=indeterminate]:bg-sui-bg-checkbox-active-hover",
-    "hover:data-[state=indeterminate]:border-sui-bg-checkbox-active-hover",
+    "[@media(hover:hover)]:hover:data-[state=checked]:bg-sui-bg-checkbox-active-hover",
+    "[@media(hover:hover)]:hover:data-[state=checked]:border-sui-bg-checkbox-active-hover",
+    "[@media(hover:hover)]:hover:data-[state=indeterminate]:bg-sui-bg-checkbox-active-hover",
+    "[@media(hover:hover)]:hover:data-[state=indeterminate]:border-sui-bg-checkbox-active-hover",
     // Invalid (aria-invalid) — compound selectors for specificity over data-[state] rules
     "aria-[invalid=true]:data-[state=unchecked]:border-sui-border-destructive",
     "aria-[invalid=true]:data-[state=checked]:border-sui-border-destructive",
@@ -2710,13 +2745,14 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React77.forwardRef((_a, ref) => {
-  var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+var Checkbox = React78.forwardRef((_a, ref) => {
+  var _b = _a, { className, variant, checked, indeterminate } = _b, props = __objRest(_b, ["className", "variant", "checked", "indeterminate"]);
   return /* @__PURE__ */ jsxs(
     CheckboxPrimitive.Root,
     __spreadProps(__spreadValues({
       ref,
-      className: cn(checkboxVariants({ variant, className }))
+      className: cn(checkboxVariants({ variant, className })),
+      checked: indeterminate ? "indeterminate" : checked
     }, props), {
       children: [
         /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center", children: [
@@ -2831,7 +2867,7 @@ var checkboxCardVariants = cva(
     }
   }
 );
-var CheckboxCard = React77.forwardRef(
+var CheckboxCard = React78.forwardRef(
   ({
     title,
     description,
@@ -2845,7 +2881,7 @@ var CheckboxCard = React77.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const checkboxId = `checkbox-card-${generatedId}`;
     const titleId = `checkbox-card-title-${generatedId}`;
     const descriptionId = `checkbox-card-desc-${generatedId}`;
@@ -2941,10 +2977,10 @@ var CheckboxCard = React77.forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
-var CheckboxList = React77.forwardRef(
+var CheckboxList = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React77.Children.toArray(children);
+    const items = React78.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -2986,7 +3022,7 @@ var checkboxWithTextVariants = cva(
     }
   }
 );
-var CheckboxWithText = React77.forwardRef(
+var CheckboxWithText = React78.forwardRef(
   ({
     label,
     description,
@@ -2999,7 +3035,7 @@ var CheckboxWithText = React77.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const checkboxId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -3147,7 +3183,7 @@ var labelClasses2 = {
   md: "text-sm font-medium leading-5",
   sm: "text-xs font-medium leading-4"
 };
-var Chip = React77.forwardRef(
+var Chip = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -3176,7 +3212,7 @@ var Chip = React77.forwardRef(
       "className",
       "onClick"
     ]);
-    const [internalSelected, setInternalSelected] = React77.useState(false);
+    const [internalSelected, setInternalSelected] = React78.useState(false);
     const isControlled = controlledSelected !== void 0;
     const selected = isControlled ? controlledSelected : internalSelected;
     const handleClick = (e) => {
@@ -3274,7 +3310,7 @@ var badgeStyles = [
   "bg-sui-bg-state-soft border border-sui-border-darker rounded-xs",
   "text-sui-text-subtle text-xs font-medium leading-4"
 ].join(" ");
-var TooltipContent = React77.forwardRef((_a, ref) => {
+var TooltipContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "default", weight = "subtle", shortcut, sideOffset = 4, children } = _b, props = __objRest(_b, ["className", "variant", "weight", "shortcut", "sideOffset", "children"]);
   return /* @__PURE__ */ jsxs(
     TooltipPrimitive.Content,
@@ -3310,7 +3346,7 @@ var underlineTabsListVariants = cva(
     }
   }
 );
-var UnderlineTabsList = React77.forwardRef((_a, ref) => {
+var UnderlineTabsList = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, layout, size } = _b, props = __objRest(_b, ["className", "layout", "size"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -3334,8 +3370,8 @@ var underlineTabItemVariants = cva(
     "[&_i]:text-icon-default-muted [&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:text-md [&_i]:leading-none",
     "[&_svg]:text-icon-default-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
     // Hover
-    "hover:text-sui-text-subtle hover:border-sui-border-darker",
-    "hover:[&_i]:text-icon-default-subtle hover:[&_svg]:text-icon-default-subtle",
+    "[@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:border-sui-border-darker",
+    "[@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle",
     // Active (Radix data attribute)
     "data-[state=active]:text-sui-text-default data-[state=active]:border-sui-border-accent",
     "data-[state=active]:[&_i]:text-icon-default data-[state=active]:[&_svg]:text-icon-default",
@@ -3357,7 +3393,7 @@ var underlineTabItemVariants = cva(
     }
   }
 );
-var UnderlineTabItem = React77.forwardRef(
+var UnderlineTabItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3395,7 +3431,7 @@ var UnderlineTabItem = React77.forwardRef(
 );
 UnderlineTabItem.displayName = "UnderlineTabItem";
 var DEFAULT_LANGUAGES = ["React", "JavaScript", "TypeScript", "Next.js"];
-var CodeBlock = React77.forwardRef(
+var CodeBlock = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3425,10 +3461,10 @@ var CodeBlock = React77.forwardRef(
       "showLineNumbers"
     ]);
     var _a2, _b2, _c, _d, _e, _f;
-    const [activeTab, setActiveTab] = React77.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
-    const [copied, setCopied] = React77.useState(false);
+    const [activeTab, setActiveTab] = React78.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
+    const [copied, setCopied] = React78.useState(false);
     const activeCode = variant === "advanced" ? (_f = (_e = (_c = tabs == null ? void 0 : tabs.find((t) => t.label === activeTab)) == null ? void 0 : _c.code) != null ? _e : (_d = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _d.code) != null ? _f : "" : code;
-    const handleCopy = React77.useCallback(() => {
+    const handleCopy = React78.useCallback(() => {
       if (onCopy) {
         onCopy();
       } else {
@@ -3619,7 +3655,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React77.forwardRef((_a, ref) => {
+var DialogOverlay = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -3633,7 +3669,7 @@ var DialogOverlay = React77.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React77.forwardRef((_a, ref) => {
+var DialogContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -3648,7 +3684,7 @@ var DialogContent = React77.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-sui-bg-default transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-sui-bg-state-ghost-hover data-[state=open]:text-sui-text-muted", children: [
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-sui-bg-default transition-opacity [@media(hover:hover)]:hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-sui-bg-state-ghost-hover data-[state=open]:text-sui-text-muted", children: [
             /* @__PURE__ */ jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -3692,7 +3728,7 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React77.forwardRef((_a, ref) => {
+var DialogTitle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
@@ -3706,7 +3742,7 @@ var DialogTitle = React77.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React77.forwardRef((_a, ref) => {
+var DialogDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
@@ -3717,7 +3753,7 @@ var DialogDescription = React77.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var Command = React77.forwardRef((_a, ref) => {
+var Command = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1,
@@ -3735,7 +3771,7 @@ var CommandDialog = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-card max-w-[560px]", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-sui-text-hint [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_i]:h-4 [&_[cmdk-input-wrapper]_i]:w-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_i]:h-4 [&_[cmdk-item]_i]:w-4", children }) }) }));
 };
-var CommandInput = React77.forwardRef((_a, ref) => {
+var CommandInput = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-sui-border-default px-3", "cmdk-input-wrapper": "", children: [
     /* @__PURE__ */ jsx("i", { className: "ri-search-line mr-2 shrink-0 text-icon-default-muted" }),
@@ -3752,7 +3788,7 @@ var CommandInput = React77.forwardRef((_a, ref) => {
   ] });
 });
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React77.forwardRef((_a, ref) => {
+var CommandList = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.List,
@@ -3763,7 +3799,7 @@ var CommandList = React77.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React77.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React78.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   __spreadValues({
     ref,
@@ -3771,7 +3807,7 @@ var CommandEmpty = React77.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }, props)
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React77.forwardRef((_a, ref) => {
+var CommandGroup = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.Group,
@@ -3785,7 +3821,7 @@ var CommandGroup = React77.forwardRef((_a, ref) => {
   );
 });
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React77.forwardRef((_a, ref) => {
+var CommandSeparator = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.Separator,
@@ -3796,7 +3832,7 @@ var CommandSeparator = React77.forwardRef((_a, ref) => {
   );
 });
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React77.forwardRef((_a, ref) => {
+var CommandItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.Item,
@@ -3859,7 +3895,7 @@ var sliderHandleVariants = cva(
     }
   }
 );
-var SliderHandle = React77.forwardRef(
+var SliderHandle = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, state, value, showTooltip = false } = _b, props = __objRest(_b, ["className", "state", "value", "showTooltip"]);
     const isDisabled = state === "disabled";
@@ -3922,7 +3958,7 @@ function buildHistogramPath(data, width, height) {
   path += ` L ${width} ${height} Z`;
   return path;
 }
-var DataRangeSlider = React77.forwardRef(
+var DataRangeSlider = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3953,15 +3989,18 @@ var DataRangeSlider = React77.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React77.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React77.useState(null);
-    const [focusedHandle, setFocusedHandle] = React77.useState(null);
-    const clipId = React77.useId();
+    const trackRef = React78.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React78.useState(null);
+    const [focusedHandle, setFocusedHandle] = React78.useState(null);
+    const clipId = React78.useId();
     const [rangeMin, rangeMax] = value;
     const pctMin = percent(rangeMin, min, max);
     const pctMax = percent(rangeMax, min, max);
-    const fmt = (v) => formatValue ? formatValue(v) : `${v}`;
-    const getValueFromPointer = React77.useCallback(
+    const fmt = React78.useCallback(
+      (v) => formatValue ? formatValue(v) : `${v}`,
+      [formatValue]
+    );
+    const getValueFromPointer = React78.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -3972,7 +4011,7 @@ var DataRangeSlider = React77.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React77.useCallback(
+    const closestHandle = React78.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -3980,7 +4019,7 @@ var DataRangeSlider = React77.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React77.useCallback(
+    const updateValue = React78.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp(newVal, min, rangeMax);
@@ -3992,7 +4031,7 @@ var DataRangeSlider = React77.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React77.useCallback(
+    const handlePointerDown = React78.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -4004,7 +4043,7 @@ var DataRangeSlider = React77.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React77.useCallback(
+    const handlePointerMove = React78.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -4012,10 +4051,10 @@ var DataRangeSlider = React77.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React77.useCallback(() => {
+    const handlePointerUp = React78.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React77.useCallback(
+    const makeKeyHandler = React78.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -4043,7 +4082,7 @@ var DataRangeSlider = React77.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React77.useMemo(() => {
+    const tickLabels = React78.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -4054,7 +4093,7 @@ var DataRangeSlider = React77.forwardRef(
     }, [pointLabels, pointCount, min, max, fmt]);
     const chartWidth = 320;
     const chartHeight = 32;
-    const histogramPath = React77.useMemo(
+    const histogramPath = React78.useMemo(
       () => buildHistogramPath(data, chartWidth, chartHeight),
       [data]
     );
@@ -4201,7 +4240,7 @@ DataRangeSlider.displayName = "DataRangeSlider";
 var labelVariants = cva(
   "text-sm font-medium leading-5 text-sui-text-default"
 );
-var Label = React77.forwardRef((_a, ref) => {
+var Label = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, required, supportText, tailIcon, children } = _b, props = __objRest(_b, ["className", "required", "supportText", "tailIcon", "children"]);
   const hasTail = !!(supportText || tailIcon);
   return /* @__PURE__ */ jsxs(
@@ -4262,7 +4301,7 @@ var inputContainerVariants = cva(
     }
   }
 );
-var InputField = React77.forwardRef(
+var InputField = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4287,7 +4326,9 @@ var InputField = React77.forwardRef(
       tailAddon,
       inputClassName,
       disabled,
-      id
+      id,
+      spellCheck,
+      autoComplete
     } = _b, props = __objRest(_b, [
       "className",
       "inputStyle",
@@ -4311,14 +4352,29 @@ var InputField = React77.forwardRef(
       "tailAddon",
       "inputClassName",
       "disabled",
-      "id"
+      "id",
+      "spellCheck",
+      "autoComplete"
     ]);
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const inputId = id || generatedId;
     const captionId = `${inputId}-caption`;
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasInlineTags = !!(tags && tags.length > 0 && !hasError && !disabled);
+    const innerRef = React78.useRef(null);
+    React78.useImperativeHandle(ref, () => innerRef.current, []);
+    const focusInputOnDecorationClick = (e) => {
+      var _a2;
+      if (disabled) return;
+      const target = e.target;
+      if (target === innerRef.current) return;
+      if (target.closest('button, a, input, textarea, select, [role="button"]')) return;
+      e.preventDefault();
+      (_a2 = innerRef.current) == null ? void 0 : _a2.focus();
+    };
+    const resolvedSpellCheck = spellCheck != null ? spellCheck : false;
+    const resolvedAutoComplete = autoComplete != null ? autoComplete : "off";
     return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
       label && /* @__PURE__ */ jsx(
         Label,
@@ -4333,6 +4389,7 @@ var InputField = React77.forwardRef(
       /* @__PURE__ */ jsxs(
         "div",
         {
+          onPointerDown: focusInputOnDecorationClick,
           className: cn(
             inputContainerVariants({ inputStyle }),
             // Inline tags: let content determine height; standard: fix height to prevent inflation
@@ -4385,13 +4442,15 @@ var InputField = React77.forwardRef(
                   /* @__PURE__ */ jsx(
                     "input",
                     __spreadValues({
-                      ref,
+                      ref: innerRef,
                       id: inputId,
                       disabled,
                       required,
+                      spellCheck: resolvedSpellCheck,
+                      autoComplete: resolvedAutoComplete,
                       "aria-invalid": hasError || void 0,
                       "aria-describedby": helperText ? captionId : void 0,
-                      className: cn("flex-1 min-w-0 bg-transparent px-1 text-sm leading-5 outline-none text-sui-text-default placeholder:text-sui-text-hint", inputClassName)
+                      className: cn("flex-1 min-w-0 bg-transparent px-1 text-base md:text-sm leading-5 outline-none text-sui-text-default placeholder:text-sui-text-hint", inputClassName)
                     }, props)
                   )
                 ] }),
@@ -4425,14 +4484,17 @@ var InputField = React77.forwardRef(
                 /* @__PURE__ */ jsx(
                   "input",
                   __spreadValues({
-                    ref,
+                    ref: innerRef,
                     id: inputId,
                     disabled,
                     required,
+                    spellCheck: resolvedSpellCheck,
+                    autoComplete: resolvedAutoComplete,
                     "aria-invalid": hasError || void 0,
                     "aria-describedby": helperText ? captionId : void 0,
                     className: cn(
-                      "flex-1 min-w-0 bg-transparent px-1 text-sm leading-5 outline-none",
+                      // #29 16px on touch (prevents iOS zoom), 14px on md+
+                      "flex-1 min-w-0 bg-transparent px-1 text-base md:text-sm leading-5 outline-none",
                       "text-sui-text-default",
                       "placeholder:text-sui-text-muted",
                       disabled && "text-sui-text-hint placeholder:text-sui-text-hint cursor-not-allowed",
@@ -4493,7 +4555,7 @@ var InputField = React77.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-var DataRangeSliderInput = React77.forwardRef(
+var DataRangeSliderInput = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4613,7 +4675,7 @@ var DataRangeSliderInput = React77.forwardRef(
 DataRangeSliderInput.displayName = "DataRangeSliderInput";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React77.forwardRef((_a, ref) => {
+var PopoverContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -4636,7 +4698,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React77.useState(false);
+  const [open, setOpen] = React78.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4677,7 +4739,7 @@ function DateRangePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React77.useState(false);
+  const [open, setOpen] = React78.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4728,7 +4790,7 @@ function DatePickerWithPresets({
   className,
   disabled
 }) {
-  const [open, setOpen] = React77.useState(false);
+  const [open, setOpen] = React78.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4761,7 +4823,7 @@ function DatePickerWithPresets({
             className: cn(
               "w-[150px] rounded-xs px-2 py-1 text-left text-sm font-medium transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight",
-              isSelected ? "bg-sui-bg-state-brand text-sui-text-white-default" : "bg-sui-bg-state-ghost text-sui-text-muted hover:bg-sui-bg-state-ghost-hover"
+              isSelected ? "bg-sui-bg-state-brand text-sui-text-white-default" : "bg-sui-bg-state-ghost text-sui-text-muted [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover"
             ),
             children: preset.label
           },
@@ -4849,7 +4911,7 @@ function RequirementItem({ label, met }) {
     )
   ] });
 }
-var InputCaption = React77.forwardRef(
+var InputCaption = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "default",
@@ -4940,9 +5002,9 @@ var InputCaption = React77.forwardRef(
             className
           )
         }, props), {
-          children: React77.Children.map(children, (child) => {
-            if (!React77.isValidElement(child)) return child;
-            return React77.cloneElement(child, {
+          children: React78.Children.map(children, (child) => {
+            if (!React78.isValidElement(child)) return child;
+            return React78.cloneElement(child, {
               className: cn(
                 "flex-1",
                 child.props.className
@@ -5043,43 +5105,49 @@ function DateSegment({
   const handleFocus = (e) => {
     e.target.select();
   };
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref: segmentRef,
-      id,
-      type: "text",
-      inputMode: "numeric",
-      maxLength,
-      size: maxLength,
-      placeholder,
-      value,
-      disabled,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      "aria-label": placeholder === "dd" ? "Day" : placeholder === "mm" ? "Month" : "Year",
-      className: cn(
-        // Layout — min-w-0 prevents browser input minimum width
-        "min-w-0 shrink-0 rounded-xs px-1 text-center",
-        // Explicit widths — enough room for text + px-1 padding
-        maxLength === 4 ? "w-12" : "w-8",
-        // Typography
-        "text-sm font-normal leading-5",
-        // Background
-        "bg-sui-bg-state-ghost",
-        // Text colors
-        value ? "text-sui-text-default" : "text-sui-text-muted",
-        // Hover
-        "hover:bg-sui-bg-state-ghost-hover",
-        // Focus
-        "focus:bg-sui-bg-state-ghost-hover focus:outline-none",
-        // Disabled
-        "disabled:pointer-events-none disabled:text-sui-text-hint disabled:bg-transparent",
-        // Placeholder
-        "placeholder:text-sui-text-muted disabled:placeholder:text-sui-text-hint"
-      )
-    }
+  return (
+    // Web Interface Guidelines #4 spellcheck/autocomplete off, #29 16px on touch,
+    // #28 hover only on pointer devices (avoid sticky hover after tap on touch).
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: segmentRef,
+        id,
+        type: "text",
+        inputMode: "numeric",
+        spellCheck: false,
+        autoComplete: "off",
+        maxLength,
+        size: maxLength,
+        placeholder,
+        value,
+        disabled,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        "aria-label": placeholder === "dd" ? "Day" : placeholder === "mm" ? "Month" : "Year",
+        className: cn(
+          // Layout — min-w-0 prevents browser input minimum width
+          "min-w-0 shrink-0 rounded-xs px-1 text-center",
+          // Explicit widths — enough room for text + px-1 padding
+          maxLength === 4 ? "w-12" : "w-8",
+          // Typography — 16px on touch (prevents iOS zoom on focus), 14px on md+
+          "text-base md:text-sm font-normal leading-5 tabular-nums",
+          // Background
+          "bg-sui-bg-state-ghost",
+          // Text colors
+          value ? "text-sui-text-default" : "text-sui-text-muted",
+          // Hover (pointer devices only — no sticky hover after tap)
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
+          // Focus
+          "focus:bg-sui-bg-state-ghost-hover focus:outline-none",
+          // Disabled
+          "disabled:pointer-events-none disabled:text-sui-text-hint disabled:bg-transparent",
+          // Placeholder
+          "placeholder:text-sui-text-muted disabled:placeholder:text-sui-text-hint"
+        )
+      }
+    )
   );
 }
 function DateSegmentGroup({
@@ -5212,38 +5280,38 @@ function DatePickerInput({
   disabled = false,
   className
 }) {
-  const [calendarOpen, setCalendarOpen] = React77.useState(false);
+  const [calendarOpen, setCalendarOpen] = React78.useState(false);
   const hasError = !!error;
   const helperText = hasError ? error : caption;
   const singleSegments = dateToSegments(date);
-  const [singleDay, setSingleDay] = React77.useState(singleSegments.day);
-  const [singleMonth, setSingleMonth] = React77.useState(singleSegments.month);
-  const [singleYear, setSingleYear] = React77.useState(singleSegments.year);
+  const [singleDay, setSingleDay] = React78.useState(singleSegments.day);
+  const [singleMonth, setSingleMonth] = React78.useState(singleSegments.month);
+  const [singleYear, setSingleYear] = React78.useState(singleSegments.year);
   const startSegments = dateToSegments(dateRange == null ? void 0 : dateRange.from);
   const endSegments = dateToSegments(dateRange == null ? void 0 : dateRange.to);
-  const [startDay, setStartDay] = React77.useState(startSegments.day);
-  const [startMonth, setStartMonth] = React77.useState(startSegments.month);
-  const [startYear, setStartYear] = React77.useState(startSegments.year);
-  const [endDay, setEndDay] = React77.useState(endSegments.day);
-  const [endMonth, setEndMonth] = React77.useState(endSegments.month);
-  const [endYear, setEndYear] = React77.useState(endSegments.year);
-  const singleDayRef = React77.useRef(null);
-  const singleMonthRef = React77.useRef(null);
-  const singleYearRef = React77.useRef(null);
-  const startDayRef = React77.useRef(null);
-  const startMonthRef = React77.useRef(null);
-  const startYearRef = React77.useRef(null);
-  const endDayRef = React77.useRef(null);
-  const endMonthRef = React77.useRef(null);
-  const endYearRef = React77.useRef(null);
-  const calendarIconRef = React77.useRef(null);
-  React77.useEffect(() => {
+  const [startDay, setStartDay] = React78.useState(startSegments.day);
+  const [startMonth, setStartMonth] = React78.useState(startSegments.month);
+  const [startYear, setStartYear] = React78.useState(startSegments.year);
+  const [endDay, setEndDay] = React78.useState(endSegments.day);
+  const [endMonth, setEndMonth] = React78.useState(endSegments.month);
+  const [endYear, setEndYear] = React78.useState(endSegments.year);
+  const singleDayRef = React78.useRef(null);
+  const singleMonthRef = React78.useRef(null);
+  const singleYearRef = React78.useRef(null);
+  const startDayRef = React78.useRef(null);
+  const startMonthRef = React78.useRef(null);
+  const startYearRef = React78.useRef(null);
+  const endDayRef = React78.useRef(null);
+  const endMonthRef = React78.useRef(null);
+  const endYearRef = React78.useRef(null);
+  const calendarIconRef = React78.useRef(null);
+  React78.useEffect(() => {
     const s = dateToSegments(date);
     setSingleDay(s.day);
     setSingleMonth(s.month);
     setSingleYear(s.year);
   }, [date]);
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     const s = dateToSegments(dateRange == null ? void 0 : dateRange.from);
     setStartDay(s.day);
     setStartMonth(s.month);
@@ -5253,7 +5321,7 @@ function DatePickerInput({
     setEndMonth(e.month);
     setEndYear(e.year);
   }, [dateRange]);
-  const handleSingleSegmentChange = React77.useCallback(
+  const handleSingleSegmentChange = React78.useCallback(
     (day, month, year) => {
       const d = segmentsToDate(day, month, year);
       if (day.length === 2 && month.length === 2 && year.length === 4) {
@@ -5264,7 +5332,7 @@ function DatePickerInput({
     },
     [onDateChange]
   );
-  const handleRangeSegmentChange = React77.useCallback(
+  const handleRangeSegmentChange = React78.useCallback(
     (sd, sm, sy, ed, em, ey) => {
       const from = segmentsToDate(sd, sm, sy);
       const to = segmentsToDate(ed, em, ey);
@@ -5339,7 +5407,7 @@ function DatePickerInput({
       setCalendarOpen(false);
     }
   };
-  const inputId = React77.useId();
+  const inputId = React78.useId();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsxs(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
@@ -5453,7 +5521,7 @@ function DatePickerInput({
                   "flex shrink-0 items-center justify-center size-5 mr-2",
                   "rounded-xs transition-colors",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight",
-                  "hover:bg-sui-bg-state-ghost-hover",
+                  "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
                   "disabled:pointer-events-none"
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -5525,7 +5593,7 @@ var lineVariants = cva("h-px min-w-0 flex-1 border-t border-sui-border-default",
     lineStyle: "solid"
   }
 });
-var Divider = React77.forwardRef(
+var Divider = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5583,7 +5651,7 @@ var Divider = React77.forwardRef(
                 "shadow-default",
                 "relative overflow-hidden",
                 "transition-colors duration-150",
-                "hover:bg-sui-bg-state-secondary-hover",
+                "[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover",
                 "active:bg-sui-bg-state-secondary-press",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default"
               ),
@@ -5600,7 +5668,7 @@ var Divider = React77.forwardRef(
   }
 );
 Divider.displayName = "Divider";
-var MenuSearchInput = React77.forwardRef(
+var MenuSearchInput = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5621,44 +5689,45 @@ var MenuSearchInput = React77.forwardRef(
       "defaultValue",
       "id"
     ]);
-    const internalRef = React77.useRef(null);
+    var _a2, _b2;
+    const internalRef = React78.useRef(null);
     const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React77.useState(
+    const [internalValue, setInternalValue] = React78.useState(
       defaultValue || ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value) : internalValue;
     const hasValue = currentValue.length > 0;
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const inputId = id || generatedId;
     const handleChange = (e) => {
-      var _a2;
+      var _a3;
       if (!isControlled) {
         setInternalValue(e.target.value);
       }
-      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+      (_a3 = props.onChange) == null ? void 0 : _a3.call(props, e);
     };
     const handleClear = () => {
-      var _a2;
+      var _a3;
       if (!isControlled) {
         setInternalValue("");
       }
       onClear == null ? void 0 : onClear();
       if (inputRef && "current" in inputRef) {
-        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
       }
     };
-    const [isFocused, setIsFocused] = React77.useState(false);
+    const [isFocused, setIsFocused] = React78.useState(false);
     const showShortcut = !!shortcutKey && !hasValue && !isFocused && !disabled;
     const handleFocus = (e) => {
-      var _a2;
+      var _a3;
       setIsFocused(true);
-      (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
+      (_a3 = props.onFocus) == null ? void 0 : _a3.call(props, e);
     };
     const handleBlur = (e) => {
-      var _a2;
+      var _a3;
       setIsFocused(false);
-      (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+      (_a3 = props.onBlur) == null ? void 0 : _a3.call(props, e);
     };
     return /* @__PURE__ */ jsx(
       "div",
@@ -5701,13 +5770,15 @@ var MenuSearchInput = React77.forwardRef(
                   type: "search",
                   role: "searchbox",
                   disabled,
+                  spellCheck: (_a2 = props.spellCheck) != null ? _a2 : false,
+                  autoComplete: (_b2 = props.autoComplete) != null ? _b2 : "off",
                   value: isControlled ? value : internalValue,
                   onChange: handleChange,
                   onFocus: handleFocus,
                   onBlur: handleBlur,
                   "aria-label": props["aria-label"] || "Search menu",
                   className: cn(
-                    "flex-1 min-w-0 bg-transparent px-1 text-sm leading-5 outline-none",
+                    "flex-1 min-w-0 bg-transparent px-1 text-base md:text-sm leading-5 outline-none",
                     "font-normal",
                     "text-sui-text-default",
                     "placeholder:text-sui-text-hint",
@@ -5739,7 +5810,7 @@ var MenuSearchInput = React77.forwardRef(
                     "flex size-5 shrink-0 items-center justify-center",
                     "rounded-xs transition-colors",
                     "text-icon-default-muted",
-                    "hover:text-icon-default-subtle",
+                    "[@media(hover:hover)]:hover:text-icon-default-subtle",
                     "active:text-icon-default",
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight"
                   ),
@@ -5760,7 +5831,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React77.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.SubTrigger,
@@ -5784,7 +5855,7 @@ var DropdownMenuSubTrigger = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React77.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.SubContent,
@@ -5799,7 +5870,7 @@ var DropdownMenuSubContent = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React77.forwardRef((_a, ref) => {
+var DropdownMenuContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4, search, searchValue, onSearchChange, onSearchClear, searchPlaceholder = "Search", children } = _b, props = __objRest(_b, ["className", "sideOffset", "search", "searchValue", "onSearchChange", "onSearchClear", "searchPlaceholder", "children"]);
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -5837,7 +5908,7 @@ var DropdownMenuContent = React77.forwardRef((_a, ref) => {
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React77.forwardRef((_a, ref) => {
+var DropdownMenuItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, variant = "default" } = _b, props = __objRest(_b, ["className", "inset", "variant"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
@@ -5858,7 +5929,7 @@ var DropdownMenuItem = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React77.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.CheckboxItem,
@@ -5880,7 +5951,7 @@ var DropdownMenuCheckboxItem = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React77.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.RadioItem,
@@ -5901,7 +5972,7 @@ var DropdownMenuRadioItem = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React77.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Label,
@@ -5916,7 +5987,7 @@ var DropdownMenuLabel = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React77.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Separator,
@@ -5945,7 +6016,7 @@ var DropdownMenuShortcut = (_a) => {
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuCaption = React77.forwardRef((_a, ref) => {
+var DropdownMenuCaption = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "p",
@@ -5960,7 +6031,7 @@ var DropdownMenuCaption = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCaption.displayName = "DropdownMenuCaption";
-var DropdownMenuUserbar = React77.forwardRef((_a, ref) => {
+var DropdownMenuUserbar = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, name, email, avatar, badge } = _b, props = __objRest(_b, ["className", "name", "email", "avatar", "badge"]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -5985,7 +6056,7 @@ var DropdownMenuUserbar = React77.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuUserbar.displayName = "DropdownMenuUserbar";
-var DropdownMenuLargeItem = React77.forwardRef((_a, ref) => {
+var DropdownMenuLargeItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, label, caption, icon, badge, tailIcon } = _b, props = __objRest(_b, ["className", "label", "caption", "icon", "badge", "tailIcon"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.Item,
@@ -6026,7 +6097,7 @@ var emptyStateVariants = cva(
     }
   }
 );
-var EmptyState = React77.forwardRef(
+var EmptyState = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6084,14 +6155,15 @@ var EmptyState = React77.forwardRef(
 EmptyState.displayName = "EmptyState";
 function EmptyStateText({
   title,
-  description
+  description,
+  titleAs: TitleTag = "h3"
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-center w-full", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-5 text-sui-text-subtle w-full", children: title }),
+    /* @__PURE__ */ jsx(TitleTag, { className: "text-sm font-medium leading-5 text-sui-text-subtle w-full m-0", children: title }),
     /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-sui-text-muted w-full", children: description })
   ] });
 }
-var FileUploadArea = React77.forwardRef(
+var FileUploadArea = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6116,8 +6188,8 @@ var FileUploadArea = React77.forwardRef(
       "onDrop",
       "onDragOver"
     ]);
-    const [isDragOver, setIsDragOver] = React77.useState(false);
-    const handleDragOver = React77.useCallback(
+    const [isDragOver, setIsDragOver] = React78.useState(false);
+    const handleDragOver = React78.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6126,10 +6198,10 @@ var FileUploadArea = React77.forwardRef(
       },
       [disabled, onDragOver]
     );
-    const handleDragLeave = React77.useCallback(() => {
+    const handleDragLeave = React78.useCallback(() => {
       setIsDragOver(false);
     }, []);
-    const handleDrop = React77.useCallback(
+    const handleDrop = React78.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6138,11 +6210,11 @@ var FileUploadArea = React77.forwardRef(
       },
       [disabled, onDrop]
     );
-    const handleClick = React77.useCallback(() => {
+    const handleClick = React78.useCallback(() => {
       if (disabled) return;
       onClick == null ? void 0 : onClick();
     }, [disabled, onClick]);
-    const handleKeyDown = React77.useCallback(
+    const handleKeyDown = React78.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -6171,7 +6243,7 @@ var FileUploadArea = React77.forwardRef(
           // Focus
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default",
           // Hover (not disabled)
-          !disabled && "hover:bg-sui-bg-state-secondary-hover cursor-pointer",
+          !disabled && "[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover cursor-pointer",
           // Drag-over state
           !disabled && isDragOver && "bg-sui-bg-state-secondary-hover",
           // Disabled
@@ -6258,7 +6330,7 @@ var progressBarVariants = cva(
   }
 );
 var SEGMENT_COUNT = 10;
-var ProgressBar = React77.forwardRef(
+var ProgressBar = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6280,7 +6352,7 @@ var ProgressBar = React77.forwardRef(
     const clampedValue = Math.min(100, Math.max(0, value != null ? value : 0));
     const displayPercentage = `${Math.round(clampedValue)}%`;
     const filledSegments = Math.round(clampedValue / 100 * SEGMENT_COUNT);
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const labelId = `${generatedId}-label`;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -6298,7 +6370,7 @@ var ProgressBar = React77.forwardRef(
                 children: labelText
               }
             ) }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: displayPercentage }) })
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-normal leading-5 tabular-nums text-sui-text-muted", children: displayPercentage }) })
           ] }),
           variant === "dashed" ? (
             /* Dashed variant: 10 individual segments */
@@ -6366,7 +6438,7 @@ var statusLabel = {
   uploading: "Uploading...",
   failed: "Error"
 };
-var FileUploadCard = React77.forwardRef(
+var FileUploadCard = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6578,7 +6650,7 @@ var lineColorMap = {
   warning: "bg-sui-bg-basic-orange-accent",
   error: "bg-sui-bg-basic-red-accent"
 };
-var InlineTips = React77.forwardRef(
+var InlineTips = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6680,7 +6752,7 @@ function validateFile(file, accept, maxSize) {
   }
   return null;
 }
-var FileUpload = React77.forwardRef(
+var FileUpload = React78.forwardRef(
   ({
     files = [],
     onFilesAdded,
@@ -6701,37 +6773,55 @@ var FileUpload = React77.forwardRef(
     icon,
     className
   }, ref) => {
-    const inputRef = React77.useRef(null);
-    const [errors, setErrors] = React77.useState([]);
-    const thumbnailCache = React77.useRef(/* @__PURE__ */ new Map());
-    React77.useEffect(() => {
+    const inputRef = React78.useRef(null);
+    const [errors, setErrors] = React78.useState([]);
+    const [thumbnails, setThumbnails] = React78.useState(
+      {}
+    );
+    const thumbnailsRef = React78.useRef(thumbnails);
+    React78.useEffect(() => {
+      thumbnailsRef.current = thumbnails;
+    }, [thumbnails]);
+    React78.useEffect(() => {
       if (!autoPreview) return;
-      const cache = thumbnailCache.current;
-      for (const f of files) {
-        if (!f.thumbnail && !cache.has(f.id)) {
-          const url = generateThumbnail(f.file);
-          if (url) cache.set(f.id, url);
+      setThumbnails((prev) => {
+        let next = prev;
+        let changed = false;
+        for (const f of files) {
+          if (!f.thumbnail && !next[f.id]) {
+            const url = generateThumbnail(f.file);
+            if (url) {
+              if (!changed) {
+                next = __spreadValues({}, prev);
+                changed = true;
+              }
+              next[f.id] = url;
+            }
+          }
         }
-      }
-      const currentIds = new Set(files.map((f) => f.id));
-      for (const [id, url] of cache) {
-        if (!currentIds.has(id)) {
-          URL.revokeObjectURL(url);
-          cache.delete(id);
+        const currentIds = new Set(files.map((f) => f.id));
+        for (const id of Object.keys(prev)) {
+          if (!currentIds.has(id)) {
+            URL.revokeObjectURL(prev[id]);
+            if (!changed) {
+              next = __spreadValues({}, prev);
+              changed = true;
+            }
+            delete next[id];
+          }
         }
-      }
+        return changed ? next : prev;
+      });
     }, [files, autoPreview]);
-    React77.useEffect(() => {
-      const cache = thumbnailCache.current;
+    React78.useEffect(() => {
       return () => {
-        for (const url of cache.values()) {
+        for (const url of Object.values(thumbnailsRef.current)) {
           URL.revokeObjectURL(url);
         }
-        cache.clear();
       };
     }, []);
     const resolvedDescription = description != null ? description : generateDescription(accept, maxSize, maxFiles);
-    const processFiles = React77.useCallback(
+    const processFiles = React78.useCallback(
       (fileList) => {
         const newFiles = Array.from(fileList);
         const validationErrors = [];
@@ -6759,11 +6849,11 @@ var FileUpload = React77.forwardRef(
       },
       [files.length, maxFiles, accept, maxSize, onFilesAdded]
     );
-    const handleClick = React77.useCallback(() => {
+    const handleClick = React78.useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.click();
     }, []);
-    const handleInputChange = React77.useCallback(
+    const handleInputChange = React78.useCallback(
       (e) => {
         if (e.target.files && e.target.files.length > 0) {
           processFiles(e.target.files);
@@ -6772,7 +6862,7 @@ var FileUpload = React77.forwardRef(
       },
       [processFiles]
     );
-    const handleDrop = React77.useCallback(
+    const handleDrop = React78.useCallback(
       (e) => {
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
           processFiles(e.dataTransfer.files);
@@ -6780,10 +6870,10 @@ var FileUpload = React77.forwardRef(
       },
       [processFiles]
     );
-    const dismissError = React77.useCallback((index) => {
+    const dismissError = React78.useCallback((index) => {
       setErrors((prev) => prev.filter((_, i) => i !== index));
     }, []);
-    const handlePaste = React77.useCallback(
+    const handlePaste = React78.useCallback(
       (e) => {
         var _a;
         if (disabled || !pasteEnabled) return;
@@ -6804,7 +6894,7 @@ var FileUpload = React77.forwardRef(
       },
       [disabled, pasteEnabled, processFiles]
     );
-    const handleCancel = React77.useCallback(
+    const handleCancel = React78.useCallback(
       (id) => {
         const uploadFile = files.find((f) => f.id === id);
         if (uploadFile == null ? void 0 : uploadFile.abortController) {
@@ -6880,7 +6970,7 @@ var FileUpload = React77.forwardRef(
                 fileSize: formatBytes(uploadFile.file.size),
                 state: uploadFile.state,
                 size: cardSize,
-                thumbnail: (_a = uploadFile.thumbnail) != null ? _a : autoPreview ? thumbnailCache.current.get(uploadFile.id) : void 0,
+                thumbnail: (_a = uploadFile.thumbnail) != null ? _a : autoPreview ? thumbnails[uploadFile.id] : void 0,
                 progress: uploadFile.progress,
                 onRemove: uploadFile.state === "uploading" && onCancel ? () => handleCancel(uploadFile.id) : onRemove ? () => onRemove(uploadFile.id) : void 0,
                 onRetry: uploadFile.state === "failed" && onRetry ? () => onRetry(uploadFile.id) : void 0,
@@ -6921,7 +7011,7 @@ var ariaSortMap = {
   desc: "descending",
   none: "none"
 };
-var GridTableHeaderItem = React77.forwardRef(
+var GridTableHeaderItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7023,7 +7113,7 @@ var gridTableRowVariants = cva(
     }
   }
 );
-var GridTableRow = React77.forwardRef(
+var GridTableRow = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsx(
@@ -7039,7 +7129,7 @@ var GridTableRow = React77.forwardRef(
   }
 );
 GridTableRow.displayName = "GridTableRow";
-var GridTableCell = React77.forwardRef(
+var GridTableCell = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, bordered = true, children } = _b, props = __objRest(_b, ["className", "bordered", "children"]);
     return /* @__PURE__ */ jsx(
@@ -7083,7 +7173,7 @@ var gridTableSlotItemVariants = cva(
     }
   }
 );
-var GridTableSlotItem = React77.forwardRef(
+var GridTableSlotItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7194,7 +7284,8 @@ var GridTableSlotItem = React77.forwardRef(
 );
 GridTableSlotItem.displayName = "GridTableSlotItem";
 var stepperNumberVariants = cva(
-  "relative flex items-center justify-center overflow-hidden rounded-full border border-sui-border-darker font-semibold shadow-default transition-colors duration-200",
+  // tabular-nums keeps step counter from jiggling between numbers (Web Interface Guidelines #19)
+  "relative flex items-center justify-center overflow-hidden rounded-full border border-sui-border-darker font-semibold tabular-nums shadow-default transition-colors duration-200",
   {
     variants: {
       size: {
@@ -7230,7 +7321,7 @@ var stepperNumberVariants = cva(
     }
   }
 );
-var StepperNumber = React77.forwardRef(
+var StepperNumber = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size, color, number = "1" } = _b, props = __objRest(_b, ["className", "size", "color", "number"]);
     return /* @__PURE__ */ jsxs(
@@ -7269,7 +7360,7 @@ var stepperIconVariants = cva(
     }
   }
 );
-var StepperIcon = React77.forwardRef(
+var StepperIcon = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "dot-large", icon } = _b, props = __objRest(_b, ["className", "variant", "icon"]);
     return /* @__PURE__ */ jsxs(
@@ -7323,7 +7414,7 @@ function ConnectorLine({ success }) {
     }
   );
 }
-var HorizontalStepperItem = React77.forwardRef(
+var HorizontalStepperItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7448,7 +7539,7 @@ var HorizontalStepperItem = React77.forwardRef(
   }
 );
 HorizontalStepperItem.displayName = "HorizontalStepperItem";
-var HorizontalStepper = React77.forwardRef(
+var HorizontalStepper = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7523,13 +7614,15 @@ var HorizontalStepper = React77.forwardRef(
   }
 );
 HorizontalStepper.displayName = "HorizontalStepper";
-var Input = React77.forwardRef(
+var Input = React78.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+    var _b = _a, { className, type, spellCheck, autoComplete } = _b, props = __objRest(_b, ["className", "type", "spellCheck", "autoComplete"]);
     return /* @__PURE__ */ jsx(
       "input",
       __spreadValues({
         type,
+        spellCheck: spellCheck != null ? spellCheck : false,
+        autoComplete: autoComplete != null ? autoComplete : "off",
         className: cn(
           "flex h-10 w-full rounded-md border border-sui-border-darker bg-sui-bg-input px-3 py-2 text-base ring-offset-sui-bg-default file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-sui-text-default placeholder:text-sui-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-sui-text-hint disabled:pointer-events-none md:text-sm",
           className
@@ -7561,7 +7654,7 @@ var inputButtonVariants = cva(
       inputButtonStyle: {
         default: [
           "bg-sui-bg-state-ghost",
-          "hover:bg-sui-bg-state-ghost-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
           "active:bg-sui-bg-state-ghost-press",
           "text-sui-text-default",
           "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
@@ -7570,10 +7663,10 @@ var inputButtonVariants = cva(
         ],
         muted: [
           "bg-sui-bg-state-ghost",
-          "hover:bg-sui-bg-state-ghost-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
           "active:bg-sui-bg-state-ghost-press",
           "text-sui-text-muted",
-          "hover:text-sui-text-default",
+          "[@media(hover:hover)]:hover:text-sui-text-default",
           "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
           "disabled:text-sui-text-hint",
           "[&:disabled_i]:text-icon-default-disabled [&:disabled_svg]:text-icon-default-disabled"
@@ -7581,7 +7674,7 @@ var inputButtonVariants = cva(
         inline: [
           "bg-transparent",
           "text-sui-text-muted",
-          "hover:text-sui-text-default",
+          "[@media(hover:hover)]:hover:text-sui-text-default",
           "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
           "disabled:text-sui-text-hint",
           "[&:disabled_i]:text-icon-default-disabled [&:disabled_svg]:text-icon-default-disabled"
@@ -7613,8 +7706,8 @@ var inputButtonVariants = cva(
     }
   }
 );
-var iconOnlyHoverClasses = "hover:[&_i]:text-icon-default-subtle hover:[&_svg]:text-icon-default-subtle active:[&_i]:text-icon-default-subtle active:[&_svg]:text-icon-default-subtle";
-var InputButton = React77.forwardRef(
+var iconOnlyHoverClasses = "[@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle active:[&_i]:text-icon-default-subtle active:[&_svg]:text-icon-default-subtle";
+var InputButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7649,9 +7742,7 @@ var InputButton = React77.forwardRef(
     const isIconOnly = variant === "icon-only";
     const isShortcut = variant === "shortcut";
     const isTags = variant === "tags";
-    if (process.env.NODE_ENV !== "production" && isIconOnly && !props["aria-label"]) {
-      console.warn("InputButton: icon-only variant requires an `aria-label` for accessibility.");
-    }
+    useDevWarnIconOnlyAriaLabel(isIconOnly, props["aria-label"], props["aria-labelledby"], "InputButton");
     const a11yProps = {};
     if (isShortcut && shortcutKey && !props["aria-keyshortcuts"]) {
       a11yProps["aria-keyshortcuts"] = shortcutKey;
@@ -7748,7 +7839,7 @@ var InputButton = React77.forwardRef(
   }
 );
 InputButton.displayName = "InputButton";
-var InputStepper = React77.forwardRef(
+var InputStepper = React78.forwardRef(
   ({ onIncrement, onDecrement, disabled, className }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -7769,7 +7860,7 @@ var InputStepper = React77.forwardRef(
               className: cn(
                 "flex flex-1 w-full min-h-0 items-center justify-center",
                 "transition-colors",
-                "hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
+                "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
                 "focus-visible:outline-none focus-visible:bg-sui-bg-state-ghost-hover",
                 "disabled:pointer-events-none",
                 disabled ? "[&_i]:text-icon-default-disabled [&_svg]:text-icon-default-disabled" : "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted"
@@ -7791,7 +7882,7 @@ var InputStepper = React77.forwardRef(
               className: cn(
                 "flex flex-1 w-full min-h-0 items-center justify-center",
                 "transition-colors",
-                "hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
+                "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
                 "focus-visible:outline-none focus-visible:bg-sui-bg-state-ghost-hover",
                 "disabled:pointer-events-none",
                 disabled ? "[&_i]:text-icon-default-disabled [&_svg]:text-icon-default-disabled" : "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted"
@@ -7805,7 +7896,7 @@ var InputStepper = React77.forwardRef(
   }
 );
 InputStepper.displayName = "InputStepper";
-var NavigationMenu = React77.forwardRef((_a, ref) => {
+var NavigationMenu = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
@@ -7824,7 +7915,7 @@ var NavigationMenu = React77.forwardRef((_a, ref) => {
   );
 });
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React77.forwardRef((_a, ref) => {
+var NavigationMenuList = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.List,
@@ -7840,9 +7931,9 @@ var NavigationMenuList = React77.forwardRef((_a, ref) => {
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium text-sui-text-default transition-colors hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-default focus:bg-sui-bg-state-ghost-hover focus:text-sui-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default disabled:text-sui-text-hint disabled:pointer-events-none data-[state=open]:text-sui-text-default data-[state=open]:bg-sui-bg-state-ghost-hover"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium text-sui-text-default transition-colors [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-default focus:bg-sui-bg-state-ghost-hover focus:text-sui-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default disabled:text-sui-text-hint disabled:pointer-events-none data-[state=open]:text-sui-text-default data-[state=open]:bg-sui-bg-state-ghost-hover"
 );
-var NavigationMenuTrigger = React77.forwardRef((_a, ref) => {
+var NavigationMenuTrigger = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Trigger,
@@ -7865,7 +7956,7 @@ var NavigationMenuTrigger = React77.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React77.forwardRef((_a, ref) => {
+var NavigationMenuContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Content,
@@ -7880,7 +7971,7 @@ var NavigationMenuContent = React77.forwardRef((_a, ref) => {
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React77.forwardRef((_a, ref) => {
+var NavigationMenuViewport = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Viewport,
@@ -7894,7 +7985,7 @@ var NavigationMenuViewport = React77.forwardRef((_a, ref) => {
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React77.forwardRef((_a, ref) => {
+var NavigationMenuIndicator = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Indicator,
@@ -7927,8 +8018,8 @@ var pageItemVariants = cva(
           "inline-flex items-center justify-center",
           "size-8 min-h-8 min-w-8",
           "rounded-sm overflow-clip cursor-pointer",
-          // Typography
-          "font-sans font-medium text-sm leading-5 text-center whitespace-nowrap",
+          // Typography — tabular-nums keeps page numbers from jiggling as values change (Web Interface Guidelines #19)
+          "font-sans font-medium text-sm leading-5 text-center whitespace-nowrap tabular-nums",
           // Default state
           "bg-sui-bg-state-ghost text-sui-text-hint",
           // Hover state
@@ -7965,7 +8056,7 @@ var activeDotClasses = [
   "bg-sui-bg-basic-blue-accent",
   "[@media(hover:hover)]:hover:bg-sui-bg-basic-blue-accent"
 ].join(" ");
-var PageItem = React77.forwardRef(
+var PageItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", active = false, label = "0", disabled, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled", "asChild"]);
     const Comp = asChild ? Slot : "button";
@@ -8000,7 +8091,7 @@ var Pagination = (_a) => {
   );
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React77.forwardRef((_a, ref) => {
+var PaginationContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -8011,7 +8102,7 @@ var PaginationContent = React77.forwardRef((_a, ref) => {
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React77.forwardRef((_a, ref) => {
+var PaginationItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("li", __spreadValues({ ref, className: cn("", className) }, props));
 });
@@ -8132,7 +8223,7 @@ function getPageRange(currentPage, totalPages, maxVisible) {
   }
   return pages;
 }
-var Paginator = React77.forwardRef(
+var Paginator = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8312,7 +8403,7 @@ var Paginator = React77.forwardRef(
   }
 );
 Paginator.displayName = "Paginator";
-var Progress = React77.forwardRef((_a, ref) => {
+var Progress = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
   return /* @__PURE__ */ jsx(
     ProgressPrimitive2.Root,
@@ -8362,7 +8453,7 @@ var arcStrokeVarMap = {
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
-var RadialProgressBar = React77.forwardRef(
+var RadialProgressBar = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8464,7 +8555,8 @@ var RadialProgressBar = React77.forwardRef(
             {
               "aria-hidden": "true",
               className: cn(
-                "absolute text-sm font-medium leading-5 text-center select-none",
+                // tabular-nums keeps percentage from jiggling as value changes (Web Interface Guidelines #19)
+                "absolute text-sm font-medium leading-5 tabular-nums text-center select-none",
                 textVariantMap[variant != null ? variant : "default"],
                 isHalf ? "bottom-0" : ""
               ),
@@ -8481,7 +8573,7 @@ var RadialProgressBar = React77.forwardRef(
   }
 );
 RadialProgressBar.displayName = "RadialProgressBar";
-var RadioGroup2 = React77.forwardRef((_a, ref) => {
+var RadioGroup2 = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
@@ -8508,10 +8600,10 @@ var radioButtonVariants = cva(
     "data-[state=checked]:bg-sui-bg-checkbox-active",
     "data-[state=checked]:border-sui-bg-checkbox-active",
     // Hover unchecked: stronger border
-    "hover:data-[state=unchecked]:border-sui-border-strong",
+    "[@media(hover:hover)]:hover:data-[state=unchecked]:border-sui-border-strong",
     // Hover checked: hover bg + matching border
-    "hover:data-[state=checked]:bg-sui-bg-checkbox-active-hover",
-    "hover:data-[state=checked]:border-sui-bg-checkbox-active-hover",
+    "[@media(hover:hover)]:hover:data-[state=checked]:bg-sui-bg-checkbox-active-hover",
+    "[@media(hover:hover)]:hover:data-[state=checked]:border-sui-bg-checkbox-active-hover",
     // Focus ring (Figma: 1px accent-inverted + 3px highlight)
     "focus-visible:outline-none",
     "focus-visible:shadow-misc-focus",
@@ -8541,7 +8633,7 @@ var radioButtonVariants = cva(
     }
   }
 );
-var RadioButton = React77.forwardRef((_a, ref) => {
+var RadioButton = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxs(
     RadioGroupPrimitive.Item,
@@ -8581,7 +8673,7 @@ var RadioButton = React77.forwardRef((_a, ref) => {
   );
 });
 RadioButton.displayName = "RadioButton";
-var RadioCardGroup = React77.forwardRef((_a, ref) => {
+var RadioCardGroup = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
@@ -8630,7 +8722,7 @@ var radioButtonCardVariants = cva(
     }
   }
 );
-var RadioButtonCard = React77.forwardRef(
+var RadioButtonCard = React78.forwardRef(
   ({
     title,
     description,
@@ -8644,7 +8736,7 @@ var RadioButtonCard = React77.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const titleId = `radio-card-title-${generatedId}`;
     const descriptionId = `radio-card-desc-${generatedId}`;
     const isHorizontal = layout === "horizontal";
@@ -8752,9 +8844,9 @@ var RadioButtonCard = React77.forwardRef(
   }
 );
 RadioButtonCard.displayName = "RadioButtonCard";
-var RadioButtonList = React77.forwardRef(
+var RadioButtonList = React78.forwardRef(
   ({ className, divider = true, value, defaultValue, onValueChange, disabled, children }, ref) => {
-    const items = React77.Children.toArray(children);
+    const items = React78.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       RadioGroup2,
       {
@@ -8798,7 +8890,7 @@ var radioButtonWithTextVariants = cva(
     }
   }
 );
-var RadioButtonWithText = React77.forwardRef(
+var RadioButtonWithText = React78.forwardRef(
   ({
     label,
     description,
@@ -8809,7 +8901,7 @@ var RadioButtonWithText = React77.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const radioId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -8864,7 +8956,7 @@ var RadioButtonWithText = React77.forwardRef(
   }
 );
 RadioButtonWithText.displayName = "RadioButtonWithText";
-var ScrollArea = React77.forwardRef((_a, ref) => {
+var ScrollArea = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
@@ -8881,7 +8973,7 @@ var ScrollArea = React77.forwardRef((_a, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React77.forwardRef((_a, ref) => {
+var ScrollBar = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -8903,7 +8995,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React77.forwardRef((_a, ref) => {
+var SelectTrigger = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
@@ -8926,7 +9018,7 @@ var SelectTrigger = React77.forwardRef((_a, ref) => {
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React77.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollUpButton,
@@ -8942,7 +9034,7 @@ var SelectScrollUpButton = React77.forwardRef((_a, ref) => {
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React77.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollDownButton,
@@ -8958,7 +9050,7 @@ var SelectScrollDownButton = React77.forwardRef((_a, ref) => {
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React77.forwardRef((_a, ref) => {
+var SelectContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
@@ -8991,7 +9083,7 @@ var SelectContent = React77.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React77.forwardRef((_a, ref) => {
+var SelectLabel = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
@@ -9005,7 +9097,7 @@ var SelectLabel = React77.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React77.forwardRef((_a, ref) => {
+var SelectItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Item,
@@ -9030,7 +9122,7 @@ var SelectItem = React77.forwardRef((_a, ref) => {
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React77.forwardRef((_a, ref) => {
+var SelectSeparator = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Separator,
@@ -9041,7 +9133,7 @@ var SelectSeparator = React77.forwardRef((_a, ref) => {
   );
 });
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var SelectMenu = React77.forwardRef(
+var SelectMenu = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9072,19 +9164,19 @@ var SelectMenu = React77.forwardRef(
     ]);
     var _a2;
     const indicator = selectType === "checkbox" ? "checkbox" : selectType === "radio" ? "radio" : selectType === "default" ? "checkmark" : "none";
-    const hasChildren = React77.Children.count(children) > 0;
-    const generatedId = React77.useId();
+    const hasChildren = React78.Children.count(children) > 0;
+    const generatedId = React78.useId();
     const listId = `${generatedId}-list`;
-    const listRef = React77.useRef(null);
-    const [activeIndex, setActiveIndex] = React77.useState(-1);
+    const listRef = React78.useRef(null);
+    const [activeIndex, setActiveIndex] = React78.useState(-1);
     const activeItemId = activeIndex >= 0 ? `${listId}-item-${activeIndex}` : void 0;
-    const getItems = React77.useCallback(() => {
+    const getItems = React78.useCallback(() => {
       if (!listRef.current) return [];
       return Array.from(
         listRef.current.querySelectorAll('[role="option"]')
       );
     }, []);
-    const handleKeyDown = React77.useCallback(
+    const handleKeyDown = React78.useCallback(
       (e) => {
         var _a3;
         const items = getItems();
@@ -9167,8 +9259,8 @@ var SelectMenu = React77.forwardRef(
                 "focus-visible:outline-none"
               ),
               style: listMaxHeight ? { maxHeight: listMaxHeight } : void 0,
-              children: hasChildren ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React77.Children.map(children, (child, index) => {
-                if (React77.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
+              children: hasChildren ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React78.Children.map(children, (child, index) => {
+                if (React78.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
                   const itemProps = child.props;
                   const overrides = {};
                   if (indicator !== "none" && itemProps.indicator === void 0) {
@@ -9185,7 +9277,7 @@ var SelectMenu = React77.forwardRef(
                     overrides["data-active"] = "true";
                   }
                   if (Object.keys(overrides).length > 0) {
-                    return React77.cloneElement(
+                    return React78.cloneElement(
                       child,
                       overrides
                     );
@@ -9210,7 +9302,7 @@ var SelectMenu = React77.forwardRef(
   }
 );
 SelectMenu.displayName = "SelectMenu";
-var SelectMenuFooterButton = React77.forwardRef((_a, ref) => {
+var SelectMenuFooterButton = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, icon = "ri-add-line", children = "Add new", disabled } = _b, props = __objRest(_b, ["className", "icon", "children", "disabled"]);
   return /* @__PURE__ */ jsxs(
     "button",
@@ -9224,7 +9316,7 @@ var SelectMenuFooterButton = React77.forwardRef((_a, ref) => {
         "px-2.5 py-2",
         // Colors
         "bg-sui-bg-state-ghost",
-        "hover:bg-sui-bg-state-ghost-hover",
+        "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
         "active:bg-sui-bg-state-ghost-press",
         "text-sm font-medium leading-5 text-sui-text-default",
         "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
@@ -9253,7 +9345,7 @@ var SelectMenuFooterButton = React77.forwardRef((_a, ref) => {
   );
 });
 SelectMenuFooterButton.displayName = "SelectMenuFooterButton";
-var SelectInput = React77.forwardRef(
+var SelectInput = React78.forwardRef(
   ({
     label,
     required,
@@ -9285,10 +9377,10 @@ var SelectInput = React77.forwardRef(
     footer,
     className
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React77.useState(false);
+    const [internalOpen, setInternalOpen] = React78.useState(false);
     const isControlled = controlledOpen !== void 0;
     const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = React77.useCallback(
+    const handleOpenChange = React78.useCallback(
       (next) => {
         if (disabled) return;
         if (!isControlled) setInternalOpen(next);
@@ -9296,7 +9388,7 @@ var SelectInput = React77.forwardRef(
       },
       [disabled, isControlled, onOpenChange]
     );
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasTags = tags && tags.length > 0;
@@ -9323,7 +9415,6 @@ var SelectInput = React77.forwardRef(
             "aria-expanded": isOpen,
             "aria-haspopup": "listbox",
             "aria-controls": `${generatedId}-listbox`,
-            "aria-multiselectable": multiSelect || void 0,
             "aria-invalid": hasError || void 0,
             "aria-describedby": helperText ? `${generatedId}-caption` : void 0,
             disabled,
@@ -9341,8 +9432,8 @@ var SelectInput = React77.forwardRef(
               // Padding
               "px-2",
               // Hover
-              !isSoft && "hover:border-sui-border-strong",
-              isSoft && "hover:bg-sui-bg-input-soft",
+              !isSoft && "[@media(hover:hover)]:hover:border-sui-border-strong",
+              isSoft && "[@media(hover:hover)]:hover:bg-sui-bg-input-soft",
               // Focus / Open
               "data-[state=open]:bg-sui-bg-input data-[state=open]:shadow-input-focus",
               "focus-visible:outline-none focus-visible:shadow-input-focus",
@@ -9353,7 +9444,7 @@ var SelectInput = React77.forwardRef(
               hasError && "data-[state=open]:shadow-destructive-focus",
               // Disabled
               disabled && "bg-sui-bg-input-disabled shadow-none cursor-not-allowed",
-              disabled && !isSoft && "border-sui-border-default hover:border-sui-border-default",
+              disabled && !isSoft && "border-sui-border-default [@media(hover:hover)]:hover:border-sui-border-default",
               disabled && isSoft && "border-sui-border-default"
             ),
             children: [
@@ -9376,7 +9467,7 @@ var SelectInput = React77.forwardRef(
                   children: leadIcon
                 }
               ) : null,
-              hasTags ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(React77.Fragment, { children: [
+              hasTags ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(React78.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -9439,6 +9530,8 @@ var SelectInput = React77.forwardRef(
           PopoverPrimitive.Content,
           __spreadProps(__spreadValues({
             id: `${generatedId}-listbox`,
+            role: "listbox",
+            "aria-multiselectable": multiSelect || void 0,
             align: "start",
             sideOffset: 6,
             className: cn(
@@ -9491,7 +9584,7 @@ var SelectInput = React77.forwardRef(
   }
 );
 SelectInput.displayName = "SelectInput";
-var SelectMenuItem = React77.forwardRef(
+var SelectMenuItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9527,7 +9620,7 @@ var SelectMenuItem = React77.forwardRef(
           // Layout
           "group relative flex w-full cursor-default select-none items-center gap-1.5 rounded-xs p-1.5 text-sm outline-none transition-colors",
           // Hover / Active (keyboard navigation)
-          "hover:bg-sui-bg-state-ghost-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
           "data-[active=true]:bg-sui-bg-state-ghost-hover",
           // Focus
           "focus-visible:bg-sui-bg-state-ghost-hover focus-visible:outline-none",
@@ -9655,7 +9748,7 @@ var SelectMenuItem = React77.forwardRef(
   }
 );
 SelectMenuItem.displayName = "SelectMenuItem";
-var SelectMenuLabel = React77.forwardRef(
+var SelectMenuLabel = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
     return /* @__PURE__ */ jsxs(
@@ -9677,7 +9770,7 @@ var SelectMenuLabel = React77.forwardRef(
   }
 );
 SelectMenuLabel.displayName = "SelectMenuLabel";
-var SelectMenuDescription = React77.forwardRef((_a, ref) => {
+var SelectMenuDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "p",
@@ -9691,7 +9784,7 @@ var SelectMenuDescription = React77.forwardRef((_a, ref) => {
   );
 });
 SelectMenuDescription.displayName = "SelectMenuDescription";
-var SelectMenuSeparator = React77.forwardRef((_a, ref) => {
+var SelectMenuSeparator = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -9703,7 +9796,7 @@ var SelectMenuSeparator = React77.forwardRef((_a, ref) => {
   );
 });
 SelectMenuSeparator.displayName = "SelectMenuSeparator";
-var SelectMenuLargeItem = React77.forwardRef(
+var SelectMenuLargeItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9733,7 +9826,7 @@ var SelectMenuLargeItem = React77.forwardRef(
         disabled,
         className: cn(
           "group relative flex w-full cursor-default select-none items-center rounded-xs px-2 py-1.5 outline-none transition-colors",
-          "hover:bg-sui-bg-state-ghost-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover",
           "focus-visible:bg-sui-bg-state-ghost-hover focus-visible:outline-none",
           "disabled:pointer-events-none",
           className
@@ -9799,7 +9892,7 @@ var SelectMenuLargeItem = React77.forwardRef(
   }
 );
 SelectMenuLargeItem.displayName = "SelectMenuLargeItem";
-var Separator3 = React77.forwardRef(
+var Separator3 = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsx(
@@ -9822,7 +9915,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React77.forwardRef((_a, ref) => {
+var SheetOverlay = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -9853,7 +9946,7 @@ var sheetVariants = cva(
     }
   }
 );
-var SheetContent = React77.forwardRef((_a, ref) => {
+var SheetContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
@@ -9865,7 +9958,7 @@ var SheetContent = React77.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-sui-bg-default transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-sui-bg-state-ghost-hover", children: [
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-sui-bg-default transition-opacity [@media(hover:hover)]:hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-sui-bg-state-ghost-hover", children: [
             /* @__PURE__ */ jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -9909,7 +10002,7 @@ var SheetFooter = (_a) => {
   );
 };
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React77.forwardRef((_a, ref) => {
+var SheetTitle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
@@ -9920,7 +10013,7 @@ var SheetTitle = React77.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React77.forwardRef((_a, ref) => {
+var SheetDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
@@ -9933,8 +10026,8 @@ var SheetDescription = React77.forwardRef((_a, ref) => {
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React77.useState(void 0);
-  React77.useEffect(() => {
+  const [isMobile, setIsMobile] = React78.useState(void 0);
+  React78.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -9964,15 +10057,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React77.createContext(null);
+var SidebarContext = React78.createContext(null);
 function useSidebar() {
-  const context = React77.useContext(SidebarContext);
+  const context = React78.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React77.forwardRef(
+var SidebarProvider = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultOpen = true,
@@ -9990,10 +10083,10 @@ var SidebarProvider = React77.forwardRef(
       "children"
     ]);
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React77.useState(false);
-    const [_open, _setOpen] = React77.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React78.useState(false);
+    const [_open, _setOpen] = React78.useState(defaultOpen);
     const open = openProp != null ? openProp : _open;
-    const setOpen = React77.useCallback(
+    const setOpen = React78.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -10005,10 +10098,10 @@ var SidebarProvider = React77.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React77.useCallback(() => {
+    const toggleSidebar = React78.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React77.useEffect(() => {
+    React78.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -10019,7 +10112,7 @@ var SidebarProvider = React77.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React77.useMemo(
+    const contextValue = React78.useMemo(
       () => ({
         state,
         open,
@@ -10050,7 +10143,7 @@ var SidebarProvider = React77.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React77.forwardRef(
+var Sidebar = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       side = "left",
@@ -10149,7 +10242,7 @@ var Sidebar = React77.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React77.forwardRef((_a, ref) => {
+var SidebarTrigger = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
@@ -10174,7 +10267,7 @@ var SidebarTrigger = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React77.forwardRef((_a, ref) => {
+var SidebarRail = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsx(
@@ -10187,10 +10280,10 @@ var SidebarRail = React77.forwardRef((_a, ref) => {
       onClick: toggleSidebar,
       title: "Toggle Sidebar",
       className: cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] [@media(hover:hover)]:hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:[@media(hover:hover)]:hover:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -10199,7 +10292,7 @@ var SidebarRail = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React77.forwardRef((_a, ref) => {
+var SidebarInset = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "main",
@@ -10214,7 +10307,7 @@ var SidebarInset = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React77.forwardRef((_a, ref) => {
+var SidebarInput = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Input,
@@ -10229,7 +10322,7 @@ var SidebarInput = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React77.forwardRef((_a, ref) => {
+var SidebarHeader = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10241,7 +10334,7 @@ var SidebarHeader = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React77.forwardRef((_a, ref) => {
+var SidebarFooter = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10253,7 +10346,7 @@ var SidebarFooter = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React77.forwardRef((_a, ref) => {
+var SidebarSeparator = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Separator3,
@@ -10265,7 +10358,7 @@ var SidebarSeparator = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React77.forwardRef((_a, ref) => {
+var SidebarContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10280,7 +10373,7 @@ var SidebarContent = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React77.forwardRef((_a, ref) => {
+var SidebarGroup = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10292,7 +10385,7 @@ var SidebarGroup = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React77.forwardRef((_a, ref) => {
+var SidebarGroupLabel = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx(
@@ -10309,7 +10402,7 @@ var SidebarGroupLabel = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React77.forwardRef((_a, ref) => {
+var SidebarGroupAction = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
@@ -10318,7 +10411,7 @@ var SidebarGroupAction = React77.forwardRef((_a, ref) => {
       ref,
       "data-sidebar": "group-action",
       className: cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform [@media(hover:hover)]:hover:bg-sidebar-accent [@media(hover:hover)]:hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -10328,7 +10421,7 @@ var SidebarGroupAction = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React77.forwardRef((_a, ref) => {
+var SidebarGroupContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10340,7 +10433,7 @@ var SidebarGroupContent = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React77.forwardRef((_a, ref) => {
+var SidebarMenu = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -10352,7 +10445,7 @@ var SidebarMenu = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React77.forwardRef((_a, ref) => {
+var SidebarMenuItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "li",
@@ -10365,12 +10458,12 @@ var SidebarMenuItem = React77.forwardRef((_a, ref) => {
 });
 SidebarMenuItem.displayName = "SidebarMenuItem";
 var sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] [@media(hover:hover)]:hover:bg-sidebar-accent [@media(hover:hover)]:hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:[@media(hover:hover)]:hover:bg-sidebar-accent data-[state=open]:[@media(hover:hover)]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-sui-bg-default shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+        default: "[@media(hover:hover)]:hover:bg-sidebar-accent [@media(hover:hover)]:hover:text-sidebar-accent-foreground",
+        outline: "bg-sui-bg-default shadow-[0_0_0_1px_hsl(var(--sidebar-border))] [@media(hover:hover)]:hover:bg-sidebar-accent [@media(hover:hover)]:hover:text-sidebar-accent-foreground [@media(hover:hover)]:hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
       },
       size: {
         default: "h-8 text-sm",
@@ -10384,7 +10477,7 @@ var sidebarMenuButtonVariants = cva(
     }
   }
 );
-var SidebarMenuButton = React77.forwardRef(
+var SidebarMenuButton = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       asChild = false,
@@ -10435,7 +10528,7 @@ var SidebarMenuButton = React77.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React77.forwardRef((_a, ref) => {
+var SidebarMenuAction = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false, showOnHover = false } = _b, props = __objRest(_b, ["className", "asChild", "showOnHover"]);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
@@ -10444,7 +10537,7 @@ var SidebarMenuAction = React77.forwardRef((_a, ref) => {
       ref,
       "data-sidebar": "menu-action",
       className: cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform [@media(hover:hover)]:hover:bg-sidebar-accent [@media(hover:hover)]:hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -10458,7 +10551,7 @@ var SidebarMenuAction = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React77.forwardRef((_a, ref) => {
+var SidebarMenuBadge = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10478,11 +10571,13 @@ var SidebarMenuBadge = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React77.forwardRef((_a, ref) => {
+var SidebarMenuSkeleton = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const width = React77.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const id = React78.useId();
+  const width = React78.useMemo(() => {
+    const hash = id.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
+    return `${hash % 40 + 50}%`;
+  }, [id]);
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
@@ -10513,7 +10608,7 @@ var SidebarMenuSkeleton = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React77.forwardRef((_a, ref) => {
+var SidebarMenuSub = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -10529,12 +10624,12 @@ var SidebarMenuSub = React77.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React77.forwardRef((_a, ref) => {
+var SidebarMenuSubItem = React78.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx("li", __spreadValues({ ref }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React77.forwardRef((_a, ref) => {
+var SidebarMenuSubButton = React78.forwardRef((_a, ref) => {
   var _b = _a, { asChild = false, size = "md", isActive, className } = _b, props = __objRest(_b, ["asChild", "size", "isActive", "className"]);
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
@@ -10545,7 +10640,7 @@ var SidebarMenuSubButton = React77.forwardRef((_a, ref) => {
       "data-size": size,
       "data-active": isActive,
       className: cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring [@media(hover:hover)]:hover:bg-sidebar-accent [@media(hover:hover)]:hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
@@ -10574,7 +10669,7 @@ var sidebarCardVariants = cva(
     }
   }
 );
-var SidebarCard = React77.forwardRef(
+var SidebarCard = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsx(
@@ -10613,7 +10708,7 @@ var sidebarMenuItemVariants = cva("", {
     variant: "default"
   }
 });
-var SidebarMenuItem2 = React77.forwardRef(
+var SidebarMenuItem2 = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10809,7 +10904,7 @@ function percent2(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var Slider = React77.forwardRef(
+var Slider = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10842,12 +10937,12 @@ var Slider = React77.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React77.useRef(null);
-    const [isDragging, setIsDragging] = React77.useState(false);
-    const [isFocused, setIsFocused] = React77.useState(false);
+    const trackRef = React78.useRef(null);
+    const [isDragging, setIsDragging] = React78.useState(false);
+    const [isFocused, setIsFocused] = React78.useState(false);
     const pct = percent2(value, min, max);
     const displayValue = formatValue ? formatValue(value) : `${value}`;
-    const getValueFromPointer = React77.useCallback(
+    const getValueFromPointer = React78.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -10858,7 +10953,7 @@ var Slider = React77.forwardRef(
       },
       [min, max, step]
     );
-    const handlePointerDown = React77.useCallback(
+    const handlePointerDown = React78.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -10869,7 +10964,7 @@ var Slider = React77.forwardRef(
       },
       [disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerMove = React77.useCallback(
+    const handlePointerMove = React78.useCallback(
       (e) => {
         if (!isDragging || disabled) return;
         const newValue = getValueFromPointer(e.clientX);
@@ -10877,10 +10972,10 @@ var Slider = React77.forwardRef(
       },
       [isDragging, disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerUp = React77.useCallback(() => {
+    const handlePointerUp = React78.useCallback(() => {
       setIsDragging(false);
     }, []);
-    const handleKeyDown = React77.useCallback(
+    const handleKeyDown = React78.useCallback(
       (e) => {
         if (disabled) return;
         let newValue = value;
@@ -10907,7 +11002,7 @@ var Slider = React77.forwardRef(
       },
       [disabled, value, step, min, max, onValueChange]
     );
-    const tickLabels = React77.useMemo(() => {
+    const tickLabels = React78.useMemo(() => {
       if (pointLabels) return pointLabels;
       const count2 = pointCount;
       const labels = [];
@@ -11001,7 +11096,7 @@ Slider.displayName = "Slider";
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var SliderInput = React77.forwardRef(
+var SliderInput = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11024,8 +11119,8 @@ var SliderInput = React77.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const [internalValue, setInternalValue] = React77.useState(value);
-    React77.useEffect(() => {
+    const [internalValue, setInternalValue] = React78.useState(value);
+    React78.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const commit = (newVal) => {
@@ -11132,7 +11227,7 @@ function percent3(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var SliderRange = React77.forwardRef(
+var SliderRange = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11165,15 +11260,15 @@ var SliderRange = React77.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React77.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React77.useState(null);
-    const [focusedHandle, setFocusedHandle] = React77.useState(null);
+    const trackRef = React78.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React78.useState(null);
+    const [focusedHandle, setFocusedHandle] = React78.useState(null);
     const [rangeMin, rangeMax] = value;
     const pctMin = percent3(rangeMin, min, max);
     const pctMax = percent3(rangeMax, min, max);
     const fmt = (v) => formatValue ? formatValue(v) : `${v}`;
     const displayValue = `${fmt(rangeMin)} \u2013 ${fmt(rangeMax)}`;
-    const getValueFromPointer = React77.useCallback(
+    const getValueFromPointer = React78.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11184,7 +11279,7 @@ var SliderRange = React77.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React77.useCallback(
+    const closestHandle = React78.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -11192,7 +11287,7 @@ var SliderRange = React77.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React77.useCallback(
+    const updateValue = React78.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp4(newVal, min, rangeMax);
@@ -11204,7 +11299,7 @@ var SliderRange = React77.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React77.useCallback(
+    const handlePointerDown = React78.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11216,7 +11311,7 @@ var SliderRange = React77.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React77.useCallback(
+    const handlePointerMove = React78.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -11224,10 +11319,10 @@ var SliderRange = React77.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React77.useCallback(() => {
+    const handlePointerUp = React78.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React77.useCallback(
+    const makeKeyHandler = React78.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -11255,7 +11350,7 @@ var SliderRange = React77.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React77.useMemo(() => {
+    const tickLabels = React78.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -11372,7 +11467,7 @@ var SliderRange = React77.forwardRef(
   }
 );
 SliderRange.displayName = "SliderRange";
-var SliderRangeInput = React77.forwardRef(
+var SliderRangeInput = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11514,7 +11609,7 @@ var Toaster = (_a) => {
   );
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React77.forwardRef((_a, ref) => {
+var ToastViewport = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Viewport,
@@ -11542,7 +11637,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React77.forwardRef((_a, ref) => {
+var Toast = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
@@ -11553,28 +11648,28 @@ var Toast = React77.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React77.forwardRef((_a, ref) => {
+var ToastAction = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Action,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-sui-bg-default transition-colors hover:bg-sui-bg-state-ghost-hover focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:text-sui-text-hint disabled:pointer-events-none group-[.destructive]:border-sui-border-default/40 group-[.destructive]:hover:border-sui-bg-state-destructive/30 group-[.destructive]:hover:bg-sui-bg-state-destructive group-[.destructive]:hover:text-sui-text-white-default group-[.destructive]:focus:ring-sui-border-highlight",
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-sui-bg-default transition-colors [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:text-sui-text-hint disabled:pointer-events-none group-[.destructive]:border-sui-border-default/40 group-[.destructive]:[@media(hover:hover)]:hover:border-sui-bg-state-destructive/30 group-[.destructive]:[@media(hover:hover)]:hover:bg-sui-bg-state-destructive group-[.destructive]:[@media(hover:hover)]:hover:text-sui-text-white-default group-[.destructive]:focus:ring-sui-border-highlight",
         className
       )
     }, props)
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React77.forwardRef((_a, ref) => {
+var ToastClose = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Close,
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "absolute right-2 top-2 rounded-md p-1 text-sui-text-default/50 opacity-0 transition-opacity hover:text-sui-text-default focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-sui-text-white-default/70 group-[.destructive]:hover:text-sui-text-white-default group-[.destructive]:focus:ring-sui-border-highlight group-[.destructive]:focus:ring-offset-sui-bg-state-destructive",
+        "absolute right-2 top-2 rounded-md p-1 text-sui-text-default/50 opacity-0 transition-opacity [@media(hover:hover)]:hover:text-sui-text-default focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-sui-text-white-default/70 group-[.destructive]:[@media(hover:hover)]:hover:text-sui-text-white-default group-[.destructive]:focus:ring-sui-border-highlight group-[.destructive]:focus:ring-offset-sui-bg-state-destructive",
         className
       ),
       "toast-close": ""
@@ -11584,7 +11679,7 @@ var ToastClose = React77.forwardRef((_a, ref) => {
   );
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React77.forwardRef((_a, ref) => {
+var ToastTitle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Title,
@@ -11595,7 +11690,7 @@ var ToastTitle = React77.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React77.forwardRef((_a, ref) => {
+var ToastDescription = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Description,
@@ -11700,8 +11795,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React77.useState(memoryState);
-  React77.useEffect(() => {
+  const [state, setState] = React78.useState(memoryState);
+  React78.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -11732,7 +11827,7 @@ function Toaster2() {
     /* @__PURE__ */ jsx(ToastViewport, {})
   ] });
 }
-var Switch = React77.forwardRef((_a, ref) => {
+var Switch = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
@@ -11744,10 +11839,10 @@ var Switch = React77.forwardRef((_a, ref) => {
         "transition-colors duration-150",
         // Unchecked track
         "data-[state=unchecked]:bg-sui-bg-switch-default",
-        "data-[state=unchecked]:hover:bg-sui-bg-switch-default-hover",
+        "data-[state=unchecked]:[@media(hover:hover)]:hover:bg-sui-bg-switch-default-hover",
         // Checked track
         "data-[state=checked]:bg-sui-bg-switch-active",
-        "data-[state=checked]:hover:bg-sui-bg-switch-active-hover",
+        "data-[state=checked]:[@media(hover:hover)]:hover:bg-sui-bg-switch-active-hover",
         // Focus: 1px accent-inverted + 3px highlight (matching Figma box-shadow ring)
         "focus-visible:outline-none",
         "focus-visible:shadow-misc-focus",
@@ -11784,10 +11879,10 @@ var Switch = React77.forwardRef((_a, ref) => {
   );
 });
 Switch.displayName = "Switch";
-var SwitchList = React77.forwardRef(
+var SwitchList = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React77.Children.toArray(children);
+    const items = React78.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -11815,7 +11910,7 @@ var SwitchList = React77.forwardRef(
   }
 );
 SwitchList.displayName = "SwitchList";
-var SwitchWithText = React77.forwardRef(
+var SwitchWithText = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11832,7 +11927,7 @@ var SwitchWithText = React77.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const switchId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -11889,7 +11984,7 @@ var SwitchWithText = React77.forwardRef(
   }
 );
 SwitchWithText.displayName = "SwitchWithText";
-var Table = React77.forwardRef((_a, ref) => {
+var Table = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
     "table",
@@ -11900,12 +11995,12 @@ var Table = React77.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React77.forwardRef((_a, ref) => {
+var TableHeader = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b [&_tr]:border-sui-border-default", className) }, props));
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React77.forwardRef((_a, ref) => {
+var TableBody = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tbody",
@@ -11916,7 +12011,7 @@ var TableBody = React77.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableFooter = React77.forwardRef((_a, ref) => {
+var TableFooter = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tfoot",
@@ -11930,21 +12025,21 @@ var TableFooter = React77.forwardRef((_a, ref) => {
   );
 });
 TableFooter.displayName = "TableFooter";
-var TableRow = React77.forwardRef((_a, ref) => {
+var TableRow = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tr",
     __spreadValues({
       ref,
       className: cn(
-        "border-b border-sui-border-default transition-colors hover:bg-sui-bg-basic-gray-alpha-2 data-[state=selected]:bg-sui-bg-basic-gray-alpha-4",
+        "border-b border-sui-border-default transition-colors [@media(hover:hover)]:hover:bg-sui-bg-basic-gray-alpha-2 data-[state=selected]:bg-sui-bg-basic-gray-alpha-4",
         className
       )
     }, props)
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React77.forwardRef((_a, ref) => {
+var TableHead = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "th",
@@ -11958,7 +12053,7 @@ var TableHead = React77.forwardRef((_a, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React77.forwardRef((_a, ref) => {
+var TableCell = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "td",
@@ -11969,7 +12064,7 @@ var TableCell = React77.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React77.forwardRef((_a, ref) => {
+var TableCaption = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "caption",
@@ -12005,7 +12100,7 @@ var ariaSortMap2 = {
   desc: "descending",
   none: "none"
 };
-var TableHeaderItem = React77.forwardRef(
+var TableHeaderItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12066,7 +12161,7 @@ var TableHeaderItem = React77.forwardRef(
             resizable && /* @__PURE__ */ jsx(
               "div",
               {
-                className: "absolute right-0 top-0 h-full w-1 cursor-col-resize opacity-0 transition-opacity hover:opacity-100 hover:bg-sui-border-highlight z-10",
+                className: "absolute right-0 top-0 h-full w-1 cursor-col-resize opacity-0 transition-opacity [@media(hover:hover)]:hover:opacity-100 [@media(hover:hover)]:hover:bg-sui-border-highlight z-10",
                 onPointerDown: (e) => {
                   e.stopPropagation();
                   onResizeStart == null ? void 0 : onResizeStart(e);
@@ -12121,7 +12216,7 @@ var tableItemVariants = cva("flex items-center px-2", {
     size: "lg"
   }
 });
-var TableItem = React77.forwardRef(
+var TableItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12205,7 +12300,7 @@ var TableItem = React77.forwardRef(
   }
 );
 TableItem.displayName = "TableItem";
-var TablePagination = React77.forwardRef(
+var TablePagination = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12240,7 +12335,7 @@ var TablePagination = React77.forwardRef(
         )
       }, props), {
         children: paginatorVariant === "numbered" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("p", { className: "text-sm font-normal leading-5 text-sui-text-muted whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm font-normal leading-5 tabular-nums text-sui-text-muted whitespace-nowrap", children: [
             startResult,
             "\u2013",
             endResult,
@@ -12282,7 +12377,7 @@ var tableRowSortVariants = cva(
     variants: {
       variant: {
         header: "border-t",
-        default: "hover:bg-sui-bg-basic-gray-alpha-2",
+        default: "[@media(hover:hover)]:hover:bg-sui-bg-basic-gray-alpha-2",
         hover: "bg-sui-bg-basic-gray-alpha-2",
         selected: "bg-sui-bg-basic-gray-alpha-4"
       }
@@ -12292,7 +12387,7 @@ var tableRowSortVariants = cva(
     }
   }
 );
-var TableRowSort = React77.forwardRef(
+var TableRowSort = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", striped, sticky, children } = _b, props = __objRest(_b, ["className", "variant", "striped", "sticky", "children"]);
     return /* @__PURE__ */ jsx(
@@ -12315,7 +12410,7 @@ var TableRowSort = React77.forwardRef(
 TableRowSort.displayName = "TableRowSort";
 var textWidths = ["w-20", "w-28", "w-24", "w-32", "w-16", "w-26", "w-22", "w-30"];
 var skeletonBg = "bg-sui-bg-basic-gray-alpha-4";
-var TableSkeletonRow = React77.forwardRef(
+var TableSkeletonRow = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, columns, rowCount = 5, size = "sm" } = _b, props = __objRest(_b, ["className", "columns", "rowCount", "size"]);
     return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className, "aria-hidden": "true" }, props), { children: Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsx(TableRowSort, { variant: "default", children: columns.map((col, colIdx) => {
@@ -12365,12 +12460,12 @@ var tabListVariants = cva(
     }
   }
 );
-var TabList = React77.forwardRef((_a, ref) => {
+var TabList = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "pill", shape = "pill", layout, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "layout", "children"]);
   const childShape = variant === "segmented" && shape === "rounded" ? "rounded" : shape;
   const childRadiusOverride = variant === "segmented" && shape === "rounded" ? "rounded-sm" : void 0;
-  const enhancedChildren = React77.Children.map(children, (child) => {
-    if (!React77.isValidElement(child)) return child;
+  const enhancedChildren = React78.Children.map(children, (child) => {
+    if (!React78.isValidElement(child)) return child;
     const extraProps = {
       shape: childShape
     };
@@ -12378,7 +12473,7 @@ var TabList = React77.forwardRef((_a, ref) => {
       const existingClassName = child.props.className;
       extraProps.className = cn(existingClassName, childRadiusOverride);
     }
-    return React77.cloneElement(child, extraProps);
+    return React78.cloneElement(child, extraProps);
   });
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -12408,8 +12503,8 @@ var tabItemVariants = cva(
     // Icon colors default
     "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
     // Hover state
-    "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-default",
-    "hover:[&_i]:text-icon-default-subtle hover:[&_svg]:text-icon-default-subtle",
+    "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-default",
+    "[@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle",
     // Active/selected state (Radix data attribute)
     // Border simulated via inset box-shadow (spread:1) to match Figma and avoid height increase
     "data-[state=active]:bg-sui-bg-state-secondary",
@@ -12440,7 +12535,7 @@ var tabItemVariants = cva(
     }
   }
 );
-var TabItem = React77.forwardRef((_a, ref) => {
+var TabItem = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, shape, size } = _b, props = __objRest(_b, ["className", "shape", "size"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Trigger,
@@ -12452,7 +12547,7 @@ var TabItem = React77.forwardRef((_a, ref) => {
 });
 TabItem.displayName = "TabItem";
 var Tabs = TabsPrimitive4.Root;
-var TabsList = React77.forwardRef((_a, ref) => {
+var TabsList = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -12466,7 +12561,7 @@ var TabsList = React77.forwardRef((_a, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive4.List.displayName;
-var TabsTrigger = React77.forwardRef((_a, ref) => {
+var TabsTrigger = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Trigger,
@@ -12480,7 +12575,7 @@ var TabsTrigger = React77.forwardRef((_a, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive4.Trigger.displayName;
-var TabsContent = React77.forwardRef((_a, ref) => {
+var TabsContent = React78.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Content,
@@ -12524,7 +12619,7 @@ var textAreaContainerVariants = cva(
     }
   }
 );
-var TextAreaField = React77.forwardRef(
+var TextAreaField = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12546,7 +12641,9 @@ var TextAreaField = React77.forwardRef(
       id,
       value,
       defaultValue,
-      onChange
+      onChange,
+      spellCheck,
+      autoComplete
     } = _b, props = __objRest(_b, [
       "className",
       "inputStyle",
@@ -12567,9 +12664,11 @@ var TextAreaField = React77.forwardRef(
       "id",
       "value",
       "defaultValue",
-      "onChange"
+      "onChange",
+      "spellCheck",
+      "autoComplete"
     ]);
-    const generatedId = React77.useId();
+    const generatedId = React78.useId();
     const textAreaId = id || generatedId;
     const captionId = `${textAreaId}-caption`;
     const charCountId = `${textAreaId}-charcount`;
@@ -12577,17 +12676,30 @@ var TextAreaField = React77.forwardRef(
     const helperText = hasError ? error : caption;
     const hasActionBar = !!(leadActions || tailActions);
     const showCount = !!(showCharCount && maxLength);
+    const innerRef = React78.useRef(null);
+    React78.useImperativeHandle(ref, () => innerRef.current, []);
+    const focusTextareaOnDecorationClick = (e) => {
+      var _a2;
+      if (disabled) return;
+      const target = e.target;
+      if (target === innerRef.current) return;
+      if (target.closest('button, a, input, textarea, select, [role="button"], [role="toolbar"]')) return;
+      e.preventDefault();
+      (_a2 = innerRef.current) == null ? void 0 : _a2.focus();
+    };
+    const resolvedSpellCheck = spellCheck != null ? spellCheck : false;
+    const resolvedAutoComplete = autoComplete != null ? autoComplete : "off";
     const isResizable = !!(resizable && !compact && !bottomToolbar && !hasActionBar);
     const describedByIds = [
       helperText ? captionId : null,
       showCount ? charCountId : null
     ].filter(Boolean).join(" ") || void 0;
-    const [charCount, setCharCount] = React77.useState(() => {
+    const [charCount, setCharCount] = React78.useState(() => {
       if (value !== void 0) return String(value).length;
       if (defaultValue !== void 0) return String(defaultValue).length;
       return 0;
     });
-    React77.useEffect(() => {
+    React78.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       }
@@ -12610,6 +12722,7 @@ var TextAreaField = React77.forwardRef(
       /* @__PURE__ */ jsx(
         "div",
         {
+          onPointerDown: focusTextareaOnDecorationClick,
           className: cn(
             textAreaContainerVariants({ inputStyle }),
             // overflow-clip clips rounded corners on children; disable when resizable
@@ -12640,11 +12753,13 @@ var TextAreaField = React77.forwardRef(
             /* @__PURE__ */ jsx(
               "textarea",
               __spreadValues({
-                ref,
+                ref: innerRef,
                 id: textAreaId,
                 rows: 1,
                 disabled,
                 required,
+                spellCheck: resolvedSpellCheck,
+                autoComplete: resolvedAutoComplete,
                 maxLength,
                 value,
                 defaultValue,
@@ -12653,7 +12768,8 @@ var TextAreaField = React77.forwardRef(
                 "aria-describedby": describedByIds,
                 className: cn(
                   "flex-1 min-w-0 resize-none overflow-hidden bg-transparent outline-none",
-                  "text-sm leading-5",
+                  // #29 16px on touch (prevents iOS zoom), 14px on md+
+                  "text-base md:text-sm leading-5",
                   "text-sui-text-default",
                   "placeholder:text-sui-text-muted",
                   disabled && "text-sui-text-hint placeholder:text-sui-text-hint cursor-not-allowed"
@@ -12677,10 +12793,12 @@ var TextAreaField = React77.forwardRef(
                   /* @__PURE__ */ jsx(
                     "textarea",
                     __spreadValues({
-                      ref,
+                      ref: innerRef,
                       id: textAreaId,
                       disabled,
                       required,
+                      spellCheck: resolvedSpellCheck,
+                      autoComplete: resolvedAutoComplete,
                       maxLength,
                       value,
                       defaultValue,
@@ -12689,7 +12807,8 @@ var TextAreaField = React77.forwardRef(
                       "aria-describedby": describedByIds,
                       className: cn(
                         "min-h-[60px] w-full bg-transparent outline-none",
-                        "text-sm leading-5",
+                        // #29 16px on touch (prevents iOS zoom), 14px on md+
+                        "text-base md:text-sm leading-5",
                         "text-sui-text-default",
                         "placeholder:text-sui-text-muted",
                         isResizable ? "resize-y overflow-y-auto pr-3 pb-3" : "flex-1 resize-none overflow-hidden",
@@ -12766,11 +12885,12 @@ var TextAreaField = React77.forwardRef(
   }
 );
 TextAreaField.displayName = "TextAreaField";
-var Textarea = React77.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+var Textarea = React78.forwardRef((_a, ref) => {
+  var _b = _a, { className, spellCheck } = _b, props = __objRest(_b, ["className", "spellCheck"]);
   return /* @__PURE__ */ jsx(
     "textarea",
     __spreadValues({
+      spellCheck: spellCheck != null ? spellCheck : false,
       className: cn(
         "flex min-h-[80px] w-full rounded-md border border-sui-border-darker bg-sui-bg-input px-3 py-2 text-base ring-offset-sui-bg-default placeholder:text-sui-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-sui-text-hint disabled:pointer-events-none md:text-sm",
         className
@@ -12794,13 +12914,13 @@ var toggleVariants = cva(
       variant: {
         default: [
           "bg-sui-bg-state-ghost text-sui-text-muted [&_svg]:text-icon-default-muted [&_i]:text-icon-default-muted",
-          "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle",
           "active:bg-sui-bg-state-ghost-press",
           "data-[state=on]:bg-sui-bg-badge-blue data-[state=on]:text-sui-bg-basic-blue-strong data-[state=on]:[&_svg]:text-sui-bg-basic-blue-strong data-[state=on]:[&_i]:text-sui-bg-basic-blue-strong"
         ].join(" "),
         outline: [
           "bg-sui-bg-state-secondary border border-sui-border-darker text-sui-text-muted [&_svg]:text-icon-default-muted [&_i]:text-icon-default-muted shadow-default",
-          "hover:bg-sui-bg-state-secondary-hover hover:text-sui-text-subtle",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover [@media(hover:hover)]:hover:text-sui-text-subtle",
           "active:bg-sui-bg-state-secondary-press",
           "data-[state=on]:bg-sui-bg-badge-blue data-[state=on]:border-sui-border-blue data-[state=on]:text-sui-bg-basic-blue-strong data-[state=on]:[&_svg]:text-sui-bg-basic-blue-strong data-[state=on]:[&_i]:text-sui-bg-basic-blue-strong"
         ].join(" ")
@@ -12818,7 +12938,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React77.forwardRef((_a, ref) => {
+var Toggle = React78.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
   return /* @__PURE__ */ jsx(
     TogglePrimitive.Root,
@@ -12830,7 +12950,7 @@ var Toggle = React77.forwardRef((_a, ref) => {
 });
 Toggle.displayName = TogglePrimitive.Root.displayName;
 function useMergedRef(...refs) {
-  return React77.useCallback((node) => {
+  return React78.useCallback((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref && "current" in ref)
@@ -12859,13 +12979,13 @@ var chipSizeMap = {
   xs: "sm",
   "2xs": "sm"
 };
-var ToggleGroupContext = React77.createContext(null);
+var ToggleGroupContext = React78.createContext(null);
 function useToggleGroup() {
-  const ctx = React77.useContext(ToggleGroupContext);
+  const ctx = React78.useContext(ToggleGroupContext);
   if (!ctx) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
   return ctx;
 }
-var ToggleGroup = React77.forwardRef(
+var ToggleGroup = React78.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -12880,16 +13000,16 @@ var ToggleGroup = React77.forwardRef(
     const controlledValue = "value" in props ? props.value : void 0;
     const defaultValue = "defaultValue" in props ? props.defaultValue : void 0;
     const onValueChange = "onValueChange" in props ? props.onValueChange : void 0;
-    const [internalValue, setInternalValue] = React77.useState(
+    const [internalValue, setInternalValue] = React78.useState(
       defaultValue
     );
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const [rovingFocusValue, setRovingFocusValue] = React77.useState(null);
-    const itemRefs = React77.useRef(/* @__PURE__ */ new Map());
-    const itemValues = React77.useRef([]);
-    const [, notifyRegistration] = React77.useReducer((x) => x + 1, 0);
-    const isActive = React77.useCallback(
+    const [rovingFocusValue, setRovingFocusValue] = React78.useState(null);
+    const itemRefs = React78.useRef(/* @__PURE__ */ new Map());
+    const itemValues = React78.useRef([]);
+    const [, notifyRegistration] = React78.useReducer((x) => x + 1, 0);
+    const isActive = React78.useCallback(
       (itemValue) => {
         if (type === "single") return value === itemValue;
         if (type === "multiple" && Array.isArray(value)) return value.includes(itemValue);
@@ -12897,7 +13017,7 @@ var ToggleGroup = React77.forwardRef(
       },
       [type, value]
     );
-    const toggle = React77.useCallback(
+    const toggle = React78.useCallback(
       (itemValue) => {
         if (type === "single") {
           const newValue = value === itemValue ? void 0 : itemValue;
@@ -12941,7 +13061,7 @@ var ToggleGroup = React77.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React77.forwardRef(
+var ToggleGroupItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: itemValue,
@@ -12976,9 +13096,9 @@ var ToggleGroupItem = React77.forwardRef(
     const disabled = ctx.disabled || itemDisabled;
     const resolvedSize = bgSize != null ? bgSize : "lg";
     const chipSize = chipSizeMap[resolvedSize];
-    const internalRef = React77.useRef(null);
+    const internalRef = React78.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    React77.useEffect(() => {
+    React78.useEffect(() => {
       const el = internalRef.current;
       if (!el) return;
       ctx.itemRefs.current.set(itemValue, el);
@@ -13108,11 +13228,11 @@ var ToggleGroupItem = React77.forwardRef(
           className: cn(
             "inline-flex items-center justify-center select-none transition-colors rounded-none",
             "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-            "focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-sui-border-highlight focus-visible:outline-offset-[1px] focus-visible:z-10",
-            "focus-visible:ring-0 focus-visible:ring-offset-0",
+            // Web Interface Guidelines #42 — focus ring via box-shadow (ring), not outline.
+            "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-sui-border-highlight focus-visible:ring-offset-[1px] focus-visible:z-10",
             // Ghost-like unselected state
             "bg-sui-bg-state-ghost text-sui-text-muted [&_svg]:text-icon-default-muted",
-            "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_svg]:text-icon-default-subtle",
+            "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle",
             "active:bg-sui-bg-state-ghost-press",
             // Selected state
             active && "bg-sui-bg-badge-blue text-sui-bg-basic-blue-strong [&_svg]:text-sui-bg-basic-blue-strong",
@@ -13146,9 +13266,9 @@ var ToggleGroupItem = React77.forwardRef(
         "aria-label": ariaLabel,
         className: cn(
           "rounded-none transition-all duration-200",
-          // Override Chip's ring-based focus ring with outline + z-10 (matches ButtonGroupItem)
-          "focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-sui-border-highlight focus-visible:outline-offset-[1px] focus-visible:z-10",
-          "focus-visible:ring-0 focus-visible:ring-offset-0",
+          // Web Interface Guidelines #42 — focus ring via box-shadow (ring), respects radius.
+          // Overrides Chip's ring with z-10 so it sits above adjacent items.
+          "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-sui-border-highlight focus-visible:ring-offset-[1px] focus-visible:z-10",
           iconOnly ? iconOnlySizeOverrides[resolvedSize] : sizeOverrides[resolvedSize],
           showSeparator && "border-l border-l-sui-border-darker",
           className
@@ -13169,12 +13289,12 @@ var userbarVariants = cva(
         default: [
           "w-full gap-3 p-3",
           "bg-sui-bg-state-ghost border-b border-sui-border-default",
-          "hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
         ],
         compact: [
           "gap-2 p-1 rounded-md",
           "bg-sui-bg-state-ghost",
-          "hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
         ],
         contained: [
           "w-full p-3",
@@ -13195,7 +13315,7 @@ var containedInnerVariants = cva(
     "group-hover:bg-sui-bg-state-secondary-hover group-active:bg-sui-bg-state-secondary-press"
   ]
 );
-var Userbar = React77.forwardRef(
+var Userbar = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13304,7 +13424,7 @@ var Userbar = React77.forwardRef(
   }
 );
 Userbar.displayName = "Userbar";
-var VerticalStepperItem = React77.forwardRef(
+var VerticalStepperItem = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13440,7 +13560,7 @@ var VerticalStepperItem = React77.forwardRef(
   }
 );
 VerticalStepperItem.displayName = "VerticalStepperItem";
-var VerticalStepper = React77.forwardRef(
+var VerticalStepper = React78.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,