@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.1

package/dist/components/select/select.js

@@ -1,12 +1,13 @@
 import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import * as c from "react";
-import { Root as R, Portal as T, Content as N, Viewport as A, Group as B, Item as D, ItemIndicator as L, ItemText as $, Label as k, ScrollDownButton as z, ScrollUpButton as W, Separator as X, Value as j, Trigger as E, Icon as M } from "../../vendor/@radix-ui/react-select/dist/index.js";
-import { shorthands as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as P } from "../../styles/make-styles.js";
-import { radiusMd as x, spacingElement2 as s, radius2xl as U, spacingElement1 as p, radiusLg as G, semGraySoft as V, gray11 as Y, fontWeightSemibold as F, leadingXs as H, textXs as Z, grayA11 as u, accentA3 as S, grayA12 as y, leadingSm as b, textSm as v, spacingGroup1 as O, body as _, accentA11 as I, accentA8 as Q, semAccentSoft as J, grayA8 as K } from "../../tokens/index.js";
-const tt = (n) => /* @__PURE__ */ t(
+import * as s from "react";
+import { Root as A, Portal as D, Content as B, Viewport as L, Group as $, Item as k, ItemIndicator as P, ItemText as W, Label as z, ScrollDownButton as X, ScrollUpButton as j, Separator as E, Value as M, Trigger as U, Icon as Y } from "../../vendor/@radix-ui/react-select/dist/index.js";
+import { shorthands as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as F } from "../density-provider/density-provider.js";
+import { makeVoltStyles as G } from "../../styles/make-styles.js";
+import { radiusMd as S, spacingElement2 as d, radius2xl as O, selectContentGap as V, selectContentPadding as H, radiusLg as Z, spacingElement1 as g, semGraySoft as _, gray11 as Q, fontWeightSemibold as J, leadingXs as K, textXs as tt, grayA11 as f, accentA3 as y, grayA12 as b, leadingSm as v, textSm as I, selectItemPaddingY as C, selectItemPaddingLeft as et, body as ot, accentA11 as q, semFocusRing as R, semAccentSoft as rt, grayA8 as at } from "../../tokens/index.js";
+const nt = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -17,7 +18,7 @@ const tt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
   }
-), et = (n) => /* @__PURE__ */ t(
+), it = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -28,7 +29,7 @@ const tt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
   }
-), ot = (n) => /* @__PURE__ */ t(
+), lt = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39,7 +40,7 @@ const tt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" })
   }
-), C = (n) => /* @__PURE__ */ t(
+), T = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -50,17 +51,17 @@ const tt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
   }
-), f = P({
+), u = G({
   trigger: {
     display: "flex",
     width: "100%",
     alignItems: "center",
     justifyContent: "space-between",
-    ...d.gap(s),
-    ...d.borderRadius(G),
+    ...c.gap(d),
+    ...c.borderRadius(Z),
     backgroundColor: "transparent",
-    fontSize: v,
-    lineHeight: b,
+    fontSize: I,
+    lineHeight: v,
     outlineStyle: "none",
     whiteSpace: "normal",
     textAlign: "left",
@@ -68,37 +69,46 @@ const tt = (n) => /* @__PURE__ */ t(
     transitionProperty: "color, box-shadow",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: R
+    },
     ":disabled": {
       cursor: "not-allowed",
       opacity: 0.5
     },
     "&[data-placeholder]": {
-      color: K
+      color: at
     },
     "& svg": {
       pointerEvents: "none",
       flexShrink: 0
     },
-    [`& [${l}="select-value"]`]: {
+    [`& [${i}="select-value"]`]: {
       display: "flex",
       alignItems: "center",
-      ...d.gap(s),
+      ...c.gap(d),
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
     // The open-state chevron rotation is declared HERE, on the trigger that carries the state
     // attribute, reaching the icon by SLOT_ATTR.
-    [`&[data-state='open'] [${l}="select-icon"] svg`]: {
+    [`&[data-state='open'] [${i}="select-icon"] svg`]: {
       transform: "rotate(180deg)"
     },
-    [`&[data-state='open'] [${l}="select-icon"]`]: {
+    [`&[data-state='open'] [${i}="select-icon"]`]: {
       transform: "rotate(180deg)"
     },
-    [`&[data-open] [${l}="select-icon"] svg`]: {
+    [`&[data-open] [${i}="select-icon"] svg`]: {
       transform: "rotate(180deg)"
     },
-    [`&[data-popup-open] [${l}="select-icon"] svg`]: {
+    [`&[data-popup-open] [${i}="select-icon"] svg`]: {
       transform: "rotate(180deg)"
     }
   },
@@ -111,10 +121,13 @@ const tt = (n) => /* @__PURE__ */ t(
   triggerIcon: {
     width: "1.5rem",
     height: "1.5rem",
-    color: u,
+    color: f,
     transitionProperty: "transform",
     transitionDuration: "150ms",
-    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    }
   },
   triggerClear: {
     position: "absolute",
@@ -127,39 +140,51 @@ const tt = (n) => /* @__PURE__ */ t(
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
-    color: I,
+    color: q,
     cursor: "pointer",
-    ...d.borderRadius(x),
+    ...c.borderRadius(S),
     ":hover": {
-      backgroundColor: J
+      backgroundColor: rt
     },
     ":focus-visible": {
-      outlineColor: Q,
+      outlineColor: R,
       outlineWidth: "2px",
-      outlineStyle: "solid"
+      outlineStyle: "solid",
+      outlineOffset: "2px"
     }
   },
   triggerClearIcon: {
     width: "1.25rem",
     height: "1.25rem",
-    color: I
+    color: q
   },
   popup: {
-    backgroundColor: _,
-    ...d.padding(s),
-    ...d.gap(p),
-    color: y,
+    backgroundColor: ot,
+    // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in animation offsets a few lines
+    // below deliberately keep the plain (non-density) `spacingElement2` value: they are not in the
+    // approved matrix, and re-using the same primitive for two unrelated purposes doesn't make the
+    // animation distance a density lever too.
+    ...c.padding(H),
+    ...c.gap(V),
+    color: b,
     position: "relative",
     zIndex: 50,
     transformOrigin: "var(--radix-select-content-transform-origin)",
     overflowX: "hidden",
     overflowY: "auto",
-    ...d.borderRadius(U),
-    ...d.border("1px", "solid", "transparent"),
+    ...c.borderRadius(O),
+    ...c.border("1px", "solid", "transparent"),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
     outlineStyle: "none",
     maxHeight: "var(--radix-popper-available-height, 20rem)",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+      animationIterationCount: "1",
+      "&[data-state='open']": {
+        animationDuration: "0.01ms"
+      }
+    },
     "&[data-state='open']": {
       animationName: {
         from: { opacity: 0, transform: "scale(0.95)" },
@@ -172,7 +197,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${s}) scale(0.95)`
+          transform: `translateY(-${d}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -181,7 +206,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${s}) scale(0.95)`
+          transform: `translateX(${d}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -190,7 +215,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${s}) scale(0.95)`
+          transform: `translateX(-${d}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -199,7 +224,7 @@ const tt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${s}) scale(0.95)`
+          transform: `translateY(${d}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -216,8 +241,8 @@ const tt = (n) => /* @__PURE__ */ t(
   viewport: {
     width: "100%",
     minWidth: "var(--radix-select-trigger-width)",
-    scrollMarginTop: p,
-    scrollMarginBottom: p
+    scrollMarginTop: g,
+    scrollMarginBottom: g
   },
   item: {
     position: "relative",
@@ -226,24 +251,27 @@ const tt = (n) => /* @__PURE__ */ t(
     cursor: "default",
     userSelect: "none",
     alignItems: "center",
-    ...d.gap(s),
-    ...d.borderRadius(x),
-    paddingLeft: O,
+    ...c.gap(d),
+    ...c.borderRadius(S),
+    // DENSITY-SPEC.md §2.3 — left padding and vertical padding are density levers; right padding
+    // stays a fixed 32px at every tier (reserves the check-indicator's space, not modeled in
+    // density.yaml).
+    paddingLeft: et,
     paddingRight: "2rem",
-    paddingTop: "0.375rem",
-    paddingBottom: "0.375rem",
-    fontSize: v,
-    lineHeight: b,
-    color: y,
+    paddingTop: C,
+    paddingBottom: C,
+    fontSize: I,
+    lineHeight: v,
+    color: b,
     outlineStyle: "none",
     ":not(:first-child)": {
       marginTop: "0.125rem"
     },
     "&[data-highlighted]": {
-      backgroundColor: S
+      backgroundColor: y
     },
     "&[data-state='checked']": {
-      backgroundColor: S
+      backgroundColor: y
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -254,12 +282,12 @@ const tt = (n) => /* @__PURE__ */ t(
       flexShrink: 0
     },
     "& svg:not([class*='text-'])": {
-      color: u
+      color: f
     }
   },
   itemIndicatorWrapper: {
     position: "absolute",
-    right: s,
+    right: d,
     display: "flex",
     width: "1rem",
     height: "1rem",
@@ -269,26 +297,26 @@ const tt = (n) => /* @__PURE__ */ t(
   itemIndicatorIcon: {
     width: "1rem",
     height: "1rem",
-    color: u
+    color: f
   },
   label: {
-    paddingLeft: s,
-    paddingRight: s,
+    paddingLeft: d,
+    paddingRight: d,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: Z,
-    lineHeight: H,
-    fontWeight: F,
-    color: Y
+    fontSize: tt,
+    lineHeight: K,
+    fontWeight: J,
+    color: Q
   },
   separator: {
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${p})`,
-    marginRight: `calc(-1 * ${p})`,
-    marginTop: p,
-    marginBottom: p,
+    marginLeft: `calc(-1 * ${g})`,
+    marginRight: `calc(-1 * ${g})`,
+    marginTop: g,
+    marginBottom: g,
     height: "1px",
-    backgroundColor: V
+    backgroundColor: _
   },
   scrollArrow: {
     display: "flex",
@@ -297,10 +325,10 @@ const tt = (n) => /* @__PURE__ */ t(
     justifyContent: "center"
   },
   scrollArrowUp: {
-    paddingBottom: p
+    paddingBottom: g
   },
   scrollArrowDown: {
-    paddingTop: p
+    paddingTop: g
   },
   scrollArrowIcon: {
     width: "1.5rem",
@@ -309,185 +337,186 @@ const tt = (n) => /* @__PURE__ */ t(
   scrollArrowDownIcon: {
     transform: "rotate(180deg)"
   }
-}), mt = c.forwardRef(function(o, e) {
-  return /* @__PURE__ */ t(R, { "data-slot": "select", ...o });
-}), gt = c.forwardRef(function({ className: o, ...e }, a) {
+}), xt = s.forwardRef(function(o, e) {
+  return /* @__PURE__ */ t(A, { "data-slot": "select", ...o });
+}), St = s.forwardRef(function({ className: o, ...e }, a) {
   return /* @__PURE__ */ t(
-    B,
+    $,
     {
       ref: a,
       "data-slot": "select-group",
-      [l]: "select-group",
+      [i]: "select-group",
       className: o,
       ...e
     }
   );
-}), ft = c.forwardRef(function({ className: o, ...e }, a) {
+}), yt = s.forwardRef(function({ className: o, ...e }, a) {
   return /* @__PURE__ */ t(
-    j,
+    M,
     {
       ref: a,
       "data-slot": "select-value",
-      [l]: "select-value",
+      [i]: "select-value",
       className: o,
       ...e
     }
   );
-}), ut = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
+}), bt = s.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = u();
   return /* @__PURE__ */ h(
-    E,
+    U,
     {
-      ref: i,
+      ref: l,
       "data-slot": "select-trigger",
-      [l]: "select-trigger",
-      className: m(r.trigger, o),
+      [i]: "select-trigger",
+      className: p(r.trigger, o),
       ...a,
       children: [
         e,
         /* @__PURE__ */ t(
-          M,
+          Y,
           {
             asChild: !0,
             "data-slot": "select-icon",
-            [l]: "select-icon",
+            [i]: "select-icon",
             className: r.triggerIconWrapper,
-            children: /* @__PURE__ */ t(ot, { className: r.triggerIcon })
+            children: /* @__PURE__ */ t(lt, { className: r.triggerIcon })
           }
         )
       ]
     }
   );
-}), ht = c.forwardRef(function({ className: o, onClick: e, ...a }, i) {
-  const r = f();
+}), vt = s.forwardRef(function({ className: o, onClick: e, ...a }, l) {
+  const r = u();
   return /* @__PURE__ */ t(
     "span",
     {
-      ref: i,
+      ref: l,
       role: "button",
       tabIndex: 0,
       "data-slot": "select-trigger-clear",
-      [l]: "select-trigger-clear",
-      className: m(r.triggerClear, o),
-      onPointerDown: (g) => {
-        g.preventDefault(), g.stopPropagation();
+      [i]: "select-trigger-clear",
+      className: p(r.triggerClear, o),
+      onPointerDown: (m) => {
+        m.preventDefault(), m.stopPropagation();
       },
-      onClick: (g) => {
-        g.preventDefault(), g.stopPropagation(), e == null || e(g);
+      onClick: (m) => {
+        m.preventDefault(), m.stopPropagation(), e == null || e(m);
       },
       ...a,
-      children: /* @__PURE__ */ t(tt, { className: r.triggerClearIcon })
+      children: /* @__PURE__ */ t(nt, { className: r.triggerClearIcon })
     }
   );
-}), wt = c.forwardRef(function({
+}), It = s.forwardRef(function({
   className: o,
   children: e,
   position: a = "popper",
-  align: i = "center",
+  align: l = "center",
   container: r,
-  ...g
-}, q) {
-  const w = f();
-  return /* @__PURE__ */ t(T, { container: r, children: /* @__PURE__ */ h(
-    N,
+  ...m
+}, N) {
+  const w = u(), x = F();
+  return /* @__PURE__ */ t(D, { container: r, children: /* @__PURE__ */ h(
+    B,
     {
-      ref: q,
+      ref: N,
       "data-slot": "select-content",
-      [l]: "select-content",
+      [i]: "select-content",
+      ...x !== void 0 ? { "data-density": x } : {},
       position: a,
-      align: i,
-      className: m(w.popup, o),
-      ...g,
+      align: l,
+      className: p(w.popup, o),
+      ...m,
       children: [
-        /* @__PURE__ */ t(rt, {}),
+        /* @__PURE__ */ t(st, {}),
         /* @__PURE__ */ t(
-          A,
+          L,
           {
             "data-slot": "select-viewport",
-            [l]: "select-viewport",
+            [i]: "select-viewport",
             className: w.viewport,
             children: e
           }
         ),
-        /* @__PURE__ */ t(at, {})
+        /* @__PURE__ */ t(ct, {})
       ]
     }
   ) });
-}), xt = c.forwardRef(function({ className: o, ...e }, a) {
-  const i = f();
+}), Ct = s.forwardRef(function({ className: o, ...e }, a) {
+  const l = u();
   return /* @__PURE__ */ t(
-    k,
+    z,
     {
       ref: a,
       "data-slot": "select-label",
-      [l]: "select-label",
-      className: m(i.label, o),
+      [i]: "select-label",
+      className: p(l.label, o),
       ...e
     }
   );
-}), St = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
+}), qt = s.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = u();
   return /* @__PURE__ */ h(
-    D,
+    k,
     {
-      ref: i,
+      ref: l,
       "data-slot": "select-item",
-      [l]: "select-item",
-      className: m(r.item, o),
+      [i]: "select-item",
+      className: p(r.item, o),
       ...a,
       children: [
-        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(et, { className: r.itemIndicatorIcon }) }) }),
-        /* @__PURE__ */ t($, { children: e })
+        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(it, { className: r.itemIndicatorIcon }) }) }),
+        /* @__PURE__ */ t(W, { children: e })
       ]
     }
   );
-}), yt = c.forwardRef(function({ className: o, ...e }, a) {
-  const i = f();
+}), Rt = s.forwardRef(function({ className: o, ...e }, a) {
+  const l = u();
   return /* @__PURE__ */ t(
-    X,
+    E,
     {
       ref: a,
       "data-slot": "select-separator",
-      [l]: "select-separator",
-      className: m(i.separator, o),
+      [i]: "select-separator",
+      className: p(l.separator, o),
       ...e
     }
   );
-}), rt = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
+}), st = s.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = u();
   return /* @__PURE__ */ t(
-    W,
+    j,
     {
-      ref: i,
+      ref: l,
       "data-slot": "select-scroll-up-button",
-      [l]: "select-scroll-up-button",
-      className: m(
+      [i]: "select-scroll-up-button",
+      className: p(
         r.scrollArrow,
         r.scrollArrowUp,
         o
       ),
       ...a,
-      children: e ?? /* @__PURE__ */ t(C, { className: r.scrollArrowIcon })
+      children: e ?? /* @__PURE__ */ t(T, { className: r.scrollArrowIcon })
     }
   );
-}), at = c.forwardRef(function({ className: o, children: e, ...a }, i) {
-  const r = f();
+}), ct = s.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = u();
   return /* @__PURE__ */ t(
-    z,
+    X,
     {
-      ref: i,
+      ref: l,
       "data-slot": "select-scroll-down-button",
-      [l]: "select-scroll-down-button",
-      className: m(
+      [i]: "select-scroll-down-button",
+      className: p(
         r.scrollArrow,
         r.scrollArrowDown,
         o
       ),
       ...a,
       children: e ?? /* @__PURE__ */ t(
-        C,
+        T,
         {
-          className: m(
+          className: p(
             r.scrollArrowIcon,
             r.scrollArrowDownIcon
           )
@@ -497,16 +526,16 @@ const tt = (n) => /* @__PURE__ */ t(
   );
 });
 export {
-  mt as Select,
-  wt as SelectContent,
-  gt as SelectGroup,
-  St as SelectItem,
-  xt as SelectLabel,
-  at as SelectScrollDownButton,
-  rt as SelectScrollUpButton,
-  yt as SelectSeparator,
-  ut as SelectTrigger,
-  ht as SelectTriggerClear,
-  ft as SelectValue
+  xt as Select,
+  It as SelectContent,
+  St as SelectGroup,
+  qt as SelectItem,
+  Ct as SelectLabel,
+  ct as SelectScrollDownButton,
+  st as SelectScrollUpButton,
+  Rt as SelectSeparator,
+  bt as SelectTrigger,
+  vt as SelectTriggerClear,
+  yt as SelectValue
 };
 //# sourceMappingURL=select.js.map