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

package/dist/components/list/list.js

@@ -6,7 +6,7 @@ import { shorthands as m } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as h } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as ct } from "../../styles/make-styles.js";
-import { spacingElement3 as z, grayA5 as dt, spacingElement2 as y, spacingElement1 as B, semSuccessLight as mt, semWarningLight as pt, semErrorLight as ut, spacingGroup2 as _, grayA12 as q, fontWeightSemibold as gt, leadingSm as P, textSm as V, grayA10 as ft, fontWeightMedium as ht, semAccentSolid as xt, accentA8 as vt, grayA11 as j, grayA8 as yt, leadingXs as bt, textXs as wt, grayA2 as Q, radiusMd as F, semSuccessSoftHover as St, semWarningSoftHover as It, semErrorSoftHover as Ct, semAccentSoft as Lt, semSuccessDefault as kt, semSuccessSoft as Dt, semWarningDefault as Tt, semWarningSoft as Wt, semErrorDefault as Et, semErrorSoft as Nt } from "../../tokens/index.js";
+import { spacingElement3 as z, grayA5 as dt, spacingElement1 as B, spacingElement2 as y, radiusMd as P, semSuccessLight as mt, semWarningLight as pt, semErrorLight as ut, spacingGroup2 as _, grayA12 as q, fontWeightSemibold as gt, leadingSm as V, textSm as j, grayA10 as ft, fontWeightMedium as ht, semAccentSolid as xt, accentA8 as vt, grayA11 as F, grayA8 as yt, leadingXs as bt, textXs as wt, grayA2 as Q, semSuccessSoftHover as St, semWarningSoftHover as It, semErrorSoftHover as Ct, semAccentSoft as Lt, semSuccessDefault as kt, semSuccessSoft as Dt, semWarningDefault as Tt, semWarningSoft as Wt, semErrorDefault as Et, semErrorSoft as Nt } from "../../tokens/index.js";
 const At = (l) => /* @__PURE__ */ W(
   "svg",
   {
@@ -91,7 +91,7 @@ const At = (l) => /* @__PURE__ */ W(
     display: "flex",
     width: "100%",
     alignItems: "center",
-    ...m.borderRadius(F),
+    ...m.borderRadius(P),
     color: q,
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
@@ -105,8 +105,8 @@ const At = (l) => /* @__PURE__ */ W(
     minHeight: "2rem",
     ...m.gap(y),
     ...m.padding(B, y),
-    fontSize: V,
-    lineHeight: P,
+    fontSize: j,
+    lineHeight: V,
     "& > svg": {
       width: "1rem",
       height: "1rem"
@@ -117,8 +117,8 @@ const At = (l) => /* @__PURE__ */ W(
     // v1 gap-3 is 0.75rem.
     ...m.gap(z),
     ...m.padding(y, z),
-    fontSize: V,
-    lineHeight: P,
+    fontSize: j,
+    lineHeight: V,
     "& > svg": {
       width: "1rem",
       height: "1rem"
@@ -184,11 +184,11 @@ const At = (l) => /* @__PURE__ */ W(
     alignItems: "center",
     justifyContent: "center",
     alignSelf: "stretch",
-    borderTopLeftRadius: F,
-    borderBottomLeftRadius: F,
+    borderTopLeftRadius: P,
+    borderBottomLeftRadius: P,
     backgroundColor: Q,
     textAlign: "center",
-    color: j,
+    color: F,
     fontVariantNumeric: "tabular-nums"
   },
   indexCompact: {
@@ -251,7 +251,7 @@ const At = (l) => /* @__PURE__ */ W(
     whiteSpace: "nowrap",
     fontSize: wt,
     lineHeight: bt,
-    color: j
+    color: F
   },
   // Drag handle button
   dragHandle: {
@@ -266,7 +266,7 @@ const At = (l) => /* @__PURE__ */ W(
     ...m.border("0"),
     ...m.padding(0),
     ":hover": {
-      color: j
+      color: F
     },
     ":active": {
       cursor: "grabbing"
@@ -368,8 +368,8 @@ const At = (l) => /* @__PURE__ */ W(
     display: "block",
     listStyleType: "none",
     ...m.padding("0.375rem", z),
-    fontSize: V,
-    lineHeight: P,
+    fontSize: j,
+    lineHeight: V,
     fontWeight: gt,
     color: q,
     "&:first-child": {

package/dist/components/option-card/option-card.js

@@ -6,7 +6,7 @@ import { shorthands as s } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as r } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as tt } from "../../styles/make-styles.js";
-import { accentA7 as I, semAccentSolid as f, accentA8 as G, grayContrast as ot, grayA3 as rt, accentContrast as et, semAccentSoft as C, grayA11 as nt, fontWeightNormal as D, leadingXs as it, textXs as at, fontWeightSemibold as st, spacingElement1 as P, spacingElement2 as ct, semAccentLight as dt, grayA12 as lt, leadingSm as pt, textSm as ut, radiusLg as W, spacingElement3 as E, spacingGroup1 as ht } from "../../tokens/index.js";
+import { accentA7 as I, radiusLg as G, semAccentSolid as f, accentA8 as D, spacingElement3 as P, spacingGroup1 as ot, grayContrast as rt, grayA3 as et, accentContrast as nt, semAccentSoft as C, grayA11 as it, fontWeightNormal as W, leadingXs as at, textXs as st, fontWeightSemibold as ct, spacingElement1 as E, spacingElement2 as dt, semAccentLight as lt, grayA12 as pt, leadingSm as ut, textSm as ht } from "../../tokens/index.js";
 const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing a `value`. Give each card a unique `value` so it can be selected and controlled.", F = n.createContext(null), k = n.createContext(
   null
 ), p = tt({
@@ -17,7 +17,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for
     // why tsc accepted that for as long as it did.
     display: "grid",
-    ...s.gap(ht)
+    ...s.gap(ot)
   },
   // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]
   grid: {
@@ -36,17 +36,17 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     display: "flex",
     alignItems: "center",
     // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.
-    ...s.gap(E),
+    ...s.gap(P),
     overflow: "hidden",
-    ...s.borderRadius(W),
+    ...s.borderRadius(G),
     ...s.border("1px", "solid", "currentColor"),
-    ...s.paddingInline(E),
+    ...s.paddingInline(P),
     ...s.paddingBlock("0.375rem"),
     textAlign: "left",
-    fontSize: ut,
-    lineHeight: pt,
-    fontWeight: D,
-    color: lt,
+    fontSize: ht,
+    lineHeight: ut,
+    fontWeight: W,
+    color: pt,
     backgroundColor: "transparent",
     transitionProperty: "color, background-color, border-color, box-shadow",
     transitionDuration: "150ms",
@@ -59,7 +59,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: G
+      outlineColor: D
     },
     ":disabled, &[data-disabled]": {
       pointerEvents: "none",
@@ -67,7 +67,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     },
     "&[data-state='on']": {
       backgroundColor: C,
-      ...s.borderColor(G)
+      ...s.borderColor(D)
     },
     [`&[data-state='on'] [${r}="option-card-radio-outer"]`]: {
       ...s.borderColor(f)
@@ -99,9 +99,9 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     height: "2.5rem",
     placeContent: "center",
     alignSelf: "start",
-    ...s.borderRadius(W),
+    ...s.borderRadius(G),
     backgroundColor: C,
-    color: dt,
+    color: lt,
     "& svg": {
       width: "1.25rem",
       height: "1.25rem"
@@ -135,9 +135,9 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     flexBasis: "0%",
     gridAutoRows: "min-content",
     alignItems: "center",
-    columnGap: ct,
-    paddingTop: P,
-    paddingBottom: P,
+    columnGap: dt,
+    paddingTop: E,
+    paddingBottom: E,
     [`&:has([${r}="option-card-control"])`]: {
       gridTemplateColumns: "1fr auto"
     }
@@ -151,7 +151,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    fontWeight: st
+    fontWeight: ct
   },
   // Description
   description: {
@@ -159,10 +159,10 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     gridRowStart: 2,
     minWidth: 0,
     overflowWrap: "break-word",
-    fontSize: at,
-    lineHeight: it,
-    fontWeight: D,
-    color: nt
+    fontSize: st,
+    lineHeight: at,
+    fontWeight: W,
+    color: it
   },
   // Control
   control: {
@@ -203,7 +203,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     ...s.borderRadius("4px"),
     ...s.border("1px", "solid", I),
     backgroundColor: C,
-    color: et,
+    color: nt,
     transitionProperty: "background-color, border-color",
     transitionDuration: "150ms"
   },
@@ -223,7 +223,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     alignItems: "center",
     borderRadius: "9999px",
     ...s.border("1px", "solid", "transparent"),
-    backgroundColor: rt,
+    backgroundColor: et,
     transitionProperty: "background-color",
     transitionDuration: "150ms"
   },
@@ -233,7 +233,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
     height: "1rem",
     transform: "translateX(1px)",
     borderRadius: "9999px",
-    backgroundColor: ot,
+    backgroundColor: rt,
     // v1 shadow-xs; no shadow tokens in this package.
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "transform",

package/dist/components/pill/pill.js

@@ -4,10 +4,10 @@ import { shorthands as k } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as L } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as T } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as E } from "../../styles/make-styles.js";
-import { spacingGroup2 as v, spacingElement1 as g, accentA8 as I, radiusMd as P, spacingElement2 as z, fontWeightBold as A, leadingXs as B, textXs as N } from "../../tokens/index.js";
-import { ensurePaletteTokens as C } from "../../tokens/install.js";
+import { spacingGroup2 as g, spacingElement1 as h, accentA8 as I, radiusMd as P, spacingElement2 as z, fontWeightBold as A, leadingXs as B, textXs as N } from "../../tokens/index.js";
+import { ensurePaletteTokensFor as C } from "../../tokens/install.js";
 import { ClearButton as D } from "../../lib/clear-button.js";
-import { NS as h } from "../../tokens/core.generated.js";
+import { NS as u } from "../../tokens/core.generated.js";
 const J = [
   "blue",
   "sky",
@@ -28,7 +28,7 @@ const J = [
   "warning",
   "success",
   "error"
-], p = "--volt2-pill-bg", d = "--volt2-pill-fg", c = "--volt2-pill-bd", l = "--volt2-pill-hov", e = (o, t) => `var(--volt2-${h}-sem-${o}-${t})`, G = (o, t) => `var(--volt2-${h}-${o}-${t})`, V = {
+], p = "--volt2-pill-bg", d = "--volt2-pill-fg", c = "--volt2-pill-bd", l = "--volt2-pill-hov", e = (o, t) => `var(--volt2-${u}-sem-${o}-${t})`, G = (o, t) => `var(--volt2-${u}-${o}-${t})`, V = {
   soft: (o) => ({
     [p]: e(o, "soft"),
     [d]: e(o, "light"),
@@ -53,7 +53,7 @@ const J = [
     alignItems: "center",
     // v1 `h-6` — a fixed height, not a minimum.
     height: "1.5rem",
-    gap: g,
+    gap: h,
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
@@ -93,32 +93,33 @@ const J = [
   },
   hasRemove: {
     // v1's `pr-1` when a clear button is present.
-    paddingRight: g
+    paddingRight: h
   },
   disabled: {
     pointerEvents: "none"
   },
   removeSize: {
     // v1's `size-4` on the composed ClearButton.
-    width: v,
-    height: v
+    width: g,
+    height: g
   }
 }), U = R.forwardRef(function({
   className: t,
-  color: u = "accent",
-  variant: y = "soft",
+  color: y = "accent",
+  variant: S = "soft",
   disabled: r,
   onRemove: m,
   onClick: i,
-  children: S,
-  ...b
-}, x) {
-  C();
-  const n = W(), w = r ? "gray" : u, s = !!i && !r, f = V[y](w);
-  return s || delete f[l], /* @__PURE__ */ $(
+  children: b,
+  ...x
+}, w) {
+  const n = W(), f = r ? "gray" : y;
+  C(f);
+  const s = !!i && !r, v = V[S](f);
+  return s || delete v[l], /* @__PURE__ */ $(
     "span",
     {
-      ref: x,
+      ref: w,
       "data-slot": "pill",
       [L]: "pill",
       "data-disabled": r || void 0,
@@ -135,10 +136,10 @@ const J = [
         r && n.disabled,
         t
       ),
-      style: { ...f },
-      ...b,
+      style: { ...v },
+      ...x,
       children: [
-        S,
+        b,
         m && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
         // fallback all live in the lib, not inline.
         /* @__PURE__ */ O(

package/dist/components/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS } from \"../../tokens\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\n\nconst COLORS = [\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-pill-bg\"\nconst FG = \"--volt2-pill-fg\"\nconst BD = \"--volt2-pill-bd\"\nconst HOV = \"--volt2-pill-hov\"\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--volt2-${NS}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  // A decorative family can arrive from an expression the build cannot see, so the palette has to\n  // be present whenever this component renders at all.\n  ensurePaletteTokens()\n\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","semantic","color","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","ensurePaletteTokens","styles","resolvedColor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}
+{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS } from \"../../tokens\"\nimport { ensurePaletteTokensFor } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\n\nconst COLORS = [\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-pill-bg\"\nconst FG = \"--volt2-pill-fg\"\nconst BD = \"--volt2-pill-bd\"\nconst HOV = \"--volt2-pill-hov\"\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--volt2-${NS}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n  // A decorative family can still arrive from an expression the build cannot see, so this has to\n  // run on every render — but it is the RESOLVED family that decides, and the five core families\n  // Pill offers (accent, gray, warning, success, error) need no palette sheet at all.\n  ensurePaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","semantic","color","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","ensurePaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":";;;;;;;;;;AAuBA,MAAMA,IAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMMC,IAAK,mBACLC,IAAK,mBACLC,IAAK,mBACLC,IAAM,oBAENC,IAAW,CAACC,GAAkBC,MAClC,eAAeC,CAAE,QAAQF,CAAK,IAAIC,CAAI,KAClCE,IAAY,CAACH,GAAkBI,MACnC,eAAeF,CAAE,IAAIF,CAAK,IAAII,CAAI,KAO9BC,IAGF;AAAA,EACF,MAAM,CAACC,OAAO;AAAA,IACZ,CAACX,CAAE,GAAGI,EAASO,GAAG,MAAM;AAAA,IACxB,CAACV,CAAE,GAAGG,EAASO,GAAG,OAAO;AAAA,IACzB,CAACT,CAAE,GAAG;AAAA,IACN,CAACC,CAAG,GAAGC,EAASO,GAAG,YAAY;AAAA,EAAA;AAAA,EAEjC,OAAO,CAACA,OAAO;AAAA,IACb,CAACX,CAAE,GAAGI,EAASO,GAAG,OAAO;AAAA,IACzB,CAACV,CAAE,GAAGG,EAASO,GAAG,UAAU;AAAA,IAC5B,CAACT,CAAE,GAAG;AAAA,IACN,CAACC,CAAG,GAAGC,EAASO,GAAG,aAAa;AAAA,EAAA;AAAA,EAElC,SAAS,CAACA,OAAO;AAAA,IACf,CAACX,CAAE,GAAGI,EAASO,GAAG,SAAS;AAAA,IAC3B,CAACV,CAAE,GAAGG,EAASO,GAAG,OAAO;AAAA,IACzB,CAACT,CAAE,GAAGM,EAAUG,GAAG,IAAI;AAAA,IACvB,CAACR,CAAG,GAAGC,EAASO,GAAG,eAAe;AAAA,EAAA;AAEtC,GAEMC,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,IAEZ,QAAQ;AAAA,IACR,KAAKC;AAAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,cAAcC;AAAAA,IACd,oBAAoB;AAAA;AAAA;AAAA,IAGpB,GAAGC,EAAW,OAAO,OAAO,SAAS,OAAOlB,CAAE,GAAG;AAAA;AAAA,IAEjD,iBAAiB,OAAOF,CAAE;AAAA,IAC1B,OAAO,OAAOC,CAAE;AAAA,IAChB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcoB;AAAAA,IAAO;AAAA;AAAA,IAGvB,WAAW;AAAA;AAAA;AAAA,MAGT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA,EAEF,aAAa;AAAA,IACX,QAAQ;AAAA;AAAA;AAAA,IAGR,UAAU,EAAE,iBAAiB,OAAOlB,CAAG,IAAA;AAAA,EAAI;AAAA,EAE7C,WAAW;AAAA;AAAA,IAET,cAAcW;AAAAA,EAAO;AAAA,EAEvB,UAAU;AAAA,IACR,eAAe;AAAA,EAAA;AAAA,EAEjB,YAAY;AAAA;AAAA,IAEV,OAAOQ;AAAAA,IACP,QAAQA;AAAAA,EAAO;AAEnB,CAAC,GAaYC,IAAOC,EAAM,WAAuC,SAC/D;AAAA,EACE,WAAAC;AAAA,EACA,OAAApB,IAAQ;AAAA,EACR,SAAAqB,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASrB,EAAA,GAGTsB,IAA2BP,IAAW,SAAStB;AAKrD,EAAA8B,EAAuBD,CAAa;AACpC,QAAME,IAAc,CAAC,CAACP,KAAW,CAACF,GAM5BrB,IAAOI,EAAcgB,CAAO,EAAEQ,CAAa;AACjD,SAAKE,KAAa,OAAO9B,EAAKH,CAAG,GAG/B,gBAAAkC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,aAAU;AAAA,MACJ,CAACM,CAAS,GAAG;AAAA,MACnB,iBAAeX,KAAY;AAAA,MAC3B,MAAMS,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,SAAAP;AAAA,MACA,WACEO,IACI,CAACG,MAAM;AACL,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFV,KAAA,QAAAA,EAAUU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWC;AAAAA,QACTP,EAAO;AAAA,QACPG,KAAeH,EAAO;AAAA,QACtBL,KAAYK,EAAO;AAAA,QACnBN,KAAYM,EAAO;AAAA,QACnBR;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGnB,EAAA;AAAA,MACX,GAAGyB;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACAF;AAAA;AAAA,QAGC,gBAAAa;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWT,EAAO;AAAA,YAClB,SAASL;AAAA,YACT,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/popover/popover.js

@@ -5,13 +5,13 @@ import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as p } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as P } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as x } from "../../styles/make-styles.js";
-import { spacingGroup2 as b, grayA1 as h, spacingElement2 as s, grayA12 as R, body as T, radiusXl as A } from "../../tokens/index.js";
+import { spacingGroup2 as b, grayA1 as h, radiusXl as R, spacingElement2 as s, grayA12 as T, body as A } from "../../tokens/index.js";
 const N = x({
   popup: {
-    backgroundColor: T,
-    color: R,
+    backgroundColor: A,
+    color: T,
     transformOrigin: "var(--radix-popover-content-transform-origin)",
-    ...i.borderRadius(A),
+    ...i.borderRadius(R),
     ...i.border("1px", "solid", h),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",

package/dist/components/radio/radio.js

@@ -5,7 +5,7 @@ import { shorthands as t } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as C } from "../../styles/make-styles.js";
-import { errorA8 as l, accentA7 as k, semAccentContrast as m, errorA10 as w, semErrorSoft as y, grayA3 as u, semAccentSolid as R, accentA8 as v, accentA12 as A, semAccentSoft as S, spacingElement3 as I } from "../../tokens/index.js";
+import { errorA8 as l, accentA7 as k, spacingElement3 as w, semAccentContrast as m, errorA10 as y, semErrorSoft as R, grayA3 as u, semAccentSolid as v, accentA8 as A, accentA12 as S, semAccentSoft as I } from "../../tokens/index.js";
 const j = c.forwardRef(
   function(o, r) {
     return /* @__PURE__ */ e(
@@ -27,7 +27,7 @@ const j = c.forwardRef(
 ), f = C({
   group: {
     display: "grid",
-    ...t.gap(I)
+    ...t.gap(w)
   },
   item: {
     boxSizing: "border-box",
@@ -41,8 +41,8 @@ const j = c.forwardRef(
     flexShrink: 0,
     borderRadius: "9999px",
     ...t.border("1px", "solid", k),
-    backgroundColor: S,
-    color: A,
+    backgroundColor: I,
+    color: S,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "color, box-shadow",
@@ -52,7 +52,7 @@ const j = c.forwardRef(
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: v
+      outlineColor: A
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
@@ -60,19 +60,19 @@ const j = c.forwardRef(
       ...t.borderColor("transparent")
     },
     "&[data-state='checked']": {
-      backgroundColor: R,
+      backgroundColor: v,
       color: m
     },
     "&[data-state='checked'][data-disabled]": {
       backgroundColor: u
     },
     "&[aria-invalid='true'], &[data-invalid]": {
-      backgroundColor: y,
+      backgroundColor: R,
       ...t.borderColor(l),
       outlineColor: l
     },
     "&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]": {
-      backgroundColor: w,
+      backgroundColor: y,
       ...t.borderColor("transparent")
     }
   },

package/dist/components/scroll-overflow/scroll-overflow.js

@@ -5,7 +5,7 @@ import { shorthands as w } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as F } from "../../styles/make-styles.js";
-import { grayA8 as A, accentA8 as W, grayA12 as j, gray1 as G, radiusMd as K, radiusSm as Z } from "../../tokens/index.js";
+import { radiusMd as W, radiusSm as j, grayA8 as A, accentA8 as G, grayA12 as K, gray1 as Z } from "../../tokens/index.js";
 function B() {
   return typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 }
@@ -184,11 +184,11 @@ const U = (c) => /* @__PURE__ */ l(
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: A,
-    ...w.borderRadius(Z),
+    ...w.borderRadius(j),
     backdropFilter: "blur(4px)",
-    color: G,
+    color: Z,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: K
     }
   },
   arrowIcon: {
@@ -218,12 +218,12 @@ const U = (c) => /* @__PURE__ */ l(
     flexDirection: "row"
   },
   viewport: {
-    ...w.borderRadius(K),
+    ...w.borderRadius(W),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
       outlineStyle: "solid",
-      outlineColor: W
+      outlineColor: G
     }
   },
   viewportHorizontal: {

package/dist/components/select/select.js

@@ -5,7 +5,7 @@ import { shorthands as d } from "../../packages/volt-runtime/dist/vendor/@griffe
 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 { spacingElement2 as s, spacingElement1 as p, semGraySoft as U, gray11 as G, fontWeightSemibold as V, leadingXs as Y, textXs as F, grayA11 as u, accentA3 as x, grayA12 as S, leadingSm as y, textSm as b, spacingGroup1 as H, body as Z, accentA11 as v, accentA8 as O, semAccentSoft as _, grayA8 as Q, radiusMd as I, radius2xl as J, radiusLg as K } from "../../tokens/index.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(
   "svg",
   {
@@ -57,10 +57,10 @@ const tt = (n) => /* @__PURE__ */ t(
     alignItems: "center",
     justifyContent: "space-between",
     ...d.gap(s),
-    ...d.borderRadius(K),
+    ...d.borderRadius(G),
     backgroundColor: "transparent",
-    fontSize: b,
-    lineHeight: y,
+    fontSize: v,
+    lineHeight: b,
     outlineStyle: "none",
     whiteSpace: "normal",
     textAlign: "left",
@@ -73,7 +73,7 @@ const tt = (n) => /* @__PURE__ */ t(
       opacity: 0.5
     },
     "&[data-placeholder]": {
-      color: Q
+      color: K
     },
     "& svg": {
       pointerEvents: "none",
@@ -127,14 +127,14 @@ const tt = (n) => /* @__PURE__ */ t(
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
-    color: v,
+    color: I,
     cursor: "pointer",
-    ...d.borderRadius(I),
+    ...d.borderRadius(x),
     ":hover": {
-      backgroundColor: _
+      backgroundColor: J
     },
     ":focus-visible": {
-      outlineColor: O,
+      outlineColor: Q,
       outlineWidth: "2px",
       outlineStyle: "solid"
     }
@@ -142,19 +142,19 @@ const tt = (n) => /* @__PURE__ */ t(
   triggerClearIcon: {
     width: "1.25rem",
     height: "1.25rem",
-    color: v
+    color: I
   },
   popup: {
-    backgroundColor: Z,
+    backgroundColor: _,
     ...d.padding(s),
     ...d.gap(p),
-    color: S,
+    color: y,
     position: "relative",
     zIndex: 50,
     transformOrigin: "var(--radix-select-content-transform-origin)",
     overflowX: "hidden",
     overflowY: "auto",
-    ...d.borderRadius(J),
+    ...d.borderRadius(U),
     ...d.border("1px", "solid", "transparent"),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
@@ -227,23 +227,23 @@ const tt = (n) => /* @__PURE__ */ t(
     userSelect: "none",
     alignItems: "center",
     ...d.gap(s),
-    ...d.borderRadius(I),
-    paddingLeft: H,
+    ...d.borderRadius(x),
+    paddingLeft: O,
     paddingRight: "2rem",
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: b,
-    lineHeight: y,
-    color: S,
+    fontSize: v,
+    lineHeight: b,
+    color: y,
     outlineStyle: "none",
     ":not(:first-child)": {
       marginTop: "0.125rem"
     },
     "&[data-highlighted]": {
-      backgroundColor: x
+      backgroundColor: S
     },
     "&[data-state='checked']": {
-      backgroundColor: x
+      backgroundColor: S
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -276,10 +276,10 @@ const tt = (n) => /* @__PURE__ */ t(
     paddingRight: s,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: F,
-    lineHeight: Y,
-    fontWeight: V,
-    color: G
+    fontSize: Z,
+    lineHeight: H,
+    fontWeight: F,
+    color: Y
   },
   separator: {
     pointerEvents: "none",
@@ -288,7 +288,7 @@ const tt = (n) => /* @__PURE__ */ t(
     marginTop: p,
     marginBottom: p,
     height: "1px",
-    backgroundColor: U
+    backgroundColor: V
   },
   scrollArrow: {
     display: "flex",