@gryt/ui 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,46 +1,46 @@
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { Tooltip as R } from "@base-ui/react/tooltip";
-import { Button as at } from "@base-ui/react/button";
-import { forwardRef as s, useRef as yt, useCallback as Q, useLayoutEffect as mt, useSyncExternalStore as pt, useContext as W, createContext as bt } from "react";
-import { clsx as ft } from "clsx";
-import { twMerge as xt } from "tailwind-merge";
+import { Tooltip as I } from "@base-ui/react/tooltip";
+import { Button as it } from "@base-ui/react/button";
+import { forwardRef as s, useRef as st, useCallback as U, useLayoutEffect as ft, useState as xt, useEffect as ht, useSyncExternalStore as wt, useContext as W, createContext as vt } from "react";
+import { clsx as Nt } from "clsx";
+import { twMerge as Pt } from "tailwind-merge";
 import { Field as E } from "@base-ui/react/field";
-import { PaperPlaneTilt as ht, X as nt, Check as st, CaretUpDown as wt, CircleNotch as vt, CaretDown as Nt, Minus as Pt, Plus as kt } from "@phosphor-icons/react";
+import { PaperPlaneTilt as kt, X as ct, Check as lt, CaretUpDown as Tt, CircleNotch as Ct, CaretDown as $t, Minus as St, Plus as Rt } from "@phosphor-icons/react";
 import { Avatar as X } from "@base-ui/react/avatar";
-import { Checkbox as Z } from "@base-ui/react/checkbox";
-import { Radio as q } from "@base-ui/react/radio";
-import { RadioGroup as Tt } from "@base-ui/react/radio-group";
-import { Switch as tt } from "@base-ui/react/switch";
+import { Checkbox as q } from "@base-ui/react/checkbox";
+import { Radio as tt } from "@base-ui/react/radio";
+import { RadioGroup as It } from "@base-ui/react/radio-group";
+import { Switch as et } from "@base-ui/react/switch";
 import { Slider as B } from "@base-ui/react/slider";
-import { Select as f } from "@base-ui/react/select";
-import { Separator as $t } from "@base-ui/react/separator";
-import { Progress as Y } from "@base-ui/react/progress";
-import { Dialog as k } from "@base-ui/react/dialog";
-import { Drawer as h } from "@base-ui/react/drawer";
-import { Menu as I } from "@base-ui/react/menu";
+import { Select as x } from "@base-ui/react/select";
+import { Separator as Dt } from "@base-ui/react/separator";
+import { Progress as O } from "@base-ui/react/progress";
+import { Dialog as C } from "@base-ui/react/dialog";
+import { Drawer as v } from "@base-ui/react/drawer";
+import { Menu as D } from "@base-ui/react/menu";
 import { Tabs as V } from "@base-ui/react/tabs";
 import { Accordion as F } from "@base-ui/react/accordion";
-import { ContextMenu as P } from "@base-ui/react/context-menu";
-import { Popover as w } from "@base-ui/react/popover";
-import { Toast as v } from "@base-ui/react/toast";
-import { ScrollArea as L } from "@base-ui/react/scroll-area";
-import { Toggle as Ct } from "@base-ui/react/toggle";
-import { ToggleGroup as St } from "@base-ui/react/toggle-group";
+import { ContextMenu as T } from "@base-ui/react/context-menu";
+import { Popover as P } from "@base-ui/react/popover";
+import { Toast as k } from "@base-ui/react/toast";
+import { ScrollArea as j } from "@base-ui/react/scroll-area";
+import { Toggle as At } from "@base-ui/react/toggle";
+import { ToggleGroup as Mt } from "@base-ui/react/toggle-group";
 import { Meter as z } from "@base-ui/react/meter";
-import { AlertDialog as T } from "@base-ui/react/alert-dialog";
-import { Autocomplete as u } from "@base-ui/react/autocomplete";
+import { AlertDialog as $ } from "@base-ui/react/alert-dialog";
+import { Autocomplete as p } from "@base-ui/react/autocomplete";
 import { Combobox as g } from "@base-ui/react/combobox";
-import { CheckboxGroup as Rt } from "@base-ui/react/checkbox-group";
-import { Collapsible as _ } from "@base-ui/react/collapsible";
-import { Form as It } from "@base-ui/react/form";
-import { Fieldset as it } from "@base-ui/react/fieldset";
-import { Menubar as At } from "@base-ui/react/menubar";
-import { NavigationMenu as x } from "@base-ui/react/navigation-menu";
-import { NumberField as S } from "@base-ui/react/number-field";
-import { OTPField as et } from "@base-ui/react/otp-field";
-import { PreviewCard as D } from "@base-ui/react/preview-card";
-import { Toolbar as M } from "@base-ui/react/toolbar";
-const rt = {
+import { CheckboxGroup as Lt } from "@base-ui/react/checkbox-group";
+import { Collapsible as Q } from "@base-ui/react/collapsible";
+import { Form as jt } from "@base-ui/react/form";
+import { Fieldset as dt } from "@base-ui/react/fieldset";
+import { Menubar as Gt } from "@base-ui/react/menubar";
+import { NavigationMenu as h } from "@base-ui/react/navigation-menu";
+import { NumberField as R } from "@base-ui/react/number-field";
+import { OTPField as rt } from "@base-ui/react/otp-field";
+import { PreviewCard as M } from "@base-ui/react/preview-card";
+import { Toolbar as L } from "@base-ui/react/toolbar";
+const ot = {
   color: {
     bg: "#111318",
     surface: "#1a1d24",
@@ -69,8 +69,8 @@ const rt = {
     full: 999
   }
 };
-function Dt(a = {}) {
-  const t = { ...rt.color, ...a.color }, e = { ...rt.radius, ...a.radius };
+function Bt(a = {}) {
+  const t = { ...ot.color, ...a.color }, e = { ...ot.radius, ...a.radius };
   return {
     "--gryt-bg": t.bg,
     "--gryt-surface": t.surface,
@@ -118,33 +118,33 @@ function Dt(a = {}) {
     "--gryt-radius-full": `${e.full}px`
   };
 }
-function Mt(a) {
+function zt(a) {
   return Object.keys(a).some((t) => t.startsWith("--"));
 }
-function eo({
+function so({
   children: a,
   className: t,
   theme: e,
   tooltipDelay: r = 400
 }) {
-  const i = e && Mt(e) ? e : Dt(e ?? {});
-  return /* @__PURE__ */ o("div", { className: t, style: i, children: /* @__PURE__ */ o(R.Provider, { delay: r, children: a }) });
+  const i = e && zt(e) ? e : Bt(e ?? {});
+  return /* @__PURE__ */ o("div", { className: t, style: i, children: /* @__PURE__ */ o(I.Provider, { delay: r, children: a }) });
 }
 function n(...a) {
-  return xt(ft(a));
+  return Pt(Nt(a));
 }
-const Lt = {
+const Ft = {
   primary: "bg-gryt-accent text-gryt-on-accent hover:not-data-disabled:bg-gryt-accent-light",
   secondary: "bg-gryt-secondary text-gryt-on-secondary hover:not-data-disabled:bg-gryt-secondary-light",
   neutral: "bg-gryt-surface-raised text-gryt-text hover:not-data-disabled:bg-gryt-surface-hover",
   danger: "bg-gryt-danger text-gryt-on-danger hover:not-data-disabled:bg-gryt-danger-light",
   ghost: "bg-transparent text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
-}, jt = {
+}, Vt = {
   xsmall: "min-h-8 px-3 text-xs",
   small: "min-h-9 px-4 text-sm",
   medium: "min-h-10 px-5 text-sm",
   large: "min-h-12 px-6 text-base"
-}, Gt = s(
+}, Et = s(
   function({
     children: t,
     className: e,
@@ -152,12 +152,12 @@ const Lt = {
     size: i = "medium",
     startIcon: c,
     tone: l = "primary",
-    ...p
-  }, m) {
+    ...m
+  }, u) {
     return /* @__PURE__ */ d(
-      at,
+      it,
       {
-        ref: m,
+        ref: u,
         className: n(
           "gryt-button",
           "inline-flex items-center justify-center gap-2 border-0 shadow-none",
@@ -169,15 +169,21 @@ const Lt = {
           "duration-(--gryt-dur-spring) ease-spring",
           // Press travels further than hover, so the button reads as being
           // pushed down rather than just acknowledging the cursor.
-          "motion-safe:hover:not-data-disabled:scale-[1.03]",
-          "motion-safe:active:not-data-disabled:scale-[0.96]",
+          // A button that opens something does not grow under the cursor.
+          // Base UI positions the popup against the trigger's measured box, and
+          // it keeps measuring while the popup is open — so a trigger that
+          // scales on hover drags its own menu a pixel or two sideways every
+          // time the pointer crosses it. aria-haspopup is how the trigger says
+          // that is what it is; Base UI puts it there, nothing to pass.
+          "motion-safe:not-[[aria-haspopup]]:hover:not-data-disabled:scale-[1.03]",
+          "motion-safe:not-[[aria-haspopup]]:active:not-data-disabled:scale-[0.96]",
           "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light",
           "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-          jt[i],
-          Lt[l],
+          Vt[i],
+          Ft[l],
           e
         ),
-        ...p,
+        ...m,
         children: [
           c,
           t,
@@ -186,56 +192,65 @@ const Lt = {
       }
     );
   }
-), y = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", $ = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", C = [
+), b = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light", _t = "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-gryt-accent-light", gt = [
+  "w-full rounded-(--gryt-radius-xl) border bg-gryt-surface-raised",
+  "text-gryt-text outline-none placeholder:text-gryt-muted",
+  "transition-colors duration-150 motion-reduce:transition-none",
+  "hover:border-gryt-accent-light focus:border-gryt-accent",
+  "disabled:cursor-not-allowed disabled:opacity-60"
+].join(" "), ut = {
+  small: "min-h-9 px-3 py-1.5 text-sm",
+  medium: "min-h-11 px-4 py-2.5 text-sm"
+}, A = "rounded-(--gryt-radius-xl) border border-gryt-border bg-gryt-surface text-gryt-text", S = [
   // scale and translate are named explicitly because Tailwind v4 sets them as
   // standalone CSS properties rather than folding them into `transform`, so
   // transitioning `transform` would leave the popup snapping into place.
   "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
   "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
   "data-ending-style:scale-[0.98] data-ending-style:opacity-0"
-].join(" "), j = "data-disabled:cursor-not-allowed data-disabled:opacity-50", Bt = {
+].join(" "), G = "data-disabled:cursor-not-allowed data-disabled:opacity-50", Ht = {
   primary: "data-checked:bg-gryt-accent data-checked:text-gryt-on-accent",
   secondary: "data-checked:bg-gryt-secondary data-checked:text-gryt-on-secondary",
   neutral: "data-checked:bg-gryt-surface-hover data-checked:text-gryt-text",
   danger: "data-checked:bg-gryt-danger data-checked:text-gryt-on-danger",
   success: "data-checked:bg-gryt-success data-checked:text-gryt-on-accent",
   warning: "data-checked:bg-gryt-warning data-checked:text-gryt-on-accent"
-}, ct = {
+}, yt = {
   primary: "bg-gryt-accent",
   secondary: "bg-gryt-secondary",
   neutral: "bg-gryt-surface-hover",
   danger: "bg-gryt-danger",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning"
-}, zt = {
+}, Xt = {
   primary: "data-checked:border-gryt-accent",
   secondary: "data-checked:border-gryt-secondary",
   neutral: "data-checked:border-gryt-muted",
   danger: "data-checked:border-gryt-danger",
   success: "data-checked:border-gryt-success",
   warning: "data-checked:border-gryt-warning"
-}, Ft = {
+}, Ot = {
   primary: "data-checked:bg-gryt-accent",
   secondary: "data-checked:bg-gryt-secondary",
   neutral: "data-checked:bg-gryt-surface-hover",
   danger: "data-checked:bg-gryt-danger",
   success: "data-checked:bg-gryt-success",
   warning: "data-checked:bg-gryt-warning"
-}, Vt = {
+}, Yt = {
   primary: "text-gryt-accent hover:not-data-disabled:bg-gryt-accent/10",
   secondary: "text-gryt-secondary hover:not-data-disabled:bg-gryt-secondary/10",
   neutral: "text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text",
   danger: "text-gryt-danger hover:not-data-disabled:bg-gryt-danger/10",
   ghost: "text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
-}, Et = {
+}, Ut = {
   xsmall: "h-8 w-8",
   small: "h-9 w-9",
   medium: "h-10 w-10",
   large: "h-12 w-12"
-}, ro = s(
+}, co = s(
   function({ className: t, size: e = "medium", tone: r = "neutral", ...i }, c) {
     return /* @__PURE__ */ o(
-      at,
+      it,
       {
         ref: c,
         className: n(
@@ -244,19 +259,25 @@ const Lt = {
           "rounded-(--gryt-radius-full) select-none",
           // scale rather than transform — see the note in Button.
           "transition-[scale,background-color,color] duration-(--gryt-dur-spring) ease-spring",
-          "motion-safe:hover:not-data-disabled:scale-[1.06]",
-          "motion-safe:active:not-data-disabled:scale-[0.94]",
-          y,
-          j,
-          Et[e],
-          Vt[r],
+          // A button that opens something does not grow under the cursor.
+          // Base UI positions the popup against the trigger's measured box, and
+          // it keeps measuring while the popup is open — so a trigger that
+          // scales on hover drags its own menu a pixel or two sideways every
+          // time the pointer crosses it. aria-haspopup is how the trigger says
+          // that is what it is; Base UI puts it there, nothing to pass.
+          "motion-safe:not-[[aria-haspopup]]:hover:not-data-disabled:scale-[1.06]",
+          "motion-safe:not-[[aria-haspopup]]:active:not-data-disabled:scale-[0.94]",
+          b,
+          G,
+          Ut[e],
+          Yt[r],
           t
         ),
         ...i
       }
     );
   }
-), oo = s(
+), lo = s(
   function({ className: t, elevated: e = !1, ...r }, i) {
     return /* @__PURE__ */ o(
       "div",
@@ -271,7 +292,7 @@ const Lt = {
       }
     );
   }
-), ao = s(
+), go = s(
   function({ children: t, className: e, from: r = "assistant", ...i }, c) {
     return /* @__PURE__ */ o(
       "div",
@@ -289,10 +310,7 @@ const Lt = {
       }
     );
   }
-), Ht = {
-  small: "min-h-9 px-3 py-1.5 text-sm",
-  medium: "min-h-11 px-4 py-2.5 text-sm"
-}, no = s(
+), uo = s(
   function({
     className: t,
     error: e = !1,
@@ -300,27 +318,24 @@ const Lt = {
     helperText: i,
     label: c,
     minRows: l = 3,
-    multiline: p = !1,
-    size: m = "medium",
-    ...N
-  }, A) {
-    const G = /* @__PURE__ */ o(
+    multiline: m = !1,
+    size: u = "medium",
+    ...w
+  }, y) {
+    const N = /* @__PURE__ */ o(
       E.Control,
       {
-        ref: A,
-        render: p ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
+        ref: y,
+        render: m ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
         className: n(
-          "gryt-text-field-control w-full rounded-(--gryt-radius-xl) border bg-gryt-surface-raised",
-          "text-gryt-text outline-none placeholder:text-gryt-muted",
-          "transition-colors duration-150",
-          "hover:border-gryt-accent-light focus:border-gryt-accent",
-          "disabled:cursor-not-allowed disabled:opacity-60",
-          p && "resize-y leading-6",
+          "gryt-text-field-control",
+          gt,
+          m && "resize-y leading-6",
           e ? "border-gryt-danger" : "border-gryt-border",
-          Ht[m],
+          ut[u],
           t
         ),
-        ...N
+        ...w
       }
     );
     return /* @__PURE__ */ d(
@@ -332,7 +347,7 @@ const Lt = {
         ),
         children: [
           c ? /* @__PURE__ */ o(E.Label, { className: "text-xs font-medium text-gryt-muted", children: c }) : null,
-          G,
+          N,
           i ? /* @__PURE__ */ o(
             E.Description,
             {
@@ -347,7 +362,7 @@ const Lt = {
       }
     );
   }
-), so = s(
+), yo = s(
   function({
     className: t,
     disabled: e = !1,
@@ -355,70 +370,70 @@ const Lt = {
     minRows: i = 1,
     onSubmit: c,
     placeholder: l = "Message Gryt",
-    submitLabel: p = "Send",
-    ...m
-  }, N) {
-    const A = yt(null), G = Q(() => {
-      const b = A.current;
-      if (!b)
+    submitLabel: m = "Send",
+    ...u
+  }, w) {
+    const y = st(null), N = U(() => {
+      const f = y.current;
+      if (!f)
         return;
-      const O = window.getComputedStyle(b), J = parseFloat(O.lineHeight) || 24, K = parseFloat(O.paddingTop) + parseFloat(O.paddingBottom);
-      b.style.height = "auto", b.style.height = `${Math.min(
-        Math.max(b.scrollHeight, J * i + K),
-        J * r + K
+      const H = window.getComputedStyle(f), K = parseFloat(H.lineHeight) || 24, Z = parseFloat(H.paddingTop) + parseFloat(H.paddingBottom);
+      f.style.height = "auto", f.style.height = `${Math.min(
+        Math.max(f.scrollHeight, K * i + Z),
+        K * r + Z
       )}px`;
     }, [r, i]);
-    mt(G, [G, m.value]);
-    function ut(b) {
+    ft(N, [N, u.value]);
+    function J(f) {
       if (!c) {
-        b.preventDefault();
+        f.preventDefault();
         return;
       }
-      c(b);
+      c(f);
     }
-    return /* @__PURE__ */ d("form", { className: n("gryt-composer", t), onSubmit: ut, children: [
+    return /* @__PURE__ */ d("form", { className: n("gryt-composer", t), onSubmit: J, children: [
       /* @__PURE__ */ o(
         "textarea",
         {
-          ref: (b) => {
-            A.current = b, typeof N == "function" ? N(b) : N && (N.current = b);
+          ref: (f) => {
+            y.current = f, typeof w == "function" ? w(f) : w && (w.current = f);
           },
           rows: i,
           disabled: e,
           placeholder: l,
-          onInput: G,
+          onInput: N,
           className: "gryt-composer-textarea disabled:cursor-not-allowed disabled:opacity-60",
-          ...m
+          ...u
         }
       ),
       /* @__PURE__ */ o(
-        Gt,
+        Et,
         {
           type: "submit",
           disabled: e,
           size: "small",
-          endIcon: /* @__PURE__ */ o(ht, { size: 14, weight: "fill" }),
-          children: p
+          endIcon: /* @__PURE__ */ o(kt, { size: 14, weight: "fill" }),
+          children: m
         }
       )
     ] });
   }
-), Ot = {
+), Wt = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, Xt = s(function({ alt: t, children: e, className: r, fallback: i, size: c = "medium", src: l, ...p }, m) {
+}, Qt = s(function({ alt: t, children: e, className: r, fallback: i, size: c = "medium", src: l, ...m }, u) {
   return /* @__PURE__ */ d(
     X.Root,
     {
-      ref: m,
+      ref: u,
       className: n(
         "gryt-avatar inline-flex shrink-0 items-center justify-center overflow-hidden align-middle select-none",
         "rounded-(--gryt-radius-full) bg-gryt-surface-raised font-medium text-gryt-text ring-1 ring-gryt-border",
-        Ot[c],
+        Wt[c],
         r
       ),
-      ...p,
+      ...m,
       children: [
         l ? /* @__PURE__ */ o(
           X.Image,
@@ -432,11 +447,11 @@ const Lt = {
       ]
     }
   );
-}), io = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, p) {
+}), mo = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, m) {
   return /* @__PURE__ */ d(
     "button",
     {
-      ref: p,
+      ref: m,
       type: "button",
       className: n(
         "gryt-conversation-item",
@@ -446,7 +461,7 @@ const Lt = {
       ...l,
       children: [
         e ?? /* @__PURE__ */ o(
-          Xt,
+          Qt,
           {
             size: "small",
             className: n(
@@ -471,17 +486,17 @@ const Lt = {
       ]
     }
   );
-}), co = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, p) {
-  const m = typeof t == "number" ? t : null, N = m !== null && m === 0 && !c, A = m !== null && m > i ? `${i}+` : t;
+}), po = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, m) {
+  const u = typeof t == "number" ? t : null, w = u !== null && u === 0 && !c, y = u !== null && u > i ? `${i}+` : t;
   return /* @__PURE__ */ d(
     "span",
     {
-      ref: p,
+      ref: m,
       className: n("gryt-badge relative inline-flex", r),
       ...l,
       children: [
         e,
-        t !== void 0 && !N ? /* @__PURE__ */ o(
+        t !== void 0 && !w ? /* @__PURE__ */ o(
           "span",
           {
             className: n(
@@ -490,30 +505,30 @@ const Lt = {
               "bg-gryt-accent text-[0.65rem] leading-none font-semibold text-gryt-on-accent",
               "ring-2 ring-gryt-bg"
             ),
-            children: A
+            children: y
           }
         ) : null
       ]
     }
   );
-}), Yt = {
+}), Jt = {
   neutral: "border-gryt-border bg-gryt-surface-raised text-gryt-text",
   primary: "border-gryt-accent/40 bg-gryt-accent/12 text-gryt-accent",
   secondary: "border-gryt-secondary/40 bg-gryt-secondary/12 text-gryt-secondary",
   success: "border-gryt-success/40 bg-gryt-success/12 text-gryt-success",
   warning: "border-gryt-warning/40 bg-gryt-warning/12 text-gryt-warning",
   danger: "border-gryt-danger/40 bg-gryt-danger/12 text-gryt-danger"
-}, lo = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...p }, m) {
+}, bo = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...m }, u) {
   return /* @__PURE__ */ d(
     "span",
     {
-      ref: m,
+      ref: u,
       className: n(
         "gryt-chip inline-flex items-center gap-1.5 rounded-(--gryt-radius-full) border px-3 py-1 text-xs font-medium",
-        Yt[l],
+        Jt[l],
         e
       ),
-      ...p,
+      ...m,
       children: [
         r,
         i ?? t,
@@ -526,18 +541,18 @@ const Lt = {
             className: n(
               "-mr-1 inline-flex h-4 w-4 items-center justify-center rounded-(--gryt-radius-full)",
               "opacity-70 transition-opacity hover:opacity-100",
-              y
+              b
             ),
-            children: /* @__PURE__ */ o(nt, { size: 10, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ o(ct, { size: 10, weight: "bold", "aria-hidden": "true" })
           }
         ) : null
       ]
     }
   );
-}), go = s(
+}), fo = s(
   function({ className: t, tone: e = "primary", ...r }, i) {
     return /* @__PURE__ */ o(
-      Z.Root,
+      q.Root,
       {
         ref: i,
         className: n(
@@ -550,15 +565,15 @@ const Lt = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.08]",
           "motion-safe:active:not-data-disabled:scale-[0.92]",
-          y,
-          j,
+          b,
+          G,
           // Unchecked stays a neutral outline; the tone only paints once checked.
-          Bt[e],
+          Ht[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          Z.Indicator,
+          q.Indicator,
           {
             keepMounted: !0,
             className: n(
@@ -571,15 +586,15 @@ const Lt = {
               "data-unchecked:scale-0 data-unchecked:opacity-0",
               "motion-reduce:transition-none"
             ),
-            children: /* @__PURE__ */ o(st, { size: 12, weight: "bold" })
+            children: /* @__PURE__ */ o(lt, { size: 12, weight: "bold" })
           }
         )
       }
     );
   }
-), uo = s(function({ className: t, tone: e = "primary", ...r }, i) {
+), xo = s(function({ className: t, tone: e = "primary", ...r }, i) {
   return /* @__PURE__ */ o(
-    q.Root,
+    tt.Root,
     {
       ref: i,
       className: n(
@@ -589,15 +604,15 @@ const Lt = {
         "hover:not-data-disabled:border-gryt-accent-light",
         "motion-safe:hover:not-data-disabled:scale-[1.08]",
         "motion-safe:active:not-data-disabled:scale-[0.92]",
-        y,
-        j,
+        b,
+        G,
         // Border takes the tone when selected; the dot inside carries the fill.
-        zt[e],
+        Xt[e],
         t
       ),
       ...r,
       children: /* @__PURE__ */ o(
-        q.Indicator,
+        tt.Indicator,
         {
           keepMounted: !0,
           className: n(
@@ -606,16 +621,16 @@ const Lt = {
             // From 0, for the same reason as the Checkbox tick — see the note there.
             "data-unchecked:scale-0 data-unchecked:opacity-0",
             "motion-reduce:transition-none",
-            ct[e]
+            yt[e]
           )
         }
       )
     }
   );
-}), yo = s(
+}), ho = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Tt,
+      It,
       {
         ref: r,
         className: n("gryt-radio-group flex flex-col gap-2", t),
@@ -623,10 +638,10 @@ const Lt = {
       }
     );
   }
-), mo = s(
+), wo = s(
   function({ className: t, tone: e = "primary", ...r }, i) {
     return /* @__PURE__ */ o(
-      tt.Root,
+      et.Root,
       {
         ref: i,
         className: n(
@@ -637,14 +652,14 @@ const Lt = {
           "hover:not-data-disabled:border-gryt-accent-light",
           "motion-safe:hover:not-data-disabled:scale-[1.05]",
           "motion-safe:active:not-data-disabled:scale-[0.95]",
-          y,
-          j,
-          Ft[e],
+          b,
+          G,
+          Ot[e],
           t
         ),
         ...r,
         children: /* @__PURE__ */ o(
-          tt.Thumb,
+          et.Thumb,
           {
             className: n(
               "h-4.5 w-4.5 rounded-(--gryt-radius-full) bg-gryt-text",
@@ -656,25 +671,49 @@ const Lt = {
       }
     );
   }
-);
-function po({
+), at = 3;
+function vo({
   className: a,
   tone: t = "primary",
   "aria-label": e,
   ...r
 }) {
-  return /* @__PURE__ */ o(
-    B.Root,
+  const [i, c] = xt(!1), l = st(null);
+  ht(() => {
+    if (!i && l.current === null)
+      return;
+    const y = () => {
+      l.current = null, c(!1);
+    };
+    return window.addEventListener("pointerup", y), window.addEventListener("pointercancel", y), () => {
+      window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
+    };
+  }, [i]);
+  function m(y) {
+    l.current = { x: y.clientX, y: y.clientY };
+  }
+  function u(y) {
+    const N = l.current;
+    if (N === null || i)
+      return;
+    (Math.abs(y.clientX - N.x) > at || Math.abs(y.clientY - N.y) > at) && c(!0);
+  }
+  const w = i ? "transition-none" : "duration-(--gryt-dur-spring) ease-spring-tight motion-reduce:transition-none";
+  return /* @__PURE__ */ o(B.Root, { className: n("gryt-slider w-full", a), ...r, children: /* @__PURE__ */ o(
+    B.Control,
     {
-      className: n("gryt-slider w-full", a),
-      ...r,
-      children: /* @__PURE__ */ o(B.Control, { className: "flex w-full touch-none items-center py-2 select-none", children: /* @__PURE__ */ d(B.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
+      className: "flex w-full touch-none items-center py-2 select-none",
+      onPointerDown: m,
+      onPointerMove: u,
+      children: /* @__PURE__ */ d(B.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
         /* @__PURE__ */ o(
           B.Indicator,
           {
             className: n(
               "h-full rounded-(--gryt-radius-full) select-none",
-              ct[t]
+              "transition-[width]",
+              w,
+              yt[t]
             )
           }
         ),
@@ -683,22 +722,37 @@ function po({
           {
             "aria-label": e,
             className: n(
-              "h-4 w-4 rounded-(--gryt-radius-full) bg-gryt-text select-none",
-              "transition-transform duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none",
-              "motion-safe:hover:scale-[1.12] motion-safe:active:scale-[0.94]",
-              y
+              "group h-4 w-4 rounded-(--gryt-radius-full) select-none",
+              "transition-[inset-inline-start]",
+              w,
+              // The ring goes on the thumb but the focus lands on the visually
+              // hidden input inside it, so this has to match a descendant.
+              // Without it the slider is the one control here you cannot see
+              // yourself tab to.
+              _t
+            ),
+            children: /* @__PURE__ */ o(
+              "span",
+              {
+                className: n(
+                  "block h-full w-full rounded-(--gryt-radius-full) bg-gryt-text",
+                  "transition-[scale] duration-(--gryt-dur-spring) ease-spring",
+                  "motion-safe:group-hover:scale-[1.12] motion-safe:group-active:scale-[0.94]",
+                  "motion-reduce:transition-none"
+                )
+              }
             )
           }
         )
-      ] }) })
+      ] })
     }
-  );
+  ) });
 }
-const Ut = {
+const Kt = {
   small: "min-h-9 px-3 text-sm",
   medium: "min-h-11 px-4 text-sm"
 };
-function bo({
+function No({
   className: a,
   label: t,
   options: e = [],
@@ -706,11 +760,11 @@ function bo({
   size: i = "medium",
   ...c
 }) {
-  return /* @__PURE__ */ d(f.Root, { items: e, ...c, children: [
+  return /* @__PURE__ */ d(x.Root, { items: e, ...c, children: [
     /* @__PURE__ */ d("div", { className: n("gryt-select flex w-full flex-col gap-1.5", a), children: [
-      t ? /* @__PURE__ */ o(f.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
+      t ? /* @__PURE__ */ o(x.Label, { className: "text-xs font-medium text-gryt-muted", children: t }) : null,
       /* @__PURE__ */ d(
-        f.Trigger,
+        x.Trigger,
         {
           className: n(
             "flex w-full items-center justify-between gap-2",
@@ -718,22 +772,22 @@ function bo({
             "text-gryt-text select-none",
             "transition-colors duration-150 hover:border-gryt-accent-light",
             "data-disabled:cursor-not-allowed data-disabled:opacity-60",
-            y,
-            Ut[i]
+            b,
+            Kt[i]
           ),
           children: [
-            /* @__PURE__ */ o(f.Value, { placeholder: r }),
-            /* @__PURE__ */ o(f.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(wt, { size: 16 }) })
+            /* @__PURE__ */ o(x.Value, { placeholder: r }),
+            /* @__PURE__ */ o(x.Icon, { className: "shrink-0 text-gryt-muted", children: /* @__PURE__ */ o(Tt, { size: 16 }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ o(f.Portal, { children: /* @__PURE__ */ o(f.Positioner, { sideOffset: 6, className: "outline-none", children: /* @__PURE__ */ o(
-      f.Popup,
+    /* @__PURE__ */ o(x.Portal, { children: /* @__PURE__ */ o(x.Positioner, { sideOffset: 6, className: "outline-none", children: /* @__PURE__ */ o(
+      x.Popup,
       {
-        className: n("min-w-(--anchor-width) p-1", $, C),
-        children: /* @__PURE__ */ o(f.List, { children: e.map((l) => /* @__PURE__ */ d(
-          f.Item,
+        className: n("min-w-(--anchor-width) p-1", A, S),
+        children: /* @__PURE__ */ o(x.List, { children: e.map((l) => /* @__PURE__ */ d(
+          x.Item,
           {
             value: l.value,
             disabled: l.disabled,
@@ -744,8 +798,8 @@ function bo({
               "data-disabled:cursor-not-allowed data-disabled:opacity-50"
             ),
             children: [
-              /* @__PURE__ */ o(f.ItemText, { children: l.label }),
-              /* @__PURE__ */ o(f.ItemIndicator, { className: "text-gryt-accent", children: /* @__PURE__ */ o(st, { size: 14, weight: "bold" }) })
+              /* @__PURE__ */ o(x.ItemText, { children: l.label }),
+              /* @__PURE__ */ o(x.ItemIndicator, { className: "text-gryt-accent", children: /* @__PURE__ */ o(lt, { size: 14, weight: "bold" }) })
             ]
           },
           String(l.value)
@@ -754,22 +808,22 @@ function bo({
     ) }) })
   ] });
 }
-function fo({
+function Po({
   children: a,
   className: t,
   side: e = "top",
   sideOffset: r = 8,
   title: i
 }) {
-  return /* @__PURE__ */ d(R.Root, { children: [
-    /* @__PURE__ */ o(R.Trigger, { render: a }),
-    /* @__PURE__ */ o(R.Portal, { children: /* @__PURE__ */ o(R.Positioner, { side: e, sideOffset: r, children: /* @__PURE__ */ o(
-      R.Popup,
+  return /* @__PURE__ */ d(I.Root, { children: [
+    /* @__PURE__ */ o(I.Trigger, { render: a }),
+    /* @__PURE__ */ o(I.Portal, { children: /* @__PURE__ */ o(I.Positioner, { side: e, sideOffset: r, children: /* @__PURE__ */ o(
+      I.Popup,
       {
         className: n(
           "gryt-tooltip rounded-(--gryt-radius-md) border border-gryt-border bg-gryt-surface-raised",
           "px-2.5 py-1.5 text-xs text-gryt-text",
-          C,
+          S,
           t
         ),
         children: i
@@ -777,10 +831,10 @@ function fo({
     ) }) })
   ] });
 }
-const xo = R.Provider, ho = s(
+const ko = I.Provider, To = s(
   function({ className: t, orientation: e = "horizontal", ...r }, i) {
     return /* @__PURE__ */ o(
-      $t,
+      Dt,
       {
         ref: i,
         orientation: e,
@@ -793,7 +847,7 @@ const xo = R.Provider, ho = s(
       }
     );
   }
-), wo = s(function({ className: t, ...e }, r) {
+), Co = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     "div",
     {
@@ -806,7 +860,7 @@ const xo = R.Provider, ho = s(
     }
   );
 });
-function vo({
+function $o({
   children: a,
   className: t,
   subheader: e,
@@ -826,7 +880,7 @@ function vo({
     }
   );
 }
-function No({
+function So({
   className: a,
   ...t
 }) {
@@ -841,7 +895,7 @@ function No({
     }
   );
 }
-function Po({
+function Ro({
   className: a,
   ...t
 }) {
@@ -856,12 +910,12 @@ function Po({
     }
   );
 }
-const Qt = {
+const Zt = {
   info: "border-gryt-secondary/40 bg-gryt-secondary/10 text-gryt-secondary",
   success: "border-gryt-success/40 bg-gryt-success/10 text-gryt-success",
   warning: "border-gryt-warning/40 bg-gryt-warning/10 text-gryt-warning",
   error: "border-gryt-danger/40 bg-gryt-danger/10 text-gryt-danger"
-}, ko = s(function({ className: t, severity: e = "info", ...r }, i) {
+}, Io = s(function({ className: t, severity: e = "info", ...r }, i) {
   return /* @__PURE__ */ o(
     "div",
     {
@@ -869,31 +923,31 @@ const Qt = {
       role: "alert",
       className: n(
         "gryt-alert rounded-(--gryt-radius-lg) border px-4 py-3 text-sm",
-        Qt[e],
+        Zt[e],
         t
       ),
       ...r
     }
   );
 });
-function To({ className: a, value: t = null, ...e }) {
+function Do({ className: a, value: t = null, ...e }) {
   return /* @__PURE__ */ o(
-    Y.Root,
+    O.Root,
     {
       value: t,
       className: n("gryt-progress w-full", a),
       ...e,
-      children: /* @__PURE__ */ o(Y.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(Y.Indicator, { className: "h-full rounded-(--gryt-radius-full) bg-gryt-accent transition-[width] duration-(--gryt-dur-spring-soft) ease-spring motion-reduce:transition-none" }) })
+      children: /* @__PURE__ */ o(O.Track, { className: "h-1.5 w-full overflow-hidden rounded-(--gryt-radius-full) bg-gryt-surface-raised", children: /* @__PURE__ */ o(O.Indicator, { className: "h-full rounded-(--gryt-radius-full) bg-gryt-accent transition-[width] duration-300 ease-out motion-reduce:transition-none" }) })
     }
   );
 }
-function $o({
+function Ao({
   className: a,
   size: t = 24,
   "aria-label": e = "Loading"
 }) {
   return /* @__PURE__ */ o(
-    vt,
+    Ct,
     {
       role: "status",
       "aria-label": e,
@@ -906,13 +960,13 @@ function $o({
     }
   );
 }
-const Wt = {
+const qt = {
   text: "h-4 rounded-(--gryt-radius-sm)",
   rounded: "rounded-(--gryt-radius-lg)",
   circular: "rounded-(--gryt-radius-full)",
   rectangular: "rounded-none"
 };
-function Co({
+function Mo({
   className: a,
   height: t,
   style: e,
@@ -930,8 +984,14 @@ function Co({
     {
       "aria-hidden": "true",
       className: n(
-        "gryt-skeleton bg-gryt-surface-raised motion-safe:animate-pulse",
-        Wt[r],
+        // Not bg-gryt-surface-raised. #1e2028 against #1a1d24 is four points of
+        // luminance, which is invisible on a laptop screen at an angle — the
+        // placeholder that is meant to say "something is coming" said nothing.
+        // A white wash instead of a fixed colour, so it stays visible on any of
+        // the surfaces it can land on rather than only the one it was picked
+        // against, and it dims rather than brightens as it pulses.
+        "gryt-skeleton bg-white/9 motion-safe:animate-pulse",
+        qt[r],
         a
       ),
       style: l,
@@ -939,16 +999,16 @@ function Co({
     }
   );
 }
-const lt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", _t = s(
+const mt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ease-spring motion-reduce:transition-none", te = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      k.Backdrop,
+      C.Backdrop,
       {
         ref: r,
         className: n(
           "gryt-dialog-backdrop fixed inset-0 min-h-dvh bg-black/60",
           "backdrop-blur-(--gryt-backdrop-blur)",
-          lt,
+          mt,
           "data-starting-style:opacity-0 data-ending-style:opacity-0",
           t
         ),
@@ -956,17 +1016,17 @@ const lt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), Jt = s(
+), ee = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      k.Popup,
+      C.Popup,
       {
         ref: r,
         className: n(
           "gryt-dialog fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
           "flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4",
           "rounded-(--gryt-radius-lg) border border-gryt-border bg-gryt-surface p-5 text-gryt-text",
-          lt,
+          mt,
           "data-starting-style:scale-[0.98] data-starting-style:opacity-0",
           "data-ending-style:scale-[0.98] data-ending-style:opacity-0",
           t
@@ -975,10 +1035,10 @@ const lt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), Kt = s(
+), re = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      k.Title,
+      C.Title,
       {
         ref: r,
         className: n(
@@ -989,10 +1049,10 @@ const lt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), Zt = s(
+), oe = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      k.Description,
+      C.Description,
       {
         ref: r,
         className: n(
@@ -1003,7 +1063,7 @@ const lt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), qt = s(
+), ae = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       "div",
@@ -1017,45 +1077,45 @@ const lt = "transition-[opacity,scale,translate] duration-(--gryt-dur-spring) ea
       }
     );
   }
-), So = {
-  Root: k.Root,
-  Trigger: k.Trigger,
-  Portal: k.Portal,
-  Close: k.Close,
-  Backdrop: _t,
-  Popup: Jt,
-  Title: Kt,
-  Description: Zt,
-  Footer: qt
-}, te = () => () => {
+), Lo = {
+  Root: C.Root,
+  Trigger: C.Trigger,
+  Portal: C.Portal,
+  Close: C.Close,
+  Backdrop: te,
+  Popup: ee,
+  Title: re,
+  Description: oe,
+  Footer: ae
+}, ne = () => () => {
 };
-function ee(a) {
-  const t = Q(
+function ie(a) {
+  const t = U(
     (r) => {
-      if (typeof window > "u" || !window.matchMedia) return te();
+      if (typeof window > "u" || !window.matchMedia) return ne();
       const i = window.matchMedia(a);
       return i.addEventListener("change", r), () => i.removeEventListener("change", r);
     },
     [a]
-  ), e = Q(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(a).matches, [a]);
-  return pt(t, e, () => !1);
+  ), e = U(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(a).matches, [a]);
+  return wt(t, e, () => !1);
 }
-const re = {
+const se = {
   left: "left",
   right: "right",
   top: "up",
   bottom: "down"
-}, H = bt("right"), oe = {
+}, _ = vt("right"), ce = {
   left: "items-stretch justify-start",
   right: "items-stretch justify-end",
   top: "items-start justify-center",
   bottom: "items-end justify-center"
-}, ae = {
+}, le = {
   left: "rounded-r-(--gryt-radius-xl)",
   right: "rounded-l-(--gryt-radius-xl)",
   top: "rounded-b-(--gryt-radius-xl)",
   bottom: "rounded-t-(--gryt-radius-xl)"
-}, ne = {
+}, de = {
   left: [
     "h-full w-[calc(20rem+var(--gryt-drawer-bleed))] max-w-[calc(85vw+var(--gryt-drawer-bleed))]",
     "-ml-(--gryt-drawer-bleed) border-r py-5 pr-5 pl-[calc(1.25rem+var(--gryt-drawer-bleed))]",
@@ -1085,20 +1145,20 @@ const re = {
     "data-ending-style:[transform:translateY(calc(100%-var(--gryt-drawer-bleed)))]"
   ].join(" ")
 };
-function se({
+function ge({
   side: a = "right",
   sheetOnMobile: t = !0,
   children: e,
   ...r
 }) {
-  const i = ee("(max-width: 767px)"), c = t && i ? "bottom" : a;
-  return /* @__PURE__ */ o(H.Provider, { value: c, children: /* @__PURE__ */ o(h.Root, { swipeDirection: re[c], ...r, children: e }) });
+  const i = ie("(max-width: 767px)"), c = t && i ? "bottom" : a;
+  return /* @__PURE__ */ o(_.Provider, { value: c, children: /* @__PURE__ */ o(v.Root, { swipeDirection: se[c], ...r, children: e }) });
 }
-const ie = s(
+const ue = s(
   function({ className: t, ...e }, r) {
-    const i = W(H);
+    const i = W(_);
     return /* @__PURE__ */ o(
-      h.Viewport,
+      v.Viewport,
       {
         ref: r,
         className: n(
@@ -1106,17 +1166,17 @@ const ie = s(
           // viewport is what has to sit above the page. Without it a sticky
           // site header renders over the panel.
           "gryt-drawer-viewport fixed inset-0 z-50 flex",
-          oe[i],
+          ce[i],
           t
         ),
         ...e
       }
     );
   }
-), ce = s(function({ className: t, ...e }, r) {
-  const i = W(H);
+), ye = s(function({ className: t, ...e }, r) {
+  const i = W(_);
   return /* @__PURE__ */ o(
-    h.Popup,
+    v.Popup,
     {
       ref: r,
       className: n(
@@ -1127,16 +1187,16 @@ const ie = s(
         // duration here turns a drag into a drag plus lag.
         "data-swiping:duration-0 data-swiping:select-none",
         "motion-reduce:transition-none",
-        ne[i],
-        ae[i],
+        de[i],
+        le[i],
         t
       ),
       ...e
     }
   );
-}), le = s(function({ className: t, ...e }, r) {
+}), me = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    h.Backdrop,
+    v.Backdrop,
     {
       ref: r,
       className: n(
@@ -1155,8 +1215,8 @@ const ie = s(
     }
   );
 });
-function de({ className: a }) {
-  const t = W(H);
+function pe({ className: a }) {
+  const t = W(_);
   return t !== "bottom" && t !== "top" ? null : /* @__PURE__ */ o(
     "div",
     {
@@ -1169,22 +1229,22 @@ function de({ className: a }) {
     }
   );
 }
-const Ro = {
-  Root: se,
-  Trigger: h.Trigger,
-  Portal: h.Portal,
-  Backdrop: le,
-  Viewport: ie,
-  Popup: ce,
-  Content: h.Content,
-  Grabber: de,
-  Close: h.Close,
-  Title: h.Title,
-  Description: h.Description
-}, ge = s(
+const jo = {
+  Root: ge,
+  Trigger: v.Trigger,
+  Portal: v.Portal,
+  Backdrop: me,
+  Viewport: ue,
+  Popup: ye,
+  Content: v.Content,
+  Grabber: pe,
+  Close: v.Close,
+  Title: v.Title,
+  Description: v.Description
+}, be = s(
   function({ className: t, sideOffset: e = 8, ...r }, i) {
     return /* @__PURE__ */ o(
-      I.Positioner,
+      D.Positioner,
       {
         ref: i,
         sideOffset: e,
@@ -1193,23 +1253,23 @@ const Ro = {
       }
     );
   }
-), ue = s(function({ className: t, ...e }, r) {
+), fe = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    I.Popup,
+    D.Popup,
     {
       ref: r,
       className: n(
         "gryt-menu min-w-44 p-1 outline-none",
-        $,
-        C,
+        A,
+        S,
         t
       ),
       ...e
     }
   );
-}), ye = s(function({ className: t, ...e }, r) {
+}), xe = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    I.Item,
+    D.Item,
     {
       ref: r,
       className: n(
@@ -1224,45 +1284,57 @@ const Ro = {
       ...e
     }
   );
-}), me = s(function({ className: t, ...e }, r) {
+}), he = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    I.Separator,
+    D.Separator,
     {
       ref: r,
       className: n("gryt-menu-separator my-1 h-px bg-gryt-border", t),
       ...e
     }
   );
-}), U = {
-  Root: I.Root,
-  Trigger: I.Trigger,
-  Portal: I.Portal,
-  Positioner: ge,
-  Popup: ue,
-  Item: ye,
-  Separator: me
-}, pe = s(function({ className: t, ...e }, r) {
+}), Y = {
+  Root: D.Root,
+  Trigger: D.Trigger,
+  Portal: D.Portal,
+  Positioner: be,
+  Popup: fe,
+  Item: xe,
+  Separator: he
+}, we = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     V.Root,
     {
       ref: r,
-      className: n("gryt-tabs", t),
+      className: n(
+        "gryt-tabs",
+        // Vertical puts the rail and the panel side by side. min-w-0 on the
+        // panel does the rest; without the flex here the panel lands under the
+        // rail and the layout reads as a very tall accordion.
+        "data-[orientation=vertical]:flex data-[orientation=vertical]:items-stretch",
+        t
+      ),
       ...e
     }
   );
-}), be = s(function({ className: t, ...e }, r) {
+}), ve = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     V.List,
     {
       ref: r,
       className: n(
         "gryt-tabs-list relative inline-flex items-center gap-1 rounded-(--gryt-radius-full) bg-gryt-surface-raised p-1",
+        // A rail, not a pill: rows are full width and the corner radius drops
+        // to lg, because a 999px radius on a tall box bows its short edges.
+        "data-[orientation=vertical]:flex data-[orientation=vertical]:shrink-0",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+        "data-[orientation=vertical]:rounded-(--gryt-radius-lg)",
         t
       ),
       ...e
     }
   );
-}), fe = s(function({ className: t, ...e }, r) {
+}), Ne = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     V.Tab,
     {
@@ -1276,13 +1348,18 @@ const Ro = {
         // The fill moved to Indicator so it can travel between tabs; the tab
         // itself only changes its text colour.
         "data-active:text-gryt-on-accent",
-        y,
+        // Left-aligned and taller in a rail. Centred labels in a vertical list
+        // leave the text edge ragged, which is what makes a rail look untidy.
+        "data-[orientation=vertical]:min-h-9 data-[orientation=vertical]:justify-start",
+        "data-[orientation=vertical]:gap-2.5 data-[orientation=vertical]:px-3",
+        "data-[orientation=vertical]:rounded-(--gryt-radius-md)",
+        b,
         t
       ),
       ...e
     }
   );
-}), xe = s(
+}), Pe = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       V.Indicator,
@@ -1295,22 +1372,37 @@ const Ro = {
           "rounded-(--gryt-radius-full) bg-gryt-accent",
           "transition-[translate,width] duration-(--gryt-dur-spring) ease-spring",
           "motion-reduce:transition-none",
+          // Same pill, travelling down the rail instead of across the row.
+          "[[data-orientation=vertical]_&]:top-0 [[data-orientation=vertical]_&]:left-1",
+          "[[data-orientation=vertical]_&]:h-(--active-tab-height)",
+          "[[data-orientation=vertical]_&]:w-[calc(100%-0.5rem)]",
+          "[[data-orientation=vertical]_&]:translate-x-0",
+          "[[data-orientation=vertical]_&]:translate-y-(--active-tab-top)",
+          "[[data-orientation=vertical]_&]:rounded-(--gryt-radius-md)",
+          "[[data-orientation=vertical]_&]:transition-[translate,height]",
           t
         ),
         ...e
       }
     );
   }
-), he = s(function({ className: t, ...e }, r) {
+), ke = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     V.Panel,
     {
       ref: r,
-      className: n("gryt-tabs-panel pt-3 text-sm text-gryt-text", t),
+      className: n(
+        "gryt-tabs-panel pt-3 text-sm text-gryt-text",
+        // Beside the rail rather than under it, and allowed to shrink so long
+        // content wraps instead of pushing the rail off screen.
+        "data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:flex-1",
+        "data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4",
+        t
+      ),
       ...e
     }
   );
-}), Io = Object.assign(pe, { List: be, Tab: fe, Panel: he, Indicator: xe }), we = s(function({ className: t, ...e }, r) {
+}), Go = Object.assign(we, { List: ve, Tab: Ne, Panel: ke, Indicator: Pe }), Te = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     F.Root,
     {
@@ -1322,7 +1414,7 @@ const Ro = {
       ...e
     }
   );
-}), ve = s(
+}), Ce = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       F.Item,
@@ -1333,7 +1425,7 @@ const Ro = {
       }
     );
   }
-), Ne = s(
+), $e = s(
   function({ children: t, className: e, expandIcon: r, ...i }, c) {
     return /* @__PURE__ */ o(F.Header, { className: "gryt-accordion-header m-0", children: /* @__PURE__ */ d(
       F.Trigger,
@@ -1344,14 +1436,14 @@ const Ro = {
           "rounded-(--gryt-radius-lg) border-0 bg-transparent px-3 py-2.5",
           "text-left text-sm font-medium text-gryt-text select-none",
           "transition-colors duration-150 hover:bg-gryt-surface-raised",
-          y,
+          b,
           e
         ),
         ...i,
         children: [
           t,
           r === void 0 ? /* @__PURE__ */ o(
-            Nt,
+            $t,
             {
               size: 16,
               className: "shrink-0 transition-transform duration-(--gryt-dur-spring) ease-spring data-panel-open:rotate-180 motion-reduce:transition-none"
@@ -1361,7 +1453,7 @@ const Ro = {
       }
     ) });
   }
-), Pe = s(
+), Se = s(
   function({ children: t, className: e, ...r }, i) {
     return /* @__PURE__ */ o(
       F.Panel,
@@ -1381,10 +1473,10 @@ const Ro = {
       }
     );
   }
-), Ao = Object.assign(we, { Item: ve, Trigger: Ne, Panel: Pe }), ke = s(
+), Bo = Object.assign(Te, { Item: Ce, Trigger: $e, Panel: Se }), Re = s(
   function({ className: t, sideOffset: e = 2, ...r }, i) {
     return /* @__PURE__ */ o(
-      P.Positioner,
+      T.Positioner,
       {
         ref: i,
         sideOffset: e,
@@ -1393,22 +1485,22 @@ const Ro = {
       }
     );
   }
-), Do = {
-  Root: P.Root,
-  Trigger: P.Trigger,
-  Portal: P.Portal,
-  Positioner: ke,
-  Popup: U.Popup,
-  Item: U.Item,
-  Separator: U.Separator,
-  Group: P.Group,
-  GroupLabel: P.GroupLabel,
-  SubmenuRoot: P.SubmenuRoot,
-  SubmenuTrigger: P.SubmenuTrigger
-}, Te = s(
+), zo = {
+  Root: T.Root,
+  Trigger: T.Trigger,
+  Portal: T.Portal,
+  Positioner: Re,
+  Popup: Y.Popup,
+  Item: Y.Item,
+  Separator: Y.Separator,
+  Group: T.Group,
+  GroupLabel: T.GroupLabel,
+  SubmenuRoot: T.SubmenuRoot,
+  SubmenuTrigger: T.SubmenuTrigger
+}, Ie = s(
   function({ className: t, sideOffset: e = 8, ...r }, i) {
     return /* @__PURE__ */ o(
-      w.Positioner,
+      P.Positioner,
       {
         ref: i,
         sideOffset: e,
@@ -1417,25 +1509,25 @@ const Ro = {
       }
     );
   }
-), $e = s(
+), De = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      w.Popup,
+      P.Popup,
       {
         ref: r,
         className: n(
           "gryt-popover max-w-[min(20rem,calc(100vw-2rem))] p-4 outline-none",
-          $,
-          C,
+          A,
+          S,
           t
         ),
         ...e
       }
     );
   }
-), Ce = s(function({ className: t, ...e }, r) {
+), Ae = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Title,
+    P.Title,
     {
       ref: r,
       className: n(
@@ -1445,9 +1537,9 @@ const Ro = {
       ...e
     }
   );
-}), Se = s(function({ className: t, ...e }, r) {
+}), Me = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    w.Description,
+    P.Description,
     {
       ref: r,
       className: n(
@@ -1457,20 +1549,26 @@ const Ro = {
       ...e
     }
   );
-}), Mo = {
-  Root: w.Root,
-  Trigger: w.Trigger,
-  Portal: w.Portal,
-  Positioner: Te,
-  Popup: $e,
-  Title: Ce,
-  Description: Se,
-  Close: w.Close,
-  Arrow: w.Arrow
-}, Re = s(
+}), Fo = {
+  Root: P.Root,
+  Trigger: P.Trigger,
+  Portal: P.Portal,
+  Positioner: Ie,
+  Popup: De,
+  Title: Ae,
+  Description: Me,
+  Close: P.Close,
+  Arrow: P.Arrow
+}, Le = {
+  neutral: "border-white/8 bg-gryt-surface",
+  info: "border-gryt-secondary/30 bg-gryt-secondary/8",
+  success: "border-gryt-success/30 bg-gryt-success/8",
+  warning: "border-gryt-warning/30 bg-gryt-warning/8",
+  danger: "border-gryt-danger/30 bg-gryt-danger/8"
+}, je = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      v.Viewport,
+      k.Viewport,
       {
         ref: r,
         className: n(
@@ -1482,14 +1580,20 @@ const Ro = {
       }
     );
   }
-), Ie = s(function({ className: t, ...e }, r) {
+), Ge = s(function({ className: t, severity: e = "neutral", ...r }, i) {
   return /* @__PURE__ */ o(
-    v.Root,
+    k.Root,
     {
-      ref: r,
+      ref: i,
       className: n(
         "gryt-toast relative flex flex-col p-3 pr-9",
-        $,
+        // Not popupSurface. That border is --gryt-border, a solid slate line
+        // that is right for a menu anchored to the thing that opened it and too
+        // heavy for a card floating in the corner with nothing behind it. A
+        // white hairline separates it from the page without drawing a box
+        // around it.
+        "rounded-(--gryt-radius-xl) border text-gryt-text",
+        Le[e],
         // Swiping is a pointer gesture, so the toast follows the finger
         // through Base UI's swipe variables before it animates out.
         "transition-[opacity,transform] duration-(--gryt-dur-spring) ease-spring",
@@ -1498,12 +1602,12 @@ const Ro = {
         "motion-reduce:transition-none",
         t
       ),
-      ...e
+      ...r
     }
   );
-}), Ae = s(function({ className: t, ...e }, r) {
+}), Be = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Title,
+    k.Title,
     {
       ref: r,
       className: n(
@@ -1513,9 +1617,9 @@ const Ro = {
       ...e
     }
   );
-}), De = s(function({ className: t, ...e }, r) {
+}), ze = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Description,
+    k.Description,
     {
       ref: r,
       className: n(
@@ -1525,9 +1629,9 @@ const Ro = {
       ...e
     }
   );
-}), Me = s(function({ className: t, children: e, ...r }, i) {
+}), Fe = s(function({ className: t, children: e, ...r }, i) {
   return /* @__PURE__ */ o(
-    v.Close,
+    k.Close,
     {
       ref: i,
       "aria-label": "Close",
@@ -1539,12 +1643,12 @@ const Ro = {
         t
       ),
       ...r,
-      children: e ?? /* @__PURE__ */ o(nt, { size: 14, weight: "bold" })
+      children: e ?? /* @__PURE__ */ o(ct, { size: 14, weight: "bold" })
     }
   );
-}), Le = s(function({ className: t, ...e }, r) {
+}), Ve = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    v.Action,
+    k.Action,
     {
       ref: r,
       className: n(
@@ -1558,19 +1662,19 @@ const Ro = {
       ...e
     }
   );
-}), Lo = {
-  Provider: v.Provider,
-  Portal: v.Portal,
-  Viewport: Re,
-  Root: Ie,
-  Title: Ae,
-  Description: De,
-  Close: Me,
-  Action: Le
-}, jo = v.useToastManager, je = s(
+}), Vo = {
+  Provider: k.Provider,
+  Portal: k.Portal,
+  Viewport: je,
+  Root: Ge,
+  Title: Be,
+  Description: ze,
+  Close: Fe,
+  Action: Ve
+}, Eo = k.useToastManager, Ee = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Root,
+      j.Root,
       {
         ref: r,
         className: n("gryt-scroll-area relative", t),
@@ -1578,10 +1682,10 @@ const Ro = {
       }
     );
   }
-), Ge = s(
+), _e = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      L.Viewport,
+      j.Viewport,
       {
         ref: r,
         className: n(
@@ -1593,10 +1697,10 @@ const Ro = {
       }
     );
   }
-), Be = s(
+), He = s(
   function({ className: t, orientation: e, ...r }, i) {
     return /* @__PURE__ */ o(
-      L.Scrollbar,
+      j.Scrollbar,
       {
         ref: i,
         orientation: e,
@@ -1611,17 +1715,17 @@ const Ro = {
           t
         ),
         ...r,
-        children: /* @__PURE__ */ o(L.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
+        children: /* @__PURE__ */ o(j.Thumb, { className: "flex-1 rounded-(--gryt-radius-full) bg-gryt-border transition-colors hover:bg-gryt-muted motion-reduce:transition-none" })
       }
     );
   }
-), Go = {
-  Root: je,
-  Viewport: Ge,
-  Scrollbar: Be,
-  Content: L.Content,
-  Corner: L.Corner
-}, ze = {
+), _o = {
+  Root: Ee,
+  Viewport: _e,
+  Scrollbar: He,
+  Content: j.Content,
+  Corner: j.Corner
+}, Xe = {
   primary: [
     "text-gryt-muted hover:not-data-disabled:bg-white/8",
     "data-pressed:bg-gryt-accent data-pressed:text-gryt-on-accent",
@@ -1642,15 +1746,15 @@ const Ro = {
     "data-pressed:bg-gryt-danger data-pressed:text-gryt-on-danger",
     "data-pressed:hover:not-data-disabled:bg-gryt-danger"
   ].join(" ")
-}, Fe = {
+}, Oe = {
   xsmall: "h-8 min-w-8 px-2 text-xs",
   small: "h-9 min-w-9 px-2.5 text-sm",
   medium: "h-10 min-w-10 px-3 text-sm",
   large: "h-12 min-w-12 px-4 text-base"
-}, Bo = s(
+}, Ho = s(
   function({ className: t, size: e = "medium", tone: r = "primary", ...i }, c) {
     return /* @__PURE__ */ o(
-      Ct,
+      At,
       {
         ref: c,
         className: n(
@@ -1661,20 +1765,20 @@ const Ro = {
           "transition-[scale,background-color,color] duration-(--gryt-dur-spring) ease-spring",
           "motion-safe:hover:not-data-disabled:scale-[1.06]",
           "motion-safe:active:not-data-disabled:scale-[0.94]",
-          y,
-          j,
-          Fe[e],
-          ze[r],
+          b,
+          G,
+          Oe[e],
+          Xe[r],
           t
         ),
         ...i
       }
     );
   }
-), zo = s(
+), Xo = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      St,
+      Mt,
       {
         ref: r,
         className: n(
@@ -1686,13 +1790,13 @@ const Ro = {
       }
     );
   }
-), Ve = {
+), Ye = {
   primary: "bg-gryt-accent",
   success: "bg-gryt-success",
   warning: "bg-gryt-warning",
   danger: "bg-gryt-danger"
 };
-function Fo({
+function Oo({
   className: a,
   value: t,
   label: e,
@@ -1716,7 +1820,8 @@ function Fo({
           {
             className: n(
               "h-full rounded-(--gryt-radius-full)",
-              Ve[i]
+              "transition-[width] duration-120 ease-out motion-reduce:transition-none",
+              Ye[i]
             )
           }
         ) })
@@ -1724,10 +1829,10 @@ function Fo({
     }
   );
 }
-const Ee = s(
+const Ue = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      T.Popup,
+      $.Popup,
       {
         ref: r,
         className: n(
@@ -1744,9 +1849,9 @@ const Ee = s(
       }
     );
   }
-), He = s(function({ className: t, ...e }, r) {
+), We = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Backdrop,
+    $.Backdrop,
     {
       ref: r,
       className: n(
@@ -1759,9 +1864,9 @@ const Ee = s(
       ...e
     }
   );
-}), Oe = s(function({ className: t, ...e }, r) {
+}), Qe = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Title,
+    $.Title,
     {
       ref: r,
       className: n(
@@ -1771,9 +1876,9 @@ const Ee = s(
       ...e
     }
   );
-}), Xe = s(function({ className: t, ...e }, r) {
+}), Je = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    T.Description,
+    $.Description,
     {
       ref: r,
       className: n(
@@ -1783,16 +1888,16 @@ const Ee = s(
       ...e
     }
   );
-}), Vo = {
-  Root: T.Root,
-  Trigger: T.Trigger,
-  Portal: T.Portal,
-  Backdrop: He,
-  Popup: Ee,
-  Title: Oe,
-  Description: Xe,
-  Close: T.Close
-}, dt = [
+}), Yo = {
+  Root: $.Root,
+  Trigger: $.Trigger,
+  Portal: $.Portal,
+  Backdrop: We,
+  Popup: Ue,
+  Title: Qe,
+  Description: Je,
+  Close: $.Close
+}, pt = [
   "flex cursor-default items-center gap-2 rounded-(--gryt-radius-md)",
   "px-3 py-2 text-sm text-gryt-text outline-none select-none",
   // Base UI drives keyboard and pointer highlight through one attribute, so
@@ -1800,20 +1905,21 @@ const Ee = s(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), gt = [
-  "w-full rounded-(--gryt-radius-input) border border-gryt-border bg-gryt-surface-raised",
-  "px-3 py-2 text-sm text-gryt-text outline-none placeholder:text-gryt-muted",
-  y
-].join(" "), Ye = s(function({ className: t, ...e }, r) {
+].join(" "), bt = [
+  gt,
+  ut.medium,
+  "border-gryt-border",
+  b
+].join(" "), Ke = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     g.Input,
     {
       ref: r,
-      className: n("gryt-combobox-input", gt, t),
+      className: n("gryt-combobox-input", bt, t),
       ...e
     }
   );
-}), Ue = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), Ze = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
   return /* @__PURE__ */ o(
     g.Positioner,
     {
@@ -1823,7 +1929,7 @@ const Ee = s(
       ...r
     }
   );
-}), Qe = s(
+}), qe = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
       g.Popup,
@@ -1831,24 +1937,24 @@ const Ee = s(
         ref: r,
         className: n(
           "gryt-combobox max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-          $,
-          C,
+          A,
+          S,
           t
         ),
         ...e
       }
     );
   }
-), We = s(function({ className: t, ...e }, r) {
+), tr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     g.Item,
     {
       ref: r,
-      className: n("gryt-combobox-item", dt, t),
+      className: n("gryt-combobox-item", pt, t),
       ...e
     }
   );
-}), _e = s(function({ className: t, ...e }, r) {
+}), er = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     g.Empty,
     {
@@ -1860,9 +1966,9 @@ const Ee = s(
       ...e
     }
   );
-}), Eo = {
+}), Uo = {
   Root: g.Root,
-  Input: Ye,
+  Input: Ke,
   InputGroup: g.InputGroup,
   Trigger: g.Trigger,
   Icon: g.Icon,
@@ -1872,27 +1978,27 @@ const Ee = s(
   Chip: g.Chip,
   ChipRemove: g.ChipRemove,
   Portal: g.Portal,
-  Positioner: Ue,
-  Popup: Qe,
+  Positioner: Ze,
+  Popup: qe,
   List: g.List,
-  Item: We,
+  Item: tr,
   ItemIndicator: g.ItemIndicator,
   Group: g.Group,
   GroupLabel: g.GroupLabel,
-  Empty: _e,
+  Empty: er,
   Separator: g.Separator
-}, Je = s(function({ className: t, ...e }, r) {
+}, rr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Input,
+    p.Input,
     {
       ref: r,
-      className: n("gryt-autocomplete-input", gt, t),
+      className: n("gryt-autocomplete-input", bt, t),
       ...e
     }
   );
-}), Ke = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
+}), or = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
   return /* @__PURE__ */ o(
-    u.Positioner,
+    p.Positioner,
     {
       ref: i,
       sideOffset: e,
@@ -1900,32 +2006,32 @@ const Ee = s(
       ...r
     }
   );
-}), Ze = s(function({ className: t, ...e }, r) {
+}), ar = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Popup,
+    p.Popup,
     {
       ref: r,
       className: n(
         "gryt-autocomplete max-h-64 w-(--anchor-width) overflow-y-auto overscroll-contain p-1 outline-none",
-        $,
-        C,
+        A,
+        S,
         t
       ),
       ...e
     }
   );
-}), qe = s(function({ className: t, ...e }, r) {
+}), nr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Item,
+    p.Item,
     {
       ref: r,
-      className: n("gryt-autocomplete-item", dt, t),
+      className: n("gryt-autocomplete-item", pt, t),
       ...e
     }
   );
-}), tr = s(function({ className: t, ...e }, r) {
+}), ir = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    u.Empty,
+    p.Empty,
     {
       ref: r,
       className: n(
@@ -1935,27 +2041,27 @@ const Ee = s(
       ...e
     }
   );
-}), Ho = {
-  Root: u.Root,
-  Input: Je,
-  InputGroup: u.InputGroup,
-  Trigger: u.Trigger,
-  Icon: u.Icon,
-  Clear: u.Clear,
-  Value: u.Value,
-  Portal: u.Portal,
-  Positioner: Ke,
-  Popup: Ze,
-  List: u.List,
-  Item: qe,
-  Group: u.Group,
-  GroupLabel: u.GroupLabel,
-  Empty: tr,
-  Separator: u.Separator
-}, Oo = s(
+}), Wo = {
+  Root: p.Root,
+  Input: rr,
+  InputGroup: p.InputGroup,
+  Trigger: p.Trigger,
+  Icon: p.Icon,
+  Clear: p.Clear,
+  Value: p.Value,
+  Portal: p.Portal,
+  Positioner: or,
+  Popup: ar,
+  List: p.List,
+  Item: nr,
+  Group: p.Group,
+  GroupLabel: p.GroupLabel,
+  Empty: ir,
+  Separator: p.Separator
+}, Qo = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      Rt,
+      Lt,
       {
         ref: r,
         className: n("gryt-checkbox-group flex flex-col gap-2", t),
@@ -1963,10 +2069,10 @@ const Ee = s(
       }
     );
   }
-), er = s(
+), sr = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      _.Trigger,
+      Q.Trigger,
       {
         ref: r,
         className: n(
@@ -1974,17 +2080,17 @@ const Ee = s(
           "rounded-(--gryt-radius-md) border-0 bg-transparent px-2 py-2 text-left",
           "text-sm font-medium text-gryt-text select-none",
           "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-          y,
+          b,
           t
         ),
         ...e
       }
     );
   }
-), rr = s(
+), cr = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      _.Panel,
+      Q.Panel,
       {
         ref: r,
         className: n(
@@ -2000,23 +2106,23 @@ const Ee = s(
       }
     );
   }
-), Xo = {
-  Root: _.Root,
-  Trigger: er,
-  Panel: rr
-}, Yo = s(function({ className: t, ...e }, r) {
+), Jo = {
+  Root: Q.Root,
+  Trigger: sr,
+  Panel: cr
+}, Ko = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    It,
+    jt,
     {
       ref: r,
       className: n("gryt-form flex flex-col gap-(--gryt-space-lg)", t),
       ...e
     }
   );
-}), or = s(
+}), lr = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      it.Root,
+      dt.Root,
       {
         ref: r,
         className: n(
@@ -2027,9 +2133,9 @@ const Ee = s(
       }
     );
   }
-), ar = s(function({ className: t, ...e }, r) {
+), dr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    it.Legend,
+    dt.Legend,
     {
       ref: r,
       className: n(
@@ -2039,10 +2145,10 @@ const Ee = s(
       ...e
     }
   );
-}), Uo = { Root: or, Legend: ar }, Qo = s(
+}), Zo = { Root: lr, Legend: dr }, qo = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      At,
+      Gt,
       {
         ref: r,
         className: n(
@@ -2054,9 +2160,9 @@ const Ee = s(
       }
     );
   }
-), nr = s(function({ className: t, ...e }, r) {
+), gr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    x.Trigger,
+    h.Trigger,
     {
       ref: r,
       className: n(
@@ -2064,29 +2170,29 @@ const Ee = s(
         "border-0 bg-transparent px-3 py-2 text-sm font-medium text-gryt-text select-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
         "data-popup-open:bg-gryt-surface-raised",
-        y,
+        b,
         t
       ),
       ...e
     }
   );
-}), sr = s(function({ className: t, ...e }, r) {
+}), ur = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    x.Popup,
+    h.Popup,
     {
       ref: r,
       className: n(
         "gryt-navigation-menu-popup outline-none",
-        $,
-        C,
+        A,
+        S,
         t
       ),
       ...e
     }
   );
-}), ir = s(function({ className: t, ...e }, r) {
+}), yr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    x.Viewport,
+    h.Viewport,
     {
       ref: r,
       className: n(
@@ -2096,81 +2202,81 @@ const Ee = s(
       ...e
     }
   );
-}), cr = s(function({ className: t, ...e }, r) {
+}), mr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    x.Link,
+    h.Link,
     {
       ref: r,
       className: n(
         "gryt-navigation-menu-link block rounded-(--gryt-radius-md) px-3 py-2",
         "text-sm text-gryt-text no-underline outline-none",
         "transition-colors hover:bg-gryt-surface-raised motion-reduce:transition-none",
-        y,
+        b,
         t
       ),
       ...e
     }
   );
-}), Wo = {
-  Root: x.Root,
-  List: x.List,
-  Item: x.Item,
-  Trigger: nr,
-  Content: x.Content,
-  Portal: x.Portal,
-  Positioner: x.Positioner,
-  Viewport: ir,
-  Popup: sr,
-  Link: cr,
-  Icon: x.Icon,
-  Arrow: x.Arrow
-}, ot = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", _o = s(
+}), ta = {
+  Root: h.Root,
+  List: h.List,
+  Item: h.Item,
+  Trigger: gr,
+  Content: h.Content,
+  Portal: h.Portal,
+  Positioner: h.Positioner,
+  Viewport: yr,
+  Popup: ur,
+  Link: mr,
+  Icon: h.Icon,
+  Arrow: h.Arrow
+}, nt = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", ea = s(
   function({ className: t, label: e, scrubbable: r = !1, ...i }, c) {
     return /* @__PURE__ */ d(
-      S.Root,
+      R.Root,
       {
         ref: c,
         className: n("gryt-number-field flex flex-col gap-1.5", t),
         ...i,
         children: [
-          e && (r ? /* @__PURE__ */ d(S.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
+          e && (r ? /* @__PURE__ */ d(R.ScrubArea, { className: "cursor-ew-resize text-sm text-gryt-muted select-none", children: [
             e,
-            /* @__PURE__ */ o(S.ScrubAreaCursor, {})
+            /* @__PURE__ */ o(R.ScrubAreaCursor, {})
           ] }) : /* @__PURE__ */ o("span", { className: "text-sm text-gryt-muted", children: e })),
           /* @__PURE__ */ d(
-            S.Group,
+            R.Group,
             {
               className: n(
                 "flex w-fit items-center overflow-hidden rounded-(--gryt-radius-full)",
                 "border border-gryt-border bg-gryt-surface-raised",
                 "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-gryt-accent-light",
-                j
+                G
               ),
               children: [
                 /* @__PURE__ */ o(
-                  S.Decrement,
+                  R.Decrement,
                   {
                     "aria-label": "Decrease",
-                    className: n(ot, "rounded-l-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(Pt, { size: 14, weight: "bold" })
+                    className: n(nt, "rounded-l-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(St, { size: 14, weight: "bold" })
                   }
                 ),
                 /* @__PURE__ */ o(
-                  S.Input,
+                  R.Input,
                   {
                     className: n(
                       "w-16 border-0 bg-transparent px-1 py-2 text-center",
                       "font-mono text-sm text-gryt-text tabular-nums outline-none",
-                      y
+                      b
                     )
                   }
                 ),
                 /* @__PURE__ */ o(
-                  S.Increment,
+                  R.Increment,
                   {
                     "aria-label": "Increase",
-                    className: n(ot, "rounded-r-(--gryt-radius-full)"),
-                    children: /* @__PURE__ */ o(kt, { size: 14, weight: "bold" })
+                    className: n(nt, "rounded-r-(--gryt-radius-full)"),
+                    children: /* @__PURE__ */ o(Rt, { size: 14, weight: "bold" })
                   }
                 )
               ]
@@ -2180,17 +2286,17 @@ const Ee = s(
       }
     );
   }
-), Jo = s(
+), ra = s(
   function({ className: t, length: e = 6, ...r }, i) {
     return /* @__PURE__ */ o(
-      et.Root,
+      rt.Root,
       {
         ref: i,
         length: e,
         className: n("gryt-otp-field flex gap-2", t),
         ...r,
         children: Array.from({ length: e }, (c, l) => /* @__PURE__ */ o(
-          et.Input,
+          rt.Input,
           {
             className: n(
               "gryt-otp-input h-12 w-10 rounded-(--gryt-radius-md) text-center",
@@ -2198,7 +2304,7 @@ const Ee = s(
               "font-mono text-lg text-gryt-text tabular-nums outline-none",
               "transition-colors duration-(--gryt-dur-fast) motion-reduce:transition-none",
               "data-filled:border-gryt-accent",
-              y
+              b
             )
           },
           l
@@ -2206,10 +2312,10 @@ const Ee = s(
       }
     );
   }
-), lr = s(
+), pr = s(
   function({ className: t, sideOffset: e = 8, ...r }, i) {
     return /* @__PURE__ */ o(
-      D.Positioner,
+      M.Positioner,
       {
         ref: i,
         sideOffset: e,
@@ -2218,32 +2324,32 @@ const Ee = s(
       }
     );
   }
-), dr = s(
+), br = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
-      D.Popup,
+      M.Popup,
       {
         ref: r,
         className: n(
           "gryt-preview-card w-64 max-w-[calc(100vw-2rem)] p-4 outline-none",
-          $,
-          C,
+          A,
+          S,
           t
         ),
         ...e
       }
     );
   }
-), Ko = {
-  Root: D.Root,
-  Trigger: D.Trigger,
-  Portal: D.Portal,
-  Positioner: lr,
-  Popup: dr,
-  Arrow: D.Arrow
-}, gr = s(function({ className: t, ...e }, r) {
+), oa = {
+  Root: M.Root,
+  Trigger: M.Trigger,
+  Portal: M.Portal,
+  Positioner: pr,
+  Popup: br,
+  Arrow: M.Arrow
+}, fr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    M.Root,
+    L.Root,
     {
       ref: r,
       className: n(
@@ -2254,82 +2360,82 @@ const Ee = s(
       ...e
     }
   );
-}), ur = s(function({ className: t, ...e }, r) {
+}), xr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    M.Separator,
+    L.Separator,
     {
       ref: r,
       className: n("gryt-toolbar-separator mx-1 h-6 w-px bg-gryt-border", t),
       ...e
     }
   );
-}), Zo = {
-  Root: gr,
-  Group: M.Group,
-  Button: M.Button,
-  Link: M.Link,
-  Input: M.Input,
-  Separator: ur
+}), aa = {
+  Root: fr,
+  Group: L.Group,
+  Button: L.Button,
+  Link: L.Link,
+  Input: L.Input,
+  Separator: xr
 };
 export {
-  Ao as Accordion,
-  ko as Alert,
-  Vo as AlertDialog,
-  Ho as Autocomplete,
-  Xt as Avatar,
-  co as Badge,
-  Gt as Button,
-  wo as Card,
-  Po as CardActions,
-  No as CardContent,
-  vo as CardHeader,
-  go as Checkbox,
-  Oo as CheckboxGroup,
-  lo as Chip,
-  Xo as Collapsible,
-  Eo as Combobox,
-  so as Composer,
-  Do as ContextMenu,
-  io as ConversationItem,
-  So as Dialog,
-  ho as Divider,
-  Ro as Drawer,
-  Uo as Fieldset,
-  Yo as Form,
-  eo as GrytProvider,
-  ro as IconButton,
-  U as Menu,
-  Qo as Menubar,
-  ao as MessageBubble,
-  Fo as Meter,
-  Wo as NavigationMenu,
-  _o as NumberField,
-  Jo as OtpField,
-  Mo as Popover,
-  Ko as PreviewCard,
-  To as Progress,
-  uo as Radio,
-  yo as RadioGroup,
-  Go as ScrollArea,
-  bo as Select,
-  Co as Skeleton,
-  po as Slider,
-  $o as Spinner,
-  oo as Surface,
-  mo as Switch,
-  fe as Tab,
-  Io as Tabs,
-  no as TextField,
-  Lo as Toast,
-  Bo as Toggle,
-  zo as ToggleGroup,
-  Zo as Toolbar,
-  fo as Tooltip,
-  xo as TooltipProvider,
+  Bo as Accordion,
+  Io as Alert,
+  Yo as AlertDialog,
+  Wo as Autocomplete,
+  Qt as Avatar,
+  po as Badge,
+  Et as Button,
+  Co as Card,
+  Ro as CardActions,
+  So as CardContent,
+  $o as CardHeader,
+  fo as Checkbox,
+  Qo as CheckboxGroup,
+  bo as Chip,
+  Jo as Collapsible,
+  Uo as Combobox,
+  yo as Composer,
+  zo as ContextMenu,
+  mo as ConversationItem,
+  Lo as Dialog,
+  To as Divider,
+  jo as Drawer,
+  Zo as Fieldset,
+  Ko as Form,
+  so as GrytProvider,
+  co as IconButton,
+  Y as Menu,
+  qo as Menubar,
+  go as MessageBubble,
+  Oo as Meter,
+  ta as NavigationMenu,
+  ea as NumberField,
+  ra as OtpField,
+  Fo as Popover,
+  oa as PreviewCard,
+  Do as Progress,
+  xo as Radio,
+  ho as RadioGroup,
+  _o as ScrollArea,
+  No as Select,
+  Mo as Skeleton,
+  vo as Slider,
+  Ao as Spinner,
+  lo as Surface,
+  wo as Switch,
+  Ne as Tab,
+  Go as Tabs,
+  uo as TextField,
+  Vo as Toast,
+  Ho as Toggle,
+  Xo as ToggleGroup,
+  aa as Toolbar,
+  Po as Tooltip,
+  ko as TooltipProvider,
   n as cn,
-  Dt as createGrytTheme,
-  rt as grytTokens,
-  ee as useMediaQuery,
-  jo as useToastManager
+  Bt as createGrytTheme,
+  ot as grytTokens,
+  ie as useMediaQuery,
+  Eo as useToastManager
 };
 //# sourceMappingURL=index.js.map