@techfides/ui-library-design 0.5.0 → 0.8.0

package/dist/recipes/tile.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/tile.ts
 const tileTones = [
@@ -79,7 +80,24 @@ const tileGlyphRecipe = cva([
 	} }
 });
 const tileCloudRecipe = cva("tf-nebula-cloud tf-cloud-tight");
+const tileAnatomy = anatomy({
+	cloud: {
+		part: "cloud",
+		recipe: tileCloudRecipe,
+		required: false
+	},
+	glyph: {
+		part: "glyph",
+		recipe: tileGlyphRecipe,
+		required: true
+	},
+	root: {
+		part: "tile",
+		recipe: tileRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultTileRest, defaultTileTone, tileCloudRecipe, tileGlyphRecipe, tileRecipe, tileRests, tileTones };
+export { defaultTileRest, defaultTileTone, tileAnatomy, tileCloudRecipe, tileGlyphRecipe, tileRecipe, tileRests, tileTones };
 
 //# sourceMappingURL=tile.js.map

package/dist/recipes/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","names":[],"sources":["../../src/recipes/tile.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst tileTones = ['accent', 'success', 'warning', 'info', 'danger'] as const\n\ntype TileTone = (typeof tileTones)[number]\n\nconst defaultTileTone = 'accent' satisfies TileTone\n\nconst tileRests = ['lit', 'quiet', 'filled'] as const\n\ntype TileRest = (typeof tileRests)[number]\n\nconst defaultTileRest = 'lit' satisfies TileRest\n\nconst BLEND = {\n  accent: 'blend-tf-accent',\n  danger: 'blend-tf-danger',\n  info: 'blend-tf-info',\n  success: 'blend-tf-success',\n  warning: 'blend-tf-warning',\n} satisfies Record<TileTone, string>\n\nconst INK = {\n  accent: 'text-tf-accent-hi',\n  danger: 'text-tf-danger-hi',\n  info: 'text-tf-info-hi',\n  success: 'text-tf-success-hi',\n  warning: 'text-tf-warning-hi',\n} satisfies Record<TileTone, string>\n\nconst FILLED_INK = {\n  accent: 'text-tf-on-accent',\n  danger: 'text-tf-on-semantic',\n  info: 'text-tf-on-semantic',\n  success: 'text-tf-on-semantic',\n  warning: 'text-tf-on-semantic',\n} satisfies Record<TileTone, string>\n\nconst LIT = 'tf-edge-sweep tf-swept tf-inner-lit tf-glass-plate stroke-tf-ink tf-icons-solo'\n\nconst QUIET = [\n  'bg-tf-panel-hi tf-ramp tf-cloud-brand tf-cloud-hidden',\n  'text-tf-fg tf-blend-drift tf-icons',\n].join(' ')\n\nconst FILLED = [\n  'bg-tf-blend tf-cloud-brand tf-clouded tf-blend-drift',\n  'tf-edge-sweep tf-swept tf-inner-lit tf-icons-solo',\n].join(' ')\n\nconst tileRecipe = cva(\n  [\n    'relative isolate flex size-tf-control-lg shrink-0 items-center justify-center',\n    'rounded-tf-card',\n    'tf-transition motion-reduce:transition-none',\n    '[&_svg]:size-tf-icon-solo-lg [&_svg]:shrink-0',\n  ],\n  {\n    compoundVariants: [\n      ...tileTones.map((tone) => ({ class: INK[tone], rest: 'lit' as const, tone })),\n      ...tileTones.map((tone) => ({ class: FILLED_INK[tone], rest: 'filled' as const, tone })),\n    ],\n    defaultVariants: { rest: defaultTileRest, tone: defaultTileTone },\n    variants: {\n      rest: { filled: FILLED, lit: LIT, quiet: QUIET } satisfies Record<TileRest, string>,\n      tone: BLEND,\n    },\n  },\n)\n\nconst tileGlyphRecipe = cva(\n  [\n    'inline-flex items-center justify-center',\n    '[&_svg]:size-tf-icon-solo-lg [&_svg]:shrink-0',\n    'tf-moves-spring tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { rest: defaultTileRest },\n    variants: {\n      rest: {\n        filled: 'motion-safe:tf-pops',\n        lit: 'motion-safe:tf-pops',\n        quiet: '',\n      } satisfies Record<TileRest, string>,\n    },\n  },\n)\n\nconst tileCloudRecipe = cva('tf-nebula-cloud tf-cloud-tight')\n\nexport {\n  type TileRest,\n  type TileTone,\n  defaultTileRest,\n  defaultTileTone,\n  tileCloudRecipe,\n  tileGlyphRecipe,\n  tileRecipe,\n  tileRests,\n  tileTones,\n}\n"],"mappings":";;AAEA,MAAM,YAAY;CAAC;CAAU;CAAW;CAAW;CAAQ;AAAQ;AAInE,MAAM,kBAAkB;AAExB,MAAM,YAAY;CAAC;CAAO;CAAS;AAAQ;AAI3C,MAAM,kBAAkB;AAExB,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,MAAM;CACV,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,aAAa;CACjB,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,MAAM;AAEZ,MAAM,QAAQ,CACZ,yDACA,oCACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,SAAS,CACb,wDACA,mDACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,aAAa,IACjB;CACE;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB,GAAG,UAAU,KAAK,UAAU;EAAE,OAAO,IAAI;EAAO,MAAM;EAAgB;CAAK,EAAE,GAC7E,GAAG,UAAU,KAAK,UAAU;EAAE,OAAO,WAAW;EAAO,MAAM;EAAmB;CAAK,EAAE,CACzF;CACA,iBAAiB;EAAE,MAAA;EAAuB,MAAM;CAAgB;CAChE,UAAU;EACR,MAAM;GAAE,QAAQ;GAAQ,KAAK;GAAK,OAAO;EAAM;EAC/C,MAAM;CACR;AACF,CACF;AAEA,MAAM,kBAAkB,IACtB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,MAAsB;CACzC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,KAAK;EACL,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,gCAAgC"}
+{"version":3,"file":"tile.js","names":[],"sources":["../../src/recipes/tile.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst tileTones = ['accent', 'success', 'warning', 'info', 'danger'] as const\n\ntype TileTone = (typeof tileTones)[number]\n\nconst defaultTileTone = 'accent' satisfies TileTone\n\nconst tileRests = ['lit', 'quiet', 'filled'] as const\n\ntype TileRest = (typeof tileRests)[number]\n\nconst defaultTileRest = 'lit' satisfies TileRest\n\nconst BLEND = {\n  accent: 'blend-tf-accent',\n  danger: 'blend-tf-danger',\n  info: 'blend-tf-info',\n  success: 'blend-tf-success',\n  warning: 'blend-tf-warning',\n} satisfies Record<TileTone, string>\n\nconst INK = {\n  accent: 'text-tf-accent-hi',\n  danger: 'text-tf-danger-hi',\n  info: 'text-tf-info-hi',\n  success: 'text-tf-success-hi',\n  warning: 'text-tf-warning-hi',\n} satisfies Record<TileTone, string>\n\nconst FILLED_INK = {\n  accent: 'text-tf-on-accent',\n  danger: 'text-tf-on-semantic',\n  info: 'text-tf-on-semantic',\n  success: 'text-tf-on-semantic',\n  warning: 'text-tf-on-semantic',\n} satisfies Record<TileTone, string>\n\nconst LIT = 'tf-edge-sweep tf-swept tf-inner-lit tf-glass-plate stroke-tf-ink tf-icons-solo'\n\nconst QUIET = [\n  'bg-tf-panel-hi tf-ramp tf-cloud-brand tf-cloud-hidden',\n  'text-tf-fg tf-blend-drift tf-icons',\n].join(' ')\n\nconst FILLED = [\n  'bg-tf-blend tf-cloud-brand tf-clouded tf-blend-drift',\n  'tf-edge-sweep tf-swept tf-inner-lit tf-icons-solo',\n].join(' ')\n\nconst tileRecipe = cva(\n  [\n    'relative isolate flex size-tf-control-lg shrink-0 items-center justify-center',\n    'rounded-tf-card',\n    'tf-transition motion-reduce:transition-none',\n    '[&_svg]:size-tf-icon-solo-lg [&_svg]:shrink-0',\n  ],\n  {\n    compoundVariants: [\n      ...tileTones.map((tone) => ({ class: INK[tone], rest: 'lit' as const, tone })),\n      ...tileTones.map((tone) => ({ class: FILLED_INK[tone], rest: 'filled' as const, tone })),\n    ],\n    defaultVariants: { rest: defaultTileRest, tone: defaultTileTone },\n    variants: {\n      rest: { filled: FILLED, lit: LIT, quiet: QUIET } satisfies Record<TileRest, string>,\n      tone: BLEND,\n    },\n  },\n)\n\nconst tileGlyphRecipe = cva(\n  [\n    'inline-flex items-center justify-center',\n    '[&_svg]:size-tf-icon-solo-lg [&_svg]:shrink-0',\n    'tf-moves-spring tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { rest: defaultTileRest },\n    variants: {\n      rest: {\n        filled: 'motion-safe:tf-pops',\n        lit: 'motion-safe:tf-pops',\n        quiet: '',\n      } satisfies Record<TileRest, string>,\n    },\n  },\n)\n\nconst tileCloudRecipe = cva('tf-nebula-cloud tf-cloud-tight')\n\nconst tileAnatomy = anatomy({\n  cloud: { part: 'cloud', recipe: tileCloudRecipe, required: false },\n  glyph: { part: 'glyph', recipe: tileGlyphRecipe, required: true },\n  root: { part: 'tile', recipe: tileRecipe, required: true },\n})\n\nexport {\n  type TileRest,\n  type TileTone,\n  defaultTileRest,\n  defaultTileTone,\n  tileAnatomy,\n  tileCloudRecipe,\n  tileGlyphRecipe,\n  tileRecipe,\n  tileRests,\n  tileTones,\n}\n"],"mappings":";;;AAIA,MAAM,YAAY;CAAC;CAAU;CAAW;CAAW;CAAQ;AAAQ;AAInE,MAAM,kBAAkB;AAExB,MAAM,YAAY;CAAC;CAAO;CAAS;AAAQ;AAI3C,MAAM,kBAAkB;AAExB,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,MAAM;CACV,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,aAAa;CACjB,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,MAAM;AAEZ,MAAM,QAAQ,CACZ,yDACA,oCACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,SAAS,CACb,wDACA,mDACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,aAAa,IACjB;CACE;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB,GAAG,UAAU,KAAK,UAAU;EAAE,OAAO,IAAI;EAAO,MAAM;EAAgB;CAAK,EAAE,GAC7E,GAAG,UAAU,KAAK,UAAU;EAAE,OAAO,WAAW;EAAO,MAAM;EAAmB;CAAK,EAAE,CACzF;CACA,iBAAiB;EAAE,MAAA;EAAuB,MAAM;CAAgB;CAChE,UAAU;EACR,MAAM;GAAE,QAAQ;GAAQ,KAAK;GAAK,OAAO;EAAM;EAC/C,MAAM;CACR;AACF,CACF;AAEA,MAAM,kBAAkB,IACtB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,MAAsB;CACzC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,KAAK;EACL,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,gCAAgC;AAE5D,MAAM,cAAc,QAAQ;CAC1B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAM;CACjE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAY,UAAU;CAAK;AAC3D,CAAC"}

package/dist/recipes/tooltip.d.ts

@@ -7,6 +7,13 @@ declare const tooltipPlacements: readonly ["top", "right", "bottom", "left"];
 declare const tooltipRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const tooltipArrowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const tooltipArrowTipRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tooltipAnatomy: {
+  readonly root: {
+    readonly part: "tooltip";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type TooltipPlacement, defaultTooltipPlacement, tooltipArrowRecipe, tooltipArrowTipRecipe, tooltipCloseToken, tooltipOpenToken, tooltipPlacements, tooltipRecipe };
+export { type TooltipPlacement, defaultTooltipPlacement, tooltipAnatomy, tooltipArrowRecipe, tooltipArrowTipRecipe, tooltipCloseToken, tooltipOpenToken, tooltipPlacements, tooltipRecipe };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/recipes/tooltip.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { arrivalMotion } from "./motion.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/tooltip.ts
@@ -20,7 +21,12 @@ const tooltipRecipe = cva([
 ]);
 const tooltipArrowRecipe = cva(["[--arrow-size:0.5rem]", "[--arrow-background:var(--tf-glass-flat)]"]);
 const tooltipArrowTipRecipe = cva("border-t border-l border-tf-line");
+const tooltipAnatomy = anatomy({ root: {
+	part: "tooltip",
+	recipe: tooltipRecipe,
+	required: true
+} });
 //#endregion
-export { defaultTooltipPlacement, tooltipArrowRecipe, tooltipArrowTipRecipe, tooltipCloseToken, tooltipOpenToken, tooltipPlacements, tooltipRecipe };
+export { defaultTooltipPlacement, tooltipAnatomy, tooltipArrowRecipe, tooltipArrowTipRecipe, tooltipCloseToken, tooltipOpenToken, tooltipPlacements, tooltipRecipe };
 
 //# sourceMappingURL=tooltip.js.map

package/dist/recipes/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/recipes/tooltip.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { arrivalMotion } from './motion'\n\ntype TooltipPlacement = 'top' | 'right' | 'bottom' | 'left'\n\nconst defaultTooltipPlacement = 'right' satisfies TooltipPlacement\n\nconst tooltipOpenToken = '--tf-duration-2'\n\nconst tooltipCloseToken = '--tf-duration-1'\n\nconst tooltipPlacements = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n] as const satisfies readonly TooltipPlacement[]\n\nconst tooltipRecipe = cva([\n  'z-tf-tooltip max-w-tf-panel rounded-tf-inline px-1.5 py-0.75',\n  'bg-tf-glass shadow-tf-float backdrop-blur-tf-glass',\n  'tf-edge-sweep tf-edge-plain',\n  'font-tf-body text-tf-caption-sm text-tf-fg',\n  ...arrivalMotion,\n  'motion-reduce:animate-none',\n])\n\nconst tooltipArrowRecipe = cva([\n  '[--arrow-size:0.5rem]',\n  '[--arrow-background:var(--tf-glass-flat)]',\n])\n\nconst tooltipArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nexport {\n  type TooltipPlacement,\n  defaultTooltipPlacement,\n  tooltipCloseToken,\n  tooltipOpenToken,\n  tooltipArrowRecipe,\n  tooltipArrowTipRecipe,\n  tooltipPlacements,\n  tooltipRecipe,\n}\n"],"mappings":";;;AAMA,MAAM,0BAA0B;AAEhC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;CACxB;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAC7B,yBACA,2CACF,CAAC;AAED,MAAM,wBAAwB,IAAI,kCAAkC"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/recipes/tooltip.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nimport { arrivalMotion } from './motion'\n\ntype TooltipPlacement = 'top' | 'right' | 'bottom' | 'left'\n\nconst defaultTooltipPlacement = 'right' satisfies TooltipPlacement\n\nconst tooltipOpenToken = '--tf-duration-2'\n\nconst tooltipCloseToken = '--tf-duration-1'\n\nconst tooltipPlacements = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n] as const satisfies readonly TooltipPlacement[]\n\nconst tooltipRecipe = cva([\n  'z-tf-tooltip max-w-tf-panel rounded-tf-inline px-1.5 py-0.75',\n  'bg-tf-glass shadow-tf-float backdrop-blur-tf-glass',\n  'tf-edge-sweep tf-edge-plain',\n  'font-tf-body text-tf-caption-sm text-tf-fg',\n  ...arrivalMotion,\n  'motion-reduce:animate-none',\n])\n\nconst tooltipArrowRecipe = cva([\n  '[--arrow-size:0.5rem]',\n  '[--arrow-background:var(--tf-glass-flat)]',\n])\n\nconst tooltipArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nconst tooltipAnatomy = anatomy({\n  root: { part: 'tooltip', recipe: tooltipRecipe, required: true },\n})\n\nexport {\n  type TooltipPlacement,\n  defaultTooltipPlacement,\n  tooltipAnatomy,\n  tooltipCloseToken,\n  tooltipOpenToken,\n  tooltipArrowRecipe,\n  tooltipArrowTipRecipe,\n  tooltipPlacements,\n  tooltipRecipe,\n}\n"],"mappings":";;;;AAQA,MAAM,0BAA0B;AAEhC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;CACxB;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAC7B,yBACA,2CACF,CAAC;AAED,MAAM,wBAAwB,IAAI,kCAAkC;AAEpE,MAAM,iBAAiB,QAAQ,EAC7B,MAAM;CAAE,MAAM;CAAW,QAAQ;CAAe,UAAU;AAAK,EACjE,CAAC"}

package/dist/recipes/topBar.d.ts

@@ -10,6 +10,48 @@ declare const topBarActionsRecipe: (props?: import("class-variance-authority/typ
 declare const topBarLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 type TopBarLevel = (typeof topBarLevels)[number];
 declare const defaultTopBarLevel = "h1";
+declare const topBarAnatomy: {
+  readonly actions: {
+    readonly part: "actions";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly content: {
+    readonly part: "content";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly edge: {
+    readonly part: "edge";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly eyebrow: {
+    readonly part: "eyebrow";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly headings: {
+    readonly part: "headings";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "top-bar";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly rule: {
+    readonly part: "rule";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly title: {
+    readonly part: "title";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type TopBarLevel, defaultTopBarLevel, topBarActionsRecipe, topBarContentRecipe, topBarEdgeRecipe, topBarEyebrowRecipe, topBarHeadingsRecipe, topBarLevels, topBarRecipe, topBarRuleRecipe, topBarTitleRecipe };
+export { type TopBarLevel, defaultTopBarLevel, topBarActionsRecipe, topBarAnatomy, topBarContentRecipe, topBarEdgeRecipe, topBarEyebrowRecipe, topBarHeadingsRecipe, topBarLevels, topBarRecipe, topBarRuleRecipe, topBarTitleRecipe };
 //# sourceMappingURL=topBar.d.ts.map

package/dist/recipes/topBar.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { ruleFading } from "../parts/rule.js";
 import { eyebrowLead } from "../parts/eyebrow.js";
 import { cva } from "class-variance-authority";
@@ -29,7 +30,49 @@ const topBarLevels = [
 	"h6"
 ];
 const defaultTopBarLevel = "h1";
+const topBarAnatomy = anatomy({
+	actions: {
+		part: "actions",
+		recipe: topBarActionsRecipe,
+		required: false
+	},
+	content: {
+		part: "content",
+		recipe: topBarContentRecipe,
+		required: true
+	},
+	edge: {
+		part: "edge",
+		recipe: topBarEdgeRecipe,
+		required: true
+	},
+	eyebrow: {
+		part: "eyebrow",
+		recipe: topBarEyebrowRecipe,
+		required: false
+	},
+	headings: {
+		part: "headings",
+		recipe: topBarHeadingsRecipe,
+		required: true
+	},
+	root: {
+		part: "top-bar",
+		recipe: topBarRecipe,
+		required: true
+	},
+	rule: {
+		part: "rule",
+		recipe: topBarRuleRecipe,
+		required: true
+	},
+	title: {
+		part: "title",
+		recipe: topBarTitleRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultTopBarLevel, topBarActionsRecipe, topBarContentRecipe, topBarEdgeRecipe, topBarEyebrowRecipe, topBarHeadingsRecipe, topBarLevels, topBarRecipe, topBarRuleRecipe, topBarTitleRecipe };
+export { defaultTopBarLevel, topBarActionsRecipe, topBarAnatomy, topBarContentRecipe, topBarEdgeRecipe, topBarEyebrowRecipe, topBarHeadingsRecipe, topBarLevels, topBarRecipe, topBarRuleRecipe, topBarTitleRecipe };
 
 //# sourceMappingURL=topBar.js.map

package/dist/recipes/topBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"topBar.js","names":[],"sources":["../../src/recipes/topBar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { eyebrowLead } from '#parts/eyebrow'\nimport { ruleFading } from '#parts/rule'\n\nconst topBarRecipe = cva([\n  'sticky top-0 isolate z-tf-raised w-full',\n  'bg-tf-panel-2 backdrop-blur-tf-panel',\n  'tf-icons font-tf-body text-tf-fg',\n  'tf-transition motion-reduce:transition-none',\n  'data-lifted:shadow-tf-float',\n])\n\nconst topBarContentRecipe = cva([\n  'mx-auto flex w-full max-w-tf-canvas flex-wrap items-center gap-4 px-6 py-4 sm:px-12',\n  'min-h-[calc(var(--spacing-tf-control-lg)+var(--spacing)*8)]',\n])\n\nconst topBarEdgeRecipe = cva('-mb-px block h-px w-full')\n\nconst topBarRuleRecipe = cva([\n  `absolute inset-x-0 bottom-0 ${ruleFading}`,\n  'opacity-0 tf-transition motion-reduce:transition-none',\n  'in-data-lifted:opacity-100',\n])\n\nconst topBarHeadingsRecipe = cva('flex min-w-0 flex-1 flex-col gap-1')\n\nconst topBarEyebrowRecipe = cva(eyebrowLead)\n\nconst topBarTitleRecipe = cva(\n  'truncate font-tf-display text-tf-h3 font-bold tracking-tf-tight text-tf-fg',\n)\n\nconst topBarActionsRecipe = cva('flex flex-wrap items-center gap-4')\n\nconst topBarLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\ntype TopBarLevel = (typeof topBarLevels)[number]\n\nconst defaultTopBarLevel = 'h1' satisfies TopBarLevel\n\nexport {\n  type TopBarLevel,\n  defaultTopBarLevel,\n  topBarLevels,\n  topBarRuleRecipe,\n  topBarActionsRecipe,\n  topBarContentRecipe,\n  topBarEdgeRecipe,\n  topBarEyebrowRecipe,\n  topBarHeadingsRecipe,\n  topBarRecipe,\n  topBarTitleRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,eAAe,IAAI;CACvB;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAC9B,uFACA,6DACF,CAAC;AAED,MAAM,mBAAmB,IAAI,0BAA0B;AAEvD,MAAM,mBAAmB,IAAI;CAC3B,+BAA+B;CAC/B;CACA;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,oCAAoC;AAErE,MAAM,sBAAsB,IAAI,WAAW;AAE3C,MAAM,oBAAoB,IACxB,4EACF;AAEA,MAAM,sBAAsB,IAAI,mCAAmC;AAEnE,MAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI;AAIxD,MAAM,qBAAqB"}
+{"version":3,"file":"topBar.js","names":[],"sources":["../../src/recipes/topBar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { eyebrowLead } from '#parts/eyebrow'\nimport { ruleFading } from '#parts/rule'\n\nconst topBarRecipe = cva([\n  'sticky top-0 isolate z-tf-raised w-full',\n  'bg-tf-panel-2 backdrop-blur-tf-panel',\n  'tf-icons font-tf-body text-tf-fg',\n  'tf-transition motion-reduce:transition-none',\n  'data-lifted:shadow-tf-float',\n])\n\nconst topBarContentRecipe = cva([\n  'mx-auto flex w-full max-w-tf-canvas flex-wrap items-center gap-4 px-6 py-4 sm:px-12',\n  'min-h-[calc(var(--spacing-tf-control-lg)+var(--spacing)*8)]',\n])\n\nconst topBarEdgeRecipe = cva('-mb-px block h-px w-full')\n\nconst topBarRuleRecipe = cva([\n  `absolute inset-x-0 bottom-0 ${ruleFading}`,\n  'opacity-0 tf-transition motion-reduce:transition-none',\n  'in-data-lifted:opacity-100',\n])\n\nconst topBarHeadingsRecipe = cva('flex min-w-0 flex-1 flex-col gap-1')\n\nconst topBarEyebrowRecipe = cva(eyebrowLead)\n\nconst topBarTitleRecipe = cva(\n  'truncate font-tf-display text-tf-h3 font-bold tracking-tf-tight text-tf-fg',\n)\n\nconst topBarActionsRecipe = cva('flex flex-wrap items-center gap-4')\n\nconst topBarLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\ntype TopBarLevel = (typeof topBarLevels)[number]\n\nconst defaultTopBarLevel = 'h1' satisfies TopBarLevel\n\nconst topBarAnatomy = anatomy({\n  actions: { part: 'actions', recipe: topBarActionsRecipe, required: false },\n  content: { part: 'content', recipe: topBarContentRecipe, required: true },\n  edge: { part: 'edge', recipe: topBarEdgeRecipe, required: true },\n  eyebrow: { part: 'eyebrow', recipe: topBarEyebrowRecipe, required: false },\n  headings: { part: 'headings', recipe: topBarHeadingsRecipe, required: true },\n  root: { part: 'top-bar', recipe: topBarRecipe, required: true },\n  rule: { part: 'rule', recipe: topBarRuleRecipe, required: true },\n  title: { part: 'title', recipe: topBarTitleRecipe, required: true },\n})\n\nexport {\n  type TopBarLevel,\n  defaultTopBarLevel,\n  topBarAnatomy,\n  topBarLevels,\n  topBarRuleRecipe,\n  topBarActionsRecipe,\n  topBarContentRecipe,\n  topBarEdgeRecipe,\n  topBarEyebrowRecipe,\n  topBarHeadingsRecipe,\n  topBarRecipe,\n  topBarTitleRecipe,\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe,IAAI;CACvB;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAC9B,uFACA,6DACF,CAAC;AAED,MAAM,mBAAmB,IAAI,0BAA0B;AAEvD,MAAM,mBAAmB,IAAI;CAC3B,+BAA+B;CAC/B;CACA;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,oCAAoC;AAErE,MAAM,sBAAsB,IAAI,WAAW;AAE3C,MAAM,oBAAoB,IACxB,4EACF;AAEA,MAAM,sBAAsB,IAAI,mCAAmC;AAEnE,MAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI;AAIxD,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB,QAAQ;CAC5B,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAqB,UAAU;CAAM;CACzE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAqB,UAAU;CAAK;CACxE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAqB,UAAU;CAAM;CACzE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAsB,UAAU;CAAK;CAC3E,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAc,UAAU;CAAK;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAmB,UAAU;CAAK;AACpE,CAAC"}

package/dist/recipes/trail.d.ts

@@ -1,7 +1,6 @@
 //#region src/recipes/trail.d.ts
 declare const trailStates: readonly ["done", "failed", "current", "pending"];
 type TrailState = (typeof trailStates)[number];
-declare const defaultTrailState = "pending";
 declare const trailFlows: readonly ["row", "column"];
 type TrailFlow = (typeof trailFlows)[number];
 declare const defaultTrailFlow = "row";
@@ -11,17 +10,68 @@ declare const trailRecipe: (props?: ({
 declare const trailStepRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const trailCaptionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const trailBadgeRecipe: (props?: ({
-  state?: "current" | "done" | "failed" | "pending" | null | undefined;
+  state?: "pending" | "done" | "failed" | "current" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const trailSpinRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const trailConnectorRecipe: (props?: ({
   flow?: "row" | "column" | null | undefined;
-  state?: "current" | "done" | "failed" | "pending" | null | undefined;
+  state?: "pending" | "done" | "failed" | "current" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const trailLabelRecipe: (props?: ({
-  state?: "current" | "done" | "failed" | "pending" | null | undefined;
+  state?: "pending" | "done" | "failed" | "current" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const trailHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const trailAnatomy: {
+  readonly badge: {
+    readonly part: "badge";
+    readonly recipe: (props?: ({
+      state?: "pending" | "done" | "failed" | "current" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly caption: {
+    readonly part: "caption";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly connector: {
+    readonly part: "connector";
+    readonly recipe: (props?: ({
+      flow?: "row" | "column" | null | undefined;
+      state?: "pending" | "done" | "failed" | "current" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly hint: {
+    readonly part: "hint";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly label: {
+    readonly part: "label";
+    readonly recipe: (props?: ({
+      state?: "pending" | "done" | "failed" | "current" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly meta: {
+    readonly part: "meta";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "trail";
+    readonly recipe: (props?: ({
+      flow?: "row" | "column" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly step: {
+    readonly part: "step";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { type TrailFlow, type TrailState, defaultTrailFlow, defaultTrailState, trailBadgeRecipe, trailCaptionRecipe, trailConnectorRecipe, trailFlows, trailHintRecipe, trailLabelRecipe, trailRecipe, trailSpinRecipe, trailStates, trailStepRecipe };
+export { type TrailFlow, type TrailState, defaultTrailFlow, trailAnatomy, trailBadgeRecipe, trailCaptionRecipe, trailConnectorRecipe, trailFlows, trailHintRecipe, trailLabelRecipe, trailRecipe, trailSpinRecipe, trailStates, trailStepRecipe };
 //# sourceMappingURL=trail.d.ts.map

package/dist/recipes/trail.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/trail.ts
 const trailStates = [
@@ -6,7 +7,6 @@ const trailStates = [
 	"current",
 	"pending"
 ];
-const defaultTrailState = "pending";
 const trailFlows = ["row", "column"];
 const defaultTrailFlow = "row";
 const trailRecipe = cva("rounded-tf-block bg-tf-sunken p-6 font-tf-body", {
@@ -23,7 +23,7 @@ const trailBadgeRecipe = cva([
 	"tf-icons",
 	"[&_svg]:size-tf-icon-2xs [&_svg]:shrink-0"
 ], {
-	defaultVariants: { state: defaultTrailState },
+	defaultVariants: { state: "pending" },
 	variants: { state: {
 		current: "bg-tf-blend text-tf-on-accent blend-tf-accent",
 		done: "bg-tf-blend text-tf-on-semantic blend-tf-success",
@@ -35,7 +35,7 @@ const trailSpinRecipe = cva("[&_svg]:animate-spin motion-reduce:[&_svg]:animate-
 const trailConnectorRecipe = cva("", {
 	defaultVariants: {
 		flow: "row",
-		state: defaultTrailState
+		state: "pending"
 	},
 	variants: {
 		flow: {
@@ -51,7 +51,7 @@ const trailConnectorRecipe = cva("", {
 	}
 });
 const trailLabelRecipe = cva("text-tf-caption font-medium", {
-	defaultVariants: { state: defaultTrailState },
+	defaultVariants: { state: "pending" },
 	variants: { state: {
 		current: "text-tf-accent-hi",
 		done: "text-tf-fg",
@@ -60,7 +60,49 @@ const trailLabelRecipe = cva("text-tf-caption font-medium", {
 	} }
 });
 const trailHintRecipe = cva("text-tf-caption-sm text-tf-muted");
+const trailAnatomy = anatomy({
+	badge: {
+		part: "badge",
+		recipe: trailBadgeRecipe,
+		required: true
+	},
+	caption: {
+		part: "caption",
+		recipe: trailCaptionRecipe,
+		required: true
+	},
+	connector: {
+		part: "connector",
+		recipe: trailConnectorRecipe,
+		required: false
+	},
+	hint: {
+		part: "hint",
+		recipe: trailHintRecipe,
+		required: false
+	},
+	label: {
+		part: "label",
+		recipe: trailLabelRecipe,
+		required: true
+	},
+	meta: {
+		part: "meta",
+		recipe: trailHintRecipe,
+		required: false
+	},
+	root: {
+		part: "trail",
+		recipe: trailRecipe,
+		required: true
+	},
+	step: {
+		part: "step",
+		recipe: trailStepRecipe,
+		required: false
+	}
+});
 //#endregion
-export { defaultTrailFlow, defaultTrailState, trailBadgeRecipe, trailCaptionRecipe, trailConnectorRecipe, trailFlows, trailHintRecipe, trailLabelRecipe, trailRecipe, trailSpinRecipe, trailStates, trailStepRecipe };
+export { defaultTrailFlow, trailAnatomy, trailBadgeRecipe, trailCaptionRecipe, trailConnectorRecipe, trailFlows, trailHintRecipe, trailLabelRecipe, trailRecipe, trailSpinRecipe, trailStates, trailStepRecipe };
 
 //# sourceMappingURL=trail.js.map

package/dist/recipes/trail.js.map

@@ -1 +1 @@
-{"version":3,"file":"trail.js","names":[],"sources":["../../src/recipes/trail.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst trailStates = ['done', 'failed', 'current', 'pending'] as const\n\ntype TrailState = (typeof trailStates)[number]\n\nconst defaultTrailState = 'pending' satisfies TrailState\n\nconst trailFlows = ['row', 'column'] as const\n\ntype TrailFlow = (typeof trailFlows)[number]\n\nconst defaultTrailFlow = 'row' satisfies TrailFlow\n\nconst trailRecipe = cva('rounded-tf-block bg-tf-sunken p-6 font-tf-body', {\n  defaultVariants: { flow: defaultTrailFlow },\n  variants: {\n    flow: {\n      column: 'grid grid-cols-1 gap-3',\n      row: 'grid gap-y-2',\n    } satisfies Record<TrailFlow, string>,\n  },\n})\n\nconst trailStepRecipe = cva('relative flex flex-row items-start gap-2')\n\nconst trailCaptionRecipe = cva(\n  '[grid-column:span_2] flex min-w-0 flex-1 flex-col gap-0 pr-3 last:[grid-column:span_1] last:pr-0',\n)\n\nconst trailBadgeRecipe = cva(\n  [\n    'relative isolate flex size-6.5 flex-none items-center justify-center rounded-tf-pill',\n    'tf-icons',\n    '[&_svg]:size-tf-icon-2xs [&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: { state: defaultTrailState },\n    variants: {\n      state: {\n        current: 'bg-tf-blend text-tf-on-accent blend-tf-accent',\n        done: 'bg-tf-blend text-tf-on-semantic blend-tf-success',\n        failed: 'bg-tf-blend text-tf-on-semantic blend-tf-danger',\n        pending: 'bg-tf-panel text-tf-muted opacity-55',\n      } satisfies Record<TrailState, string>,\n    },\n  },\n)\n\nconst trailSpinRecipe = cva('[&_svg]:animate-spin motion-reduce:[&_svg]:animate-none')\n\nconst trailConnectorRecipe = cva('', {\n  defaultVariants: { flow: defaultTrailFlow, state: defaultTrailState },\n  variants: {\n    flow: {\n      column: 'absolute top-6.5 -bottom-3 left-[calc(1.625rem/2-1px)] w-0.5',\n      row: 'mx-1 mt-[calc(1.625rem/2)] h-0.5 min-w-6',\n    } satisfies Record<TrailFlow, string>,\n    state: {\n      current: 'bg-tf-line',\n      done: 'bg-tf-success-hi',\n      failed: 'bg-tf-danger-hi',\n      pending: 'bg-tf-line',\n    } satisfies Record<TrailState, string>,\n  },\n})\n\nconst trailLabelRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { state: defaultTrailState },\n  variants: {\n    state: {\n      current: 'text-tf-accent-hi',\n      done: 'text-tf-fg',\n      failed: 'text-tf-danger-hi',\n      pending: 'text-tf-muted',\n    } satisfies Record<TrailState, string>,\n  },\n})\n\nconst trailHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nexport {\n  type TrailFlow,\n  type TrailState,\n  defaultTrailFlow,\n  defaultTrailState,\n  trailBadgeRecipe,\n  trailCaptionRecipe,\n  trailConnectorRecipe,\n  trailFlows,\n  trailHintRecipe,\n  trailLabelRecipe,\n  trailRecipe,\n  trailSpinRecipe,\n  trailStates,\n  trailStepRecipe,\n}\n"],"mappings":";;AAEA,MAAM,cAAc;CAAC;CAAQ;CAAU;CAAW;AAAS;AAI3D,MAAM,oBAAoB;AAE1B,MAAM,aAAa,CAAC,OAAO,QAAQ;AAInC,MAAM,mBAAmB;AAEzB,MAAM,cAAc,IAAI,kDAAkD;CACxE,iBAAiB,EAAE,MAAA,MAAuB;CAC1C,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,KAAK;CACP,EACF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,0CAA0C;AAEtE,MAAM,qBAAqB,IACzB,kGACF;AAEA,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;CACX,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,yDAAyD;AAErF,MAAM,uBAAuB,IAAI,IAAI;CACnC,iBAAiB;EAAE,MAAA;EAAwB,OAAO;CAAkB;CACpE,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,KAAK;EACP;EACA,OAAO;GACL,SAAS;GACT,MAAM;GACN,QAAQ;GACR,SAAS;EACX;CACF;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,+BAA+B;CAC1D,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,kCAAkC"}
+{"version":3,"file":"trail.js","names":[],"sources":["../../src/recipes/trail.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst trailStates = ['done', 'failed', 'current', 'pending'] as const\n\ntype TrailState = (typeof trailStates)[number]\n\nconst trailFlows = ['row', 'column'] as const\n\ntype TrailFlow = (typeof trailFlows)[number]\n\nconst defaultTrailFlow = 'row' satisfies TrailFlow\n\nconst trailRecipe = cva('rounded-tf-block bg-tf-sunken p-6 font-tf-body', {\n  defaultVariants: { flow: defaultTrailFlow },\n  variants: {\n    flow: {\n      column: 'grid grid-cols-1 gap-3',\n      row: 'grid gap-y-2',\n    } satisfies Record<TrailFlow, string>,\n  },\n})\n\nconst trailStepRecipe = cva('relative flex flex-row items-start gap-2')\n\nconst trailCaptionRecipe = cva(\n  '[grid-column:span_2] flex min-w-0 flex-1 flex-col gap-0 pr-3 last:[grid-column:span_1] last:pr-0',\n)\n\nconst trailBadgeRecipe = cva(\n  [\n    'relative isolate flex size-6.5 flex-none items-center justify-center rounded-tf-pill',\n    'tf-icons',\n    '[&_svg]:size-tf-icon-2xs [&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: { state: 'pending' },\n    variants: {\n      state: {\n        current: 'bg-tf-blend text-tf-on-accent blend-tf-accent',\n        done: 'bg-tf-blend text-tf-on-semantic blend-tf-success',\n        failed: 'bg-tf-blend text-tf-on-semantic blend-tf-danger',\n        pending: 'bg-tf-panel text-tf-muted opacity-55',\n      } satisfies Record<TrailState, string>,\n    },\n  },\n)\n\nconst trailSpinRecipe = cva('[&_svg]:animate-spin motion-reduce:[&_svg]:animate-none')\n\nconst trailConnectorRecipe = cva('', {\n  defaultVariants: { flow: defaultTrailFlow, state: 'pending' },\n  variants: {\n    flow: {\n      column: 'absolute top-6.5 -bottom-3 left-[calc(1.625rem/2-1px)] w-0.5',\n      row: 'mx-1 mt-[calc(1.625rem/2)] h-0.5 min-w-6',\n    } satisfies Record<TrailFlow, string>,\n    state: {\n      current: 'bg-tf-line',\n      done: 'bg-tf-success-hi',\n      failed: 'bg-tf-danger-hi',\n      pending: 'bg-tf-line',\n    } satisfies Record<TrailState, string>,\n  },\n})\n\nconst trailLabelRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { state: 'pending' },\n  variants: {\n    state: {\n      current: 'text-tf-accent-hi',\n      done: 'text-tf-fg',\n      failed: 'text-tf-danger-hi',\n      pending: 'text-tf-muted',\n    } satisfies Record<TrailState, string>,\n  },\n})\n\nconst trailHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst trailAnatomy = anatomy({\n  badge: { part: 'badge', recipe: trailBadgeRecipe, required: true },\n  caption: { part: 'caption', recipe: trailCaptionRecipe, required: true },\n  connector: { part: 'connector', recipe: trailConnectorRecipe, required: false },\n  hint: { part: 'hint', recipe: trailHintRecipe, required: false },\n  label: { part: 'label', recipe: trailLabelRecipe, required: true },\n  meta: { part: 'meta', recipe: trailHintRecipe, required: false },\n  root: { part: 'trail', recipe: trailRecipe, required: true },\n  step: { part: 'step', recipe: trailStepRecipe, required: false },\n})\n\nexport {\n  type TrailFlow,\n  type TrailState,\n  defaultTrailFlow,\n  trailAnatomy,\n  trailBadgeRecipe,\n  trailCaptionRecipe,\n  trailConnectorRecipe,\n  trailFlows,\n  trailHintRecipe,\n  trailLabelRecipe,\n  trailRecipe,\n  trailSpinRecipe,\n  trailStates,\n  trailStepRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,cAAc;CAAC;CAAQ;CAAU;CAAW;AAAS;AAI3D,MAAM,aAAa,CAAC,OAAO,QAAQ;AAInC,MAAM,mBAAmB;AAEzB,MAAM,cAAc,IAAI,kDAAkD;CACxE,iBAAiB,EAAE,MAAA,MAAuB;CAC1C,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,KAAK;CACP,EACF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,0CAA0C;AAEtE,MAAM,qBAAqB,IACzB,kGACF;AAEA,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,OAAO,UAAU;CACpC,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;CACX,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,yDAAyD;AAErF,MAAM,uBAAuB,IAAI,IAAI;CACnC,iBAAiB;EAAE,MAAA;EAAwB,OAAO;CAAU;CAC5D,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,KAAK;EACP;EACA,OAAO;GACL,SAAS;GACT,MAAM;GACN,QAAQ;GACR,SAAS;EACX;CACF;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,+BAA+B;CAC1D,iBAAiB,EAAE,OAAO,UAAU;CACpC,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,kCAAkC;AAE9D,MAAM,eAAe,QAAQ;CAC3B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAkB,UAAU;CAAK;CACjE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAoB,UAAU;CAAK;CACvE,WAAW;EAAE,MAAM;EAAa,QAAQ;EAAsB,UAAU;CAAM;CAC9E,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;CAC/D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAkB,UAAU;CAAK;CACjE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;CAC/D,MAAM;EAAE,MAAM;EAAS,QAAQ;EAAa,UAAU;CAAK;CAC3D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;AACjE,CAAC"}

package/dist/recipes/userMenu.d.ts

@@ -6,6 +6,28 @@ declare const userIdentityRecipe: (props?: import("class-variance-authority/type
 declare const userNameRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const userRoleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const userChevronRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const userMenuAnatomy: {
+  readonly identity: {
+    readonly part: "identity";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly name: {
+    readonly part: "name";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "account";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly subtitle: {
+    readonly part: "subtitle";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { userAvatarRecipe, userChevronRecipe, userIdentityRecipe, userNameRecipe, userPortraitRecipe, userRoleRecipe, userTriggerRecipe };
+export { userAvatarRecipe, userChevronRecipe, userIdentityRecipe, userMenuAnatomy, userNameRecipe, userPortraitRecipe, userRoleRecipe, userTriggerRecipe };
 //# sourceMappingURL=userMenu.d.ts.map

package/dist/recipes/userMenu.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress } from "../parts/control.js";
 import { railCollapse, railMorph } from "./motion.js";
 import { cva } from "class-variance-authority";
@@ -32,7 +33,29 @@ const userChevronRecipe = cva([
 	"[--tf-travel:opacity_var(--tf-timing-glide)]",
 	railMorph
 ]);
+const userMenuAnatomy = anatomy({
+	identity: {
+		part: "identity",
+		recipe: userIdentityRecipe,
+		required: true
+	},
+	name: {
+		part: "name",
+		recipe: userNameRecipe,
+		required: true
+	},
+	root: {
+		part: "account",
+		recipe: userTriggerRecipe,
+		required: true
+	},
+	subtitle: {
+		part: "subtitle",
+		recipe: userRoleRecipe,
+		required: false
+	}
+});
 //#endregion
-export { userAvatarRecipe, userChevronRecipe, userIdentityRecipe, userNameRecipe, userPortraitRecipe, userRoleRecipe, userTriggerRecipe };
+export { userAvatarRecipe, userChevronRecipe, userIdentityRecipe, userMenuAnatomy, userNameRecipe, userPortraitRecipe, userRoleRecipe, userTriggerRecipe };
 
 //# sourceMappingURL=userMenu.js.map

package/dist/recipes/userMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"userMenu.js","names":[],"sources":["../../src/recipes/userMenu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress } from '#parts/control'\n\nimport { railCollapse, railMorph } from './motion'\n\nconst userTriggerRecipe = cva([\n  'flex w-full items-center justify-center gap-3 rounded-tf-control p-3 text-left',\n  'text-tf-fg data-rail:gap-0 data-rail:py-2',\n  'data-rail:px-2',\n  'interactive:hovered:bg-tf-panel',\n  'hovered:**:data-[scope=avatar]:tf-edge-lit',\n  'focused:**:data-[scope=avatar]:tf-edge-lit',\n  'outline-hidden',\n  'focused:outline-2 focused:outline-offset-2 focused:outline-tf-accent-hi focused:outline-solid',\n  `cursor-pointer ${railMorph}`,\n  '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlPress,\n  ...controlInert,\n])\n\nconst userAvatarRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center',\n  'rounded-tf-pill bg-tf-panel-hi text-tf-caption font-medium text-tf-fg',\n  'tf-edge-sweep tf-swept blend-tf-accent',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst userPortraitRecipe = cva('size-full rounded-tf-pill object-cover')\n\nconst userIdentityRecipe = cva(`flex flex-col gap-0 ${railCollapse}`)\n\nconst userNameRecipe = cva('truncate text-tf-body-sm font-medium')\n\nconst userRoleRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst userChevronRecipe = cva([\n  'flex-none text-tf-muted',\n  'in-data-rail:size-0! in-data-rail:opacity-0',\n  '[--tf-travel:opacity_var(--tf-timing-glide)]',\n  railMorph,\n])\n\nexport {\n  userAvatarRecipe,\n  userPortraitRecipe,\n  userChevronRecipe,\n  userIdentityRecipe,\n  userNameRecipe,\n  userRoleRecipe,\n  userTriggerRecipe,\n}\n"],"mappings":";;;;AAMA,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,kBAAkB;CAClB;CACA,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,wCAAwC;AAEvE,MAAM,qBAAqB,IAAI,uBAAuB,cAAc;AAEpE,MAAM,iBAAiB,IAAI,sCAAsC;AAEjE,MAAM,iBAAiB,IAAI,2CAA2C;AAEtE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"userMenu.js","names":[],"sources":["../../src/recipes/userMenu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress } from '#parts/control'\n\nimport { railCollapse, railMorph } from './motion'\n\nconst userTriggerRecipe = cva([\n  'flex w-full items-center justify-center gap-3 rounded-tf-control p-3 text-left',\n  'text-tf-fg data-rail:gap-0 data-rail:py-2',\n  'data-rail:px-2',\n  'interactive:hovered:bg-tf-panel',\n  'hovered:**:data-[scope=avatar]:tf-edge-lit',\n  'focused:**:data-[scope=avatar]:tf-edge-lit',\n  'outline-hidden',\n  'focused:outline-2 focused:outline-offset-2 focused:outline-tf-accent-hi focused:outline-solid',\n  `cursor-pointer ${railMorph}`,\n  '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlPress,\n  ...controlInert,\n])\n\nconst userAvatarRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center',\n  'rounded-tf-pill bg-tf-panel-hi text-tf-caption font-medium text-tf-fg',\n  'tf-edge-sweep tf-swept blend-tf-accent',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst userPortraitRecipe = cva('size-full rounded-tf-pill object-cover')\n\nconst userIdentityRecipe = cva(`flex flex-col gap-0 ${railCollapse}`)\n\nconst userNameRecipe = cva('truncate text-tf-body-sm font-medium')\n\nconst userRoleRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst userChevronRecipe = cva([\n  'flex-none text-tf-muted',\n  'in-data-rail:size-0! in-data-rail:opacity-0',\n  '[--tf-travel:opacity_var(--tf-timing-glide)]',\n  railMorph,\n])\n\nconst userMenuAnatomy = anatomy({\n  identity: { part: 'identity', recipe: userIdentityRecipe, required: true },\n  name: { part: 'name', recipe: userNameRecipe, required: true },\n  root: { part: 'account', recipe: userTriggerRecipe, required: true },\n  subtitle: { part: 'subtitle', recipe: userRoleRecipe, required: false },\n})\n\nexport {\n  userAvatarRecipe,\n  userMenuAnatomy,\n  userPortraitRecipe,\n  userChevronRecipe,\n  userIdentityRecipe,\n  userNameRecipe,\n  userRoleRecipe,\n  userTriggerRecipe,\n}\n"],"mappings":";;;;;AAOA,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,kBAAkB;CAClB;CACA,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,wCAAwC;AAEvE,MAAM,qBAAqB,IAAI,uBAAuB,cAAc;AAEpE,MAAM,iBAAiB,IAAI,sCAAsC;AAEjE,MAAM,iBAAiB,IAAI,2CAA2C;AAEtE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB,QAAQ;CAC9B,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAoB,UAAU;CAAK;CACzE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAmB,UAAU;CAAK;CACnE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAM;AACxE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techfides/ui-library-design",
-  "version": "0.5.0",
+  "version": "0.8.0",
   "description": "Framework-agnostic design core for the TechFides UI library: Tailwind design tokens and component variant recipes",
   "keywords": [
     "cva",
@@ -55,8 +55,9 @@
     "node": ">=24"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "node scripts/generate-cn.ts && tsdown",
     "dev": "tsdown --watch",
+    "generate": "node scripts/generate-cn.ts",
     "lint": "eslint . --max-warnings=0",
     "typecheck": "tsc --noEmit"
   },