@techfides/ui-library-design 0.3.1 → 0.7.0

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

package/dist/recipes/paper.js

@@ -1,7 +1,9 @@
-import { toneBlend } from "../tone.js";
+import { anatomy } from "../anatomy.js";
 import { ruleFading } from "../parts/rule.js";
-import { defaultTone, tones } from "../parts/tone.js";
 import { surfaceLifted, surfaceSkin } from "../parts/surface.js";
+import { defaultTone } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
+import { nebulaCloudWideRecipe, nebulaVeilRecipe } from "./nebula.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/paper.ts
 const defaultPaperVariant = "plain";
@@ -71,13 +73,54 @@ const paperBadgeRecipe = cva("absolute", {
 });
 const paperActionRecipe = cva("-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4");
 const paperVariants = ["plain", "elevated"];
-const paperTones = tones;
 const paperInsets = [
 	"padded",
 	"flush",
 	"roomy"
 ];
+const paperAnatomy = anatomy({
+	action: {
+		part: "action",
+		recipe: paperActionRecipe,
+		required: false
+	},
+	badge: {
+		part: "badge",
+		recipe: paperBadgeRecipe,
+		required: false
+	},
+	body: {
+		part: "body",
+		recipe: paperBodyRecipe,
+		required: true
+	},
+	cloud: {
+		part: "cloud",
+		recipe: nebulaCloudWideRecipe,
+		required: false
+	},
+	header: {
+		part: "header",
+		recipe: paperHeaderRecipe,
+		required: false
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaVeilRecipe,
+		required: false
+	},
+	root: {
+		part: "paper",
+		recipe: paperRecipe,
+		required: true
+	},
+	rule: {
+		part: "rule",
+		recipe: paperRuleRecipe,
+		required: false
+	}
+});
 //#endregion
-export { defaultPaperInset, defaultPaperTone, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperTones, paperVariants };
+export { defaultPaperInset, defaultPaperTone, defaultPaperVariant, paperActionRecipe, paperAnatomy, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperVariants };
 
 //# sourceMappingURL=paper.js.map

package/dist/recipes/paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"paper.js","names":[],"sources":["../../src/recipes/paper.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\nimport { surfaceLifted, surfaceSkin } from '#parts/surface'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\ntype PaperVariant = 'plain' | 'elevated'\n\ntype PaperInset = 'padded' | 'flush' | 'roomy'\n\nconst defaultPaperVariant = 'plain' satisfies PaperVariant\n\nconst defaultPaperInset = 'padded' satisfies PaperInset\n\nconst defaultPaperTone = defaultTone\n\nconst paperBase = [\n  '@container relative w-full',\n  ...surfaceSkin,\n  'font-tf-body text-tf-body-sm font-medium text-tf-fg',\n]\n\nconst paperRecipe = cva(paperBase, {\n  defaultVariants: { tone: defaultPaperTone, variant: defaultPaperVariant },\n  variants: {\n    tone: toneBlend satisfies Record<Tone, string>,\n    variant: {\n      elevated: surfaceLifted.join(' '),\n      plain: '',\n    } satisfies Record<PaperVariant, string>,\n  },\n})\n\nconst GUTTER = 'px-4 @tf-panel:px-8'\n\nconst ROOMY_GUTTER = 'px-6 @tf-panel:px-14'\n\nconst RIBS = 'py-6 @tf-panel:py-8'\n\nconst ROOMY_RIBS = 'py-8 @tf-panel:py-14'\n\nconst paperBodyRecipe = cva('', {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: {\n      flush: RIBS,\n      padded: `${RIBS} ${GUTTER}`,\n      roomy: `${ROOMY_RIBS} ${ROOMY_GUTTER}`,\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst HEAD_ROW = 'min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]'\n\nconst paperHeaderRecipe = cva(\n  [`relative flex flex-wrap items-center justify-between gap-4 py-5`, HEAD_ROW],\n  {\n    defaultVariants: { inset: defaultPaperInset },\n    variants: {\n      inset: {\n        flush: GUTTER,\n        padded: GUTTER,\n        roomy: ROOMY_GUTTER,\n      } satisfies Record<PaperInset, string>,\n    },\n  },\n)\n\nconst paperRuleRecipe = cva(`absolute bottom-0 ${ruleFading}`, {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: {\n      flush: 'inset-x-4 @tf-panel:inset-x-8',\n      padded: 'inset-x-4 @tf-panel:inset-x-8',\n      roomy: 'inset-x-6 @tf-panel:inset-x-14',\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst paperBadgeRecipe = cva('absolute', {\n  defaultVariants: { headed: false, inset: defaultPaperInset },\n  variants: {\n    headed: { false: 'top-4', true: 'top-10 -translate-y-1/2' },\n    inset: {\n      flush: 'right-4 @tf-panel:right-8',\n      padded: 'right-4 @tf-panel:right-8',\n      roomy: 'right-6 @tf-panel:right-14',\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst paperActionRecipe = cva(\n  '-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4',\n)\n\nconst paperVariants = ['plain', 'elevated'] as const satisfies readonly PaperVariant[]\n\nconst paperTones = tones\n\nconst paperInsets = ['padded', 'flush', 'roomy'] as const satisfies readonly PaperInset[]\n\nexport {\n  type PaperInset,\n  type PaperVariant,\n  defaultPaperInset,\n  defaultPaperTone,\n  defaultPaperVariant,\n  paperActionRecipe,\n  paperBadgeRecipe,\n  paperBodyRecipe,\n  paperHeaderRecipe,\n  paperInsets,\n  paperRecipe,\n  paperRuleRecipe,\n  paperTones,\n  paperVariants,\n}\n"],"mappings":";;;;;;AAYA,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAEzB,MAAM,YAAY;CAChB;CACA,GAAG;CACH;AACF;AAEA,MAAM,cAAc,IAAI,WAAW;CACjC,iBAAiB;EAAE,MAAM;EAAkB,SAAS;CAAoB;CACxE,UAAU;EACR,MAAM;EACN,SAAS;GACP,UAAU,cAAc,KAAK,GAAG;GAChC,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,SAAS;AAEf,MAAM,eAAe;AAErB,MAAM,OAAO;AAIb,MAAM,kBAAkB,IAAI,IAAI;CAC9B,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ,GAAG,KAAK,GAAG;EACnB,OAAO,wBAAiB;CAC1B,EACF;AACF,CAAC;AAID,MAAM,oBAAoB,IACxB,CAAC,mEAAmE,8DAAQ,GAC5E;CACE,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,qBAAqB,cAAc;CAC7D,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,YAAY;CACvC,iBAAiB;EAAE,QAAQ;EAAO,OAAO;CAAkB;CAC3D,UAAU;EACR,QAAQ;GAAE,OAAO;GAAS,MAAM;EAA0B;EAC1D,OAAO;GACL,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,oBAAoB,IACxB,0EACF;AAEA,MAAM,gBAAgB,CAAC,SAAS,UAAU;AAE1C,MAAM,aAAa;AAEnB,MAAM,cAAc;CAAC;CAAU;CAAS;AAAO"}
+{"version":3,"file":"paper.js","names":[],"sources":["../../src/recipes/paper.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { ruleFading } from '#parts/rule'\nimport { surfaceLifted, surfaceSkin } from '#parts/surface'\nimport { defaultTone } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\nimport { nebulaCloudWideRecipe, nebulaVeilRecipe } from './nebula'\n\ntype PaperVariant = 'plain' | 'elevated'\n\ntype PaperInset = 'padded' | 'flush' | 'roomy'\n\nconst defaultPaperVariant = 'plain' satisfies PaperVariant\n\nconst defaultPaperInset = 'padded' satisfies PaperInset\n\nconst defaultPaperTone = defaultTone\n\nconst paperBase = [\n  '@container relative w-full',\n  ...surfaceSkin,\n  'font-tf-body text-tf-body-sm font-medium text-tf-fg',\n]\n\nconst paperRecipe = cva(paperBase, {\n  defaultVariants: { tone: defaultPaperTone, variant: defaultPaperVariant },\n  variants: {\n    tone: toneBlend satisfies Record<Tone, string>,\n    variant: {\n      elevated: surfaceLifted.join(' '),\n      plain: '',\n    } satisfies Record<PaperVariant, string>,\n  },\n})\n\nconst GUTTER = 'px-4 @tf-panel:px-8'\n\nconst ROOMY_GUTTER = 'px-6 @tf-panel:px-14'\n\nconst RIBS = 'py-6 @tf-panel:py-8'\n\nconst ROOMY_RIBS = 'py-8 @tf-panel:py-14'\n\nconst paperBodyRecipe = cva('', {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: {\n      flush: RIBS,\n      padded: `${RIBS} ${GUTTER}`,\n      roomy: `${ROOMY_RIBS} ${ROOMY_GUTTER}`,\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst HEAD_ROW = 'min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]'\n\nconst paperHeaderRecipe = cva(\n  [`relative flex flex-wrap items-center justify-between gap-4 py-5`, HEAD_ROW],\n  {\n    defaultVariants: { inset: defaultPaperInset },\n    variants: {\n      inset: {\n        flush: GUTTER,\n        padded: GUTTER,\n        roomy: ROOMY_GUTTER,\n      } satisfies Record<PaperInset, string>,\n    },\n  },\n)\n\nconst paperRuleRecipe = cva(`absolute bottom-0 ${ruleFading}`, {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: {\n      flush: 'inset-x-4 @tf-panel:inset-x-8',\n      padded: 'inset-x-4 @tf-panel:inset-x-8',\n      roomy: 'inset-x-6 @tf-panel:inset-x-14',\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst paperBadgeRecipe = cva('absolute', {\n  defaultVariants: { headed: false, inset: defaultPaperInset },\n  variants: {\n    headed: { false: 'top-4', true: 'top-10 -translate-y-1/2' },\n    inset: {\n      flush: 'right-4 @tf-panel:right-8',\n      padded: 'right-4 @tf-panel:right-8',\n      roomy: 'right-6 @tf-panel:right-14',\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst paperActionRecipe = cva(\n  '-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4',\n)\n\nconst paperVariants = ['plain', 'elevated'] as const satisfies readonly PaperVariant[]\n\nconst paperInsets = ['padded', 'flush', 'roomy'] as const satisfies readonly PaperInset[]\n\nconst paperAnatomy = anatomy({\n  action: { part: 'action', recipe: paperActionRecipe, required: false },\n  badge: { part: 'badge', recipe: paperBadgeRecipe, required: false },\n  body: { part: 'body', recipe: paperBodyRecipe, required: true },\n  cloud: { part: 'cloud', recipe: nebulaCloudWideRecipe, required: false },\n  header: { part: 'header', recipe: paperHeaderRecipe, required: false },\n  nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: false },\n  root: { part: 'paper', recipe: paperRecipe, required: true },\n  rule: { part: 'rule', recipe: paperRuleRecipe, required: false },\n})\n\nexport {\n  type PaperInset,\n  type PaperVariant,\n  defaultPaperInset,\n  defaultPaperTone,\n  defaultPaperVariant,\n  paperActionRecipe,\n  paperAnatomy,\n  paperBadgeRecipe,\n  paperBodyRecipe,\n  paperHeaderRecipe,\n  paperInsets,\n  paperRecipe,\n  paperRuleRecipe,\n  paperVariants,\n}\n"],"mappings":";;;;;;;;AAeA,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAEzB,MAAM,YAAY;CAChB;CACA,GAAG;CACH;AACF;AAEA,MAAM,cAAc,IAAI,WAAW;CACjC,iBAAiB;EAAE,MAAM;EAAkB,SAAS;CAAoB;CACxE,UAAU;EACR,MAAM;EACN,SAAS;GACP,UAAU,cAAc,KAAK,GAAG;GAChC,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,SAAS;AAEf,MAAM,eAAe;AAErB,MAAM,OAAO;AAIb,MAAM,kBAAkB,IAAI,IAAI;CAC9B,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ,GAAG,KAAK,GAAG;EACnB,OAAO,wBAAiB;CAC1B,EACF;AACF,CAAC;AAID,MAAM,oBAAoB,IACxB,CAAC,mEAAmE,8DAAQ,GAC5E;CACE,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,qBAAqB,cAAc;CAC7D,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,YAAY;CACvC,iBAAiB;EAAE,QAAQ;EAAO,OAAO;CAAkB;CAC3D,UAAU;EACR,QAAQ;GAAE,OAAO;GAAS,MAAM;EAA0B;EAC1D,OAAO;GACL,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,oBAAoB,IACxB,0EACF;AAEA,MAAM,gBAAgB,CAAC,SAAS,UAAU;AAE1C,MAAM,cAAc;CAAC;CAAU;CAAS;AAAO;AAE/C,MAAM,eAAe,QAAQ;CAC3B,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAmB,UAAU;CAAM;CACrE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAkB,UAAU;CAAM;CAClE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAuB,UAAU;CAAM;CACvE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAmB,UAAU;CAAM;CACrE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAM;CACpE,MAAM;EAAE,MAAM;EAAS,QAAQ;EAAa,UAAU;CAAK;CAC3D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;AACjE,CAAC"}

package/dist/recipes/progressBar.d.ts

@@ -2,6 +2,13 @@
 declare const progressBarTones: readonly ["accent", "success", "warning", "info", "danger"];
 declare const progressBarTrackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const progressBarRangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const progressBarAnatomy: {
+  readonly root: {
+    readonly part: "progress-bar";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe };
+export { progressBarAnatomy, progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe };
 //# sourceMappingURL=progressBar.d.ts.map

package/dist/recipes/progressBar.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { valueGlide } from "./motion.js";
 import { tones } from "../parts/tone.js";
 import { cva } from "class-variance-authority";
@@ -5,7 +6,12 @@ import { cva } from "class-variance-authority";
 const progressBarTones = tones;
 const progressBarTrackRecipe = cva("block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken");
 const progressBarRangeRecipe = cva(["block h-full rounded-tf-pill bg-tf-blend", ...valueGlide]);
+const progressBarAnatomy = anatomy({ root: {
+	part: "progress-bar",
+	recipe: progressBarTrackRecipe,
+	required: true
+} });
 //#endregion
-export { progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe };
+export { progressBarAnatomy, progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe };
 
 //# sourceMappingURL=progressBar.js.map

package/dist/recipes/progressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressBar.js","names":[],"sources":["../../src/recipes/progressBar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\nimport { valueGlide } from './motion'\n\nconst progressBarTones = tones\n\nconst progressBarTrackRecipe = cva('block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken')\n\nconst progressBarRangeRecipe = cva(['block h-full rounded-tf-pill bg-tf-blend', ...valueGlide])\n\nexport { progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe }\n"],"mappings":";;;;AAMA,MAAM,mBAAmB;AAEzB,MAAM,yBAAyB,IAAI,0DAA0D;AAE7F,MAAM,yBAAyB,IAAI,CAAC,4CAA4C,GAAG,UAAU,CAAC"}
+{"version":3,"file":"progressBar.js","names":[],"sources":["../../src/recipes/progressBar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { tones } from '#parts/tone'\n\nimport { valueGlide } from './motion'\n\nconst progressBarTones = tones\n\nconst progressBarTrackRecipe = cva('block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken')\n\nconst progressBarRangeRecipe = cva(['block h-full rounded-tf-pill bg-tf-blend', ...valueGlide])\n\nconst progressBarAnatomy = anatomy({\n  root: { part: 'progress-bar', recipe: progressBarTrackRecipe, required: true },\n})\n\nexport { progressBarAnatomy, progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe }\n"],"mappings":";;;;;AAOA,MAAM,mBAAmB;AAEzB,MAAM,yBAAyB,IAAI,0DAA0D;AAE7F,MAAM,yBAAyB,IAAI,CAAC,4CAA4C,GAAG,UAAU,CAAC;AAE9F,MAAM,qBAAqB,QAAQ,EACjC,MAAM;CAAE,MAAM;CAAgB,QAAQ;CAAwB,UAAU;AAAK,EAC/E,CAAC"}

package/dist/recipes/queue.d.ts

@@ -11,6 +11,38 @@ declare const queueAgeLabelRecipe: (props?: ({
 declare const queueAgeTrackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const queueAgeFillRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const queueDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueAnatomy: {
+  readonly age: {
+    readonly part: "age";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly dot: {
+    readonly part: "dot";
+    readonly recipe: (props?: 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: true;
+  };
+  readonly lead: {
+    readonly part: "lead";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly rank: {
+    readonly part: "rank";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "queue";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { queueAgeFillRecipe, queueAgeLabelRecipe, queueAgeRecipe, queueAgeTrackRecipe, queueDotRecipe, queueHintRecipe, queueLeadRecipe, queueRecipe, queueRowRecipe, queueTextRecipe };
+export { queueAgeFillRecipe, queueAgeLabelRecipe, queueAgeRecipe, queueAgeTrackRecipe, queueAnatomy, queueDotRecipe, queueHintRecipe, queueLeadRecipe, queueRecipe, queueRowRecipe, queueTextRecipe };
 //# sourceMappingURL=queue.d.ts.map