@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.1

package/dist/components/badge/badge.js

@@ -1,13 +1,14 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
 import * as S from "react";
-import { mergeClasses as b, SLOT_ATTR as y, shorthands as v } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as x } from "../../styles/make-styles.js";
-import { radiusMd as w, spacingElement3 as $, spacingElement1 as i, textBase as z, radiusSm as C, spacingElement2 as R, textSm as O, textXs as k, errorA8 as A, accentA8 as B, fontWeightNormal as N } from "../../tokens/index.js";
-import { useZenithPaletteTokensFor as T } from "../../tokens/use-palette-tokens.js";
-import { NS as W } from "../../tokens/core.meta.generated.js";
-import { NS as E } from "../../tokens/palette.generated.js";
-import { isCoreFamily as I } from "../../packages/tokens/dist/install.js";
-const X = [
+import { mergeClasses as y, SLOT_ATTR as v, shorthands as x } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as w } from "../../styles/make-styles.js";
+import { boxModel as o } from "../../styles/host-reset.js";
+import { radiusMd as $, spacingElement3 as z, spacingElement1 as i, 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 { useZenithPaletteTokensFor as W } from "../../tokens/use-palette-tokens.js";
+import { NS as E } from "../../tokens/core.meta.generated.js";
+import { NS as I } from "../../tokens/palette.generated.js";
+import { isCoreFamily as F } from "../../packages/tokens/dist/install.js";
+const J = [
   "accent",
   "neutral",
   "gray",
@@ -29,30 +30,31 @@ const X = [
   "orange",
   "yellow",
   "bronze"
-], o = "--zenith-badge-bg", a = "--zenith-badge-fg", s = "--zenith-badge-bd", m = (e) => e === "neutral" ? "gray" : e, d = (e) => I(e) ? W : E, n = (e, r) => {
-  const t = m(e);
-  return `var(--zenith-${d(t)}-${t}-${r})`;
-}, F = (e, r) => {
-  const t = m(e);
-  return `var(--zenith-${d(t)}-${t}-${r})`;
-}, L = {
+], a = "--zenith-badge-bg", s = "--zenith-badge-fg", l = "--zenith-badge-bd", d = (e) => e === "neutral" ? "gray" : e, g = (e) => F(e) ? E : I, r = (e, n) => {
+  const t = d(e);
+  return `var(--zenith-${g(t)}-${t}-${n})`;
+}, L = (e, n) => {
+  const t = d(e);
+  return `var(--zenith-${g(t)}-${t}-${n})`;
+}, G = {
   soft: (e) => ({
-    [o]: n(e, "soft"),
-    [a]: n(e, "default"),
-    [s]: "transparent"
+    [a]: r(e, "soft"),
+    [s]: r(e, "default"),
+    [l]: "transparent"
   }),
   solid: (e) => ({
-    [o]: n(e, "solid"),
-    [a]: n(e, "contrast"),
-    [s]: "transparent"
+    [a]: r(e, "solid"),
+    [s]: r(e, "contrast"),
+    [l]: "transparent"
   }),
   surface: (e) => ({
-    [o]: n(e, "surface"),
-    [a]: n(e, "default"),
-    [s]: F(e, "a6")
+    [a]: r(e, "surface"),
+    [s]: r(e, "default"),
+    [l]: L(e, "a6")
   })
-}, G = x({
+}, H = w({
   root: {
+    ...o,
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -60,32 +62,33 @@ const X = [
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
-    fontWeight: N,
+    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.
-    ...v.border("1px", "solid", `var(${s})`),
+    ...x.border("1px", "solid", `var(${l})`),
     // The whole point: one rule each, colour supplied per instance.
-    backgroundColor: `var(${o})`,
-    color: `var(${a})`,
+    backgroundColor: `var(${a})`,
+    color: `var(${s})`,
     transitionProperty: "color, box-shadow",
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: B
+      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: A
+      outlineColor: B
     },
     "& > svg": { pointerEvents: "none" }
   },
   sm: {
-    fontSize: k,
+    ...o,
+    fontSize: A,
     lineHeight: "1rem",
     letterSpacing: "0.04px",
     gap: i,
@@ -95,49 +98,51 @@ const X = [
     "& > svg": { width: "0.75rem", height: "0.75rem" }
   },
   base: {
-    fontSize: O,
+    ...o,
+    fontSize: k,
     lineHeight: "1.25rem",
     gap: i,
-    paddingInline: R,
+    paddingInline: O,
     minWidth: "1.25rem",
-    borderRadius: C,
+    borderRadius: R,
     "& > svg": { width: "1rem", height: "1rem" }
   },
   lg: {
-    fontSize: z,
+    ...o,
+    fontSize: C,
     lineHeight: "1.5rem",
     gap: i,
-    paddingInline: $,
+    paddingInline: z,
     minWidth: "1.5rem",
-    borderRadius: w,
+    borderRadius: $,
     "& > svg": { width: "1rem", height: "1rem" }
   }
-}), q = S.forwardRef(
+}), K = S.forwardRef(
   function({
-    className: r,
+    className: n,
     color: t = "accent",
-    variant: g = "soft",
-    size: p = "base",
+    variant: p = "soft",
+    size: f = "base",
     style: c,
-    ...f
-  }, h) {
-    T(t);
-    const l = G();
-    return /* @__PURE__ */ u(
+    ...h
+  }, u) {
+    W(t);
+    const m = H();
+    return /* @__PURE__ */ b(
       "span",
       {
-        ref: h,
+        ref: u,
         "data-slot": "badge",
-        [y]: "badge",
-        className: b(l.root, l[p], r),
-        style: { ...L[g](t), ...c },
-        ...f
+        [v]: "badge",
+        className: y(m.root, m[f], n),
+        style: { ...G[p](t), ...c },
+        ...h
       }
     );
   }
 );
 export {
-  X as BADGE_COLORS,
-  q 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/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } 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\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 = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-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.\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(--zenith-${namespaceFor(family)}-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${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 = makeZenithStyles({\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    useZenithPaletteTokensFor(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","makeZenithStyles","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","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOMC,IAAK,qBACLC,IAAK,qBACLC,IAAK,qBAELC,IAAe,CAACC,MACpBA,MAAU,YAAY,SAASA,GAO3BC,IAAe,CAACC,MACpBC,EAAaD,CAAM,IAAIE,IAAKC,GAExBC,IAAW,CAACN,GAAmBO,MAAyB;AAC5D,QAAML,IAASH,EAAaC,CAAK;AACjC,SAAO,gBAAgBC,EAAaC,CAAM,CAAC,IAAIA,CAAM,IAAIK,CAAI;AAC/D,GACMC,IAAY,CAACR,GAAmBS,MAAyB;AAC7D,QAAMP,IAASH,EAAaC,CAAK;AACjC,SAAO,gBAAgBC,EAAaC,CAAM,CAAC,IAAIA,CAAM,IAAIO,CAAI;AAC/D,GAMMC,IAGF;AAAA,EACF,MAAM,CAACC,OAAO;AAAA,IACZ,CAACf,CAAE,GAAGU,EAASK,GAAG,MAAM;AAAA,IACxB,CAACd,CAAE,GAAGS,EAASK,GAAG,SAAS;AAAA,IAC3B,CAACb,CAAE,GAAG;AAAA,EAAA;AAAA,EAER,OAAO,CAACa,OAAO;AAAA,IACb,CAACf,CAAE,GAAGU,EAASK,GAAG,OAAO;AAAA,IACzB,CAACd,CAAE,GAAGS,EAASK,GAAG,UAAU;AAAA,IAC5B,CAACb,CAAE,GAAG;AAAA,EAAA;AAAA,EAER,SAAS,CAACa,OAAO;AAAA,IACf,CAACf,CAAE,GAAGU,EAASK,GAAG,SAAS;AAAA,IAC3B,CAACd,CAAE,GAAGS,EAASK,GAAG,SAAS;AAAA,IAC3B,CAACb,CAAE,GAAGU,EAAUG,GAAG,IAAI;AAAA,EAAA;AAE3B,GAEMC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IAMZ,GAAGC,EAAW,OAAO,OAAO,SAAS,OAAOjB,CAAE,GAAG;AAAA;AAAA,IAEjD,iBAAiB,OAAOF,CAAE;AAAA,IAC1B,OAAO,OAAOC,CAAE;AAAA,IAChB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcmB;AAAAA,IAAO;AAAA;AAAA;AAAA,IAIvB,mBAAmB;AAAA,MACjB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,WAAW,EAAE,eAAe,OAAA;AAAA,EAAO;AAAA,EAErC,IAAI;AAAA,IACF,UAAUC;AAAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAKC;AAAAA,IACL,eAAeA;AAAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEnD,MAAM;AAAA,IACJ,UAAUC;AAAAA,IACV,YAAY;AAAA,IACZ,KAAKD;AAAAA,IACL,eAAeE;AAAAA,IACf,UAAU;AAAA,IACV,cAAcC;AAAAA,IACd,WAAW,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE7C,IAAI;AAAA,IACF,UAAUC;AAAAA,IACV,YAAY;AAAA,IACZ,KAAKJ;AAAAA,IACL,eAAeK;AAAAA,IACf,UAAU;AAAA,IACV,cAAcC;AAAAA,IACd,WAAW,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAE/C,CAAC,GAaYC,IAAQC,EAAM;AAAA,EACzB,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAA5B,IAAQ;AAAA,IACR,SAAA6B,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AAIA,IAAAC,EAA0BlC,CAAK;AAE/B,UAAMmC,IAASvB,EAAA;AAEf,WACE,gBAAAwB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAaH,EAAO,MAAMA,EAAOL,CAAI,GAAGF,CAAS;AAAA,QAC5D,OACE,EAAE,GAAGlB,EAAcmB,CAAO,EAAE7B,CAAK,GAAG,GAAG+B,EAAA;AAAA,QAExC,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } 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\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 = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-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.\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(--zenith-${namespaceFor(family)}-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${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 = makeZenithStyles({\n  root: {\n    ...boxModel,\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    ...boxModel,\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    ...boxModel,\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    ...boxModel,\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    useZenithPaletteTokensFor(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","makeZenithStyles","boxModel","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","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,111 +1,156 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import * as o from "react";
-import { SLOT_ATTR as c, mergeClasses as u, shorthands as b } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as B } from "../../styles/make-styles.js";
-import { grayDefault as p, fontWeightSemibold as f, accentA8 as L, grayLight as g, leadingBase as R, textBase as S, spacingElement1 as I, spacingElement2 as N } from "../../tokens/index.js";
-import { Root as T } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
-const h = B({
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeClasses as p, SLOT_ATTR as s, shorthands as n } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as L } from "../../styles/make-styles.js";
+import { boxModel as h } from "../../styles/host-reset.js";
+import { grayDefault as y, fontWeightSemibold as x, accentA8 as R, grayLight as S, leadingBase as N, textBase as D, spacingElement1 as I, spacingElement2 as A } from "../../tokens/index.js";
+import { Root as E } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
+const k = L({
+  // A truncating crumb can only shrink if every box above it may shrink below its content too. The
+  // nav is the box a flex row (a view header) actually sizes, so it carries the rule; plain trails
+  // keep their content size.
+  root: {
+    [`&:has([${s}="breadcrumb-item"][data-truncate])`]: {
+      minWidth: 0
+    }
+  },
   list: {
+    ...h,
+    // A layout row, not a numbered list: reset the browser's markers and indent so the trail does
+    // not depend on the host shipping a CSS reset.
+    listStyleType: "none",
+    ...n.margin(0),
+    ...n.padding(0),
     display: "flex",
     alignItems: "center",
     // gap-2
-    ...b.gap(N),
-    fontSize: S,
-    lineHeight: R
+    ...n.gap(A),
+    fontSize: D,
+    lineHeight: N,
+    minWidth: 0
   },
   separator: {
-    color: g
+    color: S
   },
   item: {
     display: "inline-flex",
     alignItems: "center",
     // gap-1
-    ...b.gap(I)
+    ...n.gap(I)
+  },
+  itemTruncate: {
+    ...h,
+    minWidth: 0
+  },
+  truncate: {
+    ...n.overflow("hidden"),
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
   },
   link: {
-    fontWeight: f,
-    color: g,
+    // A browser underlines a bare `<a>`; the underline is a hover affordance here.
+    textDecorationLine: "none",
+    fontWeight: x,
+    color: S,
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     cursor: "pointer",
     ":hover": {
-      color: p,
+      color: y,
       textDecorationLine: "underline"
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: L
+      outlineColor: R
     }
   },
   page: {
-    fontWeight: f,
-    color: p
+    fontWeight: x,
+    color: y
   }
-}), w = o.forwardRef(
-  function({ separator: t = "/", className: a, children: i, ...n }, l) {
-    const s = h(), m = o.Children.toArray(i).filter(o.isValidElement);
-    return /* @__PURE__ */ e(
+}), M = l.forwardRef(
+  function({
+    separator: a = "/",
+    "aria-label": c = "Breadcrumb",
+    className: m,
+    children: t,
+    ...d
+  }, r) {
+    const i = k(), b = l.Children.toArray(t).filter(l.isValidElement);
+    return /* @__PURE__ */ o(
       "nav",
       {
-        ref: l,
+        ref: r,
         "data-slot": "breadcrumb",
-        [c]: "breadcrumb",
-        "aria-label": "Breadcrumb",
-        className: a,
-        ...n,
-        children: /* @__PURE__ */ e("ol", { className: s.list, children: m.map((r, d) => /* @__PURE__ */ x(o.Fragment, { children: [
-          d > 0 && /* @__PURE__ */ e(
+        [s]: "breadcrumb",
+        "aria-label": c,
+        className: p(i.root, m),
+        ...d,
+        children: /* @__PURE__ */ o("ol", { className: i.list, children: b.map((f, e) => /* @__PURE__ */ w(l.Fragment, { children: [
+          e > 0 && /* @__PURE__ */ o(
             "li",
             {
               role: "presentation",
               "aria-hidden": "true",
-              className: s.separator,
-              children: t
+              className: i.separator,
+              children: a
             }
           ),
-          r
-        ] }, d)) })
+          f
+        ] }, e)) })
       }
     );
   }
-), z = o.forwardRef(function({ href: t, isCurrent: a = !1, className: i, children: n, asChild: l = !1, ...s }, m) {
-  const r = h(), y = !!t || l ? /* @__PURE__ */ e(
-    l ? T : "a",
+), P = l.forwardRef(function({
+  href: a,
+  isCurrent: c = !1,
+  className: m,
+  children: t,
+  asChild: d = !1,
+  truncate: r = !1,
+  title: i,
+  ...b
+}, f) {
+  const e = k(), T = !!a, B = d ? E : "a", g = r ? e.truncate : void 0, u = i ?? (r && (typeof t == "string" || typeof t == "number") ? String(t) : void 0), W = T || d ? /* @__PURE__ */ o(
+    B,
     {
       "data-slot": "breadcrumb-link",
-      [c]: "breadcrumb-link",
-      ...t ? { href: t } : {},
-      className: u(r.link, i),
-      ...a ? { "aria-current": "page" } : {},
-      ...s,
-      children: n
+      [s]: "breadcrumb-link",
+      ...a ? { href: a } : {},
+      className: p(e.link, g, m),
+      ...u !== void 0 ? { title: u } : {},
+      ...c ? { "aria-current": "page" } : {},
+      ...b,
+      children: t
     }
-  ) : /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ o(
     "span",
     {
       "data-slot": "breadcrumb-page",
-      [c]: "breadcrumb-page",
-      className: u(r.page, i),
-      ...a ? { "aria-current": "page" } : {},
-      children: n
+      [s]: "breadcrumb-page",
+      className: p(e.page, g, m),
+      ...u !== void 0 ? { title: u } : {},
+      ...c ? { "aria-current": "page" } : {},
+      children: t
     }
   );
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ o(
     "li",
     {
-      ref: m,
+      ref: f,
       "data-slot": "breadcrumb-item",
-      [c]: "breadcrumb-item",
-      className: r.item,
-      children: y
+      [s]: "breadcrumb-item",
+      ...r ? { "data-truncate": "" } : {},
+      className: p(e.item, r && e.itemTruncate),
+      children: W
     }
   );
 });
 export {
-  w as Breadcrumb,
-  z as BreadcrumbItem
+  M as Breadcrumb,
+  P 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/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/** Breadcrumb — Card's compound pattern applied to the nav / ol / li structure. */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeZenithStyles({\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.grayLight,\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.grayLight,\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.grayDefault,\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.grayDefault,\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","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.grayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.grayDefault","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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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/** Breadcrumb — Card's compound pattern applied to the nav / ol / li structure. */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n  /**\n   * Accessible name of the navigation landmark, read by screen readers. Pass a translated string\n   * for any locale other than English. Defaults to \"Breadcrumb\".\n   */\n  \"aria-label\"?: string\n}\n\nconst useStyles = makeZenithStyles({\n  // A truncating crumb can only shrink if every box above it may shrink below its content too. The\n  // nav is the box a flex row (a view header) actually sizes, so it carries the rule; plain trails\n  // keep their content size.\n  root: {\n    [`&:has([${SLOT_ATTR}=\"breadcrumb-item\"][data-truncate])`]: {\n      minWidth: 0,\n    },\n  },\n  list: {\n    ...boxModel,\n    // A layout row, not a numbered list: reset the browser's markers and indent so the trail does\n    // not depend on the host shipping a CSS reset.\n    listStyleType: \"none\",\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    minWidth: 0,\n  },\n  separator: {\n    color: tokens.grayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  itemTruncate: {\n    ...boxModel,\n    minWidth: 0,\n  },\n  truncate: {\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  link: {\n    // A browser underlines a bare `<a>`; the underline is a hover affordance here.\n    textDecorationLine: \"none\",\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayLight,\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.grayDefault,\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.grayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      separator = \"/\",\n      \"aria-label\": ariaLabel = \"Breadcrumb\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\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={ariaLabel}\n        className={mergeClasses(styles.root, 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   * Keep the crumb on one line and cut it with an ellipsis when the trail runs out of room, with\n   * the full text as its `title`. Pass `title` yourself when the children are not plain text.\n   */\n  truncate?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  {\n    href,\n    isCurrent = false,\n    className,\n    children,\n    asChild = false,\n    truncate = false,\n    title,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n  const truncateClass = truncate ? styles.truncate : undefined\n  const fullText =\n    title ??\n    (truncate && (typeof children === \"string\" || typeof children === \"number\")\n      ? String(children)\n      : undefined)\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, truncateClass, className)}\n        {...(fullText !== undefined ? { title: fullText } : {})}\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, truncateClass, className)}\n        {...(fullText !== undefined ? { title: fullText } : {})}\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      {...(truncate ? { \"data-truncate\": \"\" } : {})}\n      className={mergeClasses(styles.item, truncate && styles.itemTruncate)}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","SLOT_ATTR","boxModel","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.grayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.grayDefault","tokens.accentA8","Breadcrumb","React","separator","ariaLabel","className","children","props","ref","styles","items","jsx","mergeClasses","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","truncate","title","isLink","LinkRoot","Slot","truncateClass","fullText","content"],"mappings":"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"}