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

package/dist/components/badge/badge.js

@@ -1,15 +1,15 @@
-import { j as h } from "../../vendor/react/jsx-dev-runtime.js";
+import { jsx as h } from "react/jsx-runtime";
 import * as v from "react";
-import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as S } 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 y } from "../../styles/make-styles.js";
-import { radiusMd as w, spacingElement3 as R, spacingElement1 as i, textBase as $, radiusSm as C, spacingElement2 as N, textSm as k, textXs as E, errorA8 as O, accentA8 as A, fontWeightNormal as B } from "../../tokens/index.js";
-import { isCoreFamily as T } from "../../tokens/install.js";
-import { useVoltPaletteTokensFor as W } from "../../tokens/use-palette-tokens.js";
+import { shorthands as S } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as b } from "../../packages/volt-runtime/dist/renderer/contract.js";
+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 $, spacingElement1 as n, textBase as C, radiusSm as R, spacingElement2 as O, textSm as k, textXs as A, errorA8 as B, accentA8 as N, fontWeightNormal as T } from "../../tokens/index.js";
+import { isCoreFamily as W } from "../../tokens/install.js";
+import { useVoltPaletteTokensFor as E } from "../../tokens/use-palette-tokens.js";
 import { NS as I } from "../../tokens/core.generated.js";
-import { NS as j } from "../../tokens/palette.generated.js";
-const q = [
+import { NS as z } from "../../tokens/palette.generated.js";
+const J = [
   "accent",
   "neutral",
   "gray",
@@ -31,29 +31,29 @@ const q = [
   "orange",
   "yellow",
   "bronze"
-], n = "--volt2-badge-bg", s = "--volt2-badge-fg", a = "--volt2-badge-bd", m = (e) => e === "neutral" ? "gray" : e, d = (e) => T(e) ? I : j, o = (e, r) => {
+], i = "--volt2-badge-bg", a = "--volt2-badge-fg", s = "--volt2-badge-bd", m = (e) => e === "neutral" ? "gray" : e, d = (e) => W(e) ? I : z, o = (e, r) => {
   const t = m(e);
   return `var(--volt2-${d(t)}-sem-${t}-${r})`;
-}, z = (e, r) => {
+}, F = (e, r) => {
   const t = m(e);
   return `var(--volt2-${d(t)}-${t}-${r})`;
-}, D = {
+}, L = {
   soft: (e) => ({
-    [n]: o(e, "soft"),
-    [s]: o(e, "default"),
-    [a]: "transparent"
+    [i]: o(e, "soft"),
+    [a]: o(e, "default"),
+    [s]: "transparent"
   }),
   solid: (e) => ({
-    [n]: o(e, "solid"),
-    [s]: o(e, "contrast"),
-    [a]: "transparent"
+    [i]: o(e, "solid"),
+    [a]: o(e, "contrast"),
+    [s]: "transparent"
   }),
   surface: (e) => ({
-    [n]: o(e, "surface"),
-    [s]: o(e, "default"),
-    [a]: z(e, "a6")
+    [i]: o(e, "surface"),
+    [a]: o(e, "default"),
+    [s]: F(e, "a6")
   })
-}, F = y({
+}, G = x({
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -62,36 +62,36 @@ const q = [
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
-    fontWeight: B,
+    fontWeight: T,
     // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a
     // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would
     // both survive with the winner decided by insertion order. Griffel warns at runtime, which
     // means the mistake ships silently in production where nobody reads the console.
     // `shorthands.*` expands to the individual longhands.
-    ...b.border("1px", "solid", `var(${a})`),
+    ...S.border("1px", "solid", `var(${s})`),
     // The whole point: one rule each, colour supplied per instance.
-    backgroundColor: `var(${n})`,
-    color: `var(${s})`,
+    backgroundColor: `var(${i})`,
+    color: `var(${a})`,
     transitionProperty: "color, box-shadow",
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: A
+      outlineColor: N
     },
     // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused
     // badge paints the error ring, matching v1's variant ordering.
     "&[aria-invalid]": {
-      outlineColor: O
+      outlineColor: B
     },
     "& > svg": { pointerEvents: "none" }
   },
   sm: {
-    fontSize: E,
+    fontSize: A,
     lineHeight: "1rem",
     letterSpacing: "0.04px",
-    gap: i,
-    paddingInline: i,
+    gap: n,
+    paddingInline: n,
     minWidth: "1rem",
     borderRadius: "3px",
     "& > svg": { width: "0.75rem", height: "0.75rem" }
@@ -99,22 +99,22 @@ const q = [
   base: {
     fontSize: k,
     lineHeight: "1.25rem",
-    gap: i,
-    paddingInline: N,
+    gap: n,
+    paddingInline: O,
     minWidth: "1.25rem",
-    borderRadius: C,
+    borderRadius: R,
     "& > svg": { width: "1rem", height: "1rem" }
   },
   lg: {
-    fontSize: $,
+    fontSize: C,
     lineHeight: "1.5rem",
-    gap: i,
-    paddingInline: R,
+    gap: n,
+    paddingInline: $,
     minWidth: "1.5rem",
     borderRadius: w,
     "& > svg": { width: "1rem", height: "1rem" }
   }
-}), J = v.forwardRef(
+}), K = v.forwardRef(
   function({
     className: r,
     color: t = "accent",
@@ -123,31 +123,23 @@ const q = [
     style: f,
     ...c
   }, u) {
-    W(t);
-    const l = F();
-    return /* @__PURE__ */ h.jsxDEV(
+    E(t);
+    const l = G();
+    return /* @__PURE__ */ h(
       "span",
       {
         ref: u,
         "data-slot": "badge",
-        [S]: "badge",
-        className: x(l.root, l[p], r),
-        style: { ...D[g](t), ...f },
+        [b]: "badge",
+        className: y(l.root, l[p], r),
+        style: { ...L[g](t), ...f },
         ...c
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/badge/badge.tsx",
-        lineNumber: 212,
-        columnNumber: 7
-      },
-      this
+      }
     );
   }
 );
 export {
-  q as BADGE_COLORS,
-  J as Badge
+  J as BADGE_COLORS,
+  K 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, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useVoltPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\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\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in. This does not touch `useVoltPaletteTokensFor(color)`\n * above, which still receives the raw, unresolved `color` prop and therefore still installs the\n * palette sheet for `color=\"neutral\"` even though the resolved family needs none of it — a\n * separate, pre-existing inefficiency this fix does not optimize. See BADGE-PILL-NAMESPACE-FIX.md.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--volt2-${namespaceFor(family)}-sem-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--volt2-${namespaceFor(family)}-${family}-${step})`\n}\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    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useVoltPaletteTokensFor(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","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","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","useVoltPaletteTokensFor","styles","jsxDEV","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, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useVoltPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\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\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in. This does not touch `useVoltPaletteTokensFor(color)`\n * above, which still receives the raw, unresolved `color` prop and therefore still installs the\n * palette sheet for `color=\"neutral\"` even though the resolved family needs none of it — a\n * separate, pre-existing inefficiency this fix does not optimize. See BADGE-PILL-NAMESPACE-FIX.md.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--volt2-${namespaceFor(family)}-sem-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--volt2-${namespaceFor(family)}-${family}-${step})`\n}\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    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useVoltPaletteTokensFor(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","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","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","useVoltPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,19 +1,19 @@
-import { j as e } from "../../vendor/react/jsx-dev-runtime.js";
-import * as i from "react";
-import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import * as o from "react";
+import { shorthands as u } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 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 k } from "../../styles/make-styles.js";
-import { spacingElement1 as y, spacingElement2 as D, semGrayDefault as d, fontWeightSemibold as f, accentA8 as E, semGrayLight as g, leadingBase as j, textBase as w } from "../../tokens/index.js";
-import { Root as V } from "../../vendor/@radix-ui/react-slot/dist/index.js";
-const x = k({
+import { makeVoltStyles as B } from "../../styles/make-styles.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
-    ...b.gap(D),
-    fontSize: w,
-    lineHeight: j
+    ...u.gap(R),
+    fontSize: N,
+    lineHeight: I
   },
   separator: {
     color: g
@@ -22,7 +22,7 @@ const x = k({
     display: "inline-flex",
     alignItems: "center",
     // gap-1
-    ...b.gap(y)
+    ...u.gap(L)
   },
   link: {
     fontWeight: f,
@@ -32,130 +32,82 @@ const x = k({
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     cursor: "pointer",
     ":hover": {
-      color: d,
+      color: b,
       textDecorationLine: "underline"
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: E
+      outlineColor: S
     }
   },
   page: {
     fontWeight: f,
-    color: d
+    color: b
   }
-}), W = i.forwardRef(
-  function({ separator: r = "/", className: o, children: l, ...t }, s) {
-    const n = x(), u = i.Children.toArray(l).filter(i.isValidElement);
-    return /* @__PURE__ */ e.jsxDEV(
+}), F = o.forwardRef(
+  function({ separator: t = "/", className: a, children: i, ...n }, s) {
+    const l = h(), m = o.Children.toArray(i).filter(o.isValidElement);
+    return /* @__PURE__ */ e(
       "nav",
       {
         ref: s,
         "data-slot": "breadcrumb",
         [c]: "breadcrumb",
         "aria-label": "Breadcrumb",
-        className: o,
-        ...t,
-        children: /* @__PURE__ */ e.jsxDEV("ol", { className: n.list, children: u.map((a, m) => /* @__PURE__ */ e.jsxDEV(i.Fragment, { children: [
-          m > 0 && /* @__PURE__ */ e.jsxDEV(
+        className: a,
+        ...n,
+        children: /* @__PURE__ */ e("ol", { className: l.list, children: m.map((r, d) => /* @__PURE__ */ x(o.Fragment, { children: [
+          d > 0 && /* @__PURE__ */ e(
             "li",
             {
               role: "presentation",
               "aria-hidden": "true",
-              className: n.separator,
-              children: r
-            },
-            void 0,
-            !1,
-            {
-              fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-              lineNumber: 97,
-              columnNumber: 17
-            },
-            this
+              className: l.separator,
+              children: t
+            }
           ),
-          a
-        ] }, m, !0, {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-          lineNumber: 95,
-          columnNumber: 13
-        }, this)) }, void 0, !1, {
-          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-          lineNumber: 93,
-          columnNumber: 9
-        }, this)
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-        lineNumber: 85,
-        columnNumber: 7
-      },
-      this
+          r
+        ] }, d)) })
+      }
     );
   }
-), A = i.forwardRef(function({ href: r, isCurrent: o = !1, className: l, children: t, asChild: s = !1, ...n }, u) {
-  const a = x(), m = !!r, h = s ? V : "a", v = m || s ? /* @__PURE__ */ e.jsxDEV(
-    h,
+), G = o.forwardRef(function({ href: t, isCurrent: a = !1, className: i, children: n, asChild: s = !1, ...l }, m) {
+  const r = h(), k = !!t || s ? /* @__PURE__ */ e(
+    s ? T : "a",
     {
       "data-slot": "breadcrumb-link",
       [c]: "breadcrumb-link",
-      ...r ? { href: r } : {},
-      className: p(a.link, l),
-      ...o ? { "aria-current": "page" } : {},
-      ...n,
-      children: t
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-      lineNumber: 139,
-      columnNumber: 7
-    },
-    this
-  ) : /* @__PURE__ */ e.jsxDEV(
+      ...t ? { href: t } : {},
+      className: p(r.link, i),
+      ...a ? { "aria-current": "page" } : {},
+      ...l,
+      children: n
+    }
+  ) : /* @__PURE__ */ e(
     "span",
     {
       "data-slot": "breadcrumb-page",
       [c]: "breadcrumb-page",
-      className: p(a.page, l),
-      ...o ? { "aria-current": "page" } : {},
-      children: t
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-      lineNumber: 150,
-      columnNumber: 7
-    },
-    this
+      className: p(r.page, i),
+      ...a ? { "aria-current": "page" } : {},
+      children: n
+    }
   );
-  return /* @__PURE__ */ e.jsxDEV(
+  return /* @__PURE__ */ e(
     "li",
     {
-      ref: u,
+      ref: m,
       "data-slot": "breadcrumb-item",
       [c]: "breadcrumb-item",
-      className: a.item,
-      children: v
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/breadcrumb/breadcrumb.tsx",
-      lineNumber: 161,
-      columnNumber: 5
-    },
-    this
+      className: r.item,
+      children: k
+    }
   );
 });
 export {
-  W as Breadcrumb,
-  A as BreadcrumbItem
+  F as Breadcrumb,
+  G as BreadcrumbItem
 };
 //# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.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 * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.\n *\n * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between\n * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The\n * `nav` / `ol` / `li` semantics and the `aria-current=\"page\"` handling are the real value of this\n * component and are reproduced exactly.\n *\n * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per\n * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting\n * a non-`<a>` link anchors it themselves.\n *\n * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`\n * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav\n * itself has no base styles in v1 — it is left to the caller's className — so it carries only the\n * slot attributes.\n *\n * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is\n * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeVoltStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  separator: {\n    color: tokens.semGrayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.semGrayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.semGrayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semGrayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsxDEV","SLOT_ATTR","child","index","BreadcrumbItem","href","isCurrent","asChild","isLink","LinkRoot","Slot","content","mergeClasses"],"mappings":";;;;;;;;AAmCA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,IAEZ,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,UAAUC;AAAAA,IACV,YAAYC;AAAAA,EAAO;AAAA,EAErB,WAAW;AAAA,IACT,OAAOC;AAAAA,EAAO;AAAA,EAEhB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,IAEZ,GAAGJ,EAAW,IAAIK,CAAsB;AAAA,EAAA;AAAA,EAE1C,MAAM;AAAA,IACJ,YAAYC;AAAAA,IACZ,OAAOF;AAAAA,IACP,oBACE;AAAA,IACF,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,OAAOG;AAAAA,MACP,oBAAoB;AAAA,IAAA;AAAA,IAEtB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,EACvB;AAAA,EAEF,MAAM;AAAA,IACJ,YAAYF;AAAAA,IACZ,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAEYE,IAAaC,EAAM;AAAA,EAC9B,SAAoB,EAAE,WAAAC,IAAY,KAAK,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC3E,UAAMC,IAASlB,EAAA,GACTmB,IAAQP,EAAM,SAAS,QAAQG,CAAQ,EAAE,OAAOH,EAAM,cAAc;AAE1E,WACEQ,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,cAAW;AAAA,QACX,WAAAP;AAAA,QACC,GAAGE;AAAA,QAEJ,UAAAI,gBAAAA,EAAAA,OAAC,MAAA,EAAG,WAAWF,EAAO,MACnB,UAAAC,EAAM,IAAI,CAACG,GAAOC,MACjBH,gBAAAA,EAAAA,OAACR,EAAM,UAAN,EACE,UAAA;AAAA,UAAAW,IAAQ,KACPH,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,WAAWF,EAAO;AAAA,cAEjB,UAAAL;AAAA,YAAA;AAAA,YALH;AAAA,YAAA;AAAA,YAAA;AAAA,cAAA,UAAA;AAAA,cAAA,YAAA;AAAA,cAAA,cAAA;AAAA,YAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAQDS;AAAA,QAAA,EAAA,GAVkBC,GAArB,IAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA,GAAA,IAWA,CACD,KAdH,QAAA,IAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA,GAAA,IAeA;AAAA,MAAA;AAAA,MAvBF;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EA0BJ;AACF,GAaaC,IAAiBZ,EAAM,WAGlC,SACA,EAAE,MAAAa,GAAM,WAAAC,IAAY,IAAO,WAAAZ,GAAW,UAAAC,GAAU,SAAAY,IAAU,IAAO,GAAGX,EAAA,GACpEC,GACA;AACA,QAAMC,IAASlB,EAAA,GACT4B,IAAS,CAAC,CAACH,GAEXI,IAAWF,IAAUG,IAAO,KAE5BC,IACJH,KAAUD,IACRP,gBAAAA,EAAAA;AAAAA,IAACS;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACJ,CAACR,CAAS,GAAG;AAAA,MAClB,GAAII,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,WAAWO,EAAad,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAIY,IAAY,EAAE,gBAAgB,OAAA,IAAoB,CAAA;AAAA,MACtD,GAAGV;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,IARH;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA,IAWAK,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACJ,CAACC,CAAS,GAAG;AAAA,MACnB,WAAWW,EAAad,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAIY,IAAY,EAAE,gBAAgB,OAAA,IAAoB,CAAA;AAAA,MAEtD,UAAAX;AAAA,IAAA;AAAA,IANH;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAUJ,SACEK,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWH,EAAO;AAAA,MAEjB,UAAAa;AAAA,IAAA;AAAA,IANH;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AASJ,CAAC;"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.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 * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.\n *\n * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between\n * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The\n * `nav` / `ol` / `li` semantics and the `aria-current=\"page\"` handling are the real value of this\n * component and are reproduced exactly.\n *\n * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per\n * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting\n * a non-`<a>` link anchors it themselves.\n *\n * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`\n * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav\n * itself has no base styles in v1 — it is left to the caller's className — so it carries only the\n * slot attributes.\n *\n * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is\n * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeVoltStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  separator: {\n    color: tokens.semGrayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.semGrayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.semGrayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semGrayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsx","SLOT_ATTR","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","content","Slot","mergeClasses"],"mappings":"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"}