@techfides/ui-library-design 0.5.0 → 0.8.0

package/dist/recipes/listbox.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert } from "../parts/control.js";
 import { travelMarkBase } from "../parts/travel.js";
 import { cva } from "class-variance-authority";
@@ -23,7 +24,24 @@ const listboxMarkRecipe = cva([...travelMarkBase, "inset-x-0 h-(--tf-travel-heig
 	} }
 });
 const listboxEmptyRecipe = cva(["flex h-tf-control-lg flex-none items-center justify-center px-4", "text-tf-caption font-medium text-tf-muted"]);
+const listboxAnatomy = anatomy({
+	held: {
+		part: "held",
+		recipe: listboxMarkRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: listboxMarkRecipe,
+		required: true
+	},
+	root: {
+		part: "listbox",
+		recipe: listboxRecipe,
+		required: true
+	}
+});
 //#endregion
-export { listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
+export { listboxAnatomy, listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
 
 //# sourceMappingURL=listbox.js.map

package/dist/recipes/listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.js","names":[],"sources":["../../src/recipes/listbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert } from '#parts/control'\nimport { travelMarkBase } from '#parts/travel'\n\ntype ListboxMark = 'lit' | 'chosen'\n\nconst RAIL = [\n  'before:absolute before:inset-y-3 before:left-0 before:w-0.5',\n  'before:rounded-tf-pill before:bg-tf-accent-hi',\n  \"before:content-['']\",\n].join(' ')\n\nconst listboxRecipe = cva([\n  'relative isolate flex min-w-0 flex-col gap-1',\n  'font-tf-body outline-hidden',\n])\n\nconst listboxLabelRecipe = cva('sr-only')\n\nconst listboxItemRecipe = cva([\n  'relative rounded-tf-control px-4 py-3',\n  'cursor-pointer select-none tf-transition motion-reduce:transition-none',\n  'data-selected:text-tf-fg',\n  ...controlInert,\n])\n\nconst listboxMarkRecipe = cva([...travelMarkBase, 'inset-x-0 h-(--tf-travel-height) tf-rails'], {\n  defaultVariants: { mark: 'lit' },\n  variants: {\n    mark: {\n      chosen: `rounded-tf-control bg-tf-accent-tint ${RAIL}`,\n      lit: 'rounded-tf-control bg-tf-panel-hi',\n    } satisfies Record<ListboxMark, string>,\n  },\n})\n\nconst listboxEmptyRecipe = cva([\n  'flex h-tf-control-lg flex-none items-center justify-center px-4',\n  'text-tf-caption font-medium text-tf-muted',\n])\n\nexport {\n  type ListboxMark,\n  listboxEmptyRecipe,\n  listboxItemRecipe,\n  listboxLabelRecipe,\n  listboxMarkRecipe,\n  listboxRecipe,\n}\n"],"mappings":";;;;AAOA,MAAM,OAAO;CACX;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB,IAAI,CACxB,gDACA,6BACF,CAAC;AAED,MAAM,qBAAqB,IAAI,SAAS;AAExC,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,CAAC,GAAG,gBAAgB,2CAA2C,GAAG;CAC9F,iBAAiB,EAAE,MAAM,MAAM;CAC/B,UAAU,EACR,MAAM;EACJ,QAAQ,wCAAwC;EAChD,KAAK;CACP,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAC7B,mEACA,2CACF,CAAC"}
+{"version":3,"file":"listbox.js","names":[],"sources":["../../src/recipes/listbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert } from '#parts/control'\nimport { travelMarkBase } from '#parts/travel'\n\ntype ListboxMark = 'lit' | 'chosen'\n\nconst RAIL = [\n  'before:absolute before:inset-y-3 before:left-0 before:w-0.5',\n  'before:rounded-tf-pill before:bg-tf-accent-hi',\n  \"before:content-['']\",\n].join(' ')\n\nconst listboxRecipe = cva([\n  'relative isolate flex min-w-0 flex-col gap-1',\n  'font-tf-body outline-hidden',\n])\n\nconst listboxLabelRecipe = cva('sr-only')\n\nconst listboxItemRecipe = cva([\n  'relative rounded-tf-control px-4 py-3',\n  'cursor-pointer select-none tf-transition motion-reduce:transition-none',\n  'data-selected:text-tf-fg',\n  ...controlInert,\n])\n\nconst listboxMarkRecipe = cva([...travelMarkBase, 'inset-x-0 h-(--tf-travel-height) tf-rails'], {\n  defaultVariants: { mark: 'lit' },\n  variants: {\n    mark: {\n      chosen: `rounded-tf-control bg-tf-accent-tint ${RAIL}`,\n      lit: 'rounded-tf-control bg-tf-panel-hi',\n    } satisfies Record<ListboxMark, string>,\n  },\n})\n\nconst listboxEmptyRecipe = cva([\n  'flex h-tf-control-lg flex-none items-center justify-center px-4',\n  'text-tf-caption font-medium text-tf-muted',\n])\n\nconst listboxAnatomy = anatomy({\n  held: { part: 'held', recipe: listboxMarkRecipe, required: true },\n  mark: { part: 'mark', recipe: listboxMarkRecipe, required: true },\n  root: { part: 'listbox', recipe: listboxRecipe, required: true },\n})\n\nexport {\n  listboxAnatomy,\n  listboxEmptyRecipe,\n  listboxItemRecipe,\n  listboxLabelRecipe,\n  listboxMarkRecipe,\n  listboxRecipe,\n}\n"],"mappings":";;;;;AAQA,MAAM,OAAO;CACX;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB,IAAI,CACxB,gDACA,6BACF,CAAC;AAED,MAAM,qBAAqB,IAAI,SAAS;AAExC,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,CAAC,GAAG,gBAAgB,2CAA2C,GAAG;CAC9F,iBAAiB,EAAE,MAAM,MAAM;CAC/B,UAAU,EACR,MAAM;EACJ,QAAQ,wCAAwC;EAChD,KAAK;CACP,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAC7B,mEACA,2CACF,CAAC;AAED,MAAM,iBAAiB,QAAQ;CAC7B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;AACjE,CAAC"}

package/dist/recipes/marquee.d.ts

@@ -5,7 +5,7 @@ interface MarqueeItem {
 }
 declare const marqueeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const marqueeRuleRecipe: (props?: ({
-  edge?: "head" | "foot" | null | undefined;
+  edge?: "foot" | "head" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const marqueeStageRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const marqueeViewportRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
@@ -14,6 +14,30 @@ declare const marqueeItemRecipe: (props?: import("class-variance-authority/types
 declare const marqueeMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const marqueeNameRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const marqueeSpacing = "3rem";
+declare const marqueeAnatomy: {
+  readonly mark: {
+    readonly part: "mark";
+    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: "marquee";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly rule: {
+    readonly part: "rule";
+    readonly recipe: (props?: ({
+      edge?: "foot" | "head" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type MarqueeItem, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
+export { type MarqueeItem, marqueeAnatomy, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
 //# sourceMappingURL=marquee.d.ts.map

package/dist/recipes/marquee.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { ruleFading } from "../parts/rule.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/marquee.ts
@@ -30,7 +31,29 @@ const marqueeItemRecipe = cva([
 const marqueeMarkRecipe = cva("block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat");
 const marqueeNameRecipe = cva("font-tf-display text-tf-h4 font-bold whitespace-nowrap");
 const marqueeSpacing = "3rem";
+const marqueeAnatomy = anatomy({
+	mark: {
+		part: "mark",
+		recipe: marqueeMarkRecipe,
+		required: true
+	},
+	name: {
+		part: "name",
+		recipe: marqueeNameRecipe,
+		required: true
+	},
+	root: {
+		part: "marquee",
+		recipe: marqueeRecipe,
+		required: true
+	},
+	rule: {
+		part: "rule",
+		recipe: marqueeRuleRecipe,
+		required: true
+	}
+});
 //#endregion
-export { marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
+export { marqueeAnatomy, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
 
 //# sourceMappingURL=marquee.js.map

package/dist/recipes/marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.js","names":[],"sources":["../../src/recipes/marquee.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\n\ninterface MarqueeItem {\n  name: string\n  src: string\n}\n\nconst WRAPS = 'motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center'\n\nconst marqueeRecipe = cva([\n  'relative isolate py-8',\n  'font-tf-body',\n  'tf-slows hovered:[--tf-marquee-rate:0]',\n])\n\nconst marqueeRuleRecipe = cva(`absolute inset-x-0 ${ruleFading}`, {\n  defaultVariants: { edge: 'head' },\n  variants: { edge: { foot: 'bottom-0', head: 'top-0' } },\n})\n\nconst marqueeStageRecipe = cva('w-full')\n\nconst marqueeViewportRecipe = cva([\n  'relative overflow-hidden',\n  'tf-faded-x motion-reduce:mask-none',\n])\n\nconst marqueeCopyRecipe = cva([\n  'tf-looping items-center',\n  'motion-reduce:gap-y-4 motion-reduce:data-clone:hidden',\n  WRAPS,\n])\n\nconst marqueeItemRecipe = cva([\n  'flex flex-none items-center gap-3',\n  'cursor-default select-none',\n  'text-tf-muted hovered:text-tf-fg',\n  'tf-ink-glide tf-transition',\n])\n\nconst marqueeMarkRecipe = cva('block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat')\n\nconst marqueeNameRecipe = cva('font-tf-display text-tf-h4 font-bold whitespace-nowrap')\n\nconst marqueeSpacing = '3rem'\n\nexport {\n  type MarqueeItem,\n  marqueeCopyRecipe,\n  marqueeItemRecipe,\n  marqueeMarkRecipe,\n  marqueeNameRecipe,\n  marqueeRecipe,\n  marqueeRuleRecipe,\n  marqueeSpacing,\n  marqueeStageRecipe,\n  marqueeViewportRecipe,\n}\n"],"mappings":";;;AASA,MAAM,QAAQ;AAEd,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,sBAAsB,cAAc;CAChE,iBAAiB,EAAE,MAAM,OAAO;CAChC,UAAU,EAAE,MAAM;EAAE,MAAM;EAAY,MAAM;CAAQ,EAAE;AACxD,CAAC;AAED,MAAM,qBAAqB,IAAI,QAAQ;AAEvC,MAAM,wBAAwB,IAAI,CAChC,4BACA,oCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,8DAA8D;AAE5F,MAAM,oBAAoB,IAAI,wDAAwD;AAEtF,MAAM,iBAAiB"}
+{"version":3,"file":"marquee.js","names":[],"sources":["../../src/recipes/marquee.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { ruleFading } from '#parts/rule'\n\ninterface MarqueeItem {\n  name: string\n  src: string\n}\n\nconst WRAPS = 'motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center'\n\nconst marqueeRecipe = cva([\n  'relative isolate py-8',\n  'font-tf-body',\n  'tf-slows hovered:[--tf-marquee-rate:0]',\n])\n\nconst marqueeRuleRecipe = cva(`absolute inset-x-0 ${ruleFading}`, {\n  defaultVariants: { edge: 'head' },\n  variants: { edge: { foot: 'bottom-0', head: 'top-0' } },\n})\n\nconst marqueeStageRecipe = cva('w-full')\n\nconst marqueeViewportRecipe = cva([\n  'relative overflow-hidden',\n  'tf-faded-x motion-reduce:mask-none',\n])\n\nconst marqueeCopyRecipe = cva([\n  'tf-looping items-center',\n  'motion-reduce:gap-y-4 motion-reduce:data-clone:hidden',\n  WRAPS,\n])\n\nconst marqueeItemRecipe = cva([\n  'flex flex-none items-center gap-3',\n  'cursor-default select-none',\n  'text-tf-muted hovered:text-tf-fg',\n  'tf-ink-glide tf-transition',\n])\n\nconst marqueeMarkRecipe = cva('block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat')\n\nconst marqueeNameRecipe = cva('font-tf-display text-tf-h4 font-bold whitespace-nowrap')\n\nconst marqueeSpacing = '3rem'\n\nconst marqueeAnatomy = anatomy({\n  mark: { part: 'mark', recipe: marqueeMarkRecipe, required: true },\n  name: { part: 'name', recipe: marqueeNameRecipe, required: true },\n  root: { part: 'marquee', recipe: marqueeRecipe, required: true },\n  rule: { part: 'rule', recipe: marqueeRuleRecipe, required: true },\n})\n\nexport {\n  type MarqueeItem,\n  marqueeAnatomy,\n  marqueeCopyRecipe,\n  marqueeItemRecipe,\n  marqueeMarkRecipe,\n  marqueeNameRecipe,\n  marqueeRecipe,\n  marqueeRuleRecipe,\n  marqueeSpacing,\n  marqueeStageRecipe,\n  marqueeViewportRecipe,\n}\n"],"mappings":";;;;AAUA,MAAM,QAAQ;AAEd,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,sBAAsB,cAAc;CAChE,iBAAiB,EAAE,MAAM,OAAO;CAChC,UAAU,EAAE,MAAM;EAAE,MAAM;EAAY,MAAM;CAAQ,EAAE;AACxD,CAAC;AAED,MAAM,qBAAqB,IAAI,QAAQ;AAEvC,MAAM,wBAAwB,IAAI,CAChC,4BACA,oCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,8DAA8D;AAE5F,MAAM,oBAAoB,IAAI,wDAAwD;AAEtF,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB,QAAQ;CAC7B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;AAClE,CAAC"}

package/dist/recipes/menu.d.ts

@@ -21,6 +21,38 @@ declare const menuShortcutRecipe: (props?: import("class-variance-authority/type
 declare const menuSeparatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const menuArrowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const menuArrowTipRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuAnatomy: {
+  readonly item: {
+    readonly part: "item";
+    readonly recipe: (props?: ({
+      tone?: "danger" | "neutral" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly list: {
+    readonly part: "list";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: ({
+      tone?: "danger" | "neutral" | "chosen" | null | undefined;
+      within?: "surface" | "list" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "menu";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly shortcut: {
+    readonly part: "shortcut";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { type MenuPlacement, type MenuTone, defaultMenuPlacement, defaultMenuTone, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
+export { type MenuPlacement, type MenuTone, defaultMenuPlacement, defaultMenuTone, menuAnatomy, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
 //# sourceMappingURL=menu.d.ts.map

package/dist/recipes/menu.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, hitArea } from "../parts/control.js";
 import { overlayMotion } from "./motion.js";
 import { eyebrowQuiet } from "../parts/eyebrow.js";
@@ -80,7 +81,34 @@ const menuShortcutRecipe = cva("flex-none text-tf-caption-sm text-tf-muted tabul
 const menuSeparatorRecipe = cva("my-2 flex-none border-0");
 const menuArrowRecipe = cva(["[--arrow-size:0.5rem]", "[--arrow-background:var(--tf-glass-flat)]"]);
 const menuArrowTipRecipe = cva("border-t border-l border-tf-line");
+const menuAnatomy = anatomy({
+	item: {
+		part: "item",
+		recipe: menuItemRecipe,
+		required: false
+	},
+	list: {
+		part: "list",
+		recipe: menuListRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: menuMarkRecipe,
+		required: false
+	},
+	root: {
+		part: "menu",
+		recipe: menuSurfaceRecipe,
+		required: false
+	},
+	shortcut: {
+		part: "shortcut",
+		recipe: menuShortcutRecipe,
+		required: false
+	}
+});
 //#endregion
-export { defaultMenuPlacement, defaultMenuTone, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
+export { defaultMenuPlacement, defaultMenuTone, menuAnatomy, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
 
 //# sourceMappingURL=menu.js.map

package/dist/recipes/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../../src/recipes/menu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, hitArea } from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { overlayMotion } from './motion'\n\ntype MenuTone = 'neutral' | 'danger'\n\nconst defaultMenuTone = 'neutral' satisfies MenuTone\n\nconst menuTones = ['neutral', 'danger'] as const satisfies readonly MenuTone[]\n\ntype MenuPlacement =\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n\nconst defaultMenuPlacement = 'bottom-start' satisfies MenuPlacement\n\nconst menuPlacements = [\n  'bottom-start',\n  'bottom-end',\n  'top-start',\n  'top-end',\n  'right-start',\n  'right-end',\n  'left-start',\n  'left-end',\n] as const satisfies readonly MenuPlacement[]\n\nconst ROOM_FOR_A_FINGER = hitArea('after:h-[calc(var(--spacing-tf-row)+var(--spacing))]')\n\nconst GROWS_FROM_ITS_TRIGGER = [\n  'data-[placement^=bottom]:origin-top',\n  'data-[placement^=top]:origin-bottom',\n  'data-[placement^=left]:origin-right',\n  'data-[placement^=right]:origin-left',\n].join(' ')\n\ntype MenuMark = MenuTone | 'chosen'\n\nconst MARK = {\n  chosen: 'bg-tf-accent-tint',\n  danger: 'bg-tf-danger-wash',\n  neutral: 'bg-tf-panel-hi',\n} satisfies Record<MenuMark, string>\n\nconst CHOSEN = 'data-[state=checked]:text-tf-accent-hi'\n\nconst menuSurfaceRecipe = cva([\n  'relative flex flex-col',\n  'tf-menu-width rounded-tf-card bg-tf-glass px-2 backdrop-blur-tf-glass',\n  'tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain',\n  'z-tf-dropdown outline-hidden',\n  GROWS_FROM_ITS_TRIGGER,\n  ...overlayMotion,\n])\n\nconst menuListRecipe = cva([\n  'relative flex tf-scroll-thin min-h-0 flex-col gap-1 py-2 outline-hidden',\n  'max-h-[min(var(--available-height),var(--container-tf-list))] overflow-y-auto',\n  'font-tf-body text-tf-body-sm font-medium',\n])\n\nconst menuMarkRecipe = cva([...travelMarkBase, 'h-tf-row rounded-tf-inline'], {\n  defaultVariants: { tone: defaultMenuTone, within: 'list' },\n  variants: {\n    tone: MARK,\n    within: { list: 'inset-x-0', surface: 'inset-x-2' },\n  },\n})\n\nconst menuGroupRecipe = cva('flex flex-col gap-1')\n\nconst menuItemRecipe = cva(\n  [\n    'flex h-tf-row min-h-tf-row flex-none items-center gap-3',\n    'relative rounded-tf-inline px-3 text-left',\n    ROOM_FOR_A_FINGER,\n    CHOSEN,\n    'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n    'tf-transition motion-reduce:transition-none',\n    'cursor-pointer select-none',\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { tone: defaultMenuTone },\n    variants: {\n      tone: { danger: 'text-tf-danger-hi', neutral: 'text-tf-fg' } satisfies Record<\n        MenuTone,\n        string\n      >,\n    },\n  },\n)\n\nconst menuLabelRecipe = cva(['flex-none px-3 pt-3 pb-0', `text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst menuTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst menuShortcutRecipe = cva('flex-none text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst menuSeparatorRecipe = cva('my-2 flex-none border-0')\n\nconst menuArrowRecipe = cva(['[--arrow-size:0.5rem]', '[--arrow-background:var(--tf-glass-flat)]'])\n\nconst menuArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nexport {\n  type MenuPlacement,\n  type MenuTone,\n  defaultMenuPlacement,\n  defaultMenuTone,\n  menuArrowRecipe,\n  menuArrowTipRecipe,\n  menuItemRecipe,\n  menuLabelRecipe,\n  menuGroupRecipe,\n  menuListRecipe,\n  menuMarkRecipe,\n  menuPlacements,\n  menuSeparatorRecipe,\n  menuShortcutRecipe,\n  menuSurfaceRecipe,\n  menuTextRecipe,\n  menuTones,\n}\n"],"mappings":";;;;;;AAUA,MAAM,kBAAkB;AAExB,MAAM,YAAY,CAAC,WAAW,QAAQ;AAYtC,MAAM,uBAAuB;AAE7B,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB,QAAQ,sDAAsD;AAExF,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAIV,MAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,SAAS;AAEf,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,iBAAiB,IAAI;CACzB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,CAAC,GAAG,gBAAgB,4BAA4B,GAAG;CAC5E,iBAAiB;EAAE,MAAM;EAAiB,QAAQ;CAAO;CACzD,UAAU;EACR,MAAM;EACN,QAAQ;GAAE,MAAM;GAAa,SAAS;EAAY;CACpD;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,qBAAqB;AAEjD,MAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,MAAM,gBAAgB;CACzC,UAAU,EACR,MAAM;EAAE,QAAQ;EAAqB,SAAS;CAAa,EAI7D;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,CAAC,4BAA4B,sBAAsB,cAAc,CAAC;AAE9F,MAAM,iBAAiB,IAAI,yBAAyB;AAEpD,MAAM,qBAAqB,IAAI,yDAAyD;AAExF,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,kBAAkB,IAAI,CAAC,yBAAyB,2CAA2C,CAAC;AAElG,MAAM,qBAAqB,IAAI,kCAAkC"}
+{"version":3,"file":"menu.js","names":[],"sources":["../../src/recipes/menu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress, hitArea } from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { overlayMotion } from './motion'\n\ntype MenuTone = 'neutral' | 'danger'\n\nconst defaultMenuTone = 'neutral' satisfies MenuTone\n\nconst menuTones = ['neutral', 'danger'] as const satisfies readonly MenuTone[]\n\ntype MenuPlacement =\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n\nconst defaultMenuPlacement = 'bottom-start' satisfies MenuPlacement\n\nconst menuPlacements = [\n  'bottom-start',\n  'bottom-end',\n  'top-start',\n  'top-end',\n  'right-start',\n  'right-end',\n  'left-start',\n  'left-end',\n] as const satisfies readonly MenuPlacement[]\n\nconst ROOM_FOR_A_FINGER = hitArea('after:h-[calc(var(--spacing-tf-row)+var(--spacing))]')\n\nconst GROWS_FROM_ITS_TRIGGER = [\n  'data-[placement^=bottom]:origin-top',\n  'data-[placement^=top]:origin-bottom',\n  'data-[placement^=left]:origin-right',\n  'data-[placement^=right]:origin-left',\n].join(' ')\n\ntype MenuMark = MenuTone | 'chosen'\n\nconst MARK = {\n  chosen: 'bg-tf-accent-tint',\n  danger: 'bg-tf-danger-wash',\n  neutral: 'bg-tf-panel-hi',\n} satisfies Record<MenuMark, string>\n\nconst CHOSEN = 'data-[state=checked]:text-tf-accent-hi'\n\nconst menuSurfaceRecipe = cva([\n  'relative flex flex-col',\n  'tf-menu-width rounded-tf-card bg-tf-glass px-2 backdrop-blur-tf-glass',\n  'tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain',\n  'z-tf-dropdown outline-hidden',\n  GROWS_FROM_ITS_TRIGGER,\n  ...overlayMotion,\n])\n\nconst menuListRecipe = cva([\n  'relative flex tf-scroll-thin min-h-0 flex-col gap-1 py-2 outline-hidden',\n  'max-h-[min(var(--available-height),var(--container-tf-list))] overflow-y-auto',\n  'font-tf-body text-tf-body-sm font-medium',\n])\n\nconst menuMarkRecipe = cva([...travelMarkBase, 'h-tf-row rounded-tf-inline'], {\n  defaultVariants: { tone: defaultMenuTone, within: 'list' },\n  variants: {\n    tone: MARK,\n    within: { list: 'inset-x-0', surface: 'inset-x-2' },\n  },\n})\n\nconst menuGroupRecipe = cva('flex flex-col gap-1')\n\nconst menuItemRecipe = cva(\n  [\n    'flex h-tf-row min-h-tf-row flex-none items-center gap-3',\n    'relative rounded-tf-inline px-3 text-left',\n    ROOM_FOR_A_FINGER,\n    CHOSEN,\n    'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n    'tf-transition motion-reduce:transition-none',\n    'cursor-pointer select-none',\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { tone: defaultMenuTone },\n    variants: {\n      tone: { danger: 'text-tf-danger-hi', neutral: 'text-tf-fg' } satisfies Record<\n        MenuTone,\n        string\n      >,\n    },\n  },\n)\n\nconst menuLabelRecipe = cva(['flex-none px-3 pt-3 pb-0', `text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst menuTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst menuShortcutRecipe = cva('flex-none text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst menuSeparatorRecipe = cva('my-2 flex-none border-0')\n\nconst menuArrowRecipe = cva(['[--arrow-size:0.5rem]', '[--arrow-background:var(--tf-glass-flat)]'])\n\nconst menuArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nconst menuAnatomy = anatomy({\n  item: { part: 'item', recipe: menuItemRecipe, required: false },\n  list: { part: 'list', recipe: menuListRecipe, required: true },\n  mark: { part: 'mark', recipe: menuMarkRecipe, required: false },\n  root: { part: 'menu', recipe: menuSurfaceRecipe, required: false },\n  shortcut: { part: 'shortcut', recipe: menuShortcutRecipe, required: false },\n})\n\nexport {\n  type MenuPlacement,\n  type MenuTone,\n  defaultMenuPlacement,\n  defaultMenuTone,\n  menuAnatomy,\n  menuArrowRecipe,\n  menuArrowTipRecipe,\n  menuItemRecipe,\n  menuLabelRecipe,\n  menuGroupRecipe,\n  menuListRecipe,\n  menuMarkRecipe,\n  menuPlacements,\n  menuSeparatorRecipe,\n  menuShortcutRecipe,\n  menuSurfaceRecipe,\n  menuTextRecipe,\n  menuTones,\n}\n"],"mappings":";;;;;;;AAWA,MAAM,kBAAkB;AAExB,MAAM,YAAY,CAAC,WAAW,QAAQ;AAYtC,MAAM,uBAAuB;AAE7B,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB,QAAQ,sDAAsD;AAExF,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAIV,MAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,SAAS;AAEf,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,iBAAiB,IAAI;CACzB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,CAAC,GAAG,gBAAgB,4BAA4B,GAAG;CAC5E,iBAAiB;EAAE,MAAM;EAAiB,QAAQ;CAAO;CACzD,UAAU;EACR,MAAM;EACN,QAAQ;GAAE,MAAM;GAAa,SAAS;EAAY;CACpD;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,qBAAqB;AAEjD,MAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,MAAM,gBAAgB;CACzC,UAAU,EACR,MAAM;EAAE,QAAQ;EAAqB,SAAS;CAAa,EAI7D;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,CAAC,4BAA4B,sBAAsB,cAAc,CAAC;AAE9F,MAAM,iBAAiB,IAAI,yBAAyB;AAEpD,MAAM,qBAAqB,IAAI,yDAAyD;AAExF,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,kBAAkB,IAAI,CAAC,yBAAyB,2CAA2C,CAAC;AAElG,MAAM,qBAAqB,IAAI,kCAAkC;AAEjE,MAAM,cAAc,QAAQ;CAC1B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAM;CACjE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAoB,UAAU;CAAM;AAC5E,CAAC"}

package/dist/recipes/metaRow.d.ts

@@ -8,8 +8,17 @@ declare const metaRowLayouts: readonly ["justify", "inline", "note"];
 declare const metaRowEmphases: readonly ["normal", "strong"];
 declare const metaRowTones: readonly ["accent", "success", "warning", "info", "danger"];
 declare const metaRowRecipe: (props?: ({
-  layout?: "inline" | "justify" | "note" | null | undefined;
+  layout?: "justify" | "inline" | "note" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const metaRowAnatomy: {
+  readonly root: {
+    readonly part: "meta-row";
+    readonly recipe: (props?: ({
+      layout?: "justify" | "inline" | "note" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type MetaRowEmphasis, type MetaRowLayout, type MetaRowPairedLayout, defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
+export { type MetaRowEmphasis, type MetaRowLayout, type MetaRowPairedLayout, defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowAnatomy, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
 //# sourceMappingURL=metaRow.d.ts.map

package/dist/recipes/metaRow.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { tones } from "../parts/tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/metaRow.ts
@@ -19,7 +20,12 @@ const metaRowRecipe = cva("flex items-baseline gap-2 tf-icons", {
 		note: NOTE
 	} }
 });
+const metaRowAnatomy = anatomy({ root: {
+	part: "meta-row",
+	recipe: metaRowRecipe,
+	required: true
+} });
 //#endregion
-export { defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
+export { defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowAnatomy, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
 
 //# sourceMappingURL=metaRow.js.map

package/dist/recipes/metaRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"metaRow.js","names":[],"sources":["../../src/recipes/metaRow.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\ntype MetaRowLayout = 'justify' | 'inline' | 'note'\n\ntype MetaRowPairedLayout = Exclude<MetaRowLayout, 'note'>\n\ntype MetaRowEmphasis = 'normal' | 'strong'\n\nconst defaultMetaRowLayout = 'justify' satisfies MetaRowLayout\n\nconst defaultMetaRowEmphasis = 'normal' satisfies MetaRowEmphasis\n\nconst metaRowLayouts = ['justify', 'inline', 'note'] as const satisfies readonly MetaRowLayout[]\n\nconst metaRowEmphases = ['normal', 'strong'] as const satisfies readonly MetaRowEmphasis[]\n\nconst metaRowTones = tones\n\nconst NOTE = ['items-center text-tf-muted', '[&_svg]:size-tf-icon-sm'].join(' ')\n\nconst metaRowRecipe = cva('flex items-baseline gap-2 tf-icons', {\n  defaultVariants: { layout: defaultMetaRowLayout },\n  variants: {\n    layout: {\n      inline: '',\n      justify: 'justify-between gap-4',\n      note: NOTE,\n    } satisfies Record<MetaRowLayout, string>,\n  },\n})\n\nexport {\n  type MetaRowEmphasis,\n  type MetaRowLayout,\n  type MetaRowPairedLayout,\n  defaultMetaRowEmphasis,\n  defaultMetaRowLayout,\n  metaRowEmphases,\n  metaRowLayouts,\n  metaRowRecipe,\n  metaRowTones,\n}\n"],"mappings":";;;AAUA,MAAM,uBAAuB;AAE7B,MAAM,yBAAyB;AAE/B,MAAM,iBAAiB;CAAC;CAAW;CAAU;AAAM;AAEnD,MAAM,kBAAkB,CAAC,UAAU,QAAQ;AAE3C,MAAM,eAAe;AAErB,MAAM,OAAO,CAAC,8BAA8B,yBAAyB,CAAC,CAAC,KAAK,GAAG;AAE/E,MAAM,gBAAgB,IAAI,sCAAsC;CAC9D,iBAAiB,EAAE,QAAQ,qBAAqB;CAChD,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR,EACF;AACF,CAAC"}
+{"version":3,"file":"metaRow.js","names":[],"sources":["../../src/recipes/metaRow.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { tones } from '#parts/tone'\n\ntype MetaRowLayout = 'justify' | 'inline' | 'note'\n\ntype MetaRowPairedLayout = Exclude<MetaRowLayout, 'note'>\n\ntype MetaRowEmphasis = 'normal' | 'strong'\n\nconst defaultMetaRowLayout = 'justify' satisfies MetaRowLayout\n\nconst defaultMetaRowEmphasis = 'normal' satisfies MetaRowEmphasis\n\nconst metaRowLayouts = ['justify', 'inline', 'note'] as const satisfies readonly MetaRowLayout[]\n\nconst metaRowEmphases = ['normal', 'strong'] as const satisfies readonly MetaRowEmphasis[]\n\nconst metaRowTones = tones\n\nconst NOTE = ['items-center text-tf-muted', '[&_svg]:size-tf-icon-sm'].join(' ')\n\nconst metaRowRecipe = cva('flex items-baseline gap-2 tf-icons', {\n  defaultVariants: { layout: defaultMetaRowLayout },\n  variants: {\n    layout: {\n      inline: '',\n      justify: 'justify-between gap-4',\n      note: NOTE,\n    } satisfies Record<MetaRowLayout, string>,\n  },\n})\n\nconst metaRowAnatomy = anatomy({\n  root: { part: 'meta-row', recipe: metaRowRecipe, required: true },\n})\n\nexport {\n  type MetaRowEmphasis,\n  type MetaRowLayout,\n  type MetaRowPairedLayout,\n  defaultMetaRowEmphasis,\n  defaultMetaRowLayout,\n  metaRowAnatomy,\n  metaRowEmphases,\n  metaRowLayouts,\n  metaRowRecipe,\n  metaRowTones,\n}\n"],"mappings":";;;;AAWA,MAAM,uBAAuB;AAE7B,MAAM,yBAAyB;AAE/B,MAAM,iBAAiB;CAAC;CAAW;CAAU;AAAM;AAEnD,MAAM,kBAAkB,CAAC,UAAU,QAAQ;AAE3C,MAAM,eAAe;AAErB,MAAM,OAAO,CAAC,8BAA8B,yBAAyB,CAAC,CAAC,KAAK,GAAG;AAE/E,MAAM,gBAAgB,IAAI,sCAAsC;CAC9D,iBAAiB,EAAE,QAAQ,qBAAqB;CAChD,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,iBAAiB,QAAQ,EAC7B,MAAM;CAAE,MAAM;CAAY,QAAQ;CAAe,UAAU;AAAK,EAClE,CAAC"}

package/dist/recipes/meter.d.ts

@@ -13,11 +13,45 @@ declare const meterPartsRecipe: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type MeterPartEdge = 'end' | 'inner' | 'only' | 'start';
 declare const meterPartRecipe: (props?: ({
-  edge?: "inner" | "end" | "only" | "start" | null | undefined;
+  edge?: "start" | "end" | "inner" | "only" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const meterLegendRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const meterLegendItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const meterLegendDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterAnatomy: {
+  readonly caption: {
+    readonly part: "caption";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly head: {
+    readonly part: "head";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly legend: {
+    readonly part: "legend";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly parts: {
+    readonly part: "parts";
+    readonly recipe: (props?: ({
+      variant?: "share" | "split" | "slots" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly reading: {
+    readonly part: "reading";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "meter";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type MeterPartEdge, type MeterVariant, defaultMeterVariant, meterCaptionRecipe, meterHeadRecipe, meterLegendDotRecipe, meterLegendItemRecipe, meterLegendRecipe, meterPartRecipe, meterPartsRecipe, meterRangeRecipe, meterReadingRecipe, meterRecipe, meterTrackRecipe, meterVariants };
+export { type MeterPartEdge, type MeterVariant, defaultMeterVariant, meterAnatomy, meterCaptionRecipe, meterHeadRecipe, meterLegendDotRecipe, meterLegendItemRecipe, meterLegendRecipe, meterPartRecipe, meterPartsRecipe, meterRangeRecipe, meterReadingRecipe, meterRecipe, meterTrackRecipe, meterVariants };
 //# sourceMappingURL=meter.d.ts.map

package/dist/recipes/meter.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { valueGlide } from "./motion.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/meter.ts
@@ -33,7 +34,39 @@ const meterPartRecipe = cva(["bg-tf-blend", ...valueGlide], {
 const meterLegendRecipe = cva("flex flex-wrap gap-x-4 gap-y-2");
 const meterLegendItemRecipe = cva("flex items-center gap-2 text-tf-caption-sm text-tf-muted");
 const meterLegendDotRecipe = cva("size-2 flex-none rounded-tf-pill bg-tf-blend");
+const meterAnatomy = anatomy({
+	caption: {
+		part: "caption",
+		recipe: meterCaptionRecipe,
+		required: false
+	},
+	head: {
+		part: "head",
+		recipe: meterHeadRecipe,
+		required: false
+	},
+	legend: {
+		part: "legend",
+		recipe: meterLegendRecipe,
+		required: false
+	},
+	parts: {
+		part: "parts",
+		recipe: meterPartsRecipe,
+		required: false
+	},
+	reading: {
+		part: "reading",
+		recipe: meterReadingRecipe,
+		required: false
+	},
+	root: {
+		part: "meter",
+		recipe: meterRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultMeterVariant, meterCaptionRecipe, meterHeadRecipe, meterLegendDotRecipe, meterLegendItemRecipe, meterLegendRecipe, meterPartRecipe, meterPartsRecipe, meterRangeRecipe, meterReadingRecipe, meterRecipe, meterTrackRecipe, meterVariants };
+export { defaultMeterVariant, meterAnatomy, meterCaptionRecipe, meterHeadRecipe, meterLegendDotRecipe, meterLegendItemRecipe, meterLegendRecipe, meterPartRecipe, meterPartsRecipe, meterRangeRecipe, meterReadingRecipe, meterRecipe, meterTrackRecipe, meterVariants };
 
 //# sourceMappingURL=meter.js.map

package/dist/recipes/meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"meter.js","names":[],"sources":["../../src/recipes/meter.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { valueGlide } from './motion'\n\nconst meterVariants = ['share', 'split', 'slots'] as const\n\ntype MeterVariant = (typeof meterVariants)[number]\n\nconst defaultMeterVariant = 'share' satisfies MeterVariant\n\nconst meterRecipe = cva('flex w-full flex-col gap-2 font-tf-body text-tf-fg')\n\nconst meterHeadRecipe = cva('flex items-baseline justify-between gap-3')\n\nconst meterCaptionRecipe = cva(\n  'text-tf-caption-sm font-medium tracking-tf-eyebrow text-tf-muted uppercase',\n)\n\nconst meterReadingRecipe = cva('text-tf-body-sm font-medium text-tf-fg tabular-nums')\n\nconst meterTrackRecipe = cva('block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken')\n\nconst meterRangeRecipe = cva(['block h-full rounded-tf-pill bg-tf-blend', ...valueGlide])\n\nconst meterPartsRecipe = cva('flex gap-1', {\n  defaultVariants: { variant: defaultMeterVariant },\n  variants: {\n    variant: {\n      share: '',\n      slots: 'h-2.5',\n      split: 'h-3',\n    } satisfies Record<MeterVariant, string>,\n  },\n})\n\ntype MeterPartEdge = 'end' | 'inner' | 'only' | 'start'\n\nconst meterPartRecipe = cva(['bg-tf-blend', ...valueGlide], {\n  defaultVariants: { edge: 'inner' },\n  variants: {\n    edge: {\n      end: 'rounded-r-tf-pill',\n      inner: '',\n      only: 'rounded-tf-pill',\n      start: 'rounded-l-tf-pill',\n    } satisfies Record<MeterPartEdge, string>,\n  },\n})\n\nconst meterLegendRecipe = cva('flex flex-wrap gap-x-4 gap-y-2')\n\nconst meterLegendItemRecipe = cva('flex items-center gap-2 text-tf-caption-sm text-tf-muted')\n\nconst meterLegendDotRecipe = cva('size-2 flex-none rounded-tf-pill bg-tf-blend')\n\nexport {\n  type MeterPartEdge,\n  type MeterVariant,\n  defaultMeterVariant,\n  meterCaptionRecipe,\n  meterHeadRecipe,\n  meterLegendDotRecipe,\n  meterLegendItemRecipe,\n  meterLegendRecipe,\n  meterPartRecipe,\n  meterPartsRecipe,\n  meterRangeRecipe,\n  meterReadingRecipe,\n  meterRecipe,\n  meterTrackRecipe,\n  meterVariants,\n}\n"],"mappings":";;;AAIA,MAAM,gBAAgB;CAAC;CAAS;CAAS;AAAO;AAIhD,MAAM,sBAAsB;AAE5B,MAAM,cAAc,IAAI,oDAAoD;AAE5E,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,qBAAqB,IACzB,4EACF;AAEA,MAAM,qBAAqB,IAAI,qDAAqD;AAEpF,MAAM,mBAAmB,IAAI,0DAA0D;AAEvF,MAAM,mBAAmB,IAAI,CAAC,4CAA4C,GAAG,UAAU,CAAC;AAExF,MAAM,mBAAmB,IAAI,cAAc;CACzC,iBAAiB,EAAE,SAAS,oBAAoB;CAChD,UAAU,EACR,SAAS;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,EACF;AACF,CAAC;AAID,MAAM,kBAAkB,IAAI,CAAC,eAAe,GAAG,UAAU,GAAG;CAC1D,iBAAiB,EAAE,MAAM,QAAQ;CACjC,UAAU,EACR,MAAM;EACJ,KAAK;EACL,OAAO;EACP,MAAM;EACN,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,gCAAgC;AAE9D,MAAM,wBAAwB,IAAI,0DAA0D;AAE5F,MAAM,uBAAuB,IAAI,8CAA8C"}
+{"version":3,"file":"meter.js","names":[],"sources":["../../src/recipes/meter.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nimport { valueGlide } from './motion'\n\nconst meterVariants = ['share', 'split', 'slots'] as const\n\ntype MeterVariant = (typeof meterVariants)[number]\n\nconst defaultMeterVariant = 'share' satisfies MeterVariant\n\nconst meterRecipe = cva('flex w-full flex-col gap-2 font-tf-body text-tf-fg')\n\nconst meterHeadRecipe = cva('flex items-baseline justify-between gap-3')\n\nconst meterCaptionRecipe = cva(\n  'text-tf-caption-sm font-medium tracking-tf-eyebrow text-tf-muted uppercase',\n)\n\nconst meterReadingRecipe = cva('text-tf-body-sm font-medium text-tf-fg tabular-nums')\n\nconst meterTrackRecipe = cva('block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken')\n\nconst meterRangeRecipe = cva(['block h-full rounded-tf-pill bg-tf-blend', ...valueGlide])\n\nconst meterPartsRecipe = cva('flex gap-1', {\n  defaultVariants: { variant: defaultMeterVariant },\n  variants: {\n    variant: {\n      share: '',\n      slots: 'h-2.5',\n      split: 'h-3',\n    } satisfies Record<MeterVariant, string>,\n  },\n})\n\ntype MeterPartEdge = 'end' | 'inner' | 'only' | 'start'\n\nconst meterPartRecipe = cva(['bg-tf-blend', ...valueGlide], {\n  defaultVariants: { edge: 'inner' },\n  variants: {\n    edge: {\n      end: 'rounded-r-tf-pill',\n      inner: '',\n      only: 'rounded-tf-pill',\n      start: 'rounded-l-tf-pill',\n    } satisfies Record<MeterPartEdge, string>,\n  },\n})\n\nconst meterLegendRecipe = cva('flex flex-wrap gap-x-4 gap-y-2')\n\nconst meterLegendItemRecipe = cva('flex items-center gap-2 text-tf-caption-sm text-tf-muted')\n\nconst meterLegendDotRecipe = cva('size-2 flex-none rounded-tf-pill bg-tf-blend')\n\nconst meterAnatomy = anatomy({\n  caption: { part: 'caption', recipe: meterCaptionRecipe, required: false },\n  head: { part: 'head', recipe: meterHeadRecipe, required: false },\n  legend: { part: 'legend', recipe: meterLegendRecipe, required: false },\n  parts: { part: 'parts', recipe: meterPartsRecipe, required: false },\n  reading: { part: 'reading', recipe: meterReadingRecipe, required: false },\n  root: { part: 'meter', recipe: meterRecipe, required: true },\n})\n\nexport {\n  type MeterPartEdge,\n  type MeterVariant,\n  defaultMeterVariant,\n  meterAnatomy,\n  meterCaptionRecipe,\n  meterHeadRecipe,\n  meterLegendDotRecipe,\n  meterLegendItemRecipe,\n  meterLegendRecipe,\n  meterPartRecipe,\n  meterPartsRecipe,\n  meterRangeRecipe,\n  meterReadingRecipe,\n  meterRecipe,\n  meterTrackRecipe,\n  meterVariants,\n}\n"],"mappings":";;;;AAMA,MAAM,gBAAgB;CAAC;CAAS;CAAS;AAAO;AAIhD,MAAM,sBAAsB;AAE5B,MAAM,cAAc,IAAI,oDAAoD;AAE5E,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,qBAAqB,IACzB,4EACF;AAEA,MAAM,qBAAqB,IAAI,qDAAqD;AAEpF,MAAM,mBAAmB,IAAI,0DAA0D;AAEvF,MAAM,mBAAmB,IAAI,CAAC,4CAA4C,GAAG,UAAU,CAAC;AAExF,MAAM,mBAAmB,IAAI,cAAc;CACzC,iBAAiB,EAAE,SAAS,oBAAoB;CAChD,UAAU,EACR,SAAS;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,EACF;AACF,CAAC;AAID,MAAM,kBAAkB,IAAI,CAAC,eAAe,GAAG,UAAU,GAAG;CAC1D,iBAAiB,EAAE,MAAM,QAAQ;CACjC,UAAU,EACR,MAAM;EACJ,KAAK;EACL,OAAO;EACP,MAAM;EACN,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,gCAAgC;AAE9D,MAAM,wBAAwB,IAAI,0DAA0D;AAE5F,MAAM,uBAAuB,IAAI,8CAA8C;AAE/E,MAAM,eAAe,QAAQ;CAC3B,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAoB,UAAU;CAAM;CACxE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;CAC/D,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAmB,UAAU;CAAM;CACrE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAkB,UAAU;CAAM;CAClE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAoB,UAAU;CAAM;CACxE,MAAM;EAAE,MAAM;EAAS,QAAQ;EAAa,UAAU;CAAK;AAC7D,CAAC"}

package/dist/recipes/motion.d.ts

@@ -1,6 +1,14 @@
 //#region src/recipes/motion.d.ts
 declare const overlayMotion: string[];
+declare const arrivalMotion: string[];
+declare const drawerMotion: string[];
+declare const liftMotion: string[];
+declare const mirrorMotion: string[];
+declare const scrimMirrorMotion: string[];
+declare const railMorph = "tf-transition tf-rails motion-reduce:transition-none";
+declare const valueGlide: string[];
 declare const collapseMotion: string[];
+declare const railCollapse: string;
 //#endregion
-export { collapseMotion, overlayMotion };
+export { arrivalMotion, collapseMotion, drawerMotion, liftMotion, mirrorMotion, overlayMotion, railCollapse, railMorph, scrimMirrorMotion, valueGlide };
 //# sourceMappingURL=motion.d.ts.map

package/dist/recipes/nebula.js

@@ -1,5 +1,5 @@
-import { toneBlend } from "../tone.js";
 import { defaultTone, tones } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/nebula.ts
 const defaultNebulaTone = defaultTone;

package/dist/recipes/numberRange.d.ts

@@ -10,6 +10,49 @@ declare const numberRangeDashRecipe: (props?: ({
   labelled?: boolean | null | undefined;
   size?: "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const numberRangeAnatomy: {
+  readonly cloud: {
+    readonly part: "cloud";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly dash: {
+    readonly part: "dash";
+    readonly recipe: (props?: ({
+      filled?: boolean | null | undefined;
+      labelled?: boolean | null | undefined;
+      size?: "md" | "lg" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly foot: {
+    readonly part: "foot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly nebula: {
+    readonly part: "nebula";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "number-range";
+    readonly recipe: (props?: ({
+      fullWidth?: boolean | null | undefined;
+      message?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly row: {
+    readonly part: "row";
+    readonly recipe: (props?: ({
+      invalid?: boolean | null | undefined;
+      loading?: boolean | null | undefined;
+      size?: "md" | "lg" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe };
+export { numberRangeAnatomy, numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe };
 //# sourceMappingURL=numberRange.d.ts.map

package/dist/recipes/numberRange.js

@@ -1,4 +1,7 @@
+import { anatomy } from "../anatomy.js";
+import { nebulaCloudLowRecipe, nebulaVeilRecipe } from "./nebula.js";
 import "../control.js";
+import { fieldFootRecipe, fieldRecipe, fieldRowRecipe } from "./field.js";
 import { labelRoom } from "./input.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/numberRange.ts
@@ -103,7 +106,39 @@ const numberRangeDashRecipe = cva([
 		}
 	}
 });
+const numberRangeAnatomy = anatomy({
+	cloud: {
+		part: "cloud",
+		recipe: nebulaCloudLowRecipe,
+		required: true
+	},
+	dash: {
+		part: "dash",
+		recipe: numberRangeDashRecipe,
+		required: true
+	},
+	foot: {
+		part: "foot",
+		recipe: fieldFootRecipe,
+		required: true
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaVeilRecipe,
+		required: true
+	},
+	root: {
+		part: "number-range",
+		recipe: fieldRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: fieldRowRecipe,
+		required: true
+	}
+});
 //#endregion
-export { numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe };
+export { numberRangeAnatomy, numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe };
 
 //# sourceMappingURL=numberRange.js.map

package/dist/recipes/numberRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberRange.js","names":[],"sources":["../../src/recipes/numberRange.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\n\nimport { labelRoom } from './input'\n\nconst HALF = [\n  'min-w-0 flex-1 bg-transparent text-tf-fg tf-writes tabular-nums',\n  'placeholder:text-tf-muted placeholder:opacity-0',\n  'data-readonly:text-tf-muted',\n  'disabled:cursor-not-allowed',\n  'outline-2 outline-solid outline-offset-2 outline-transparent',\n  '[appearance:textfield]',\n  '[&::-webkit-inner-spin-button]:appearance-none',\n  '[&::-webkit-outer-spin-button]:appearance-none',\n]\n\nconst numberRangeHalfRecipe = cva(HALF, {\n  compoundVariants: [\n    { at: 'from', class: 'pl-4', labelled: true, size: 'lg' },\n    { at: 'from', class: 'pl-4', labelled: true, size: 'md' },\n    { at: 'to', class: 'pr-4', labelled: true, size: 'lg' },\n    { at: 'to', class: 'pr-4', labelled: true, size: 'md' },\n    { class: labelRoom.lg, labelled: true, size: 'lg' },\n    { class: labelRoom.md, labelled: true, size: 'md' },\n  ],\n  defaultVariants: { at: 'from', labelled: true, size: defaultFieldSize },\n  variants: {\n    at: { from: 'pr-0 text-left', to: 'pl-0 text-left' },\n    labelled: { false: 'px-4 py-0 placeholder:opacity-100', true: '' },\n    size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n  },\n})\n\nconst numberRangeRecipe = cva('max-w-64')\n\nconst numberRangeDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'font-medium text-tf-muted tabular-nums',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: `${labelRoom.lg} text-tf-body-sm`, labelled: true, size: 'lg' },\n      { class: `${labelRoom.md} text-tf-body-sm`, labelled: true, size: 'md' },\n    ],\n    defaultVariants: { filled: false, labelled: true, size: defaultFieldSize },\n    variants: {\n      filled: { false: 'opacity-0', true: 'opacity-100' },\n      labelled: { false: 'py-0 text-tf-body-sm', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nexport { numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe }\n"],"mappings":";;;;AAkBA,MAAM,wBAAwB,IAAI;CAVhC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAGmC,GAAG;CACtC,kBAAkB;EAChB;GAAE,IAAI;GAAQ,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACxD;GAAE,IAAI;GAAQ,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACxD;GAAE,IAAI;GAAM,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACtD;GAAE,IAAI;GAAM,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACtD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;CACpD;CACA,iBAAiB;EAAE,IAAI;EAAQ,UAAU;EAAM,MAAA;CAAuB;CACtE,UAAU;EACR,IAAI;GAAE,MAAM;GAAkB,IAAI;EAAiB;EACnD,UAAU;GAAE,OAAO;GAAqC,MAAM;EAAG;EACjE,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,UAAU;AAExC,MAAM,wBAAwB,IAC5B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,GAAG,UAAU,GAAG;EAAmB,UAAU;EAAM,MAAM;CAAK,GACvE;EAAE,OAAO,GAAG,UAAU,GAAG;EAAmB,UAAU;EAAM,MAAM;CAAK,CACzE;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAwB,MAAM;EAAG;EACpD,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF"}
+{"version":3,"file":"numberRange.js","names":[],"sources":["../../src/recipes/numberRange.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\n\nimport { fieldFootRecipe, fieldRecipe, fieldRowRecipe } from './field'\nimport { labelRoom } from './input'\nimport { nebulaCloudLowRecipe, nebulaVeilRecipe } from './nebula'\n\nconst HALF = [\n  'min-w-0 flex-1 bg-transparent text-tf-fg tf-writes tabular-nums',\n  'placeholder:text-tf-muted placeholder:opacity-0',\n  'data-readonly:text-tf-muted',\n  'disabled:cursor-not-allowed',\n  'outline-2 outline-solid outline-offset-2 outline-transparent',\n  '[appearance:textfield]',\n  '[&::-webkit-inner-spin-button]:appearance-none',\n  '[&::-webkit-outer-spin-button]:appearance-none',\n]\n\nconst numberRangeHalfRecipe = cva(HALF, {\n  compoundVariants: [\n    { at: 'from', class: 'pl-4', labelled: true, size: 'lg' },\n    { at: 'from', class: 'pl-4', labelled: true, size: 'md' },\n    { at: 'to', class: 'pr-4', labelled: true, size: 'lg' },\n    { at: 'to', class: 'pr-4', labelled: true, size: 'md' },\n    { class: labelRoom.lg, labelled: true, size: 'lg' },\n    { class: labelRoom.md, labelled: true, size: 'md' },\n  ],\n  defaultVariants: { at: 'from', labelled: true, size: defaultFieldSize },\n  variants: {\n    at: { from: 'pr-0 text-left', to: 'pl-0 text-left' },\n    labelled: { false: 'px-4 py-0 placeholder:opacity-100', true: '' },\n    size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n  },\n})\n\nconst numberRangeRecipe = cva('max-w-64')\n\nconst numberRangeDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'font-medium text-tf-muted tabular-nums',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: `${labelRoom.lg} text-tf-body-sm`, labelled: true, size: 'lg' },\n      { class: `${labelRoom.md} text-tf-body-sm`, labelled: true, size: 'md' },\n    ],\n    defaultVariants: { filled: false, labelled: true, size: defaultFieldSize },\n    variants: {\n      filled: { false: 'opacity-0', true: 'opacity-100' },\n      labelled: { false: 'py-0 text-tf-body-sm', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nconst numberRangeAnatomy = anatomy({\n  cloud: { part: 'cloud', recipe: nebulaCloudLowRecipe, required: true },\n  dash: { part: 'dash', recipe: numberRangeDashRecipe, required: true },\n  foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n  nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: true },\n  root: { part: 'number-range', recipe: fieldRecipe, required: true },\n  row: { part: 'row', recipe: fieldRowRecipe, required: true },\n})\n\nexport { numberRangeAnatomy, numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe }\n"],"mappings":";;;;;;;AAqBA,MAAM,wBAAwB,IAAI;CAVhC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAGmC,GAAG;CACtC,kBAAkB;EAChB;GAAE,IAAI;GAAQ,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACxD;GAAE,IAAI;GAAQ,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACxD;GAAE,IAAI;GAAM,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACtD;GAAE,IAAI;GAAM,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACtD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;CACpD;CACA,iBAAiB;EAAE,IAAI;EAAQ,UAAU;EAAM,MAAA;CAAuB;CACtE,UAAU;EACR,IAAI;GAAE,MAAM;GAAkB,IAAI;EAAiB;EACnD,UAAU;GAAE,OAAO;GAAqC,MAAM;EAAG;EACjE,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,UAAU;AAExC,MAAM,wBAAwB,IAC5B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,GAAG,UAAU,GAAG;EAAmB,UAAU;EAAM,MAAM;CAAK,GACvE;EAAE,OAAO,GAAG,UAAU,GAAG;EAAmB,UAAU;EAAM,MAAM;CAAK,CACzE;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAwB,MAAM;EAAG;EACpD,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF;AAEA,MAAM,qBAAqB,QAAQ;CACjC,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAK;CACrE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAuB,UAAU;CAAK;CACpE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAgB,QAAQ;EAAa,UAAU;CAAK;CAClE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAgB,UAAU;CAAK;AAC7D,CAAC"}

package/dist/recipes/paper.d.ts

@@ -23,8 +23,61 @@ declare const paperBadgeRecipe: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const paperActionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const paperVariants: readonly ["plain", "elevated"];
-declare const paperTones: readonly ["accent", "success", "warning", "info", "danger"];
 declare const paperInsets: readonly ["padded", "flush", "roomy"];
+declare const paperAnatomy: {
+  readonly action: {
+    readonly part: "action";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly badge: {
+    readonly part: "badge";
+    readonly recipe: (props?: ({
+      headed?: boolean | null | undefined;
+      inset?: "roomy" | "padded" | "flush" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly body: {
+    readonly part: "body";
+    readonly recipe: (props?: ({
+      inset?: "roomy" | "padded" | "flush" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly cloud: {
+    readonly part: "cloud";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly header: {
+    readonly part: "header";
+    readonly recipe: (props?: ({
+      inset?: "roomy" | "padded" | "flush" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly nebula: {
+    readonly part: "nebula";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "paper";
+    readonly recipe: (props?: ({
+      tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+      variant?: "plain" | "elevated" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly rule: {
+    readonly part: "rule";
+    readonly recipe: (props?: ({
+      inset?: "roomy" | "padded" | "flush" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { type PaperInset, type PaperVariant, defaultPaperInset, defaultPaperTone, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperTones, paperVariants };
+export { type PaperInset, type PaperVariant, defaultPaperInset, defaultPaperTone, defaultPaperVariant, paperActionRecipe, paperAnatomy, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperVariants };
 //# sourceMappingURL=paper.d.ts.map