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

package/dist/components/avatar/avatar.js

@@ -1,13 +1,12 @@
-import { jsxs as h, jsx as g } from "react/jsx-runtime";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
 import * as i from "react";
 import { Root as p, Image as y, Fallback as A } from "../../vendor/@radix-ui/react-avatar/dist/index.js";
 import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as S } from "../../styles/make-styles.js";
-import { ensurePaletteTokens as w } from "../../tokens/install.js";
-import { indigoA12 as C, indigo3 as z, purpleA12 as R, purple3 as T, pinkA12 as j, pink3 as O, redA12 as F, red3 as H, bronzeA12 as I, bronze3 as N, orangeA12 as X, orange3 as B, yellowA12 as L, yellow3 as V, limeA12 as W, lime3 as _, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as J, sky3 as K, blueA12 as Q, blue3 as Z, grayA12 as $, gray3 as aa, leadingBase as ra, textBase as ea, leadingSm as ta, textSm as oa, leadingXs as na, textXs as ia, fontWeightMedium as la } from "../../tokens/index.js";
-typeof document < "u" && w();
-const s = [
+import { ensurePaletteTokensFor as w } from "../../tokens/install.js";
+import { indigoA12 as C, indigo3 as z, purpleA12 as R, purple3 as T, pinkA12 as j, pink3 as F, redA12 as O, red3 as H, bronzeA12 as I, bronze3 as N, orangeA12 as X, orange3 as B, yellowA12 as L, yellow3 as V, limeA12 as W, lime3 as _, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as J, sky3 as K, blueA12 as Q, blue3 as Z, grayA12 as $, gray3 as aa, leadingBase as ra, textBase as ea, leadingSm as ta, textSm as oa, leadingXs as na, textXs as ia, fontWeightMedium as la } from "../../tokens/index.js";
+const c = [
   "blue",
   "sky",
   "cyan",
@@ -20,12 +19,12 @@ const s = [
   "pink",
   "purple",
   "indigo"
-], da = (t) => {
+], ga = (t) => {
   let a = 0;
   for (let r = 0; r < t.length; r++)
     a = a * 31 + t.charCodeAt(r) >>> 0;
-  return s[a % s.length];
-}, ga = {
+  return c[a % c.length];
+}, da = {
   gray: {
     "--avatar-background": aa,
     "--avatar-foreground": $
@@ -72,10 +71,10 @@ const s = [
   },
   red: {
     "--avatar-background": H,
-    "--avatar-foreground": F
+    "--avatar-foreground": O
   },
   pink: {
-    "--avatar-background": O,
+    "--avatar-background": F,
     "--avatar-foreground": j
   },
   purple: {
@@ -133,19 +132,19 @@ const s = [
     width: "100%",
     height: "100%"
   }
-}), pa = i.forwardRef(function({ className: a, src: r, alt: l, initials: d, color: c, size: u, style: v, ...f }, m) {
-  const e = ca(), o = i.useContext(sa), b = u ?? (o == null ? void 0 : o.size) ?? "base", k = c ?? da(l ?? d ?? "");
-  return /* @__PURE__ */ h(
+}), pa = i.forwardRef(function({ className: a, src: r, alt: l, initials: g, color: u, size: v, style: m, ...f }, b) {
+  const e = ca(), o = i.useContext(sa), k = v ?? (o == null ? void 0 : o.size) ?? "base", d = u ?? ga(l ?? g ?? "");
+  return w(d), /* @__PURE__ */ h(
     p,
     {
-      ref: m,
+      ref: b,
       "data-slot": "avatar",
       [n]: "avatar",
-      className: x(e.root, e[b], a),
-      style: { ...ga[k], ...v },
+      className: x(e.root, e[k], a),
+      style: { ...da[d], ...m },
       ...f,
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ s(
           y,
           {
             "data-slot": "avatar-image",
@@ -155,14 +154,14 @@ const s = [
             className: e.image
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ s(
           A,
           {
             "data-slot": "avatar-fallback",
             [n]: "avatar-fallback",
             className: e.fallback,
             "aria-hidden": "true",
-            children: d
+            children: g
           }
         )
       ]

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\nif (typeof document !== \"undefined\") {\n  ensurePaletteTokens()\n}\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["ensurePaletteTokens","AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { ensurePaletteTokensFor } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  // Was a module-scope call, so merely IMPORTING Avatar installed 63 kB of palette CSS whether one\n  // ever rendered. Now it is per-instance and keyed on the resolved family. Every auto colour is\n  // decorative, so a seeded avatar still installs the sheet; an explicit `color=\"gray\"` no longer\n  // does, and neither does an import that never renders.\n  ensurePaletteTokensFor(resolvedColor)\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","ensurePaletteTokensFor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}

package/dist/components/badge/badge.js

@@ -5,9 +5,9 @@ import { SLOT_ATTR as S } from "../../packages/volt-runtime/dist/renderer/contra
 import { mergeClasses as y } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as x } from "../../styles/make-styles.js";
 import { radiusMd as w, spacingElement3 as R, spacingElement1 as r, textBase as $, radiusSm as C, spacingElement2 as O, textSm as k, textXs as A, errorA8 as B, accentA8 as T, fontWeightNormal as W } from "../../tokens/index.js";
-import { ensurePaletteTokens as E } from "../../tokens/install.js";
-import { NS as l } from "../../tokens/core.generated.js";
-const F = [
+import { ensurePaletteTokensFor as E } from "../../tokens/install.js";
+import { NS as d } from "../../tokens/core.generated.js";
+const V = [
   "accent",
   "neutral",
   "gray",
@@ -29,7 +29,7 @@ const F = [
   "orange",
   "yellow",
   "bronze"
-], n = "--volt2-badge-bg", i = "--volt2-badge-fg", a = "--volt2-badge-bd", d = (e) => e === "neutral" ? "gray" : e, t = (e, o) => `var(--volt2-${l}-sem-${d(e)}-${o})`, I = (e, o) => `var(--volt2-${l}-${d(e)}-${o})`, z = {
+], n = "--volt2-badge-bg", i = "--volt2-badge-fg", a = "--volt2-badge-bd", m = (e) => e === "neutral" ? "gray" : e, t = (e, o) => `var(--volt2-${d}-sem-${m(e)}-${o})`, I = (e, o) => `var(--volt2-${d}-${m(e)}-${o})`, z = {
   soft: (e) => ({
     [n]: t(e, "soft"),
     [i]: t(e, "default"),
@@ -109,29 +109,29 @@ const F = [
 }), M = v.forwardRef(
   function({
     className: o,
-    color: m = "accent",
+    color: s = "accent",
     variant: g = "soft",
     size: p = "base",
-    style: c,
-    ...f
+    style: f,
+    ...c
   }, u) {
-    E();
-    const s = L();
+    E(s);
+    const l = L();
     return /* @__PURE__ */ h(
       "span",
       {
         ref: u,
         "data-slot": "badge",
         [S]: "badge",
-        className: y(s.root, s[p], o),
-        style: { ...z[g](m), ...c },
-        ...f
+        className: y(l.root, l[p], o),
+        style: { ...z[g](s), ...f },
+        ...c
       }
     );
   }
 );
 export {
-  F as BADGE_COLORS,
+  V as BADGE_COLORS,
   M as Badge
 };
 //# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.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\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n *\n * v1 enumerates 20 colours x 3 styles as 60 `compoundVariants`, each a distinct class string like\n * `volt-bg-mint-soft`. Because those names are built by interpolation, Tailwind's scanner cannot\n * see them, which is what `safelist.css` exists to force — 9 lines that emit ~945 rules, 65.6 KB\n * and 59% of v1's entire rule count. The Griffel PoC carried the same shape forward as 60 static\n * style objects.\n *\n * Here the colour is a VALUE, not part of a class name. Three atoms read three custom properties;\n * the component sets those properties inline from the `color` prop. Total rules: one small set per\n * style variant, regardless of how many colours exist. Adding a 22nd palette family costs zero\n * rules.\n *\n * Two consequences worth knowing:\n *  - `color` may legitimately arrive from a runtime expression (`getColorForEntityLabel(label)` and\n *    `WCAG_BADGE_MAP[level].color` both exist in consumer code today), which no build step can\n *    resolve. That is exactly why the palette sheet cannot be statically shaken, and why this\n *    component calls `ensurePaletteTokens()`.\n *  - Selectors key on SLOT_ATTR, never on `data-slot`. `data-slot` values are shared with v1, so a\n *    rule keyed on one also matches v1-rendered DOM — the StyleX track had a v1 icon compute to\n *    0x0 through a green gate this way. `data-slot` is still emitted, purely as a diagnostic.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\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] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-badge-bg\"\nconst FG = \"--volt2-badge-fg\"\nconst BD = \"--volt2-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\nconst semantic = (color: BadgeColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${resolveColor(color)}-${slot})`\nconst primitive = (color: BadgeColor, step: string): string =>\n  `var(--volt2-${NS}-${resolveColor(color)}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\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    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\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    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","semantic","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","ensurePaletteTokens","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.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\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n *\n * v1 enumerates 20 colours x 3 styles as 60 `compoundVariants`, each a distinct class string like\n * `volt-bg-mint-soft`. Because those names are built by interpolation, Tailwind's scanner cannot\n * see them, which is what `safelist.css` exists to force — 9 lines that emit ~945 rules, 65.6 KB\n * and 59% of v1's entire rule count. The Griffel PoC carried the same shape forward as 60 static\n * style objects.\n *\n * Here the colour is a VALUE, not part of a class name. Three atoms read three custom properties;\n * the component sets those properties inline from the `color` prop. Total rules: one small set per\n * style variant, regardless of how many colours exist. Adding a 22nd palette family costs zero\n * rules.\n *\n * Two consequences worth knowing:\n *  - `color` may legitimately arrive from a runtime expression (`getColorForEntityLabel(label)` and\n *    `WCAG_BADGE_MAP[level].color` both exist in consumer code today), which no build step can\n *    resolve. That is exactly why the palette sheet cannot be statically shaken, and why this\n *    component calls `ensurePaletteTokens()`.\n *  - Selectors key on SLOT_ATTR, never on `data-slot`. `data-slot` values are shared with v1, so a\n *    rule keyed on one also matches v1-rendered DOM — the StyleX track had a v1 icon compute to\n *    0x0 through a green gate this way. `data-slot` is still emitted, purely as a diagnostic.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\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] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-badge-bg\"\nconst FG = \"--volt2-badge-fg\"\nconst BD = \"--volt2-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\nconst semantic = (color: BadgeColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${resolveColor(color)}-${slot})`\nconst primitive = (color: BadgeColor, step: string): string =>\n  `var(--volt2-${NS}-${resolveColor(color)}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\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    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\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 a core one needs no\n    // palette sheet.\n    ensurePaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","semantic","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","ensurePaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -4,16 +4,16 @@ import { shorthands as u } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as c } 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 B } from "../../styles/make-styles.js";
-import { semGrayDefault as b, fontWeightSemibold as f, accentA8 as L, semGrayLight as g, leadingBase as R, textBase as S, spacingElement1 as I, spacingElement2 as N } from "../../tokens/index.js";
+import { spacingElement1 as L, spacingElement2 as R, semGrayDefault as b, fontWeightSemibold as f, accentA8 as S, semGrayLight as g, leadingBase as I, textBase as N } from "../../tokens/index.js";
 import { Root as T } from "../../vendor/@radix-ui/react-slot/dist/index.js";
 const h = B({
   list: {
     display: "flex",
     alignItems: "center",
     // gap-2
-    ...u.gap(N),
-    fontSize: S,
-    lineHeight: R
+    ...u.gap(R),
+    fontSize: N,
+    lineHeight: I
   },
   separator: {
     color: g
@@ -22,7 +22,7 @@ const h = B({
     display: "inline-flex",
     alignItems: "center",
     // gap-1
-    ...u.gap(I)
+    ...u.gap(L)
   },
   link: {
     fontWeight: f,
@@ -39,7 +39,7 @@ const h = B({
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: L
+      outlineColor: S
     }
   },
   page: {

package/dist/components/button/button.js

@@ -4,14 +4,14 @@ import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as y } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as w } from "../../styles/make-styles.js";
-import { radiusLg as A, leadingLg as H, textLg as B, leadingBase as R, textBase as E, leadingSm as L, textSm as z, leadingXs as I, textXs as D, errorA8 as t, semErrorSoft as s, errorA11 as l, semErrorSoftHover as X, semErrorSolidHover as a, semErrorContrast as T, semErrorSolid as W, grayA8 as j, semAccentSoft as i, grayA12 as O, accentA8 as n, accentA11 as c, semAccentSoftHover as N, semAccentSolidHover as m, semAccentContrast as P, semAccentSolid as Q, fontWeightSemibold as V, spacingElement3 as _ } from "../../tokens/index.js";
+import { spacingElement3 as A, radiusLg as H, leadingLg as B, textLg as R, leadingBase as E, textBase as L, leadingSm as z, textSm as I, leadingXs as D, textXs as X, errorA8 as t, semErrorSoft as s, errorA11 as l, semErrorSoftHover as T, semErrorSolidHover as a, semErrorContrast as W, semErrorSolid as j, grayA8 as O, semAccentSoft as i, grayA12 as N, accentA8 as n, accentA11 as c, semAccentSoftHover as P, semAccentSolidHover as m, semAccentContrast as Q, semAccentSolid as V, fontWeightSemibold as _ } from "../../tokens/index.js";
 import { Root as $ } from "../../vendor/@radix-ui/react-slot/dist/index.js";
 const q = "button", F = w({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    fontWeight: V,
+    fontWeight: _,
     whiteSpace: "nowrap",
     transitionProperty: "all",
     cursor: "pointer",
@@ -29,8 +29,8 @@ const q = "button", F = w({
     }
   },
   primary: {
-    backgroundColor: Q,
-    color: P,
+    backgroundColor: V,
+    color: Q,
     ":hover": { backgroundColor: m },
     ":active": { backgroundColor: m },
     ":focus-visible": { outlineColor: n }
@@ -38,7 +38,7 @@ const q = "button", F = w({
   secondary: {
     backgroundColor: i,
     color: c,
-    ":hover": { backgroundColor: N },
+    ":hover": { backgroundColor: P },
     ":focus-visible": { outlineColor: n }
   },
   tertiary: {
@@ -49,13 +49,13 @@ const q = "button", F = w({
   },
   ghost: {
     backgroundColor: "transparent",
-    color: O,
+    color: N,
     ":hover": { backgroundColor: i },
-    ":focus-visible": { outlineColor: j }
+    ":focus-visible": { outlineColor: O }
   },
   primaryDestructive: {
-    backgroundColor: W,
-    color: T,
+    backgroundColor: j,
+    color: W,
     ":hover": { backgroundColor: a },
     ":active": { backgroundColor: a },
     ":focus-visible": { outlineColor: t }
@@ -63,7 +63,7 @@ const q = "button", F = w({
   secondaryDestructive: {
     backgroundColor: s,
     color: l,
-    ":hover": { backgroundColor: X },
+    ":hover": { backgroundColor: T },
     ":focus-visible": { outlineColor: t }
   },
   tertiaryDestructive: {
@@ -76,17 +76,17 @@ const q = "button", F = w({
     ...o.paddingInline("0.5rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.25rem",
-    fontSize: D,
-    lineHeight: I,
+    fontSize: X,
+    lineHeight: D,
     gap: "4px",
     "& svg": { width: "0.75rem", height: "0.75rem" }
   },
   sm: {
-    ...o.paddingInline(_),
+    ...o.paddingInline(A),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.5rem",
-    fontSize: z,
-    lineHeight: L,
+    fontSize: I,
+    lineHeight: z,
     gap: "0.375rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
@@ -94,8 +94,8 @@ const q = "button", F = w({
     ...o.paddingInline("1rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2rem",
-    fontSize: E,
-    lineHeight: R,
+    fontSize: L,
+    lineHeight: E,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -103,8 +103,8 @@ const q = "button", F = w({
     ...o.paddingInline("1.25rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2.5rem",
-    fontSize: B,
-    lineHeight: H,
+    fontSize: R,
+    lineHeight: B,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -128,7 +128,7 @@ const q = "button", F = w({
     height: "2.5rem",
     "& svg": { width: "1.5rem", height: "1.5rem" }
   },
-  normal: { borderRadius: A },
+  normal: { borderRadius: H },
   rounded: { borderRadius: "9999px" }
 }), ro = k.forwardRef(
   function({

package/dist/components/button-group/button-group.js

@@ -4,7 +4,7 @@ import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as c } from "../../styles/make-styles.js";
-import { spacingElement3 as g, spacingGroup2 as f, grayA5 as h, fontWeightMedium as b, leadingSm as x, textSm as R, grayA4 as S, radiusMd as v, spacingElement2 as m } from "../../tokens/index.js";
+import { spacingElement3 as g, spacingGroup2 as f, grayA5 as h, radiusMd as b, spacingElement2 as m, fontWeightMedium as x, leadingSm as R, textSm as S, grayA4 as v } from "../../tokens/index.js";
 import { Separator as y } from "../separator/separator.js";
 const u = c({
   root: {
@@ -43,16 +43,16 @@ const u = c({
     }
   },
   text: {
-    backgroundColor: S,
+    backgroundColor: v,
     display: "flex",
     alignItems: "center",
     ...o.gap(m),
-    ...o.borderRadius(v),
+    ...o.borderRadius(b),
     ...o.border("1px", "solid", h),
     ...o.padding(g, f),
-    fontSize: R,
-    lineHeight: x,
-    fontWeight: b,
+    fontSize: S,
+    lineHeight: R,
+    fontWeight: x,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
     boxShadow: "0 1px 2px 0 #0000000d",
     "& svg": {

package/dist/components/callout/callout.js

@@ -4,7 +4,7 @@ import { shorthands as y } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as C } 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 k } from "../../styles/make-styles.js";
-import { spacingGroup2 as w, spacingLayout1 as I, spacingElement2 as v, spacingLayout2 as E, leadingSm as S, textSm as R, fontWeightSemibold as N, leadingBase as $, textBase as j, spacingElement3 as c, spacingElement1 as G } from "../../tokens/index.js";
+import { spacingElement1 as E, spacingGroup2 as w, spacingLayout1 as I, spacingElement2 as v, spacingLayout2 as N, leadingSm as S, textSm as R, fontWeightSemibold as $, leadingBase as j, textBase as G, spacingElement3 as c } from "../../tokens/index.js";
 import { ClearButton as H } from "../../lib/clear-button.js";
 import { CloseIcon as W } from "../../lib/icons.js";
 import { NS as A } from "../../tokens/core.generated.js";
@@ -138,15 +138,15 @@ const O = a.forwardRef(
     WebkitLineClamp: 1,
     // min-h-4
     minHeight: w,
-    fontSize: j,
-    lineHeight: $,
-    fontWeight: N
+    fontSize: G,
+    lineHeight: j,
+    fontWeight: $
   },
   description: {
     gridColumnStart: 2,
     display: "grid",
     justifyItems: "start",
-    ...y.gap(G),
+    ...y.gap(E),
     fontSize: R,
     lineHeight: S,
     "& p": {
@@ -167,7 +167,7 @@ const O = a.forwardRef(
   actionStartIcon: {
     justifyContent: "flex-start",
     // ml-8
-    marginLeft: E
+    marginLeft: N
   },
   actionEnd: {
     justifyContent: "flex-end"

package/dist/components/card/card.js

@@ -4,14 +4,14 @@ import { shorthands as f } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as d } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as s } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as p } from "../../styles/make-styles.js";
-import { spacingGroup2 as e, leadingSm as m, textSm as g, grayA11 as u, fontWeightSemibold as C, body as y, spacingElement2 as R, radiusXl as h } from "../../tokens/index.js";
+import { spacingElement2 as m, radiusXl as g, spacingGroup2 as e, leadingSm as u, textSm as C, grayA11 as y, fontWeightSemibold as R, body as h } from "../../tokens/index.js";
 const c = p({
   root: {
-    backgroundColor: y,
+    backgroundColor: h,
     display: "flex",
     flexDirection: "column",
     ...f.gap(e),
-    ...f.borderRadius(h),
+    ...f.borderRadius(g),
     ...f.border("1px", "solid", "transparent"),
     paddingTop: e,
     paddingBottom: e,
@@ -24,7 +24,7 @@ const c = p({
     gridAutoRows: "min-content",
     gridTemplateRows: "auto auto",
     alignItems: "start",
-    ...f.gap(R),
+    ...f.gap(m),
     paddingLeft: e,
     paddingRight: e,
     "&:is(.border-b)": {
@@ -37,12 +37,12 @@ const c = p({
   title: {
     // v1 `leading-none` — a literal 1 because no token exists for it.
     lineHeight: 1,
-    fontWeight: C
+    fontWeight: R
   },
   description: {
-    color: u,
-    fontSize: g,
-    lineHeight: m
+    color: y,
+    fontSize: C,
+    lineHeight: u
   },
   action: {
     gridColumnStart: 2,

package/dist/components/collapsible-sidebar/collapsible-sidebar.js

@@ -4,7 +4,7 @@ import { shorthands as y } from "../../packages/volt-runtime/dist/vendor/@griffe
 import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as P } from "../../styles/make-styles.js";
-import { spacingGroup2 as M, body as z, spacingElement3 as B, radius2xl as X } from "../../tokens/index.js";
+import { spacingGroup2 as M, spacingElement3 as z, radius2xl as B, body as X } from "../../tokens/index.js";
 const D = e.createContext(null);
 function k() {
   const u = e.useContext(D);
@@ -36,8 +36,8 @@ const S = P({
     height: "100%",
     // v1 z-50; floating panel layer above collapsed sidebar.
     zIndex: 50,
-    ...y.borderRadius(X),
-    backgroundColor: z,
+    ...y.borderRadius(B),
+    backgroundColor: X,
     // v1 shadow-[0_4px_20px_rgba(0,0,0,0.15)]; no shadow token exists in this package.
     boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
     display: "flex",
@@ -63,7 +63,7 @@ const S = P({
     alignItems: "center",
     paddingTop: M,
     // v1 gap-3 is 0.75rem; no spacing token for 0.75rem exists in this package.
-    ...y.gap(B),
+    ...y.gap(z),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"