@maxsteinwender/sort-ui 1.0.8 → 1.1.1

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React77 = require('react');
+var React78 = require('react');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -52,7 +52,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React77__namespace = /*#__PURE__*/_interopNamespace(React77);
+var React78__namespace = /*#__PURE__*/_interopNamespace(React78);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
@@ -122,11 +122,11 @@ var accordionItemVariants = classVarianceAuthority.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 */
@@ -135,11 +135,11 @@ var accordionItemVariants = classVarianceAuthority.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 */
@@ -148,11 +148,11 @@ var accordionItemVariants = classVarianceAuthority.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"
         ]
       }
     },
@@ -161,7 +161,7 @@ var accordionItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var AccordionItem = React77__namespace.forwardRef((_a, ref) => {
+var AccordionItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Item,
@@ -172,7 +172,7 @@ var AccordionItem = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React77__namespace.forwardRef((_a, ref) => {
+var AccordionTrigger = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionPrimitive__namespace.Trigger,
@@ -194,7 +194,7 @@ var AccordionTrigger = React77__namespace.forwardRef((_a, ref) => {
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React77__namespace.forwardRef((_a, ref) => {
+var AccordionContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Content,
@@ -239,7 +239,7 @@ var alertVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Alert = React77__namespace.forwardRef((_a, ref) => {
+var Alert = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -251,7 +251,7 @@ var Alert = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React77__namespace.forwardRef((_a, ref) => {
+var AlertTitle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "h5",
@@ -262,7 +262,7 @@ var AlertTitle = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React77__namespace.forwardRef((_a, ref) => {
+var AlertDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -273,6 +273,19 @@ var AlertDescription = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDescription.displayName = "AlertDescription";
+function useDevWarnIconOnlyAriaLabel(isIconOnly, ariaLabel, ariaLabelledBy, componentName) {
+  const warnedRef = React78__namespace.useRef(false);
+  React78__namespace.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 = classVarianceAuthority.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
@@ -392,13 +405,13 @@ var loadingTextColorMap = {
   "ghost-muted": "text-sui-text-muted"
 };
 var loadingShadowVariants = /* @__PURE__ */ new Set(["default", "outline", "destructive"]);
-var Button = React77__namespace.forwardRef(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+var Button = React78__namespace.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 ? reactSlot.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];
@@ -463,7 +476,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React77__namespace.forwardRef((_a, ref) => {
+var AlertDialogOverlay = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Overlay,
@@ -478,7 +491,7 @@ var AlertDialogOverlay = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React77__namespace.forwardRef((_a, ref) => {
+var AlertDialogContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
@@ -529,7 +542,7 @@ var AlertDialogFooter = (_a) => {
   );
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React77__namespace.forwardRef((_a, ref) => {
+var AlertDialogTitle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Title,
@@ -540,7 +553,7 @@ var AlertDialogTitle = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React77__namespace.forwardRef((_a, ref) => {
+var AlertDialogDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Description,
@@ -551,7 +564,7 @@ var AlertDialogDescription = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React77__namespace.forwardRef((_a, ref) => {
+var AlertDialogAction = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Action,
@@ -562,7 +575,7 @@ var AlertDialogAction = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React77__namespace.forwardRef((_a, ref) => {
+var AlertDialogCancel = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Cancel,
@@ -601,11 +614,11 @@ var awayIconSize = {
   "lg": "14px",
   "default": "16px"
 };
-var StatusBadge = React77__namespace.forwardRef(
+var StatusBadge = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant, size = "default", src, className } = _b, props = __objRest(_b, ["variant", "size", "src", "className"]);
-    const [imgError, setImgError] = React77__namespace.useState(false);
-    React77__namespace.useEffect(() => {
+    const [imgError, setImgError] = React78__namespace.useState(false);
+    React78__namespace.useEffect(() => {
       setImgError(false);
     }, [src]);
     const sizeClass = containerSize[size];
@@ -818,12 +831,12 @@ function extractInitials(value) {
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
-var AvatarContext = React77__namespace.createContext({
+var AvatarContext = React78__namespace.createContext({
   size: "md",
   shape: "circular",
   color: "gray"
 });
-var Avatar = React77__namespace.forwardRef((_a, ref) => {
+var Avatar = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     size = "md",
@@ -977,7 +990,7 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
   ) });
 });
 Avatar.displayName = "Avatar";
-var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
+var AvatarImage = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Image,
@@ -988,10 +1001,10 @@ var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React77__namespace.forwardRef((_a, ref) => {
+var AvatarFallback = React78__namespace.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__namespace.useContext(AvatarContext);
+  const { size, shape, color } = React78__namespace.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";
@@ -1025,8 +1038,8 @@ var avatarButtonVariants = classVarianceAuthority.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
@@ -1041,7 +1054,7 @@ var avatarButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var AvatarButton = React77__namespace.forwardRef(
+var AvatarButton = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1135,7 +1148,7 @@ var paddingBySize = {
   "2xl": "pr-sui-10",
   "3xl": "pr-sui-12"
 };
-var AvatarGroup = React77__namespace.forwardRef(
+var AvatarGroup = React78__namespace.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";
@@ -1177,7 +1190,7 @@ var AvatarGroup = React77__namespace.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarUpload = React77__namespace.forwardRef(
+var AvatarUpload = React78__namespace.forwardRef(
   ({
     src,
     alt = "",
@@ -1245,8 +1258,8 @@ var controlButtonVariants = classVarianceAuthority.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)
@@ -1270,7 +1283,7 @@ var controlButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var ControlButton = React77__namespace.forwardRef(
+var ControlButton = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1438,12 +1451,12 @@ function Badge(_a) {
     })
   );
 }
-var Breadcrumb = React77__namespace.forwardRef((_a, ref) => {
+var Breadcrumb = React78__namespace.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
 });
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React77__namespace.forwardRef((_a, ref) => {
+var BreadcrumbList = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ol",
@@ -1457,7 +1470,7 @@ var BreadcrumbList = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React77__namespace.forwardRef((_a, ref) => {
+var BreadcrumbItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -1468,7 +1481,7 @@ var BreadcrumbItem = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React77__namespace.forwardRef((_a, ref) => {
+var BreadcrumbLink = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { asChild, className } = _b, props = __objRest(_b, ["asChild", "className"]);
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1476,14 +1489,15 @@ var BreadcrumbLink = React77__namespace.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__namespace.forwardRef((_a, ref) => {
+var BreadcrumbPage = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -1555,7 +1569,7 @@ function BreadcrumbDivider({ variant }) {
     variant === "dot" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
   ] });
 }
-var SortBreadcrumb = React77__namespace.forwardRef(
+var SortBreadcrumb = React78__namespace.forwardRef(
   ({ items, variant = "slash", className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
       "ol",
@@ -1566,7 +1580,7 @@ var SortBreadcrumb = React77__namespace.forwardRef(
         ),
         children: items.map((item, index) => {
           const isLast = index === items.length - 1;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React78__namespace.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
               SortBreadcrumbItem,
               __spreadProps(__spreadValues({}, item), {
@@ -1602,7 +1616,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" } : {}), {
@@ -1657,7 +1672,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__namespace.forwardRef(
+var ButtonGroup = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "lg", orientation = "horizontal", className, children } = _b, props = __objRest(_b, ["size", "orientation", "className", "children"]);
     const isVertical = orientation === "vertical";
@@ -1676,9 +1691,9 @@ var ButtonGroup = React77__namespace.forwardRef(
           className
         )
       }, props), {
-        children: React77__namespace.Children.map(children, (child, index) => {
-          if (React77__namespace.isValidElement(child)) {
-            return React77__namespace.cloneElement(
+        children: React78__namespace.Children.map(children, (child, index) => {
+          if (React78__namespace.isValidElement(child)) {
+            return React78__namespace.cloneElement(
               child,
               {
                 showSeparator: index > 0,
@@ -1697,7 +1712,8 @@ var buttonGroupItemVariants = classVarianceAuthority.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"
   ],
@@ -1719,7 +1735,7 @@ var buttonGroupItemVariants = classVarianceAuthority.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 = [
@@ -1747,7 +1763,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__namespace.forwardRef(
+var ButtonGroupItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1774,6 +1790,7 @@ var ButtonGroupItem = React77__namespace.forwardRef(
     ]);
     const s = size != null ? size : "lg";
     const Comp = asChild ? reactSlot.Slot : "button";
+    useDevWarnIconOnlyAriaLabel(iconOnly, props["aria-label"], props["aria-labelledby"], "ButtonGroupItem");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       __spreadProps(__spreadValues({
@@ -1834,7 +1851,7 @@ var filterButtonVariants = classVarianceAuthority.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__namespace.forwardRef(
+var FilterButton = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1961,7 +1978,7 @@ var FilterButton = React77__namespace.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,
@@ -2003,9 +2020,9 @@ var linkButtonVariants = classVarianceAuthority.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",
@@ -2024,11 +2041,18 @@ var underlineOffsetMap = {
   md: "after:bottom-0",
   lg: "after:bottom-0"
 };
-var LinkButton = React77__namespace.forwardRef(
+var LinkButton = React78__namespace.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 ? reactSlot.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__ */ jsxRuntime.jsxs(
@@ -2040,8 +2064,9 @@ var LinkButton = React77__namespace.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,
@@ -2099,7 +2124,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__namespace.forwardRef(
+var SocialButton = React78__namespace.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 ? reactSlot.Slot : "button";
@@ -2304,8 +2329,8 @@ function CalendarDayButton(_a) {
     "modifiers"
   ]);
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React77__namespace.useRef(null);
-  React77__namespace.useEffect(() => {
+  const ref = React78__namespace.useRef(null);
+  React78__namespace.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -2331,18 +2356,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
@@ -2377,20 +2402,30 @@ var cardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Card = React77__namespace.forwardRef(
+var Card = React78__namespace.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 ? reactSlot.Slot : "div";
     return /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef((_a, ref) => {
+var CardHeader = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2401,7 +2436,7 @@ var CardHeader = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React77__namespace.forwardRef((_a, ref) => {
+var CardTitle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2415,7 +2450,7 @@ var CardTitle = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React77__namespace.forwardRef((_a, ref) => {
+var CardDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2426,12 +2461,12 @@ var CardDescription = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React77__namespace.forwardRef((_a, ref) => {
+var CardContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React77__namespace.forwardRef((_a, ref) => {
+var CardFooter = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2442,7 +2477,7 @@ var CardFooter = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CardFooter.displayName = "CardFooter";
-var CardCover = React77__namespace.forwardRef(
+var CardCover = React78__namespace.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__ */ jsxRuntime.jsx(
@@ -2463,17 +2498,17 @@ var CardCover = React77__namespace.forwardRef(
 );
 CardCover.displayName = "CardCover";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React77__namespace.createContext(null);
+var ChartContext = React78__namespace.createContext(null);
 function useChart() {
-  const context = React77__namespace.useContext(ChartContext);
+  const context = React78__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React77__namespace.forwardRef((_a, ref) => {
+var ChartContainer = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
-  const uniqueId = React77__namespace.useId();
+  const uniqueId = React78__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2520,7 +2555,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive__namespace.Tooltip;
-var ChartTooltipContent = React77__namespace.forwardRef(
+var ChartTooltipContent = React78__namespace.forwardRef(
   ({
     active,
     payload,
@@ -2537,7 +2572,7 @@ var ChartTooltipContent = React77__namespace.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React77__namespace.useMemo(() => {
+    const tooltipLabel = React78__namespace.useMemo(() => {
       var _a;
       if (hideLabel || !(payload == null ? void 0 : payload.length)) {
         return null;
@@ -2634,7 +2669,7 @@ var ChartTooltipContent = React77__namespace.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive__namespace.Legend;
-var ChartLegendContent = React77__namespace.forwardRef(
+var ChartLegendContent = React78__namespace.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!(payload == null ? void 0 : payload.length)) {
@@ -2710,12 +2745,12 @@ var checkboxVariants = classVarianceAuthority.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",
@@ -2753,13 +2788,14 @@ var checkboxVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Checkbox = React77__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+var Checkbox = React78__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, variant, checked, indeterminate } = _b, props = __objRest(_b, ["className", "variant", "checked", "indeterminate"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CheckboxPrimitive__namespace.Root,
     __spreadProps(__spreadValues({
       ref,
-      className: cn(checkboxVariants({ variant, className }))
+      className: cn(checkboxVariants({ variant, className })),
+      checked: indeterminate ? "indeterminate" : checked
     }, props), {
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: [
@@ -2874,7 +2910,7 @@ var checkboxCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CheckboxCard = React77__namespace.forwardRef(
+var CheckboxCard = React78__namespace.forwardRef(
   ({
     title,
     description,
@@ -2888,7 +2924,7 @@ var CheckboxCard = React77__namespace.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const checkboxId = `checkbox-card-${generatedId}`;
     const titleId = `checkbox-card-title-${generatedId}`;
     const descriptionId = `checkbox-card-desc-${generatedId}`;
@@ -2984,10 +3020,10 @@ var CheckboxCard = React77__namespace.forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
-var CheckboxList = React77__namespace.forwardRef(
+var CheckboxList = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React77__namespace.Children.toArray(children);
+    const items = React78__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -3029,7 +3065,7 @@ var checkboxWithTextVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CheckboxWithText = React77__namespace.forwardRef(
+var CheckboxWithText = React78__namespace.forwardRef(
   ({
     label,
     description,
@@ -3042,7 +3078,7 @@ var CheckboxWithText = React77__namespace.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const checkboxId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -3190,7 +3226,7 @@ var labelClasses2 = {
   md: "text-sm font-medium leading-5",
   sm: "text-xs font-medium leading-4"
 };
-var Chip = React77__namespace.forwardRef(
+var Chip = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -3219,7 +3255,7 @@ var Chip = React77__namespace.forwardRef(
       "className",
       "onClick"
     ]);
-    const [internalSelected, setInternalSelected] = React77__namespace.useState(false);
+    const [internalSelected, setInternalSelected] = React78__namespace.useState(false);
     const isControlled = controlledSelected !== void 0;
     const selected = isControlled ? controlledSelected : internalSelected;
     const handleClick = (e) => {
@@ -3317,7 +3353,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__namespace.forwardRef((_a, ref) => {
+var TooltipContent = React78__namespace.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__ */ jsxRuntime.jsxs(
     TooltipPrimitive__namespace.Content,
@@ -3353,7 +3389,7 @@ var underlineTabsListVariants = classVarianceAuthority.cva(
     }
   }
 );
-var UnderlineTabsList = React77__namespace.forwardRef((_a, ref) => {
+var UnderlineTabsList = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, layout, size } = _b, props = __objRest(_b, ["className", "layout", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -3377,8 +3413,8 @@ var underlineTabItemVariants = classVarianceAuthority.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",
@@ -3400,7 +3436,7 @@ var underlineTabItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var UnderlineTabItem = React77__namespace.forwardRef(
+var UnderlineTabItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3438,7 +3474,7 @@ var UnderlineTabItem = React77__namespace.forwardRef(
 );
 UnderlineTabItem.displayName = "UnderlineTabItem";
 var DEFAULT_LANGUAGES = ["React", "JavaScript", "TypeScript", "Next.js"];
-var CodeBlock = React77__namespace.forwardRef(
+var CodeBlock = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3468,10 +3504,10 @@ var CodeBlock = React77__namespace.forwardRef(
       "showLineNumbers"
     ]);
     var _a2, _b2, _c, _d, _e, _f;
-    const [activeTab, setActiveTab] = React77__namespace.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
-    const [copied, setCopied] = React77__namespace.useState(false);
+    const [activeTab, setActiveTab] = React78__namespace.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
+    const [copied, setCopied] = React78__namespace.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__namespace.useCallback(() => {
+    const handleCopy = React78__namespace.useCallback(() => {
       if (onCopy) {
         onCopy();
       } else {
@@ -3662,7 +3698,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React77__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -3676,7 +3712,7 @@ var DialogOverlay = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React77__namespace.forwardRef((_a, ref) => {
+var DialogContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
@@ -3691,7 +3727,7 @@ var DialogContent = React77__namespace.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -3735,7 +3771,7 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React77__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -3749,7 +3785,7 @@ var DialogTitle = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React77__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -3760,7 +3796,7 @@ var DialogDescription = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Command = React77__namespace.forwardRef((_a, ref) => {
+var Command = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command,
@@ -3778,7 +3814,7 @@ var CommandDialog = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "overflow-hidden p-0 shadow-card max-w-[560px]", children: /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef((_a, ref) => {
+var CommandInput = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-sui-border-default px-3", "cmdk-input-wrapper": "", children: [
     /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-search-line mr-2 shrink-0 text-icon-default-muted" }),
@@ -3795,7 +3831,7 @@ var CommandInput = React77__namespace.forwardRef((_a, ref) => {
   ] });
 });
 CommandInput.displayName = cmdk.Command.Input.displayName;
-var CommandList = React77__namespace.forwardRef((_a, ref) => {
+var CommandList = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.List,
@@ -3806,7 +3842,7 @@ var CommandList = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = cmdk.Command.List.displayName;
-var CommandEmpty = React77__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandEmpty = React78__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Empty,
   __spreadValues({
     ref,
@@ -3814,7 +3850,7 @@ var CommandEmpty = React77__namespace.forwardRef((props, ref) => /* @__PURE__ */
   }, props)
 ));
 CommandEmpty.displayName = cmdk.Command.Empty.displayName;
-var CommandGroup = React77__namespace.forwardRef((_a, ref) => {
+var CommandGroup = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Group,
@@ -3828,7 +3864,7 @@ var CommandGroup = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandGroup.displayName = cmdk.Command.Group.displayName;
-var CommandSeparator = React77__namespace.forwardRef((_a, ref) => {
+var CommandSeparator = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Separator,
@@ -3839,7 +3875,7 @@ var CommandSeparator = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandSeparator.displayName = cmdk.Command.Separator.displayName;
-var CommandItem = React77__namespace.forwardRef((_a, ref) => {
+var CommandItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Item,
@@ -3902,7 +3938,7 @@ var sliderHandleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SliderHandle = React77__namespace.forwardRef(
+var SliderHandle = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, state, value, showTooltip = false } = _b, props = __objRest(_b, ["className", "state", "value", "showTooltip"]);
     const isDisabled = state === "disabled";
@@ -3965,7 +4001,7 @@ function buildHistogramPath(data, width, height) {
   path += ` L ${width} ${height} Z`;
   return path;
 }
-var DataRangeSlider = React77__namespace.forwardRef(
+var DataRangeSlider = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3996,15 +4032,18 @@ var DataRangeSlider = React77__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React77__namespace.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React77__namespace.useState(null);
-    const [focusedHandle, setFocusedHandle] = React77__namespace.useState(null);
-    const clipId = React77__namespace.useId();
+    const trackRef = React78__namespace.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React78__namespace.useState(null);
+    const [focusedHandle, setFocusedHandle] = React78__namespace.useState(null);
+    const clipId = React78__namespace.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__namespace.useCallback(
+    const fmt = React78__namespace.useCallback(
+      (v) => formatValue ? formatValue(v) : `${v}`,
+      [formatValue]
+    );
+    const getValueFromPointer = React78__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -4015,7 +4054,7 @@ var DataRangeSlider = React77__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React77__namespace.useCallback(
+    const closestHandle = React78__namespace.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -4023,7 +4062,7 @@ var DataRangeSlider = React77__namespace.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React77__namespace.useCallback(
+    const updateValue = React78__namespace.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp(newVal, min, rangeMax);
@@ -4035,7 +4074,7 @@ var DataRangeSlider = React77__namespace.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React77__namespace.useCallback(
+    const handlePointerDown = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -4047,7 +4086,7 @@ var DataRangeSlider = React77__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React77__namespace.useCallback(
+    const handlePointerMove = React78__namespace.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -4055,10 +4094,10 @@ var DataRangeSlider = React77__namespace.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React77__namespace.useCallback(() => {
+    const handlePointerUp = React78__namespace.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React77__namespace.useCallback(
+    const makeKeyHandler = React78__namespace.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -4086,7 +4125,7 @@ var DataRangeSlider = React77__namespace.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React77__namespace.useMemo(() => {
+    const tickLabels = React78__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -4097,7 +4136,7 @@ var DataRangeSlider = React77__namespace.forwardRef(
     }, [pointLabels, pointCount, min, max, fmt]);
     const chartWidth = 320;
     const chartHeight = 32;
-    const histogramPath = React77__namespace.useMemo(
+    const histogramPath = React78__namespace.useMemo(
       () => buildHistogramPath(data, chartWidth, chartHeight),
       [data]
     );
@@ -4244,7 +4283,7 @@ DataRangeSlider.displayName = "DataRangeSlider";
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-5 text-sui-text-default"
 );
-var Label = React77__namespace.forwardRef((_a, ref) => {
+var Label = React78__namespace.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__ */ jsxRuntime.jsxs(
@@ -4305,7 +4344,7 @@ var inputContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var InputField = React77__namespace.forwardRef(
+var InputField = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4330,7 +4369,9 @@ var InputField = React77__namespace.forwardRef(
       tailAddon,
       inputClassName,
       disabled,
-      id
+      id,
+      spellCheck,
+      autoComplete
     } = _b, props = __objRest(_b, [
       "className",
       "inputStyle",
@@ -4354,14 +4395,29 @@ var InputField = React77__namespace.forwardRef(
       "tailAddon",
       "inputClassName",
       "disabled",
-      "id"
+      "id",
+      "spellCheck",
+      "autoComplete"
     ]);
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.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__namespace.useRef(null);
+    React78__namespace.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__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(
         Label,
@@ -4376,6 +4432,7 @@ var InputField = React77__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          onPointerDown: focusInputOnDecorationClick,
           className: cn(
             inputContainerVariants({ inputStyle }),
             // Inline tags: let content determine height; standard: fix height to prevent inflation
@@ -4428,13 +4485,15 @@ var InputField = React77__namespace.forwardRef(
                   /* @__PURE__ */ jsxRuntime.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)
                   )
                 ] }),
@@ -4468,14 +4527,17 @@ var InputField = React77__namespace.forwardRef(
                 /* @__PURE__ */ jsxRuntime.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",
@@ -4536,7 +4598,7 @@ var InputField = React77__namespace.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-var DataRangeSliderInput = React77__namespace.forwardRef(
+var DataRangeSliderInput = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4656,7 +4718,7 @@ var DataRangeSliderInput = React77__namespace.forwardRef(
 DataRangeSliderInput.displayName = "DataRangeSliderInput";
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React77__namespace.forwardRef((_a, ref) => {
+var PopoverContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     PopoverPrimitive__namespace.Content,
@@ -4679,7 +4741,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React77__namespace.useState(false);
+  const [open, setOpen] = React78__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4720,7 +4782,7 @@ function DateRangePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React77__namespace.useState(false);
+  const [open, setOpen] = React78__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4771,7 +4833,7 @@ function DatePickerWithPresets({
   className,
   disabled
 }) {
-  const [open, setOpen] = React77__namespace.useState(false);
+  const [open, setOpen] = React78__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4804,7 +4866,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
           },
@@ -4892,7 +4954,7 @@ function RequirementItem({ label, met }) {
     )
   ] });
 }
-var InputCaption = React77__namespace.forwardRef(
+var InputCaption = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "default",
@@ -4983,9 +5045,9 @@ var InputCaption = React77__namespace.forwardRef(
             className
           )
         }, props), {
-          children: React77__namespace.Children.map(children, (child) => {
-            if (!React77__namespace.isValidElement(child)) return child;
-            return React77__namespace.cloneElement(child, {
+          children: React78__namespace.Children.map(children, (child) => {
+            if (!React78__namespace.isValidElement(child)) return child;
+            return React78__namespace.cloneElement(child, {
               className: cn(
                 "flex-1",
                 child.props.className
@@ -5086,43 +5148,49 @@ function DateSegment({
   const handleFocus = (e) => {
     e.target.select();
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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({
@@ -5255,38 +5323,38 @@ function DatePickerInput({
   disabled = false,
   className
 }) {
-  const [calendarOpen, setCalendarOpen] = React77__namespace.useState(false);
+  const [calendarOpen, setCalendarOpen] = React78__namespace.useState(false);
   const hasError = !!error;
   const helperText = hasError ? error : caption;
   const singleSegments = dateToSegments(date);
-  const [singleDay, setSingleDay] = React77__namespace.useState(singleSegments.day);
-  const [singleMonth, setSingleMonth] = React77__namespace.useState(singleSegments.month);
-  const [singleYear, setSingleYear] = React77__namespace.useState(singleSegments.year);
+  const [singleDay, setSingleDay] = React78__namespace.useState(singleSegments.day);
+  const [singleMonth, setSingleMonth] = React78__namespace.useState(singleSegments.month);
+  const [singleYear, setSingleYear] = React78__namespace.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__namespace.useState(startSegments.day);
-  const [startMonth, setStartMonth] = React77__namespace.useState(startSegments.month);
-  const [startYear, setStartYear] = React77__namespace.useState(startSegments.year);
-  const [endDay, setEndDay] = React77__namespace.useState(endSegments.day);
-  const [endMonth, setEndMonth] = React77__namespace.useState(endSegments.month);
-  const [endYear, setEndYear] = React77__namespace.useState(endSegments.year);
-  const singleDayRef = React77__namespace.useRef(null);
-  const singleMonthRef = React77__namespace.useRef(null);
-  const singleYearRef = React77__namespace.useRef(null);
-  const startDayRef = React77__namespace.useRef(null);
-  const startMonthRef = React77__namespace.useRef(null);
-  const startYearRef = React77__namespace.useRef(null);
-  const endDayRef = React77__namespace.useRef(null);
-  const endMonthRef = React77__namespace.useRef(null);
-  const endYearRef = React77__namespace.useRef(null);
-  const calendarIconRef = React77__namespace.useRef(null);
-  React77__namespace.useEffect(() => {
+  const [startDay, setStartDay] = React78__namespace.useState(startSegments.day);
+  const [startMonth, setStartMonth] = React78__namespace.useState(startSegments.month);
+  const [startYear, setStartYear] = React78__namespace.useState(startSegments.year);
+  const [endDay, setEndDay] = React78__namespace.useState(endSegments.day);
+  const [endMonth, setEndMonth] = React78__namespace.useState(endSegments.month);
+  const [endYear, setEndYear] = React78__namespace.useState(endSegments.year);
+  const singleDayRef = React78__namespace.useRef(null);
+  const singleMonthRef = React78__namespace.useRef(null);
+  const singleYearRef = React78__namespace.useRef(null);
+  const startDayRef = React78__namespace.useRef(null);
+  const startMonthRef = React78__namespace.useRef(null);
+  const startYearRef = React78__namespace.useRef(null);
+  const endDayRef = React78__namespace.useRef(null);
+  const endMonthRef = React78__namespace.useRef(null);
+  const endYearRef = React78__namespace.useRef(null);
+  const calendarIconRef = React78__namespace.useRef(null);
+  React78__namespace.useEffect(() => {
     const s = dateToSegments(date);
     setSingleDay(s.day);
     setSingleMonth(s.month);
     setSingleYear(s.year);
   }, [date]);
-  React77__namespace.useEffect(() => {
+  React78__namespace.useEffect(() => {
     const s = dateToSegments(dateRange == null ? void 0 : dateRange.from);
     setStartDay(s.day);
     setStartMonth(s.month);
@@ -5296,7 +5364,7 @@ function DatePickerInput({
     setEndMonth(e.month);
     setEndYear(e.year);
   }, [dateRange]);
-  const handleSingleSegmentChange = React77__namespace.useCallback(
+  const handleSingleSegmentChange = React78__namespace.useCallback(
     (day, month, year) => {
       const d = segmentsToDate(day, month, year);
       if (day.length === 2 && month.length === 2 && year.length === 4) {
@@ -5307,7 +5375,7 @@ function DatePickerInput({
     },
     [onDateChange]
   );
-  const handleRangeSegmentChange = React77__namespace.useCallback(
+  const handleRangeSegmentChange = React78__namespace.useCallback(
     (sd, sm, sy, ed, em, ey) => {
       const from = segmentsToDate(sd, sm, sy);
       const to = segmentsToDate(ed, em, ey);
@@ -5382,7 +5450,7 @@ function DatePickerInput({
       setCalendarOpen(false);
     }
   };
-  const inputId = React77__namespace.useId();
+  const inputId = React78__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
@@ -5496,7 +5564,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__ */ jsxRuntime.jsx(
@@ -5568,7 +5636,7 @@ var lineVariants = classVarianceAuthority.cva("h-px min-w-0 flex-1 border-t bord
     lineStyle: "solid"
   }
 });
-var Divider = React77__namespace.forwardRef(
+var Divider = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5626,7 +5694,7 @@ var Divider = React77__namespace.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"
               ),
@@ -5643,7 +5711,7 @@ var Divider = React77__namespace.forwardRef(
   }
 );
 Divider.displayName = "Divider";
-var MenuSearchInput = React77__namespace.forwardRef(
+var MenuSearchInput = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5664,44 +5732,45 @@ var MenuSearchInput = React77__namespace.forwardRef(
       "defaultValue",
       "id"
     ]);
-    const internalRef = React77__namespace.useRef(null);
+    var _a2, _b2;
+    const internalRef = React78__namespace.useRef(null);
     const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React77__namespace.useState(
+    const [internalValue, setInternalValue] = React78__namespace.useState(
       defaultValue || ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value) : internalValue;
     const hasValue = currentValue.length > 0;
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.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__namespace.useState(false);
+    const [isFocused, setIsFocused] = React78__namespace.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__ */ jsxRuntime.jsx(
       "div",
@@ -5744,13 +5813,15 @@ var MenuSearchInput = React77__namespace.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",
@@ -5782,7 +5853,7 @@ var MenuSearchInput = React77__namespace.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"
                   ),
@@ -5803,7 +5874,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-var DropdownMenuSubTrigger = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.SubTrigger,
@@ -5827,7 +5898,7 @@ var DropdownMenuSubTrigger = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.SubContent,
@@ -5842,7 +5913,7 @@ var DropdownMenuSubContent = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuContent = React78__namespace.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__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Content,
@@ -5880,7 +5951,7 @@ var DropdownMenuContent = React77__namespace.forwardRef((_a, ref) => {
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, variant = "default" } = _b, props = __objRest(_b, ["className", "inset", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Item,
@@ -5901,7 +5972,7 @@ var DropdownMenuItem = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.CheckboxItem,
@@ -5923,7 +5994,7 @@ var DropdownMenuCheckboxItem = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.RadioItem,
@@ -5944,7 +6015,7 @@ var DropdownMenuRadioItem = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Label,
@@ -5959,7 +6030,7 @@ var DropdownMenuLabel = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Separator,
@@ -5988,7 +6059,7 @@ var DropdownMenuShortcut = (_a) => {
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuCaption = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuCaption = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -6003,7 +6074,7 @@ var DropdownMenuCaption = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCaption.displayName = "DropdownMenuCaption";
-var DropdownMenuUserbar = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuUserbar = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, name, email, avatar, badge } = _b, props = __objRest(_b, ["className", "name", "email", "avatar", "badge"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6028,7 +6099,7 @@ var DropdownMenuUserbar = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuUserbar.displayName = "DropdownMenuUserbar";
-var DropdownMenuLargeItem = React77__namespace.forwardRef((_a, ref) => {
+var DropdownMenuLargeItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, label, caption, icon, badge, tailIcon } = _b, props = __objRest(_b, ["className", "label", "caption", "icon", "badge", "tailIcon"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.Item,
@@ -6069,7 +6140,7 @@ var emptyStateVariants = classVarianceAuthority.cva(
     }
   }
 );
-var EmptyState = React77__namespace.forwardRef(
+var EmptyState = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6127,14 +6198,15 @@ var EmptyState = React77__namespace.forwardRef(
 EmptyState.displayName = "EmptyState";
 function EmptyStateText({
   title,
-  description
+  description,
+  titleAs: TitleTag = "h3"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1 text-center w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-5 text-sui-text-subtle w-full", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(TitleTag, { className: "text-sm font-medium leading-5 text-sui-text-subtle w-full m-0", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4 text-sui-text-muted w-full", children: description })
   ] });
 }
-var FileUploadArea = React77__namespace.forwardRef(
+var FileUploadArea = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6159,8 +6231,8 @@ var FileUploadArea = React77__namespace.forwardRef(
       "onDrop",
       "onDragOver"
     ]);
-    const [isDragOver, setIsDragOver] = React77__namespace.useState(false);
-    const handleDragOver = React77__namespace.useCallback(
+    const [isDragOver, setIsDragOver] = React78__namespace.useState(false);
+    const handleDragOver = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6169,10 +6241,10 @@ var FileUploadArea = React77__namespace.forwardRef(
       },
       [disabled, onDragOver]
     );
-    const handleDragLeave = React77__namespace.useCallback(() => {
+    const handleDragLeave = React78__namespace.useCallback(() => {
       setIsDragOver(false);
     }, []);
-    const handleDrop = React77__namespace.useCallback(
+    const handleDrop = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6181,11 +6253,11 @@ var FileUploadArea = React77__namespace.forwardRef(
       },
       [disabled, onDrop]
     );
-    const handleClick = React77__namespace.useCallback(() => {
+    const handleClick = React78__namespace.useCallback(() => {
       if (disabled) return;
       onClick == null ? void 0 : onClick();
     }, [disabled, onClick]);
-    const handleKeyDown = React77__namespace.useCallback(
+    const handleKeyDown = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -6214,7 +6286,7 @@ var FileUploadArea = React77__namespace.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
@@ -6301,7 +6373,7 @@ var progressBarVariants = classVarianceAuthority.cva(
   }
 );
 var SEGMENT_COUNT = 10;
-var ProgressBar = React77__namespace.forwardRef(
+var ProgressBar = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6323,7 +6395,7 @@ var ProgressBar = React77__namespace.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__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const labelId = `${generatedId}-label`;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -6341,7 +6413,7 @@ var ProgressBar = React77__namespace.forwardRef(
                 children: labelText
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: displayPercentage }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal leading-5 tabular-nums text-sui-text-muted", children: displayPercentage }) })
           ] }),
           variant === "dashed" ? (
             /* Dashed variant: 10 individual segments */
@@ -6409,7 +6481,7 @@ var statusLabel = {
   uploading: "Uploading...",
   failed: "Error"
 };
-var FileUploadCard = React77__namespace.forwardRef(
+var FileUploadCard = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6621,7 +6693,7 @@ var lineColorMap = {
   warning: "bg-sui-bg-basic-orange-accent",
   error: "bg-sui-bg-basic-red-accent"
 };
-var InlineTips = React77__namespace.forwardRef(
+var InlineTips = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6723,7 +6795,7 @@ function validateFile(file, accept, maxSize) {
   }
   return null;
 }
-var FileUpload = React77__namespace.forwardRef(
+var FileUpload = React78__namespace.forwardRef(
   ({
     files = [],
     onFilesAdded,
@@ -6744,37 +6816,55 @@ var FileUpload = React77__namespace.forwardRef(
     icon,
     className
   }, ref) => {
-    const inputRef = React77__namespace.useRef(null);
-    const [errors, setErrors] = React77__namespace.useState([]);
-    const thumbnailCache = React77__namespace.useRef(/* @__PURE__ */ new Map());
-    React77__namespace.useEffect(() => {
+    const inputRef = React78__namespace.useRef(null);
+    const [errors, setErrors] = React78__namespace.useState([]);
+    const [thumbnails, setThumbnails] = React78__namespace.useState(
+      {}
+    );
+    const thumbnailsRef = React78__namespace.useRef(thumbnails);
+    React78__namespace.useEffect(() => {
+      thumbnailsRef.current = thumbnails;
+    }, [thumbnails]);
+    React78__namespace.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__namespace.useEffect(() => {
-      const cache = thumbnailCache.current;
+    React78__namespace.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__namespace.useCallback(
+    const processFiles = React78__namespace.useCallback(
       (fileList) => {
         const newFiles = Array.from(fileList);
         const validationErrors = [];
@@ -6802,11 +6892,11 @@ var FileUpload = React77__namespace.forwardRef(
       },
       [files.length, maxFiles, accept, maxSize, onFilesAdded]
     );
-    const handleClick = React77__namespace.useCallback(() => {
+    const handleClick = React78__namespace.useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.click();
     }, []);
-    const handleInputChange = React77__namespace.useCallback(
+    const handleInputChange = React78__namespace.useCallback(
       (e) => {
         if (e.target.files && e.target.files.length > 0) {
           processFiles(e.target.files);
@@ -6815,7 +6905,7 @@ var FileUpload = React77__namespace.forwardRef(
       },
       [processFiles]
     );
-    const handleDrop = React77__namespace.useCallback(
+    const handleDrop = React78__namespace.useCallback(
       (e) => {
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
           processFiles(e.dataTransfer.files);
@@ -6823,10 +6913,10 @@ var FileUpload = React77__namespace.forwardRef(
       },
       [processFiles]
     );
-    const dismissError = React77__namespace.useCallback((index) => {
+    const dismissError = React78__namespace.useCallback((index) => {
       setErrors((prev) => prev.filter((_, i) => i !== index));
     }, []);
-    const handlePaste = React77__namespace.useCallback(
+    const handlePaste = React78__namespace.useCallback(
       (e) => {
         var _a;
         if (disabled || !pasteEnabled) return;
@@ -6847,7 +6937,7 @@ var FileUpload = React77__namespace.forwardRef(
       },
       [disabled, pasteEnabled, processFiles]
     );
-    const handleCancel = React77__namespace.useCallback(
+    const handleCancel = React78__namespace.useCallback(
       (id) => {
         const uploadFile = files.find((f) => f.id === id);
         if (uploadFile == null ? void 0 : uploadFile.abortController) {
@@ -6923,7 +7013,7 @@ var FileUpload = React77__namespace.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,
@@ -6964,7 +7054,7 @@ var ariaSortMap = {
   desc: "descending",
   none: "none"
 };
-var GridTableHeaderItem = React77__namespace.forwardRef(
+var GridTableHeaderItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7066,7 +7156,7 @@ var gridTableRowVariants = classVarianceAuthority.cva(
     }
   }
 );
-var GridTableRow = React77__namespace.forwardRef(
+var GridTableRow = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7082,7 +7172,7 @@ var GridTableRow = React77__namespace.forwardRef(
   }
 );
 GridTableRow.displayName = "GridTableRow";
-var GridTableCell = React77__namespace.forwardRef(
+var GridTableCell = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, bordered = true, children } = _b, props = __objRest(_b, ["className", "bordered", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7126,7 +7216,7 @@ var gridTableSlotItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var GridTableSlotItem = React77__namespace.forwardRef(
+var GridTableSlotItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7237,7 +7327,8 @@ var GridTableSlotItem = React77__namespace.forwardRef(
 );
 GridTableSlotItem.displayName = "GridTableSlotItem";
 var stepperNumberVariants = classVarianceAuthority.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: {
@@ -7273,7 +7364,7 @@ var stepperNumberVariants = classVarianceAuthority.cva(
     }
   }
 );
-var StepperNumber = React77__namespace.forwardRef(
+var StepperNumber = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size, color, number = "1" } = _b, props = __objRest(_b, ["className", "size", "color", "number"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7312,7 +7403,7 @@ var stepperIconVariants = classVarianceAuthority.cva(
     }
   }
 );
-var StepperIcon = React77__namespace.forwardRef(
+var StepperIcon = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "dot-large", icon } = _b, props = __objRest(_b, ["className", "variant", "icon"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7366,7 +7457,7 @@ function ConnectorLine({ success }) {
     }
   );
 }
-var HorizontalStepperItem = React77__namespace.forwardRef(
+var HorizontalStepperItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7491,7 +7582,7 @@ var HorizontalStepperItem = React77__namespace.forwardRef(
   }
 );
 HorizontalStepperItem.displayName = "HorizontalStepperItem";
-var HorizontalStepper = React77__namespace.forwardRef(
+var HorizontalStepper = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7566,13 +7657,15 @@ var HorizontalStepper = React77__namespace.forwardRef(
   }
 );
 HorizontalStepper.displayName = "HorizontalStepper";
-var Input = React77__namespace.forwardRef(
+var Input = React78__namespace.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__ */ jsxRuntime.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
@@ -7604,7 +7697,7 @@ var inputButtonVariants = classVarianceAuthority.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",
@@ -7613,10 +7706,10 @@ var inputButtonVariants = classVarianceAuthority.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"
@@ -7624,7 +7717,7 @@ var inputButtonVariants = classVarianceAuthority.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"
@@ -7656,8 +7749,8 @@ var inputButtonVariants = classVarianceAuthority.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__namespace.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__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7692,9 +7785,7 @@ var InputButton = React77__namespace.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;
@@ -7791,7 +7882,7 @@ var InputButton = React77__namespace.forwardRef(
   }
 );
 InputButton.displayName = "InputButton";
-var InputStepper = React77__namespace.forwardRef(
+var InputStepper = React78__namespace.forwardRef(
   ({ onIncrement, onDecrement, disabled, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -7812,7 +7903,7 @@ var InputStepper = React77__namespace.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"
@@ -7834,7 +7925,7 @@ var InputStepper = React77__namespace.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"
@@ -7848,7 +7939,7 @@ var InputStepper = React77__namespace.forwardRef(
   }
 );
 InputStepper.displayName = "InputStepper";
-var NavigationMenu = React77__namespace.forwardRef((_a, ref) => {
+var NavigationMenu = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     NavigationMenuPrimitive__namespace.Root,
@@ -7867,7 +7958,7 @@ var NavigationMenu = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 NavigationMenu.displayName = NavigationMenuPrimitive__namespace.Root.displayName;
-var NavigationMenuList = React77__namespace.forwardRef((_a, ref) => {
+var NavigationMenuList = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.List,
@@ -7883,9 +7974,9 @@ var NavigationMenuList = React77__namespace.forwardRef((_a, ref) => {
 NavigationMenuList.displayName = NavigationMenuPrimitive__namespace.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive__namespace.Item;
 var navigationMenuTriggerStyle = classVarianceAuthority.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__namespace.forwardRef((_a, ref) => {
+var NavigationMenuTrigger = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     NavigationMenuPrimitive__namespace.Trigger,
@@ -7908,7 +7999,7 @@ var NavigationMenuTrigger = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive__namespace.Trigger.displayName;
-var NavigationMenuContent = React77__namespace.forwardRef((_a, ref) => {
+var NavigationMenuContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Content,
@@ -7923,7 +8014,7 @@ var NavigationMenuContent = React77__namespace.forwardRef((_a, ref) => {
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive__namespace.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive__namespace.Link;
-var NavigationMenuViewport = React77__namespace.forwardRef((_a, ref) => {
+var NavigationMenuViewport = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Viewport,
@@ -7937,7 +8028,7 @@ var NavigationMenuViewport = React77__namespace.forwardRef((_a, ref) => {
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive__namespace.Viewport.displayName;
-var NavigationMenuIndicator = React77__namespace.forwardRef((_a, ref) => {
+var NavigationMenuIndicator = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Indicator,
@@ -7970,8 +8061,8 @@ var pageItemVariants = classVarianceAuthority.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
@@ -8008,7 +8099,7 @@ var activeDotClasses = [
   "bg-sui-bg-basic-blue-accent",
   "[@media(hover:hover)]:hover:bg-sui-bg-basic-blue-accent"
 ].join(" ");
-var PageItem = React77__namespace.forwardRef(
+var PageItem = React78__namespace.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 ? reactSlot.Slot : "button";
@@ -8043,7 +8134,7 @@ var Pagination = (_a) => {
   );
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React77__namespace.forwardRef((_a, ref) => {
+var PaginationContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -8054,7 +8145,7 @@ var PaginationContent = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React77__namespace.forwardRef((_a, ref) => {
+var PaginationItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadValues({ ref, className: cn("", className) }, props));
 });
@@ -8175,7 +8266,7 @@ function getPageRange(currentPage, totalPages, maxVisible) {
   }
   return pages;
 }
-var Paginator = React77__namespace.forwardRef(
+var Paginator = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8355,7 +8446,7 @@ var Paginator = React77__namespace.forwardRef(
   }
 );
 Paginator.displayName = "Paginator";
-var Progress = React77__namespace.forwardRef((_a, ref) => {
+var Progress = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ProgressPrimitive2__namespace.Root,
@@ -8405,7 +8496,7 @@ var arcStrokeVarMap = {
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
-var RadialProgressBar = React77__namespace.forwardRef(
+var RadialProgressBar = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8507,7 +8598,8 @@ var RadialProgressBar = React77__namespace.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" : ""
               ),
@@ -8524,7 +8616,7 @@ var RadialProgressBar = React77__namespace.forwardRef(
   }
 );
 RadialProgressBar.displayName = "RadialProgressBar";
-var RadioGroup2 = React77__namespace.forwardRef((_a, ref) => {
+var RadioGroup2 = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
@@ -8551,10 +8643,10 @@ var radioButtonVariants = classVarianceAuthority.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",
@@ -8584,7 +8676,7 @@ var radioButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButton = React77__namespace.forwardRef((_a, ref) => {
+var RadioButton = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     RadioGroupPrimitive__namespace.Item,
@@ -8624,7 +8716,7 @@ var RadioButton = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 RadioButton.displayName = "RadioButton";
-var RadioCardGroup = React77__namespace.forwardRef((_a, ref) => {
+var RadioCardGroup = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
@@ -8673,7 +8765,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButtonCard = React77__namespace.forwardRef(
+var RadioButtonCard = React78__namespace.forwardRef(
   ({
     title,
     description,
@@ -8687,7 +8779,7 @@ var RadioButtonCard = React77__namespace.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const titleId = `radio-card-title-${generatedId}`;
     const descriptionId = `radio-card-desc-${generatedId}`;
     const isHorizontal = layout === "horizontal";
@@ -8795,9 +8887,9 @@ var RadioButtonCard = React77__namespace.forwardRef(
   }
 );
 RadioButtonCard.displayName = "RadioButtonCard";
-var RadioButtonList = React77__namespace.forwardRef(
+var RadioButtonList = React78__namespace.forwardRef(
   ({ className, divider = true, value, defaultValue, onValueChange, disabled, children }, ref) => {
-    const items = React77__namespace.Children.toArray(children);
+    const items = React78__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadioGroup2,
       {
@@ -8841,7 +8933,7 @@ var radioButtonWithTextVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButtonWithText = React77__namespace.forwardRef(
+var RadioButtonWithText = React78__namespace.forwardRef(
   ({
     label,
     description,
@@ -8852,7 +8944,7 @@ var RadioButtonWithText = React77__namespace.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const radioId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -8907,7 +8999,7 @@ var RadioButtonWithText = React77__namespace.forwardRef(
   }
 );
 RadioButtonWithText.displayName = "RadioButtonWithText";
-var ScrollArea = React77__namespace.forwardRef((_a, ref) => {
+var ScrollArea = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScrollAreaPrimitive__namespace.Root,
@@ -8924,7 +9016,7 @@ var ScrollArea = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React77__namespace.forwardRef((_a, ref) => {
+var ScrollBar = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
@@ -8946,7 +9038,7 @@ ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displ
 var Select = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React77__namespace.forwardRef((_a, ref) => {
+var SelectTrigger = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Trigger,
@@ -8969,7 +9061,7 @@ var SelectTrigger = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React77__namespace.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
@@ -8985,7 +9077,7 @@ var SelectScrollUpButton = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React77__namespace.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
@@ -9001,7 +9093,7 @@ var SelectScrollDownButton = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React77__namespace.forwardRef((_a, ref) => {
+var SelectContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Content,
@@ -9034,7 +9126,7 @@ var SelectContent = React77__namespace.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React77__namespace.forwardRef((_a, ref) => {
+var SelectLabel = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
@@ -9048,7 +9140,7 @@ var SelectLabel = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React77__namespace.forwardRef((_a, ref) => {
+var SelectItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Item,
@@ -9073,7 +9165,7 @@ var SelectItem = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React77__namespace.forwardRef((_a, ref) => {
+var SelectSeparator = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Separator,
@@ -9084,7 +9176,7 @@ var SelectSeparator = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
-var SelectMenu = React77__namespace.forwardRef(
+var SelectMenu = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9115,19 +9207,19 @@ var SelectMenu = React77__namespace.forwardRef(
     ]);
     var _a2;
     const indicator = selectType === "checkbox" ? "checkbox" : selectType === "radio" ? "radio" : selectType === "default" ? "checkmark" : "none";
-    const hasChildren = React77__namespace.Children.count(children) > 0;
-    const generatedId = React77__namespace.useId();
+    const hasChildren = React78__namespace.Children.count(children) > 0;
+    const generatedId = React78__namespace.useId();
     const listId = `${generatedId}-list`;
-    const listRef = React77__namespace.useRef(null);
-    const [activeIndex, setActiveIndex] = React77__namespace.useState(-1);
+    const listRef = React78__namespace.useRef(null);
+    const [activeIndex, setActiveIndex] = React78__namespace.useState(-1);
     const activeItemId = activeIndex >= 0 ? `${listId}-item-${activeIndex}` : void 0;
-    const getItems = React77__namespace.useCallback(() => {
+    const getItems = React78__namespace.useCallback(() => {
       if (!listRef.current) return [];
       return Array.from(
         listRef.current.querySelectorAll('[role="option"]')
       );
     }, []);
-    const handleKeyDown = React77__namespace.useCallback(
+    const handleKeyDown = React78__namespace.useCallback(
       (e) => {
         var _a3;
         const items = getItems();
@@ -9210,8 +9302,8 @@ var SelectMenu = React77__namespace.forwardRef(
                 "focus-visible:outline-none"
               ),
               style: listMaxHeight ? { maxHeight: listMaxHeight } : void 0,
-              children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React77__namespace.Children.map(children, (child, index) => {
-                if (React77__namespace.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
+              children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React78__namespace.Children.map(children, (child, index) => {
+                if (React78__namespace.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
                   const itemProps = child.props;
                   const overrides = {};
                   if (indicator !== "none" && itemProps.indicator === void 0) {
@@ -9228,7 +9320,7 @@ var SelectMenu = React77__namespace.forwardRef(
                     overrides["data-active"] = "true";
                   }
                   if (Object.keys(overrides).length > 0) {
-                    return React77__namespace.cloneElement(
+                    return React78__namespace.cloneElement(
                       child,
                       overrides
                     );
@@ -9253,7 +9345,7 @@ var SelectMenu = React77__namespace.forwardRef(
   }
 );
 SelectMenu.displayName = "SelectMenu";
-var SelectMenuFooterButton = React77__namespace.forwardRef((_a, ref) => {
+var SelectMenuFooterButton = React78__namespace.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__ */ jsxRuntime.jsxs(
     "button",
@@ -9267,7 +9359,7 @@ var SelectMenuFooterButton = React77__namespace.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",
@@ -9296,7 +9388,7 @@ var SelectMenuFooterButton = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuFooterButton.displayName = "SelectMenuFooterButton";
-var SelectInput = React77__namespace.forwardRef(
+var SelectInput = React78__namespace.forwardRef(
   ({
     label,
     required,
@@ -9328,10 +9420,10 @@ var SelectInput = React77__namespace.forwardRef(
     footer,
     className
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React77__namespace.useState(false);
+    const [internalOpen, setInternalOpen] = React78__namespace.useState(false);
     const isControlled = controlledOpen !== void 0;
     const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = React77__namespace.useCallback(
+    const handleOpenChange = React78__namespace.useCallback(
       (next) => {
         if (disabled) return;
         if (!isControlled) setInternalOpen(next);
@@ -9339,7 +9431,7 @@ var SelectInput = React77__namespace.forwardRef(
       },
       [disabled, isControlled, onOpenChange]
     );
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasTags = tags && tags.length > 0;
@@ -9366,7 +9458,6 @@ var SelectInput = React77__namespace.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,
@@ -9384,8 +9475,8 @@ var SelectInput = React77__namespace.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",
@@ -9396,7 +9487,7 @@ var SelectInput = React77__namespace.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: [
@@ -9419,7 +9510,7 @@ var SelectInput = React77__namespace.forwardRef(
                   children: leadIcon
                 }
               ) : null,
-              hasTags ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
+              hasTags ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(React78__namespace.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -9482,6 +9573,8 @@ var SelectInput = React77__namespace.forwardRef(
           PopoverPrimitive__namespace.Content,
           __spreadProps(__spreadValues({
             id: `${generatedId}-listbox`,
+            role: "listbox",
+            "aria-multiselectable": multiSelect || void 0,
             align: "start",
             sideOffset: 6,
             className: cn(
@@ -9534,7 +9627,7 @@ var SelectInput = React77__namespace.forwardRef(
   }
 );
 SelectInput.displayName = "SelectInput";
-var SelectMenuItem = React77__namespace.forwardRef(
+var SelectMenuItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9570,7 +9663,7 @@ var SelectMenuItem = React77__namespace.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",
@@ -9698,7 +9791,7 @@ var SelectMenuItem = React77__namespace.forwardRef(
   }
 );
 SelectMenuItem.displayName = "SelectMenuItem";
-var SelectMenuLabel = React77__namespace.forwardRef(
+var SelectMenuLabel = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9720,7 +9813,7 @@ var SelectMenuLabel = React77__namespace.forwardRef(
   }
 );
 SelectMenuLabel.displayName = "SelectMenuLabel";
-var SelectMenuDescription = React77__namespace.forwardRef((_a, ref) => {
+var SelectMenuDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -9734,7 +9827,7 @@ var SelectMenuDescription = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuDescription.displayName = "SelectMenuDescription";
-var SelectMenuSeparator = React77__namespace.forwardRef((_a, ref) => {
+var SelectMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9746,7 +9839,7 @@ var SelectMenuSeparator = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuSeparator.displayName = "SelectMenuSeparator";
-var SelectMenuLargeItem = React77__namespace.forwardRef(
+var SelectMenuLargeItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9776,7 +9869,7 @@ var SelectMenuLargeItem = React77__namespace.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
@@ -9842,7 +9935,7 @@ var SelectMenuLargeItem = React77__namespace.forwardRef(
   }
 );
 SelectMenuLargeItem.displayName = "SelectMenuLargeItem";
-var Separator3 = React77__namespace.forwardRef(
+var Separator3 = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9865,7 +9958,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React77__namespace.forwardRef((_a, ref) => {
+var SheetOverlay = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -9896,7 +9989,7 @@ var sheetVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SheetContent = React77__namespace.forwardRef((_a, ref) => {
+var SheetContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
@@ -9908,7 +10001,7 @@ var SheetContent = React77__namespace.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -9952,7 +10045,7 @@ var SheetFooter = (_a) => {
   );
 };
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React77__namespace.forwardRef((_a, ref) => {
+var SheetTitle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -9963,7 +10056,7 @@ var SheetTitle = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React77__namespace.forwardRef((_a, ref) => {
+var SheetDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -9976,8 +10069,8 @@ var SheetDescription = React77__namespace.forwardRef((_a, ref) => {
 SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React77__namespace.useState(void 0);
-  React77__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React78__namespace.useState(void 0);
+  React78__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -10007,15 +10100,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React77__namespace.createContext(null);
+var SidebarContext = React78__namespace.createContext(null);
 function useSidebar() {
-  const context = React77__namespace.useContext(SidebarContext);
+  const context = React78__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React77__namespace.forwardRef(
+var SidebarProvider = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultOpen = true,
@@ -10033,10 +10126,10 @@ var SidebarProvider = React77__namespace.forwardRef(
       "children"
     ]);
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React77__namespace.useState(false);
-    const [_open, _setOpen] = React77__namespace.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React78__namespace.useState(false);
+    const [_open, _setOpen] = React78__namespace.useState(defaultOpen);
     const open = openProp != null ? openProp : _open;
-    const setOpen = React77__namespace.useCallback(
+    const setOpen = React78__namespace.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -10048,10 +10141,10 @@ var SidebarProvider = React77__namespace.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React77__namespace.useCallback(() => {
+    const toggleSidebar = React78__namespace.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React77__namespace.useEffect(() => {
+    React78__namespace.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -10062,7 +10155,7 @@ var SidebarProvider = React77__namespace.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React77__namespace.useMemo(
+    const contextValue = React78__namespace.useMemo(
       () => ({
         state,
         open,
@@ -10093,7 +10186,7 @@ var SidebarProvider = React77__namespace.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React77__namespace.forwardRef(
+var Sidebar = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       side = "left",
@@ -10192,7 +10285,7 @@ var Sidebar = React77__namespace.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React77__namespace.forwardRef((_a, ref) => {
+var SidebarTrigger = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10217,7 +10310,7 @@ var SidebarTrigger = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React77__namespace.forwardRef((_a, ref) => {
+var SidebarRail = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10230,10 +10323,10 @@ var SidebarRail = React77__namespace.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
@@ -10242,7 +10335,7 @@ var SidebarRail = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React77__namespace.forwardRef((_a, ref) => {
+var SidebarInset = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
@@ -10257,7 +10350,7 @@ var SidebarInset = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React77__namespace.forwardRef((_a, ref) => {
+var SidebarInput = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
@@ -10272,7 +10365,7 @@ var SidebarInput = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React77__namespace.forwardRef((_a, ref) => {
+var SidebarHeader = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10284,7 +10377,7 @@ var SidebarHeader = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React77__namespace.forwardRef((_a, ref) => {
+var SidebarFooter = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10296,7 +10389,7 @@ var SidebarFooter = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React77__namespace.forwardRef((_a, ref) => {
+var SidebarSeparator = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Separator3,
@@ -10308,7 +10401,7 @@ var SidebarSeparator = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React77__namespace.forwardRef((_a, ref) => {
+var SidebarContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10323,7 +10416,7 @@ var SidebarContent = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React77__namespace.forwardRef((_a, ref) => {
+var SidebarGroup = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10335,7 +10428,7 @@ var SidebarGroup = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React77__namespace.forwardRef((_a, ref) => {
+var SidebarGroupLabel = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? reactSlot.Slot : "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10352,7 +10445,7 @@ var SidebarGroupLabel = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React77__namespace.forwardRef((_a, ref) => {
+var SidebarGroupAction = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10361,7 +10454,7 @@ var SidebarGroupAction = React77__namespace.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",
@@ -10371,7 +10464,7 @@ var SidebarGroupAction = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React77__namespace.forwardRef((_a, ref) => {
+var SidebarGroupContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10383,7 +10476,7 @@ var SidebarGroupContent = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenu = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -10395,7 +10488,7 @@ var SidebarMenu = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -10408,12 +10501,12 @@ var SidebarMenuItem = React77__namespace.forwardRef((_a, ref) => {
 });
 SidebarMenuItem.displayName = "SidebarMenuItem";
 var sidebarMenuButtonVariants = classVarianceAuthority.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",
@@ -10427,7 +10520,7 @@ var sidebarMenuButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarMenuButton = React77__namespace.forwardRef(
+var SidebarMenuButton = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       asChild = false,
@@ -10478,7 +10571,7 @@ var SidebarMenuButton = React77__namespace.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuAction = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false, showOnHover = false } = _b, props = __objRest(_b, ["className", "asChild", "showOnHover"]);
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10487,7 +10580,7 @@ var SidebarMenuAction = React77__namespace.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",
@@ -10501,7 +10594,7 @@ var SidebarMenuAction = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuBadge = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10521,11 +10614,13 @@ var SidebarMenuBadge = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSkeleton = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const width = React77__namespace.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const id = React78__namespace.useId();
+  const width = React78__namespace.useMemo(() => {
+    const hash = id.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
+    return `${hash % 40 + 50}%`;
+  }, [id]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     __spreadProps(__spreadValues({
@@ -10556,7 +10651,7 @@ var SidebarMenuSkeleton = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSub = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -10572,12 +10667,12 @@ var SidebarMenuSub = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSubItem = React78__namespace.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadValues({ ref }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React77__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSubButton = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { asChild = false, size = "md", isActive, className } = _b, props = __objRest(_b, ["asChild", "size", "isActive", "className"]);
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10588,7 +10683,7 @@ var SidebarMenuSubButton = React77__namespace.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",
@@ -10617,7 +10712,7 @@ var sidebarCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarCard = React77__namespace.forwardRef(
+var SidebarCard = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10656,7 +10751,7 @@ var sidebarMenuItemVariants = classVarianceAuthority.cva("", {
     variant: "default"
   }
 });
-var SidebarMenuItem2 = React77__namespace.forwardRef(
+var SidebarMenuItem2 = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10852,7 +10947,7 @@ function percent2(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var Slider = React77__namespace.forwardRef(
+var Slider = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10885,12 +10980,12 @@ var Slider = React77__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React77__namespace.useRef(null);
-    const [isDragging, setIsDragging] = React77__namespace.useState(false);
-    const [isFocused, setIsFocused] = React77__namespace.useState(false);
+    const trackRef = React78__namespace.useRef(null);
+    const [isDragging, setIsDragging] = React78__namespace.useState(false);
+    const [isFocused, setIsFocused] = React78__namespace.useState(false);
     const pct = percent2(value, min, max);
     const displayValue = formatValue ? formatValue(value) : `${value}`;
-    const getValueFromPointer = React77__namespace.useCallback(
+    const getValueFromPointer = React78__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -10901,7 +10996,7 @@ var Slider = React77__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const handlePointerDown = React77__namespace.useCallback(
+    const handlePointerDown = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -10912,7 +11007,7 @@ var Slider = React77__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerMove = React77__namespace.useCallback(
+    const handlePointerMove = React78__namespace.useCallback(
       (e) => {
         if (!isDragging || disabled) return;
         const newValue = getValueFromPointer(e.clientX);
@@ -10920,10 +11015,10 @@ var Slider = React77__namespace.forwardRef(
       },
       [isDragging, disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerUp = React77__namespace.useCallback(() => {
+    const handlePointerUp = React78__namespace.useCallback(() => {
       setIsDragging(false);
     }, []);
-    const handleKeyDown = React77__namespace.useCallback(
+    const handleKeyDown = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         let newValue = value;
@@ -10950,7 +11045,7 @@ var Slider = React77__namespace.forwardRef(
       },
       [disabled, value, step, min, max, onValueChange]
     );
-    const tickLabels = React77__namespace.useMemo(() => {
+    const tickLabels = React78__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const count2 = pointCount;
       const labels = [];
@@ -11044,7 +11139,7 @@ Slider.displayName = "Slider";
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var SliderInput = React77__namespace.forwardRef(
+var SliderInput = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11067,8 +11162,8 @@ var SliderInput = React77__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const [internalValue, setInternalValue] = React77__namespace.useState(value);
-    React77__namespace.useEffect(() => {
+    const [internalValue, setInternalValue] = React78__namespace.useState(value);
+    React78__namespace.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const commit = (newVal) => {
@@ -11175,7 +11270,7 @@ function percent3(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var SliderRange = React77__namespace.forwardRef(
+var SliderRange = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11208,15 +11303,15 @@ var SliderRange = React77__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React77__namespace.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React77__namespace.useState(null);
-    const [focusedHandle, setFocusedHandle] = React77__namespace.useState(null);
+    const trackRef = React78__namespace.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React78__namespace.useState(null);
+    const [focusedHandle, setFocusedHandle] = React78__namespace.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__namespace.useCallback(
+    const getValueFromPointer = React78__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11227,7 +11322,7 @@ var SliderRange = React77__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React77__namespace.useCallback(
+    const closestHandle = React78__namespace.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -11235,7 +11330,7 @@ var SliderRange = React77__namespace.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React77__namespace.useCallback(
+    const updateValue = React78__namespace.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp4(newVal, min, rangeMax);
@@ -11247,7 +11342,7 @@ var SliderRange = React77__namespace.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React77__namespace.useCallback(
+    const handlePointerDown = React78__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11259,7 +11354,7 @@ var SliderRange = React77__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React77__namespace.useCallback(
+    const handlePointerMove = React78__namespace.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -11267,10 +11362,10 @@ var SliderRange = React77__namespace.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React77__namespace.useCallback(() => {
+    const handlePointerUp = React78__namespace.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React77__namespace.useCallback(
+    const makeKeyHandler = React78__namespace.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -11298,7 +11393,7 @@ var SliderRange = React77__namespace.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React77__namespace.useMemo(() => {
+    const tickLabels = React78__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -11415,7 +11510,7 @@ var SliderRange = React77__namespace.forwardRef(
   }
 );
 SliderRange.displayName = "SliderRange";
-var SliderRangeInput = React77__namespace.forwardRef(
+var SliderRangeInput = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11557,7 +11652,7 @@ var Toaster = (_a) => {
   );
 };
 var ToastProvider = ToastPrimitives__namespace.Provider;
-var ToastViewport = React77__namespace.forwardRef((_a, ref) => {
+var ToastViewport = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Viewport,
@@ -11585,7 +11680,7 @@ var toastVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toast = React77__namespace.forwardRef((_a, ref) => {
+var Toast = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Root,
@@ -11596,28 +11691,28 @@ var Toast = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives__namespace.Root.displayName;
-var ToastAction = React77__namespace.forwardRef((_a, ref) => {
+var ToastAction = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.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__namespace.Action.displayName;
-var ToastClose = React77__namespace.forwardRef((_a, ref) => {
+var ToastClose = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.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": ""
@@ -11627,7 +11722,7 @@ var ToastClose = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
-var ToastTitle = React77__namespace.forwardRef((_a, ref) => {
+var ToastTitle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Title,
@@ -11638,7 +11733,7 @@ var ToastTitle = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
-var ToastDescription = React77__namespace.forwardRef((_a, ref) => {
+var ToastDescription = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Description,
@@ -11743,8 +11838,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React77__namespace.useState(memoryState);
-  React77__namespace.useEffect(() => {
+  const [state, setState] = React78__namespace.useState(memoryState);
+  React78__namespace.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -11775,7 +11870,7 @@ function Toaster2() {
     /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
   ] });
 }
-var Switch = React77__namespace.forwardRef((_a, ref) => {
+var Switch = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitives__namespace.Root,
@@ -11787,10 +11882,10 @@ var Switch = React77__namespace.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",
@@ -11827,10 +11922,10 @@ var Switch = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 Switch.displayName = "Switch";
-var SwitchList = React77__namespace.forwardRef(
+var SwitchList = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React77__namespace.Children.toArray(children);
+    const items = React78__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -11858,7 +11953,7 @@ var SwitchList = React77__namespace.forwardRef(
   }
 );
 SwitchList.displayName = "SwitchList";
-var SwitchWithText = React77__namespace.forwardRef(
+var SwitchWithText = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11875,7 +11970,7 @@ var SwitchWithText = React77__namespace.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const switchId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -11932,7 +12027,7 @@ var SwitchWithText = React77__namespace.forwardRef(
   }
 );
 SwitchWithText.displayName = "SwitchWithText";
-var Table = React77__namespace.forwardRef((_a, ref) => {
+var Table = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
     "table",
@@ -11943,12 +12038,12 @@ var Table = React77__namespace.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React77__namespace.forwardRef((_a, ref) => {
+var TableHeader = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b [&_tr]:border-sui-border-default", className) }, props));
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React77__namespace.forwardRef((_a, ref) => {
+var TableBody = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tbody",
@@ -11959,7 +12054,7 @@ var TableBody = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableFooter = React77__namespace.forwardRef((_a, ref) => {
+var TableFooter = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tfoot",
@@ -11973,21 +12068,21 @@ var TableFooter = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 TableFooter.displayName = "TableFooter";
-var TableRow = React77__namespace.forwardRef((_a, ref) => {
+var TableRow = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef((_a, ref) => {
+var TableHead = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
@@ -12001,7 +12096,7 @@ var TableHead = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React77__namespace.forwardRef((_a, ref) => {
+var TableCell = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
@@ -12012,7 +12107,7 @@ var TableCell = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React77__namespace.forwardRef((_a, ref) => {
+var TableCaption = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "caption",
@@ -12048,7 +12143,7 @@ var ariaSortMap2 = {
   desc: "descending",
   none: "none"
 };
-var TableHeaderItem = React77__namespace.forwardRef(
+var TableHeaderItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12109,7 +12204,7 @@ var TableHeaderItem = React77__namespace.forwardRef(
             resizable && /* @__PURE__ */ jsxRuntime.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);
@@ -12164,7 +12259,7 @@ var tableItemVariants = classVarianceAuthority.cva("flex items-center px-2", {
     size: "lg"
   }
 });
-var TableItem = React77__namespace.forwardRef(
+var TableItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12248,7 +12343,7 @@ var TableItem = React77__namespace.forwardRef(
   }
 );
 TableItem.displayName = "TableItem";
-var TablePagination = React77__namespace.forwardRef(
+var TablePagination = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12283,7 +12378,7 @@ var TablePagination = React77__namespace.forwardRef(
         )
       }, props), {
         children: paginatorVariant === "numbered" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-normal leading-5 text-sui-text-muted whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-normal leading-5 tabular-nums text-sui-text-muted whitespace-nowrap", children: [
             startResult,
             "\u2013",
             endResult,
@@ -12325,7 +12420,7 @@ var tableRowSortVariants = classVarianceAuthority.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"
       }
@@ -12335,7 +12430,7 @@ var tableRowSortVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TableRowSort = React77__namespace.forwardRef(
+var TableRowSort = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", striped, sticky, children } = _b, props = __objRest(_b, ["className", "variant", "striped", "sticky", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12358,7 +12453,7 @@ var TableRowSort = React77__namespace.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__namespace.forwardRef(
+var TableSkeletonRow = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, columns, rowCount = 5, size = "sm" } = _b, props = __objRest(_b, ["className", "columns", "rowCount", "size"]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className, "aria-hidden": "true" }, props), { children: Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRowSort, { variant: "default", children: columns.map((col, colIdx) => {
@@ -12408,12 +12503,12 @@ var tabListVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TabList = React77__namespace.forwardRef((_a, ref) => {
+var TabList = React78__namespace.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__namespace.Children.map(children, (child) => {
-    if (!React77__namespace.isValidElement(child)) return child;
+  const enhancedChildren = React78__namespace.Children.map(children, (child) => {
+    if (!React78__namespace.isValidElement(child)) return child;
     const extraProps = {
       shape: childShape
     };
@@ -12421,7 +12516,7 @@ var TabList = React77__namespace.forwardRef((_a, ref) => {
       const existingClassName = child.props.className;
       extraProps.className = cn(existingClassName, childRadiusOverride);
     }
-    return React77__namespace.cloneElement(child, extraProps);
+    return React78__namespace.cloneElement(child, extraProps);
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -12451,8 +12546,8 @@ var tabItemVariants = classVarianceAuthority.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",
@@ -12483,7 +12578,7 @@ var tabItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TabItem = React77__namespace.forwardRef((_a, ref) => {
+var TabItem = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, shape, size } = _b, props = __objRest(_b, ["className", "shape", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Trigger,
@@ -12495,7 +12590,7 @@ var TabItem = React77__namespace.forwardRef((_a, ref) => {
 });
 TabItem.displayName = "TabItem";
 var Tabs = TabsPrimitive4__namespace.Root;
-var TabsList = React77__namespace.forwardRef((_a, ref) => {
+var TabsList = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -12509,7 +12604,7 @@ var TabsList = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 TabsList.displayName = TabsPrimitive4__namespace.List.displayName;
-var TabsTrigger = React77__namespace.forwardRef((_a, ref) => {
+var TabsTrigger = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Trigger,
@@ -12523,7 +12618,7 @@ var TabsTrigger = React77__namespace.forwardRef((_a, ref) => {
   );
 });
 TabsTrigger.displayName = TabsPrimitive4__namespace.Trigger.displayName;
-var TabsContent = React77__namespace.forwardRef((_a, ref) => {
+var TabsContent = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Content,
@@ -12567,7 +12662,7 @@ var textAreaContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TextAreaField = React77__namespace.forwardRef(
+var TextAreaField = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12589,7 +12684,9 @@ var TextAreaField = React77__namespace.forwardRef(
       id,
       value,
       defaultValue,
-      onChange
+      onChange,
+      spellCheck,
+      autoComplete
     } = _b, props = __objRest(_b, [
       "className",
       "inputStyle",
@@ -12610,9 +12707,11 @@ var TextAreaField = React77__namespace.forwardRef(
       "id",
       "value",
       "defaultValue",
-      "onChange"
+      "onChange",
+      "spellCheck",
+      "autoComplete"
     ]);
-    const generatedId = React77__namespace.useId();
+    const generatedId = React78__namespace.useId();
     const textAreaId = id || generatedId;
     const captionId = `${textAreaId}-caption`;
     const charCountId = `${textAreaId}-charcount`;
@@ -12620,17 +12719,30 @@ var TextAreaField = React77__namespace.forwardRef(
     const helperText = hasError ? error : caption;
     const hasActionBar = !!(leadActions || tailActions);
     const showCount = !!(showCharCount && maxLength);
+    const innerRef = React78__namespace.useRef(null);
+    React78__namespace.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__namespace.useState(() => {
+    const [charCount, setCharCount] = React78__namespace.useState(() => {
       if (value !== void 0) return String(value).length;
       if (defaultValue !== void 0) return String(defaultValue).length;
       return 0;
     });
-    React77__namespace.useEffect(() => {
+    React78__namespace.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       }
@@ -12653,6 +12765,7 @@ var TextAreaField = React77__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
+          onPointerDown: focusTextareaOnDecorationClick,
           className: cn(
             textAreaContainerVariants({ inputStyle }),
             // overflow-clip clips rounded corners on children; disable when resizable
@@ -12683,11 +12796,13 @@ var TextAreaField = React77__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "textarea",
               __spreadValues({
-                ref,
+                ref: innerRef,
                 id: textAreaId,
                 rows: 1,
                 disabled,
                 required,
+                spellCheck: resolvedSpellCheck,
+                autoComplete: resolvedAutoComplete,
                 maxLength,
                 value,
                 defaultValue,
@@ -12696,7 +12811,8 @@ var TextAreaField = React77__namespace.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"
@@ -12720,10 +12836,12 @@ var TextAreaField = React77__namespace.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "textarea",
                     __spreadValues({
-                      ref,
+                      ref: innerRef,
                       id: textAreaId,
                       disabled,
                       required,
+                      spellCheck: resolvedSpellCheck,
+                      autoComplete: resolvedAutoComplete,
                       maxLength,
                       value,
                       defaultValue,
@@ -12732,7 +12850,8 @@ var TextAreaField = React77__namespace.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",
@@ -12809,11 +12928,12 @@ var TextAreaField = React77__namespace.forwardRef(
   }
 );
 TextAreaField.displayName = "TextAreaField";
-var Textarea = React77__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+var Textarea = React78__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, spellCheck } = _b, props = __objRest(_b, ["className", "spellCheck"]);
   return /* @__PURE__ */ jsxRuntime.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
@@ -12837,13 +12957,13 @@ var toggleVariants = classVarianceAuthority.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(" ")
@@ -12861,7 +12981,7 @@ var toggleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toggle = React77__namespace.forwardRef((_a, ref) => {
+var Toggle = React78__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TogglePrimitive__namespace.Root,
@@ -12873,7 +12993,7 @@ var Toggle = React77__namespace.forwardRef((_a, ref) => {
 });
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
 function useMergedRef(...refs) {
-  return React77__namespace.useCallback((node) => {
+  return React78__namespace.useCallback((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref && "current" in ref)
@@ -12902,13 +13022,13 @@ var chipSizeMap = {
   xs: "sm",
   "2xs": "sm"
 };
-var ToggleGroupContext = React77__namespace.createContext(null);
+var ToggleGroupContext = React78__namespace.createContext(null);
 function useToggleGroup() {
-  const ctx = React77__namespace.useContext(ToggleGroupContext);
+  const ctx = React78__namespace.useContext(ToggleGroupContext);
   if (!ctx) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
   return ctx;
 }
-var ToggleGroup = React77__namespace.forwardRef(
+var ToggleGroup = React78__namespace.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -12923,16 +13043,16 @@ var ToggleGroup = React77__namespace.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__namespace.useState(
+    const [internalValue, setInternalValue] = React78__namespace.useState(
       defaultValue
     );
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const [rovingFocusValue, setRovingFocusValue] = React77__namespace.useState(null);
-    const itemRefs = React77__namespace.useRef(/* @__PURE__ */ new Map());
-    const itemValues = React77__namespace.useRef([]);
-    const [, notifyRegistration] = React77__namespace.useReducer((x) => x + 1, 0);
-    const isActive = React77__namespace.useCallback(
+    const [rovingFocusValue, setRovingFocusValue] = React78__namespace.useState(null);
+    const itemRefs = React78__namespace.useRef(/* @__PURE__ */ new Map());
+    const itemValues = React78__namespace.useRef([]);
+    const [, notifyRegistration] = React78__namespace.useReducer((x) => x + 1, 0);
+    const isActive = React78__namespace.useCallback(
       (itemValue) => {
         if (type === "single") return value === itemValue;
         if (type === "multiple" && Array.isArray(value)) return value.includes(itemValue);
@@ -12940,7 +13060,7 @@ var ToggleGroup = React77__namespace.forwardRef(
       },
       [type, value]
     );
-    const toggle = React77__namespace.useCallback(
+    const toggle = React78__namespace.useCallback(
       (itemValue) => {
         if (type === "single") {
           const newValue = value === itemValue ? void 0 : itemValue;
@@ -12984,7 +13104,7 @@ var ToggleGroup = React77__namespace.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React77__namespace.forwardRef(
+var ToggleGroupItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: itemValue,
@@ -13019,9 +13139,9 @@ var ToggleGroupItem = React77__namespace.forwardRef(
     const disabled = ctx.disabled || itemDisabled;
     const resolvedSize = bgSize != null ? bgSize : "lg";
     const chipSize = chipSizeMap[resolvedSize];
-    const internalRef = React77__namespace.useRef(null);
+    const internalRef = React78__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    React77__namespace.useEffect(() => {
+    React78__namespace.useEffect(() => {
       const el = internalRef.current;
       if (!el) return;
       ctx.itemRefs.current.set(itemValue, el);
@@ -13151,11 +13271,11 @@ var ToggleGroupItem = React77__namespace.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",
@@ -13189,9 +13309,9 @@ var ToggleGroupItem = React77__namespace.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
@@ -13212,12 +13332,12 @@ var userbarVariants = classVarianceAuthority.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",
@@ -13238,7 +13358,7 @@ var containedInnerVariants = classVarianceAuthority.cva(
     "group-hover:bg-sui-bg-state-secondary-hover group-active:bg-sui-bg-state-secondary-press"
   ]
 );
-var Userbar = React77__namespace.forwardRef(
+var Userbar = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13347,7 +13467,7 @@ var Userbar = React77__namespace.forwardRef(
   }
 );
 Userbar.displayName = "Userbar";
-var VerticalStepperItem = React77__namespace.forwardRef(
+var VerticalStepperItem = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13483,7 +13603,7 @@ var VerticalStepperItem = React77__namespace.forwardRef(
   }
 );
 VerticalStepperItem.displayName = "VerticalStepperItem";
-var VerticalStepper = React77__namespace.forwardRef(
+var VerticalStepper = React78__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,