@techfides/ui-library-design 0.3.1 → 0.7.0

package/dist/recipes/heartbeat.d.ts

@@ -1,7 +1,6 @@
 //#region src/recipes/heartbeat.d.ts
 declare const heartbeatStates: readonly ["beating", "late", "silent"];
 type HeartbeatState = (typeof heartbeatStates)[number];
-declare const defaultHeartbeatState = "beating";
 declare const heartbeatRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const heartbeatRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const heartbeatMarkRecipe: (props?: ({
@@ -18,6 +17,57 @@ declare const heartbeatBeatsRecipe: (props?: import("class-variance-authority/ty
 declare const heartbeatBeatRecipe: (props?: ({
   flagged?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const heartbeatAnatomy: {
+  readonly beats: {
+    readonly part: "beats";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly dot: {
+    readonly part: "dot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly hint: {
+    readonly part: "hint";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly label: {
+    readonly part: "label";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: ({
+      state?: "beating" | "late" | "silent" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly ring: {
+    readonly part: "ring";
+    readonly recipe: (props?: ({
+      state?: "beating" | "late" | "silent" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "heartbeat";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly row: {
+    readonly part: "row";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly text: {
+    readonly part: "text";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type HeartbeatState, defaultHeartbeatState, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
+export { type HeartbeatState, heartbeatAnatomy, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
 //# sourceMappingURL=heartbeat.d.ts.map

package/dist/recipes/heartbeat.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { toneBlend } from "../tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/heartbeat.ts
@@ -6,11 +7,10 @@ const heartbeatStates = [
 	"late",
 	"silent"
 ];
-const defaultHeartbeatState = "beating";
 const heartbeatRecipe = cva(["flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6", "font-tf-body text-tf-fg"]);
 const heartbeatRowRecipe = cva("flex items-center gap-3");
 const heartbeatMarkRecipe = cva("relative flex size-tf-mark-dot flex-none", {
-	defaultVariants: { state: defaultHeartbeatState },
+	defaultVariants: { state: "beating" },
 	variants: { state: {
 		beating: toneBlend.success,
 		late: toneBlend.warning,
@@ -18,7 +18,7 @@ const heartbeatMarkRecipe = cva("relative flex size-tf-mark-dot flex-none", {
 	} }
 });
 const heartbeatRingRecipe = cva(["absolute inset-0 rounded-tf-pill bg-tf-blend"], {
-	defaultVariants: { state: defaultHeartbeatState },
+	defaultVariants: { state: "beating" },
 	variants: { state: {
 		beating: "tf-pinging",
 		late: "tf-pinging",
@@ -37,7 +37,54 @@ const heartbeatBeatRecipe = cva("flex-1 rounded-tf-inline", {
 		true: "bg-tf-warning-hi"
 	} }
 });
+const heartbeatAnatomy = anatomy({
+	beats: {
+		part: "beats",
+		recipe: heartbeatBeatsRecipe,
+		required: false
+	},
+	dot: {
+		part: "dot",
+		recipe: heartbeatDotRecipe,
+		required: true
+	},
+	hint: {
+		part: "hint",
+		recipe: heartbeatHintRecipe,
+		required: false
+	},
+	label: {
+		part: "label",
+		recipe: heartbeatLabelRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: heartbeatMarkRecipe,
+		required: true
+	},
+	ring: {
+		part: "ring",
+		recipe: heartbeatRingRecipe,
+		required: true
+	},
+	root: {
+		part: "heartbeat",
+		recipe: heartbeatRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: heartbeatRowRecipe,
+		required: true
+	},
+	text: {
+		part: "text",
+		recipe: heartbeatTextRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultHeartbeatState, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
+export { heartbeatAnatomy, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
 
 //# sourceMappingURL=heartbeat.js.map

package/dist/recipes/heartbeat.js.map

@@ -1 +1 @@
-{"version":3,"file":"heartbeat.js","names":[],"sources":["../../src/recipes/heartbeat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { toneBlend } from '#tone'\n\nconst heartbeatStates = ['beating', 'late', 'silent'] as const\n\ntype HeartbeatState = (typeof heartbeatStates)[number]\n\nconst defaultHeartbeatState = 'beating' satisfies HeartbeatState\n\nconst heartbeatRecipe = cva([\n  'flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6',\n  'font-tf-body text-tf-fg',\n])\n\nconst heartbeatRowRecipe = cva('flex items-center gap-3')\n\nconst heartbeatMarkRecipe = cva('relative flex size-tf-mark-dot flex-none', {\n  defaultVariants: { state: defaultHeartbeatState },\n  variants: {\n    state: {\n      beating: toneBlend.success,\n      late: toneBlend.warning,\n      silent: toneBlend.danger,\n    },\n  },\n})\n\nconst heartbeatRingRecipe = cva(['absolute inset-0 rounded-tf-pill bg-tf-blend'], {\n  defaultVariants: { state: defaultHeartbeatState },\n  variants: {\n    state: {\n      beating: 'tf-pinging',\n      late: 'tf-pinging',\n      silent: '',\n    } satisfies Record<HeartbeatState, string>,\n  },\n})\n\nconst heartbeatDotRecipe = cva(['relative size-tf-mark-dot rounded-tf-pill bg-tf-blend'])\n\nconst heartbeatTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst heartbeatLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst heartbeatHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst heartbeatBeatsRecipe = cva('flex h-9 items-end gap-0.5')\n\nconst heartbeatBeatRecipe = cva('flex-1 rounded-tf-inline', {\n  defaultVariants: { flagged: false },\n  variants: {\n    flagged: {\n      false: 'bg-tf-accent-surface',\n      true: 'bg-tf-warning-hi',\n    },\n  },\n})\n\nexport {\n  type HeartbeatState,\n  defaultHeartbeatState,\n  heartbeatBeatRecipe,\n  heartbeatBeatsRecipe,\n  heartbeatDotRecipe,\n  heartbeatHintRecipe,\n  heartbeatLabelRecipe,\n  heartbeatMarkRecipe,\n  heartbeatRecipe,\n  heartbeatRingRecipe,\n  heartbeatRowRecipe,\n  heartbeatStates,\n  heartbeatTextRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,kBAAkB;CAAC;CAAW;CAAQ;AAAQ;AAIpD,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,IAAI,CAC1B,yDACA,yBACF,CAAC;AAED,MAAM,qBAAqB,IAAI,yBAAyB;AAExD,MAAM,sBAAsB,IAAI,4CAA4C;CAC1E,iBAAiB,EAAE,OAAO,sBAAsB;CAChD,UAAU,EACR,OAAO;EACL,SAAS,UAAU;EACnB,MAAM,UAAU;EAChB,QAAQ,UAAU;CACpB,EACF;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAAC,8CAA8C,GAAG;CAChF,iBAAiB,EAAE,OAAO,sBAAsB;CAChD,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;CACV,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAAC,uDAAuD,CAAC;AAExF,MAAM,sBAAsB,IAAI,oCAAoC;AAEpE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,sBAAsB,IAAI,kCAAkC;AAElE,MAAM,uBAAuB,IAAI,4BAA4B;AAE7D,MAAM,sBAAsB,IAAI,4BAA4B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC"}
+{"version":3,"file":"heartbeat.js","names":[],"sources":["../../src/recipes/heartbeat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { toneBlend } from '#tone'\n\nconst heartbeatStates = ['beating', 'late', 'silent'] as const\n\ntype HeartbeatState = (typeof heartbeatStates)[number]\n\nconst heartbeatRecipe = cva([\n  'flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6',\n  'font-tf-body text-tf-fg',\n])\n\nconst heartbeatRowRecipe = cva('flex items-center gap-3')\n\nconst heartbeatMarkRecipe = cva('relative flex size-tf-mark-dot flex-none', {\n  defaultVariants: { state: 'beating' },\n  variants: {\n    state: {\n      beating: toneBlend.success,\n      late: toneBlend.warning,\n      silent: toneBlend.danger,\n    },\n  },\n})\n\nconst heartbeatRingRecipe = cva(['absolute inset-0 rounded-tf-pill bg-tf-blend'], {\n  defaultVariants: { state: 'beating' },\n  variants: {\n    state: {\n      beating: 'tf-pinging',\n      late: 'tf-pinging',\n      silent: '',\n    } satisfies Record<HeartbeatState, string>,\n  },\n})\n\nconst heartbeatDotRecipe = cva(['relative size-tf-mark-dot rounded-tf-pill bg-tf-blend'])\n\nconst heartbeatTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst heartbeatLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst heartbeatHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst heartbeatBeatsRecipe = cva('flex h-9 items-end gap-0.5')\n\nconst heartbeatBeatRecipe = cva('flex-1 rounded-tf-inline', {\n  defaultVariants: { flagged: false },\n  variants: {\n    flagged: {\n      false: 'bg-tf-accent-surface',\n      true: 'bg-tf-warning-hi',\n    },\n  },\n})\n\nconst heartbeatAnatomy = anatomy({\n  beats: { part: 'beats', recipe: heartbeatBeatsRecipe, required: false },\n  dot: { part: 'dot', recipe: heartbeatDotRecipe, required: true },\n  hint: { part: 'hint', recipe: heartbeatHintRecipe, required: false },\n  label: { part: 'label', recipe: heartbeatLabelRecipe, required: true },\n  mark: { part: 'mark', recipe: heartbeatMarkRecipe, required: true },\n  ring: { part: 'ring', recipe: heartbeatRingRecipe, required: true },\n  root: { part: 'heartbeat', recipe: heartbeatRecipe, required: true },\n  row: { part: 'row', recipe: heartbeatRowRecipe, required: true },\n  text: { part: 'text', recipe: heartbeatTextRecipe, required: true },\n})\n\nexport {\n  type HeartbeatState,\n  heartbeatAnatomy,\n  heartbeatBeatRecipe,\n  heartbeatBeatsRecipe,\n  heartbeatDotRecipe,\n  heartbeatHintRecipe,\n  heartbeatLabelRecipe,\n  heartbeatMarkRecipe,\n  heartbeatRecipe,\n  heartbeatRingRecipe,\n  heartbeatRowRecipe,\n  heartbeatStates,\n  heartbeatTextRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,kBAAkB;CAAC;CAAW;CAAQ;AAAQ;AAIpD,MAAM,kBAAkB,IAAI,CAC1B,yDACA,yBACF,CAAC;AAED,MAAM,qBAAqB,IAAI,yBAAyB;AAExD,MAAM,sBAAsB,IAAI,4CAA4C;CAC1E,iBAAiB,EAAE,OAAO,UAAU;CACpC,UAAU,EACR,OAAO;EACL,SAAS,UAAU;EACnB,MAAM,UAAU;EAChB,QAAQ,UAAU;CACpB,EACF;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAAC,8CAA8C,GAAG;CAChF,iBAAiB,EAAE,OAAO,UAAU;CACpC,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;CACV,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAAC,uDAAuD,CAAC;AAExF,MAAM,sBAAsB,IAAI,oCAAoC;AAEpE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,sBAAsB,IAAI,kCAAkC;AAElE,MAAM,uBAAuB,IAAI,4BAA4B;AAE7D,MAAM,sBAAsB,IAAI,4BAA4B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,QAAQ;CAC/B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAM;CACtE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAoB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAM;CACnE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAK;CACrE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAK;CAClE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAK;CAClE,MAAM;EAAE,MAAM;EAAa,QAAQ;EAAiB,UAAU;CAAK;CACnE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAoB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAK;AACpE,CAAC"}

package/dist/recipes/ink.d.ts

@@ -0,0 +1,11 @@
+//#region src/recipes/ink.d.ts
+declare const inkAnatomy: {
+  readonly root: {
+    readonly part: "ink";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
+//#endregion
+export { inkAnatomy };
+//# sourceMappingURL=ink.d.ts.map

package/dist/recipes/ink.js

@@ -0,0 +1,13 @@
+import { anatomy } from "../anatomy.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/ink.ts
+const inkRecipe = cva("tf-ink-well");
+const inkAnatomy = anatomy({ root: {
+	part: "ink",
+	recipe: inkRecipe,
+	required: true
+} });
+//#endregion
+export { inkAnatomy };
+
+//# sourceMappingURL=ink.js.map

package/dist/recipes/ink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ink.js","names":[],"sources":["../../src/recipes/ink.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst inkRecipe = cva('tf-ink-well')\n\nconst inkAnatomy = anatomy({\n  root: { part: 'ink', recipe: inkRecipe, required: true },\n})\n\nexport { inkAnatomy }\n"],"mappings":";;;AAIA,MAAM,YAAY,IAAI,aAAa;AAEnC,MAAM,aAAa,QAAQ,EACzB,MAAM;CAAE,MAAM;CAAO,QAAQ;CAAW,UAAU;AAAK,EACzD,CAAC"}

package/dist/recipes/input.d.ts

@@ -12,6 +12,60 @@ declare const inputRecipe: (props?: ({
   size?: "md" | "lg" | null | undefined;
   trailing?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const inputAnatomy: {
+  readonly cloud: {
+    readonly part: "cloud";
+    readonly recipe: (props?: 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 leading: {
+    readonly part: "leading";
+    readonly recipe: (props?: 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: true;
+  };
+  readonly root: {
+    readonly part: "input";
+    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;
+  };
+  readonly spinner: {
+    readonly part: "spinner";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly trailing: {
+    readonly part: "trailing";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly unit: {
+    readonly part: "unit";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { type InputType, TRAILING_INSET, inputRecipe, inputTypes, labelRoom };
+export { type InputType, TRAILING_INSET, inputAnatomy, inputRecipe, inputTypes, labelRoom };
 //# sourceMappingURL=input.d.ts.map

package/dist/recipes/input.js

@@ -1,5 +1,8 @@
-import "../control.js";
+import { anatomy } from "../anatomy.js";
 import { controlFocus, controlInert } from "../parts/control.js";
+import { nebulaCloudLowRecipe, nebulaVeilRecipe } from "./nebula.js";
+import "../control.js";
+import { fieldFootRecipe, fieldRecipe, fieldRowRecipe, fieldUnitRecipe, leadingRecipe, trailingRecipe } from "./field.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/input.ts
 const inputTypes = [
@@ -84,7 +87,54 @@ const inputRecipe = cva([
 		}
 	}
 });
+const inputAnatomy = anatomy({
+	cloud: {
+		part: "cloud",
+		recipe: nebulaCloudLowRecipe,
+		required: true
+	},
+	foot: {
+		part: "foot",
+		recipe: fieldFootRecipe,
+		required: true
+	},
+	leading: {
+		part: "leading",
+		recipe: leadingRecipe,
+		required: false
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaVeilRecipe,
+		required: true
+	},
+	root: {
+		part: "input",
+		recipe: fieldRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: fieldRowRecipe,
+		required: true
+	},
+	spinner: {
+		part: "spinner",
+		recipe: trailingRecipe,
+		required: false
+	},
+	trailing: {
+		part: "trailing",
+		recipe: trailingRecipe,
+		required: false
+	},
+	unit: {
+		part: "unit",
+		recipe: fieldUnitRecipe,
+		required: false
+	}
+});
 //#endregion
-export { TRAILING_INSET, inputRecipe, inputTypes, labelRoom };
+export { TRAILING_INSET, inputAnatomy, inputRecipe, inputTypes, labelRoom };
 
 //# sourceMappingURL=input.js.map

package/dist/recipes/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/recipes/input.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport { controlFocus, controlInert } from '#parts/control'\n\nconst inputTypes = ['text', 'email', 'tel', 'url', 'search', 'password'] as const\n\ntype InputType = (typeof inputTypes)[number]\n\nconst INPUT_INSET = 'px-4'\nconst LEADING_INSET = 'pl-13'\nconst TRAILING_INSET = 'pr-13'\n\nconst labelRoom = {\n  lg: 'pt-6 pb-2',\n  md: 'pt-5 pb-1',\n} satisfies Record<FieldSize, string>\n\nconst inputSurface = [\n  'size-full bg-transparent text-tf-fg tf-writes',\n  'placeholder:text-tf-muted placeholder:opacity-0',\n  'data-readonly:text-tf-muted',\n  'disabled:cursor-not-allowed',\n]\n\nconst inputRecipe = cva([...inputSurface, ...controlFocus, ...controlInert], {\n  compoundVariants: [\n    { class: labelRoom.lg, labelled: true, size: 'lg' },\n    { class: labelRoom.md, labelled: true, size: 'md' },\n    { class: INPUT_INSET, leading: false, trailing: false },\n    { class: `${LEADING_INSET} pr-3`, leading: true, trailing: false },\n    { class: `${TRAILING_INSET} pl-4`, leading: false, trailing: true },\n    { class: `${LEADING_INSET} ${TRAILING_INSET}`, leading: true, trailing: true },\n  ],\n  defaultVariants: {\n    labelled: true,\n    leading: false,\n    size: defaultFieldSize,\n    trailing: false,\n  },\n  variants: {\n    labelled: { false: 'placeholder:opacity-100', true: '' },\n    leading: { false: '', true: '' },\n    size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    trailing: { false: '', true: '' },\n  },\n})\n\nexport { type InputType, inputRecipe, inputTypes, labelRoom, TRAILING_INSET }\n"],"mappings":";;;;AAMA,MAAM,aAAa;CAAC;CAAQ;CAAS;CAAO;CAAO;CAAU;AAAU;AAIvE,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAEvB,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;AACN;AASA,MAAM,cAAc,IAAI;CAAC,GAAG;EAN1B;EACA;EACA;EACA;CAGqC;CAAG,GAAG;CAAc,GAAG;AAAY,GAAG;CAC3E,kBAAkB;EAChB;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO;GAAa,SAAS;GAAO,UAAU;EAAM;EACtD;GAAE,OAAO,GAAG,cAAc;GAAQ,SAAS;GAAM,UAAU;EAAM;EACjE;GAAE,OAAO,GAAG,eAAe;GAAQ,SAAS;GAAO,UAAU;EAAK;EAClE;GAAE,OAAO,GAAG,cAAc,GAAG;GAAkB,SAAS;GAAM,UAAU;EAAK;CAC/E;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,MAAA;EACA,UAAU;CACZ;CACA,UAAU;EACR,UAAU;GAAE,OAAO;GAA2B,MAAM;EAAG;EACvD,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;EAC/B,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;EACvB,UAAU;GAAE,OAAO;GAAI,MAAM;EAAG;CAClC;AACF,CAAC"}
+{"version":3,"file":"input.js","names":[],"sources":["../../src/recipes/input.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport { controlFocus, controlInert } from '#parts/control'\n\nimport {\n  fieldFootRecipe,\n  fieldRecipe,\n  fieldRowRecipe,\n  fieldUnitRecipe,\n  leadingRecipe,\n  trailingRecipe,\n} from './field'\nimport { nebulaCloudLowRecipe, nebulaVeilRecipe } from './nebula'\n\nconst inputTypes = ['text', 'email', 'tel', 'url', 'search', 'password'] as const\n\ntype InputType = (typeof inputTypes)[number]\n\nconst INPUT_INSET = 'px-4'\nconst LEADING_INSET = 'pl-13'\nconst TRAILING_INSET = 'pr-13'\n\nconst labelRoom = {\n  lg: 'pt-6 pb-2',\n  md: 'pt-5 pb-1',\n} satisfies Record<FieldSize, string>\n\nconst inputSurface = [\n  'size-full bg-transparent text-tf-fg tf-writes',\n  'placeholder:text-tf-muted placeholder:opacity-0',\n  'data-readonly:text-tf-muted',\n  'disabled:cursor-not-allowed',\n]\n\nconst inputRecipe = cva([...inputSurface, ...controlFocus, ...controlInert], {\n  compoundVariants: [\n    { class: labelRoom.lg, labelled: true, size: 'lg' },\n    { class: labelRoom.md, labelled: true, size: 'md' },\n    { class: INPUT_INSET, leading: false, trailing: false },\n    { class: `${LEADING_INSET} pr-3`, leading: true, trailing: false },\n    { class: `${TRAILING_INSET} pl-4`, leading: false, trailing: true },\n    { class: `${LEADING_INSET} ${TRAILING_INSET}`, leading: true, trailing: true },\n  ],\n  defaultVariants: {\n    labelled: true,\n    leading: false,\n    size: defaultFieldSize,\n    trailing: false,\n  },\n  variants: {\n    labelled: { false: 'placeholder:opacity-100', true: '' },\n    leading: { false: '', true: '' },\n    size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    trailing: { false: '', true: '' },\n  },\n})\n\nconst inputAnatomy = anatomy({\n  cloud: { part: 'cloud', recipe: nebulaCloudLowRecipe, required: true },\n  foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n  leading: { part: 'leading', recipe: leadingRecipe, required: false },\n  nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: true },\n  root: { part: 'input', recipe: fieldRecipe, required: true },\n  row: { part: 'row', recipe: fieldRowRecipe, required: true },\n  spinner: { part: 'spinner', recipe: trailingRecipe, required: false },\n  trailing: { part: 'trailing', recipe: trailingRecipe, required: false },\n  unit: { part: 'unit', recipe: fieldUnitRecipe, required: false },\n})\n\nexport { type InputType, inputAnatomy, inputRecipe, inputTypes, labelRoom, TRAILING_INSET }\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAa;CAAC;CAAQ;CAAS;CAAO;CAAO;CAAU;AAAU;AAIvE,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAEvB,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;AACN;AASA,MAAM,cAAc,IAAI;CAAC,GAAG;EAN1B;EACA;EACA;EACA;CAGqC;CAAG,GAAG;CAAc,GAAG;AAAY,GAAG;CAC3E,kBAAkB;EAChB;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO;GAAa,SAAS;GAAO,UAAU;EAAM;EACtD;GAAE,OAAO,GAAG,cAAc;GAAQ,SAAS;GAAM,UAAU;EAAM;EACjE;GAAE,OAAO,GAAG,eAAe;GAAQ,SAAS;GAAO,UAAU;EAAK;EAClE;GAAE,OAAO,GAAG,cAAc,GAAG;GAAkB,SAAS;GAAM,UAAU;EAAK;CAC/E;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,MAAA;EACA,UAAU;CACZ;CACA,UAAU;EACR,UAAU;GAAE,OAAO;GAA2B,MAAM;EAAG;EACvD,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;EAC/B,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;EACvB,UAAU;GAAE,OAAO;GAAI,MAAM;EAAG;CAClC;AACF,CAAC;AAED,MAAM,eAAe,QAAQ;CAC3B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAsB,UAAU;CAAK;CACrE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAM;CACnE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAS,QAAQ;EAAa,UAAU;CAAK;CAC3D,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAgB,UAAU;CAAK;CAC3D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAgB,UAAU;CAAM;CACpE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAM;CACtE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAM;AACjE,CAAC"}

package/dist/recipes/listItem.d.ts

@@ -1,6 +1,23 @@
 //#region src/recipes/listItem.d.ts
 declare const listItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const listItemStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const listItemAnatomy: {
+  readonly root: {
+    readonly part: "list-item";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly stack: {
+    readonly part: "stack";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly trailing: {
+    readonly part: "trailing";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { listItemRecipe, listItemStackRecipe };
+export { listItemAnatomy, listItemRecipe, listItemStackRecipe };
 //# sourceMappingURL=listItem.d.ts.map

package/dist/recipes/listItem.js

@@ -1,8 +1,27 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/listItem.ts
 const listItemRecipe = cva("flex min-w-0 items-center gap-4");
 const listItemStackRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
+const listItemTrailingRecipe = cva("flex-none");
+const listItemAnatomy = anatomy({
+	root: {
+		part: "list-item",
+		recipe: listItemRecipe,
+		required: true
+	},
+	stack: {
+		part: "stack",
+		recipe: listItemStackRecipe,
+		required: true
+	},
+	trailing: {
+		part: "trailing",
+		recipe: listItemTrailingRecipe,
+		required: false
+	}
+});
 //#endregion
-export { listItemRecipe, listItemStackRecipe };
+export { listItemAnatomy, listItemRecipe, listItemStackRecipe };
 
 //# sourceMappingURL=listItem.js.map

package/dist/recipes/listItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","names":[],"sources":["../../src/recipes/listItem.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst listItemRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst listItemStackRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nexport { listItemRecipe, listItemStackRecipe }\n"],"mappings":";;AAEA,MAAM,iBAAiB,IAAI,iCAAiC;AAE5D,MAAM,sBAAsB,IAAI,oCAAoC"}
+{"version":3,"file":"listItem.js","names":[],"sources":["../../src/recipes/listItem.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst listItemRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst listItemStackRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst listItemTrailingRecipe = cva('flex-none')\n\nconst listItemAnatomy = anatomy({\n  root: { part: 'list-item', recipe: listItemRecipe, required: true },\n  stack: { part: 'stack', recipe: listItemStackRecipe, required: true },\n  trailing: { part: 'trailing', recipe: listItemTrailingRecipe, required: false },\n})\n\nexport { listItemAnatomy, listItemRecipe, listItemStackRecipe }\n"],"mappings":";;;AAIA,MAAM,iBAAiB,IAAI,iCAAiC;AAE5D,MAAM,sBAAsB,IAAI,oCAAoC;AAEpE,MAAM,yBAAyB,IAAI,WAAW;AAE9C,MAAM,kBAAkB,QAAQ;CAC9B,MAAM;EAAE,MAAM;EAAa,QAAQ;EAAgB,UAAU;CAAK;CAClE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAqB,UAAU;CAAK;CACpE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAwB,UAAU;CAAM;AAChF,CAAC"}

package/dist/recipes/listbox.d.ts

@@ -1,5 +1,4 @@
 //#region src/recipes/listbox.d.ts
-type ListboxMark = 'lit' | 'chosen';
 declare const listboxRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const listboxLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const listboxItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
@@ -7,6 +6,27 @@ declare const listboxMarkRecipe: (props?: ({
   mark?: "lit" | "chosen" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const listboxEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const listboxAnatomy: {
+  readonly held: {
+    readonly part: "held";
+    readonly recipe: (props?: ({
+      mark?: "lit" | "chosen" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: ({
+      mark?: "lit" | "chosen" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "listbox";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type ListboxMark, listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
+export { listboxAnatomy, listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
 //# sourceMappingURL=listbox.d.ts.map

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