@techfides/ui-library-design 0.3.1 → 0.7.0

package/dist/recipes/datePicker.d.ts

@@ -34,6 +34,67 @@ declare const datePickerFootRecipe: (props?: import("class-variance-authority/ty
 declare const datePickerPresetRecipe: (props?: ({
   current?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const datePickerAnatomy: {
+  readonly body: {
+    readonly part: "body";
+    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: false;
+  };
+  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: true;
+  };
+  readonly presets: {
+    readonly part: "presets";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly rangeLabel: {
+    readonly part: "range-label";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "date-picker";
+    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?: ({
+      ranged?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly rule: {
+    readonly part: "rule";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly views: {
+    readonly part: "views";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type DatePickerMode, type DatePickerRangePreset, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
+export { type DatePickerMode, type DatePickerRangePreset, datePickerAnatomy, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
 //# sourceMappingURL=datePicker.d.ts.map

package/dist/recipes/datePicker.js

@@ -1,8 +1,9 @@
-import "../control.js";
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, controlQuiet, controlQuietIcon, controlReach } from "../parts/control.js";
 import { ruleQuiet } from "../parts/rule.js";
+import "../control.js";
 import { eyebrowQuiet } from "../parts/eyebrow.js";
-import { trailingActionRecipe } from "./field.js";
+import { fieldFootRecipe, fieldRecipe, leadingRecipe, trailingActionRecipe } from "./field.js";
 import { TRAILING_INSET, labelRoom } from "./input.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/datePicker.ts
@@ -160,7 +161,59 @@ const datePickerPresetRecipe = cva([
 		true: "bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended"
 	} }
 });
+const datePickerAnatomy = anatomy({
+	body: {
+		part: "body",
+		recipe: datePickerBodyRecipe,
+		required: true
+	},
+	dash: {
+		part: "dash",
+		recipe: datePickerDashRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: fieldFootRecipe,
+		required: true
+	},
+	leading: {
+		part: "leading",
+		recipe: leadingRecipe,
+		required: true
+	},
+	presets: {
+		part: "presets",
+		recipe: datePickerFootRecipe,
+		required: false
+	},
+	rangeLabel: {
+		part: "range-label",
+		recipe: datePickerRangeTextRecipe,
+		required: true
+	},
+	root: {
+		part: "date-picker",
+		recipe: fieldRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: datePickerRowRecipe,
+		required: true
+	},
+	rule: {
+		part: "rule",
+		recipe: datePickerRuleRecipe,
+		required: true
+	},
+	views: {
+		part: "views",
+		recipe: datePickerViewsRecipe,
+		required: true
+	}
+});
 //#endregion
-export { datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
+export { datePickerAnatomy, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
 
 //# sourceMappingURL=datePicker.js.map

package/dist/recipes/datePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/recipes/datePicker.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport {\n  controlInert,\n  controlPress,\n  controlQuiet,\n  controlQuietIcon,\n  controlReach,\n} from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { ruleQuiet } from '#parts/rule'\n\nimport { trailingActionRecipe } from './field'\nimport { labelRoom, TRAILING_INSET } from './input'\n\ntype DatePickerMode = 'single' | 'range'\n\nconst defaultDatePickerMode = 'single' satisfies DatePickerMode\n\nconst datePickerModes = ['single', 'range'] as const satisfies readonly DatePickerMode[]\n\ntype DatePickerRangePreset =\n  | 'thisWeek'\n  | 'lastWeek'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisQuarter'\n  | 'lastQuarter'\n  | 'thisYear'\n  | 'lastYear'\n  | 'last3Days'\n  | 'last7Days'\n  | 'last14Days'\n  | 'last30Days'\n  | 'last90Days'\n\nconst datePickerRangePresets = [\n  'thisWeek',\n  'lastWeek',\n  'thisMonth',\n  'lastMonth',\n  'thisQuarter',\n  'lastQuarter',\n  'thisYear',\n  'lastYear',\n  'last3Days',\n  'last7Days',\n  'last14Days',\n  'last30Days',\n  'last90Days',\n] as const satisfies readonly DatePickerRangePreset[]\n\nconst datePickerRowRecipe = cva(\n  [\n    'data-[state=open]:bg-tf-sunken-hi data-[state=open]:tf-edge-lit',\n    'data-[state=open]:**:data-[part=leading]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=leading]:stroke-tf-ink',\n    'data-[state=open]:**:data-[part=trigger]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=trigger]:text-tf-accent-hi',\n    'reached:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=dash]:opacity-100',\n    'reached:**:data-[part=dash]:delay-(--tf-duration-1)',\n  ],\n  {\n    defaultVariants: { ranged: false },\n    variants: {\n      ranged: { false: '', true: 'w-fit max-w-full min-w-60' },\n    },\n  },\n)\n\nconst datePickerTriggerRecipe = cva([trailingActionRecipe(), 'data-[state=open]:rotate-180'])\n\nconst datePickerDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'text-tf-body-sm font-medium text-tf-muted',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: labelRoom.lg, labelled: true, size: 'lg' },\n      { class: labelRoom.md, 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', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nconst TRIGGER_ROOM = TRAILING_INSET\n\nconst datePickerStartRecipe = cva('field-sizing-content h-full w-auto min-w-36 pr-0 tabular-nums')\n\nconst datePickerEndRecipe = cva([\n  'field-sizing-content h-full w-auto min-w-36 pl-0 tabular-nums',\n  TRIGGER_ROOM,\n])\n\nconst datePickerValueRecipe = cva(['tabular-nums', TRIGGER_ROOM])\n\nconst datePickerContentRecipe = cva([\n  'w-tf-panel max-w-[calc(100vw-2rem)] overflow-hidden px-0',\n  'blend-tf-accent',\n])\n\nconst datePickerViewsRecipe = cva('flex min-h-(--container-tf-panel) flex-col')\n\nconst datePickerViewRecipe = cva('flex flex-1 flex-col tf-arrives motion-reduce:transition-none')\n\nconst datePickerHeadRecipe = cva('relative flex flex-none items-center justify-between gap-2 p-2')\n\nconst datePickerRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleQuiet}`)\n\nconst datePickerNavRecipe = cva(controlQuietIcon)\n\nconst datePickerViewTriggerRecipe = cva([\n  'inline-flex h-tf-control-sm items-center gap-2 rounded-tf-control px-3',\n  'font-tf-display text-tf-body-sm font-medium text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst PAGING = [\n  'data-[going=forward]:[--tf-page-from:calc(var(--spacing)*4)]',\n  'data-[going=back]:[--tf-page-from:calc(var(--spacing)*-4)]',\n  'data-[step=a]:motion-safe:animate-tf-page',\n  'data-[step=b]:motion-safe:animate-tf-page-again',\n]\n\nconst datePickerRangeTextRecipe = cva([\n  'inline-flex min-w-36 items-center justify-center gap-2',\n  ...PAGING,\n])\n\nconst datePickerBodyRecipe = cva(['flex flex-1 flex-col px-3 pt-3 pb-1', ...PAGING])\n\nconst datePickerGridRecipe = cva([\n  'w-full flex-1 table-fixed border-separate border-spacing-1',\n  'has-data-[in-hover-range]:**:data-[part=table-cell-trigger]:transition-none',\n])\n\nconst datePickerWeekCellRecipe = cva([`h-tf-row text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst DAY_BAND = [\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:rounded-tf-none',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:rounded-tf-none',\n]\n\nconst DAY_ENDS = [\n  'data-[hover-range-start]:bg-tf-blend data-[hover-range-start]:text-tf-on-accent',\n  'data-[hover-range-end]:bg-tf-blend data-[hover-range-end]:text-tf-on-accent',\n  'data-[in-range]:not-data-[range-end]:data-[range-start]:rounded-r-tf-none',\n  'data-[in-range]:not-data-[range-start]:data-[range-end]:rounded-l-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-end]:data-[hover-range-start]:rounded-r-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-start]:data-[hover-range-end]:rounded-l-tf-none',\n]\n\nconst DAY_QUIET = [\n  'not-data-selected:not-data-[in-range]:data-weekend:text-tf-muted',\n  'data-[outside-range]:opacity-50',\n]\n\nconst datePickerDayRecipe = cva(\n  [\n    'inline-flex w-full items-center justify-center rounded-tf-control',\n    'text-tf-body-sm font-medium text-tf-fg tabular-nums blend-tf-accent',\n    'tf-ramp',\n    'not-data-[in-range]:interactive:hovered:bg-tf-panel-hi',\n    'data-today:tf-mark-edge data-today:tf-mark-lit',\n    'data-today:interactive:hovered:tf-mark-bloomed',\n    'data-selected:bg-tf-blend data-selected:text-tf-on-accent',\n    'motion-safe:data-selected:tf-pops',\n    ...DAY_BAND,\n    ...DAY_ENDS,\n    ...DAY_QUIET,\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { roomy: false },\n    variants: {\n      roomy: { false: 'h-tf-control-sm', true: 'h-15' },\n    },\n  },\n)\n\nconst datePickerFootRecipe = cva('flex flex-none flex-wrap gap-2 px-3 pt-2 pb-3')\n\nconst datePickerPresetRecipe = cva(\n  [\n    'relative isolate inline-flex h-tf-row flex-none items-center rounded-tf-pill px-3',\n    'text-tf-caption font-medium',\n    'tf-blend-outline blend-tf-accent',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { current: false },\n    variants: {\n      current: {\n        false: 'text-tf-fg interactive:hovered:bg-tf-panel-hi',\n        true: 'bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended',\n      },\n    },\n  },\n)\n\nexport {\n  type DatePickerMode,\n  type DatePickerRangePreset,\n  datePickerBodyRecipe,\n  datePickerContentRecipe,\n  datePickerDashRecipe,\n  datePickerDayRecipe,\n  datePickerEndRecipe,\n  datePickerFootRecipe,\n  datePickerGridRecipe,\n  datePickerHeadRecipe,\n  datePickerModes,\n  datePickerNavRecipe,\n  datePickerPresetRecipe,\n  datePickerRangePresets,\n  datePickerRangeTextRecipe,\n  datePickerRowRecipe,\n  datePickerRuleRecipe,\n  datePickerStartRecipe,\n  datePickerTriggerRecipe,\n  datePickerValueRecipe,\n  datePickerViewRecipe,\n  datePickerViewsRecipe,\n  datePickerViewTriggerRecipe,\n  datePickerWeekCellRecipe,\n  defaultDatePickerMode,\n}\n"],"mappings":";;;;;;;;AAmBA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,UAAU,OAAO;AAiB1C,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAA4B,EACzD;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,CAAC,qBAAqB,GAAG,8BAA8B,CAAC;AAE5F,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,GAClD;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,CACpD;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAQ,MAAM;EAAG;EACpC,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF;AAEA,MAAM,eAAe;AAErB,MAAM,wBAAwB,IAAI,+DAA+D;AAEjG,MAAM,sBAAsB,IAAI,CAC9B,iEACA,YACF,CAAC;AAED,MAAM,wBAAwB,IAAI,CAAC,gBAAgB,YAAY,CAAC;AAEhE,MAAM,0BAA0B,IAAI,CAClC,4DACA,iBACF,CAAC;AAED,MAAM,wBAAwB,IAAI,4CAA4C;AAE9E,MAAM,uBAAuB,IAAI,+DAA+D;AAEhG,MAAM,uBAAuB,IAAI,gEAAgE;AAEjG,MAAM,uBAAuB,IAAI,+BAA+B,WAAW;AAE3E,MAAM,sBAAsB,IAAI,gBAAgB;AAEhD,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,SAAS;CACb;CACA;CACA;CACA;AACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,0DACA,GAAG,MACL,CAAC;AAED,MAAM,uBAAuB,IAAI,CAAC,uCAAuC,GAAG,MAAM,CAAC;AAEnF,MAAM,uBAAuB,IAAI,CAC/B,8DACA,6EACF,CAAC;AAED,MAAM,2BAA2B,IAAI,CAAC,+BAA+B,cAAc,CAAC;AAEpF,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,YAAY,CAChB,oEACA,iCACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EAAE,OAAO;EAAmB,MAAM;CAAO,EAClD;AACF,CACF;AAEA,MAAM,uBAAuB,IAAI,+CAA+C;AAEhF,MAAM,yBAAyB,IAC7B;CACE;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF"}
+{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/recipes/datePicker.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport {\n  controlInert,\n  controlPress,\n  controlQuiet,\n  controlQuietIcon,\n  controlReach,\n} from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { ruleQuiet } from '#parts/rule'\n\nimport { fieldFootRecipe, fieldRecipe, leadingRecipe, trailingActionRecipe } from './field'\nimport { labelRoom, TRAILING_INSET } from './input'\n\ntype DatePickerMode = 'single' | 'range'\n\nconst defaultDatePickerMode = 'single' satisfies DatePickerMode\n\nconst datePickerModes = ['single', 'range'] as const satisfies readonly DatePickerMode[]\n\ntype DatePickerRangePreset =\n  | 'thisWeek'\n  | 'lastWeek'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisQuarter'\n  | 'lastQuarter'\n  | 'thisYear'\n  | 'lastYear'\n  | 'last3Days'\n  | 'last7Days'\n  | 'last14Days'\n  | 'last30Days'\n  | 'last90Days'\n\nconst datePickerRangePresets = [\n  'thisWeek',\n  'lastWeek',\n  'thisMonth',\n  'lastMonth',\n  'thisQuarter',\n  'lastQuarter',\n  'thisYear',\n  'lastYear',\n  'last3Days',\n  'last7Days',\n  'last14Days',\n  'last30Days',\n  'last90Days',\n] as const satisfies readonly DatePickerRangePreset[]\n\nconst datePickerRowRecipe = cva(\n  [\n    'data-[state=open]:bg-tf-sunken-hi data-[state=open]:tf-edge-lit',\n    'data-[state=open]:**:data-[part=leading]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=leading]:stroke-tf-ink',\n    'data-[state=open]:**:data-[part=trigger]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=trigger]:text-tf-accent-hi',\n    'reached:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=dash]:opacity-100',\n    'reached:**:data-[part=dash]:delay-(--tf-duration-1)',\n  ],\n  {\n    defaultVariants: { ranged: false },\n    variants: {\n      ranged: { false: '', true: 'w-fit max-w-full min-w-60' },\n    },\n  },\n)\n\nconst datePickerTriggerRecipe = cva([trailingActionRecipe(), 'data-[state=open]:rotate-180'])\n\nconst datePickerDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'text-tf-body-sm font-medium text-tf-muted',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: labelRoom.lg, labelled: true, size: 'lg' },\n      { class: labelRoom.md, 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', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nconst TRIGGER_ROOM = TRAILING_INSET\n\nconst datePickerStartRecipe = cva('field-sizing-content h-full w-auto min-w-36 pr-0 tabular-nums')\n\nconst datePickerEndRecipe = cva([\n  'field-sizing-content h-full w-auto min-w-36 pl-0 tabular-nums',\n  TRIGGER_ROOM,\n])\n\nconst datePickerValueRecipe = cva(['tabular-nums', TRIGGER_ROOM])\n\nconst datePickerContentRecipe = cva([\n  'w-tf-panel max-w-[calc(100vw-2rem)] overflow-hidden px-0',\n  'blend-tf-accent',\n])\n\nconst datePickerViewsRecipe = cva('flex min-h-(--container-tf-panel) flex-col')\n\nconst datePickerViewRecipe = cva('flex flex-1 flex-col tf-arrives motion-reduce:transition-none')\n\nconst datePickerHeadRecipe = cva('relative flex flex-none items-center justify-between gap-2 p-2')\n\nconst datePickerRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleQuiet}`)\n\nconst datePickerNavRecipe = cva(controlQuietIcon)\n\nconst datePickerViewTriggerRecipe = cva([\n  'inline-flex h-tf-control-sm items-center gap-2 rounded-tf-control px-3',\n  'font-tf-display text-tf-body-sm font-medium text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst PAGING = [\n  'data-[going=forward]:[--tf-page-from:calc(var(--spacing)*4)]',\n  'data-[going=back]:[--tf-page-from:calc(var(--spacing)*-4)]',\n  'data-[step=a]:motion-safe:animate-tf-page',\n  'data-[step=b]:motion-safe:animate-tf-page-again',\n]\n\nconst datePickerRangeTextRecipe = cva([\n  'inline-flex min-w-36 items-center justify-center gap-2',\n  ...PAGING,\n])\n\nconst datePickerBodyRecipe = cva(['flex flex-1 flex-col px-3 pt-3 pb-1', ...PAGING])\n\nconst datePickerGridRecipe = cva([\n  'w-full flex-1 table-fixed border-separate border-spacing-1',\n  'has-data-[in-hover-range]:**:data-[part=table-cell-trigger]:transition-none',\n])\n\nconst datePickerWeekCellRecipe = cva([`h-tf-row text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst DAY_BAND = [\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:rounded-tf-none',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:rounded-tf-none',\n]\n\nconst DAY_ENDS = [\n  'data-[hover-range-start]:bg-tf-blend data-[hover-range-start]:text-tf-on-accent',\n  'data-[hover-range-end]:bg-tf-blend data-[hover-range-end]:text-tf-on-accent',\n  'data-[in-range]:not-data-[range-end]:data-[range-start]:rounded-r-tf-none',\n  'data-[in-range]:not-data-[range-start]:data-[range-end]:rounded-l-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-end]:data-[hover-range-start]:rounded-r-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-start]:data-[hover-range-end]:rounded-l-tf-none',\n]\n\nconst DAY_QUIET = [\n  'not-data-selected:not-data-[in-range]:data-weekend:text-tf-muted',\n  'data-[outside-range]:opacity-50',\n]\n\nconst datePickerDayRecipe = cva(\n  [\n    'inline-flex w-full items-center justify-center rounded-tf-control',\n    'text-tf-body-sm font-medium text-tf-fg tabular-nums blend-tf-accent',\n    'tf-ramp',\n    'not-data-[in-range]:interactive:hovered:bg-tf-panel-hi',\n    'data-today:tf-mark-edge data-today:tf-mark-lit',\n    'data-today:interactive:hovered:tf-mark-bloomed',\n    'data-selected:bg-tf-blend data-selected:text-tf-on-accent',\n    'motion-safe:data-selected:tf-pops',\n    ...DAY_BAND,\n    ...DAY_ENDS,\n    ...DAY_QUIET,\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { roomy: false },\n    variants: {\n      roomy: { false: 'h-tf-control-sm', true: 'h-15' },\n    },\n  },\n)\n\nconst datePickerFootRecipe = cva('flex flex-none flex-wrap gap-2 px-3 pt-2 pb-3')\n\nconst datePickerPresetRecipe = cva(\n  [\n    'relative isolate inline-flex h-tf-row flex-none items-center rounded-tf-pill px-3',\n    'text-tf-caption font-medium',\n    'tf-blend-outline blend-tf-accent',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { current: false },\n    variants: {\n      current: {\n        false: 'text-tf-fg interactive:hovered:bg-tf-panel-hi',\n        true: 'bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended',\n      },\n    },\n  },\n)\n\nconst datePickerAnatomy = anatomy({\n  body: { part: 'body', recipe: datePickerBodyRecipe, required: true },\n  dash: { part: 'dash', recipe: datePickerDashRecipe, required: false },\n  foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n  leading: { part: 'leading', recipe: leadingRecipe, required: true },\n  presets: { part: 'presets', recipe: datePickerFootRecipe, required: false },\n  rangeLabel: { part: 'range-label', recipe: datePickerRangeTextRecipe, required: true },\n  root: { part: 'date-picker', recipe: fieldRecipe, required: true },\n  row: { part: 'row', recipe: datePickerRowRecipe, required: true },\n  rule: { part: 'rule', recipe: datePickerRuleRecipe, required: true },\n  views: { part: 'views', recipe: datePickerViewsRecipe, required: true },\n})\n\nexport {\n  type DatePickerMode,\n  type DatePickerRangePreset,\n  datePickerAnatomy,\n  datePickerBodyRecipe,\n  datePickerContentRecipe,\n  datePickerDashRecipe,\n  datePickerDayRecipe,\n  datePickerEndRecipe,\n  datePickerFootRecipe,\n  datePickerGridRecipe,\n  datePickerHeadRecipe,\n  datePickerModes,\n  datePickerNavRecipe,\n  datePickerPresetRecipe,\n  datePickerRangePresets,\n  datePickerRangeTextRecipe,\n  datePickerRowRecipe,\n  datePickerRuleRecipe,\n  datePickerStartRecipe,\n  datePickerTriggerRecipe,\n  datePickerValueRecipe,\n  datePickerViewRecipe,\n  datePickerViewsRecipe,\n  datePickerViewTriggerRecipe,\n  datePickerWeekCellRecipe,\n  defaultDatePickerMode,\n}\n"],"mappings":";;;;;;;;;AAoBA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,UAAU,OAAO;AAiB1C,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAA4B,EACzD;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,CAAC,qBAAqB,GAAG,8BAA8B,CAAC;AAE5F,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,GAClD;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,CACpD;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAQ,MAAM;EAAG;EACpC,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF;AAEA,MAAM,eAAe;AAErB,MAAM,wBAAwB,IAAI,+DAA+D;AAEjG,MAAM,sBAAsB,IAAI,CAC9B,iEACA,YACF,CAAC;AAED,MAAM,wBAAwB,IAAI,CAAC,gBAAgB,YAAY,CAAC;AAEhE,MAAM,0BAA0B,IAAI,CAClC,4DACA,iBACF,CAAC;AAED,MAAM,wBAAwB,IAAI,4CAA4C;AAE9E,MAAM,uBAAuB,IAAI,+DAA+D;AAEhG,MAAM,uBAAuB,IAAI,gEAAgE;AAEjG,MAAM,uBAAuB,IAAI,+BAA+B,WAAW;AAE3E,MAAM,sBAAsB,IAAI,gBAAgB;AAEhD,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,SAAS;CACb;CACA;CACA;CACA;AACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,0DACA,GAAG,MACL,CAAC;AAED,MAAM,uBAAuB,IAAI,CAAC,uCAAuC,GAAG,MAAM,CAAC;AAEnF,MAAM,uBAAuB,IAAI,CAC/B,8DACA,6EACF,CAAC;AAED,MAAM,2BAA2B,IAAI,CAAC,+BAA+B,cAAc,CAAC;AAEpF,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,YAAY,CAChB,oEACA,iCACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EAAE,OAAO;EAAmB,MAAM;CAAO,EAClD;AACF,CACF;AAEA,MAAM,uBAAuB,IAAI,+CAA+C;AAEhF,MAAM,yBAAyB,IAC7B;CACE;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,QAAQ;CAChC,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAsB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAsB,UAAU;CAAM;CACpE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;CAClE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAsB,UAAU;CAAM;CAC1E,YAAY;EAAE,MAAM;EAAe,QAAQ;EAA2B,UAAU;CAAK;CACrF,MAAM;EAAE,MAAM;EAAe,QAAQ;EAAa,UAAU;CAAK;CACjE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAqB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAsB,UAAU;CAAK;CACnE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAuB,UAAU;CAAK;AACxE,CAAC"}

package/dist/recipes/dialog.d.ts

@@ -32,6 +32,54 @@ declare const dialogRowRecipe: (props?: import("class-variance-authority/types")
 declare const dialogRowValueRecipe: (props?: ({
   lit?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogAnatomy: {
+  readonly body: {
+    readonly part: "body";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | 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: true;
+  };
+  readonly footer: {
+    readonly part: "footer";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly head: {
+    readonly part: "head";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly headings: {
+    readonly part: "headings";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+      roomy?: boolean | null | undefined;
+    } & 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: "dialog";
+    readonly recipe: (props?: ({
+      size?: "sm" | "md" | "lg" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type DialogLayout, type DialogSize, defaultDialogLayout, defaultDialogSize, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
+export { type DialogLayout, type DialogSize, defaultDialogLayout, defaultDialogSize, dialogAnatomy, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
 //# sourceMappingURL=dialog.d.ts.map

package/dist/recipes/dialog.js

@@ -1,5 +1,7 @@
+import { anatomy } from "../anatomy.js";
 import { liftMotion, scrimMirrorMotion } from "./motion.js";
 import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { nebulaCloudWideRecipe, nebulaVeilRecipe } from "./nebula.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/dialog.ts
 const defaultDialogLayout = "panel";
@@ -110,7 +112,44 @@ const dialogRowValueRecipe = cva("text-tf-fg tabular-nums", {
 		true: "text-tf-accent-hi"
 	} }
 });
+const dialogAnatomy = anatomy({
+	body: {
+		part: "body",
+		recipe: dialogBodyRecipe,
+		required: true
+	},
+	cloud: {
+		part: "cloud",
+		recipe: nebulaCloudWideRecipe,
+		required: true
+	},
+	footer: {
+		part: "footer",
+		recipe: dialogFooterRecipe,
+		required: false
+	},
+	head: {
+		part: "head",
+		recipe: dialogHeadRecipe,
+		required: true
+	},
+	headings: {
+		part: "headings",
+		recipe: dialogHeadingsRecipe,
+		required: true
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaVeilRecipe,
+		required: true
+	},
+	root: {
+		part: "dialog",
+		recipe: dialogRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultDialogLayout, defaultDialogSize, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
+export { defaultDialogLayout, defaultDialogSize, dialogAnatomy, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
 
 //# sourceMappingURL=dialog.js.map

package/dist/recipes/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/recipes/dialog.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { liftMotion, scrimMirrorMotion } from './motion'\n\ntype DialogSize = 'sm' | 'md' | 'lg'\n\ntype DialogLayout = 'panel' | 'confirm'\n\nconst defaultDialogLayout = 'panel' satisfies DialogLayout\n\nconst dialogLayouts = ['panel', 'confirm'] as const satisfies readonly DialogLayout[]\n\nconst defaultDialogSize = 'md' satisfies DialogSize\n\nconst dialogSizes = ['sm', 'md', 'lg'] as const satisfies readonly DialogSize[]\n\nconst WIDTH = {\n  lg: 'max-w-tf-page',\n  md: 'max-w-tf-measure',\n  sm: 'max-w-tf-panel',\n} satisfies Record<DialogSize, string>\n\nconst GROUND = 'relative bg-tf-shade-under'\n\nconst REGION = 'relative'\n\nconst FULL = [\n  '@max-tf-panel:absolute @max-tf-panel:inset-0',\n  '@max-tf-panel:max-h-none @max-tf-panel:max-w-none',\n  '@max-tf-panel:rounded-tf-none',\n]\n\nconst dialogBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst dialogPositionerRecipe = cva([\n  '@container fixed inset-0 z-tf-modal flex items-center justify-center p-4 sm:p-10',\n  'font-tf-body',\n])\n\nconst dialogRecipe = cva(\n  [\n    ...surfacePanel,\n    'tf-edge-plain',\n    ...surfaceLifted,\n    'flex max-h-full w-full flex-col overflow-hidden outline-hidden',\n    'text-tf-body-sm font-medium text-tf-fg',\n    ...FULL,\n    ...liftMotion,\n    'motion-reduce:animate-none',\n  ],\n  {\n    defaultVariants: { size: defaultDialogSize },\n    variants: { size: WIDTH },\n  },\n)\n\nconst dialogHeldRecipe = cva('motion-safe:data-[state=open]:data-held:tf-shaken')\n\nconst dialogHeadRecipe = cva([REGION, 'flex flex-none flex-col px-6 pt-8'], {\n  defaultVariants: { layout: defaultDialogLayout },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-6 text-center',\n      panel: 'gap-6 @max-tf-panel:pt-6',\n    } satisfies Record<DialogLayout, string>,\n  },\n})\n\nconst dialogHeadingsRecipe = cva('flex min-w-0 flex-none flex-col', {\n  compoundVariants: [{ class: 'pr-12', layout: 'panel', roomy: true }],\n  defaultVariants: { layout: defaultDialogLayout, roomy: false },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-3 text-center',\n      panel: 'gap-2 pb-2',\n    } satisfies Record<DialogLayout, string>,\n    roomy: { false: '', true: '' },\n  },\n})\n\nconst dialogTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst dialogDescriptionRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst dialogCloseRecipe = cva('absolute top-3 right-3 z-tf-raised')\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*6)] [--tf-fade-foot:calc(var(--spacing)*8)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst dialogBodyRecipe = cva(\n  [REGION, 'flex min-h-0 flex-col overflow-y-auto px-6 pt-6', FADED, '@max-tf-panel:flex-1'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: 'items-center gap-6 pb-0 text-center',\n        panel: 'gap-6 pb-8 @max-tf-panel:pb-6',\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogFooterRecipe = cva(\n  ['flex flex-none gap-3 rounded-b-tf-card px-6', '@max-tf-panel:rounded-tf-none'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: `${REGION} flex-nowrap items-center pt-6 pb-6 *:flex-1`,\n        panel: [\n          GROUND,\n          'flex-wrap items-center justify-end py-5',\n          '@max-tf-panel:flex-col-reverse @max-tf-panel:flex-nowrap @max-tf-panel:*:w-full',\n        ].join(' '),\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogNoteRecipe = cva('mr-auto text-tf-caption font-medium text-tf-muted tabular-nums')\n\nconst dialogRowRecipe = cva([\n  'flex h-tf-row flex-none items-center justify-between gap-3',\n  'rounded-tf-inline px-3 text-tf-muted',\n])\n\nconst dialogRowValueRecipe = cva('text-tf-fg tabular-nums', {\n  defaultVariants: { lit: false },\n  variants: {\n    lit: { false: '', true: 'text-tf-accent-hi' },\n  },\n})\n\nexport {\n  type DialogLayout,\n  type DialogSize,\n  defaultDialogLayout,\n  defaultDialogSize,\n  dialogLayouts,\n  dialogBackdropRecipe,\n  dialogBodyRecipe,\n  dialogCloseRecipe,\n  dialogDescriptionRecipe,\n  dialogFooterRecipe,\n  dialogHeadRecipe,\n  dialogHeadingsRecipe,\n  dialogHeldRecipe,\n  dialogNoteRecipe,\n  dialogPositionerRecipe,\n  dialogRecipe,\n  dialogRowRecipe,\n  dialogRowValueRecipe,\n  dialogSizes,\n  dialogTitleRecipe,\n}\n"],"mappings":";;;;AAUA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB,CAAC,SAAS,SAAS;AAEzC,MAAM,oBAAoB;AAE1B,MAAM,cAAc;CAAC;CAAM;CAAM;AAAI;AAErC,MAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS;AAEf,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;AACF;AAEA,MAAM,uBAAuB,IAAI;CAC/B;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,oFACA,cACF,CAAC;AAED,MAAM,eAAe,IACnB;CACE,GAAG;CACH;CACA,GAAG;CACH;CACA;CACA,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,KAAwB;CAC3C,UAAU,EAAE,MAAM,MAAM;AAC1B,CACF;AAEA,MAAM,mBAAmB,IAAI,mDAAmD;AAEhF,MAAM,mBAAmB,IAAI,CAAC,QAAQ,mCAAmC,GAAG;CAC1E,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,mCAAmC;CAClE,kBAAkB,CAAC;EAAE,OAAO;EAAS,QAAQ;EAAS,OAAO;CAAK,CAAC;CACnE,iBAAiB;EAAE,QAAQ;EAAqB,OAAO;CAAM;CAC7D,UAAU;EACR,QAAQ;GACN,SAAS;GACT,OAAO;EACT;EACA,OAAO;GAAE,OAAO;GAAI,MAAM;EAAG;CAC/B;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,mEAAmE;AAEjG,MAAM,0BAA0B,IAAI,2CAA2C;AAE/E,MAAM,oBAAoB,IAAI,oCAAoC;AAElE,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IACvB;CAAC;CAAQ;CAAmD;CAAO;AAAsB,GACzF;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IACzB,CAAC,+CAA+C,+BAA+B,GAC/E;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS,GAAG,OAAO;EACnB,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,gEAAgE;AAE7F,MAAM,kBAAkB,IAAI,CAC1B,8DACA,sCACF,CAAC;AAED,MAAM,uBAAuB,IAAI,2BAA2B;CAC1D,iBAAiB,EAAE,KAAK,MAAM;CAC9B,UAAU,EACR,KAAK;EAAE,OAAO;EAAI,MAAM;CAAoB,EAC9C;AACF,CAAC"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/recipes/dialog.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { liftMotion, scrimMirrorMotion } from './motion'\nimport { nebulaCloudWideRecipe, nebulaVeilRecipe } from './nebula'\n\ntype DialogSize = 'sm' | 'md' | 'lg'\n\ntype DialogLayout = 'panel' | 'confirm'\n\nconst defaultDialogLayout = 'panel' satisfies DialogLayout\n\nconst dialogLayouts = ['panel', 'confirm'] as const satisfies readonly DialogLayout[]\n\nconst defaultDialogSize = 'md' satisfies DialogSize\n\nconst dialogSizes = ['sm', 'md', 'lg'] as const satisfies readonly DialogSize[]\n\nconst WIDTH = {\n  lg: 'max-w-tf-page',\n  md: 'max-w-tf-measure',\n  sm: 'max-w-tf-panel',\n} satisfies Record<DialogSize, string>\n\nconst GROUND = 'relative bg-tf-shade-under'\n\nconst REGION = 'relative'\n\nconst FULL = [\n  '@max-tf-panel:absolute @max-tf-panel:inset-0',\n  '@max-tf-panel:max-h-none @max-tf-panel:max-w-none',\n  '@max-tf-panel:rounded-tf-none',\n]\n\nconst dialogBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst dialogPositionerRecipe = cva([\n  '@container fixed inset-0 z-tf-modal flex items-center justify-center p-4 sm:p-10',\n  'font-tf-body',\n])\n\nconst dialogRecipe = cva(\n  [\n    ...surfacePanel,\n    'tf-edge-plain',\n    ...surfaceLifted,\n    'flex max-h-full w-full flex-col overflow-hidden outline-hidden',\n    'text-tf-body-sm font-medium text-tf-fg',\n    ...FULL,\n    ...liftMotion,\n    'motion-reduce:animate-none',\n  ],\n  {\n    defaultVariants: { size: defaultDialogSize },\n    variants: { size: WIDTH },\n  },\n)\n\nconst dialogHeldRecipe = cva('motion-safe:data-[state=open]:data-held:tf-shaken')\n\nconst dialogHeadRecipe = cva([REGION, 'flex flex-none flex-col px-6 pt-8'], {\n  defaultVariants: { layout: defaultDialogLayout },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-6 text-center',\n      panel: 'gap-6 @max-tf-panel:pt-6',\n    } satisfies Record<DialogLayout, string>,\n  },\n})\n\nconst dialogHeadingsRecipe = cva('flex min-w-0 flex-none flex-col', {\n  compoundVariants: [{ class: 'pr-12', layout: 'panel', roomy: true }],\n  defaultVariants: { layout: defaultDialogLayout, roomy: false },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-3 text-center',\n      panel: 'gap-2 pb-2',\n    } satisfies Record<DialogLayout, string>,\n    roomy: { false: '', true: '' },\n  },\n})\n\nconst dialogTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst dialogDescriptionRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst dialogCloseRecipe = cva('absolute top-3 right-3 z-tf-raised')\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*6)] [--tf-fade-foot:calc(var(--spacing)*8)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst dialogBodyRecipe = cva(\n  [REGION, 'flex min-h-0 flex-col overflow-y-auto px-6 pt-6', FADED, '@max-tf-panel:flex-1'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: 'items-center gap-6 pb-0 text-center',\n        panel: 'gap-6 pb-8 @max-tf-panel:pb-6',\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogFooterRecipe = cva(\n  ['flex flex-none gap-3 rounded-b-tf-card px-6', '@max-tf-panel:rounded-tf-none'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: `${REGION} flex-nowrap items-center pt-6 pb-6 *:flex-1`,\n        panel: [\n          GROUND,\n          'flex-wrap items-center justify-end py-5',\n          '@max-tf-panel:flex-col-reverse @max-tf-panel:flex-nowrap @max-tf-panel:*:w-full',\n        ].join(' '),\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogNoteRecipe = cva('mr-auto text-tf-caption font-medium text-tf-muted tabular-nums')\n\nconst dialogRowRecipe = cva([\n  'flex h-tf-row flex-none items-center justify-between gap-3',\n  'rounded-tf-inline px-3 text-tf-muted',\n])\n\nconst dialogRowValueRecipe = cva('text-tf-fg tabular-nums', {\n  defaultVariants: { lit: false },\n  variants: {\n    lit: { false: '', true: 'text-tf-accent-hi' },\n  },\n})\n\nconst dialogAnatomy = anatomy({\n  body: { part: 'body', recipe: dialogBodyRecipe, required: true },\n  cloud: { part: 'cloud', recipe: nebulaCloudWideRecipe, required: true },\n  footer: { part: 'footer', recipe: dialogFooterRecipe, required: false },\n  head: { part: 'head', recipe: dialogHeadRecipe, required: true },\n  headings: { part: 'headings', recipe: dialogHeadingsRecipe, required: true },\n  nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: true },\n  root: { part: 'dialog', recipe: dialogRecipe, required: true },\n})\n\nexport {\n  type DialogLayout,\n  type DialogSize,\n  defaultDialogLayout,\n  defaultDialogSize,\n  dialogLayouts,\n  dialogAnatomy,\n  dialogBackdropRecipe,\n  dialogBodyRecipe,\n  dialogCloseRecipe,\n  dialogDescriptionRecipe,\n  dialogFooterRecipe,\n  dialogHeadRecipe,\n  dialogHeadingsRecipe,\n  dialogHeldRecipe,\n  dialogNoteRecipe,\n  dialogPositionerRecipe,\n  dialogRecipe,\n  dialogRowRecipe,\n  dialogRowValueRecipe,\n  dialogSizes,\n  dialogTitleRecipe,\n}\n"],"mappings":";;;;;;AAYA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB,CAAC,SAAS,SAAS;AAEzC,MAAM,oBAAoB;AAE1B,MAAM,cAAc;CAAC;CAAM;CAAM;AAAI;AAErC,MAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS;AAEf,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;AACF;AAEA,MAAM,uBAAuB,IAAI;CAC/B;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,oFACA,cACF,CAAC;AAED,MAAM,eAAe,IACnB;CACE,GAAG;CACH;CACA,GAAG;CACH;CACA;CACA,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,KAAwB;CAC3C,UAAU,EAAE,MAAM,MAAM;AAC1B,CACF;AAEA,MAAM,mBAAmB,IAAI,mDAAmD;AAEhF,MAAM,mBAAmB,IAAI,CAAC,QAAQ,mCAAmC,GAAG;CAC1E,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,mCAAmC;CAClE,kBAAkB,CAAC;EAAE,OAAO;EAAS,QAAQ;EAAS,OAAO;CAAK,CAAC;CACnE,iBAAiB;EAAE,QAAQ;EAAqB,OAAO;CAAM;CAC7D,UAAU;EACR,QAAQ;GACN,SAAS;GACT,OAAO;EACT;EACA,OAAO;GAAE,OAAO;GAAI,MAAM;EAAG;CAC/B;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,mEAAmE;AAEjG,MAAM,0BAA0B,IAAI,2CAA2C;AAE/E,MAAM,oBAAoB,IAAI,oCAAoC;AAElE,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IACvB;CAAC;CAAQ;CAAmD;CAAO;AAAsB,GACzF;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IACzB,CAAC,+CAA+C,+BAA+B,GAC/E;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS,GAAG,OAAO;EACnB,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,gEAAgE;AAE7F,MAAM,kBAAkB,IAAI,CAC1B,8DACA,sCACF,CAAC;AAED,MAAM,uBAAuB,IAAI,2BAA2B;CAC1D,iBAAiB,EAAE,KAAK,MAAM;CAC9B,UAAU,EACR,KAAK;EAAE,OAAO;EAAI,MAAM;CAAoB,EAC9C;AACF,CAAC;AAED,MAAM,gBAAgB,QAAQ;CAC5B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAuB,UAAU;CAAK;CACtE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAoB,UAAU;CAAM;CACtE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAsB,UAAU;CAAK;CAC3E,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAU,QAAQ;EAAc,UAAU;CAAK;AAC/D,CAAC"}

package/dist/recipes/feature.d.ts

@@ -10,6 +10,35 @@ declare const featureTitleRecipe: (props?: import("class-variance-authority/type
 declare const featureLinkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const featureBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const featureFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const featureAnatomy: {
+  readonly action: {
+    readonly part: "action";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly description: {
+    readonly part: "description";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly link: {
+    readonly part: "link";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "feature";
+    readonly recipe: (props?: ({
+      interactive?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly title: {
+    readonly part: "title";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type FeatureLevel, defaultFeatureLevel, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
+export { type FeatureLevel, defaultFeatureLevel, featureAnatomy, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
 //# sourceMappingURL=feature.d.ts.map

package/dist/recipes/feature.js

@@ -1,5 +1,6 @@
-import { surfacePanel } from "../parts/surface.js";
+import { anatomy } from "../anatomy.js";
 import { tileReached, tileRoused } from "../parts/rouse.js";
+import { surfacePanel } from "../parts/surface.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/feature.ts
 const featureLevels = [
@@ -42,7 +43,34 @@ const featureFootRecipe = cva([
 	"[&_svg]:size-tf-icon-sm [&_svg]:tf-nudge-follow",
 	"pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto"
 ]);
+const featureAnatomy = anatomy({
+	action: {
+		part: "action",
+		recipe: featureFootRecipe,
+		required: false
+	},
+	description: {
+		part: "description",
+		recipe: featureBodyRecipe,
+		required: false
+	},
+	link: {
+		part: "link",
+		recipe: featureLinkRecipe,
+		required: false
+	},
+	root: {
+		part: "feature",
+		recipe: featureRecipe,
+		required: true
+	},
+	title: {
+		part: "title",
+		recipe: featureTitleRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultFeatureLevel, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
+export { defaultFeatureLevel, featureAnatomy, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
 
 //# sourceMappingURL=feature.js.map

package/dist/recipes/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../src/recipes/feature.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tileReached, tileRoused } from '#parts/rouse'\nimport { surfacePanel } from '#parts/surface'\n\nconst featureLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const\n\ntype FeatureLevel = (typeof featureLevels)[number]\n\nconst defaultFeatureLevel = 'h3' satisfies FeatureLevel\n\nconst ROUSED_TILE = [tileRoused, tileReached].join(' ')\n\nconst LIFTS = ['motion-safe:hovered:-translate-y-0.5', 'motion-safe:reached:-translate-y-0.5'].join(\n  ' ',\n)\n\nconst featureRecipe = cva(\n  [\n    ...surfacePanel,\n    'flex flex-col gap-5 p-6 font-tf-body text-tf-fg',\n    'tf-fill-scale tf-blend-drift tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { interactive: false },\n    variants: {\n      interactive: {\n        false: '',\n        true: [\n          'hovered:tf-edge-lit hovered:tf-nudged reached:tf-edge-lit reached:tf-nudged',\n          ROUSED_TILE,\n          LIFTS,\n        ].join(' '),\n      },\n    },\n  },\n)\n\nconst featureTileRecipe = cva('self-start')\n\nconst featureTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst featureLinkRecipe = cva([\n  'outline-hidden',\n  \"before:absolute before:inset-0 before:rounded-tf-card before:content-['']\",\n  'focused:before:outline-2 focused:before:outline-solid',\n  'focused:before:outline-offset-2 focused:before:outline-tf-accent-hi',\n])\n\nconst featureBodyRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst featureFootRecipe = cva([\n  'relative mt-auto inline-flex items-center gap-1 self-start tf-icons',\n  'text-tf-caption font-medium text-tf-accent-hi',\n  '[&_svg]:size-tf-icon-sm [&_svg]:tf-nudge-follow',\n  'pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto',\n])\n\nexport {\n  type FeatureLevel,\n  defaultFeatureLevel,\n  featureBodyRecipe,\n  featureFootRecipe,\n  featureLevels,\n  featureLinkRecipe,\n  featureRecipe,\n  featureTileRecipe,\n  featureTitleRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,gBAAgB;CAAC;CAAM;CAAM;CAAM;CAAM;AAAI;AAInD,MAAM,sBAAsB;AAE5B,MAAM,cAAc,CAAC,YAAY,WAAW,CAAC,CAAC,KAAK,GAAG;AAEtD,MAAM,QAAQ,CAAC,wCAAwC,sCAAsC,CAAC,CAAC,KAC7F,GACF;AAEA,MAAM,gBAAgB,IACpB;CACE,GAAG;CACH;CACA;AACF,GACA;CACE,iBAAiB,EAAE,aAAa,MAAM;CACtC,UAAU,EACR,aAAa;EACX,OAAO;EACP,MAAM;GACJ;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IAAI,YAAY;AAE1C,MAAM,qBAAqB,IAAI,mEAAmE;AAElG,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,2CAA2C;AAEzE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../src/recipes/feature.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { tileReached, tileRoused } from '#parts/rouse'\nimport { surfacePanel } from '#parts/surface'\n\nconst featureLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const\n\ntype FeatureLevel = (typeof featureLevels)[number]\n\nconst defaultFeatureLevel = 'h3' satisfies FeatureLevel\n\nconst ROUSED_TILE = [tileRoused, tileReached].join(' ')\n\nconst LIFTS = ['motion-safe:hovered:-translate-y-0.5', 'motion-safe:reached:-translate-y-0.5'].join(\n  ' ',\n)\n\nconst featureRecipe = cva(\n  [\n    ...surfacePanel,\n    'flex flex-col gap-5 p-6 font-tf-body text-tf-fg',\n    'tf-fill-scale tf-blend-drift tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { interactive: false },\n    variants: {\n      interactive: {\n        false: '',\n        true: [\n          'hovered:tf-edge-lit hovered:tf-nudged reached:tf-edge-lit reached:tf-nudged',\n          ROUSED_TILE,\n          LIFTS,\n        ].join(' '),\n      },\n    },\n  },\n)\n\nconst featureTileRecipe = cva('self-start')\n\nconst featureTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst featureLinkRecipe = cva([\n  'outline-hidden',\n  \"before:absolute before:inset-0 before:rounded-tf-card before:content-['']\",\n  'focused:before:outline-2 focused:before:outline-solid',\n  'focused:before:outline-offset-2 focused:before:outline-tf-accent-hi',\n])\n\nconst featureBodyRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst featureFootRecipe = cva([\n  'relative mt-auto inline-flex items-center gap-1 self-start tf-icons',\n  'text-tf-caption font-medium text-tf-accent-hi',\n  '[&_svg]:size-tf-icon-sm [&_svg]:tf-nudge-follow',\n  'pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto',\n])\n\nconst featureAnatomy = anatomy({\n  action: { part: 'action', recipe: featureFootRecipe, required: false },\n  description: { part: 'description', recipe: featureBodyRecipe, required: false },\n  link: { part: 'link', recipe: featureLinkRecipe, required: false },\n  root: { part: 'feature', recipe: featureRecipe, required: true },\n  title: { part: 'title', recipe: featureTitleRecipe, required: true },\n})\n\nexport {\n  type FeatureLevel,\n  defaultFeatureLevel,\n  featureAnatomy,\n  featureBodyRecipe,\n  featureFootRecipe,\n  featureLevels,\n  featureLinkRecipe,\n  featureRecipe,\n  featureTileRecipe,\n  featureTitleRecipe,\n}\n"],"mappings":";;;;;AAMA,MAAM,gBAAgB;CAAC;CAAM;CAAM;CAAM;CAAM;AAAI;AAInD,MAAM,sBAAsB;AAE5B,MAAM,cAAc,CAAC,YAAY,WAAW,CAAC,CAAC,KAAK,GAAG;AAEtD,MAAM,QAAQ,CAAC,wCAAwC,sCAAsC,CAAC,CAAC,KAC7F,GACF;AAEA,MAAM,gBAAgB,IACpB;CACE,GAAG;CACH;CACA;AACF,GACA;CACE,iBAAiB,EAAE,aAAa,MAAM;CACtC,UAAU,EACR,aAAa;EACX,OAAO;EACP,MAAM;GACJ;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IAAI,YAAY;AAE1C,MAAM,qBAAqB,IAAI,mEAAmE;AAElG,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,2CAA2C;AAEzE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,QAAQ;CAC7B,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAmB,UAAU;CAAM;CACrE,aAAa;EAAE,MAAM;EAAe,QAAQ;EAAmB,UAAU;CAAM;CAC/E,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAM;CACjE,MAAM;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;CAC/D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAoB,UAAU;CAAK;AACrE,CAAC"}

package/dist/recipes/field.js

@@ -1,5 +1,5 @@
-import "../control.js";
 import { controlBase, controlBox, controlInert, controlReach, hitArea } from "../parts/control.js";
+import "../control.js";
 import { controlFailed, controlHealthy, controlShell } from "../parts/shell.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/field.ts

package/dist/recipes/findings.d.ts

@@ -6,6 +6,38 @@ declare const findingTextRecipe: (props?: import("class-variance-authority/types
 declare const findingPathRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const findingMessageRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const findingsSummaryRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const findingsAnatomy: {
+  readonly item: {
+    readonly part: "item";
+    readonly recipe: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly message: {
+    readonly part: "message";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly path: {
+    readonly part: "path";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "findings";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly summary: {
+    readonly part: "summary";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly text: {
+    readonly part: "text";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { findingIconRecipe, findingMessageRecipe, findingPathRecipe, findingRecipe, findingTextRecipe, findingsRecipe, findingsSummaryRecipe };
+export { findingIconRecipe, findingMessageRecipe, findingPathRecipe, findingRecipe, findingTextRecipe, findingsAnatomy, findingsRecipe, findingsSummaryRecipe };
 //# sourceMappingURL=findings.d.ts.map

package/dist/recipes/findings.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/findings.ts
 const findingsRecipe = cva("flex flex-col gap-1");
@@ -10,7 +11,39 @@ const findingTextRecipe = cva("flex min-w-0 flex-col gap-0");
 const findingPathRecipe = cva("truncate font-mono text-tf-caption-sm");
 const findingMessageRecipe = cva("text-tf-body-sm font-medium text-tf-fg");
 const findingsSummaryRecipe = cva("flex items-center gap-2 px-4 py-3 text-tf-caption-sm text-tf-muted");
+const findingsAnatomy = anatomy({
+	item: {
+		part: "item",
+		recipe: findingRecipe,
+		required: true
+	},
+	message: {
+		part: "message",
+		recipe: findingMessageRecipe,
+		required: true
+	},
+	path: {
+		part: "path",
+		recipe: findingPathRecipe,
+		required: true
+	},
+	root: {
+		part: "findings",
+		recipe: findingsRecipe,
+		required: true
+	},
+	summary: {
+		part: "summary",
+		recipe: findingsSummaryRecipe,
+		required: false
+	},
+	text: {
+		part: "text",
+		recipe: findingTextRecipe,
+		required: true
+	}
+});
 //#endregion
-export { findingIconRecipe, findingMessageRecipe, findingPathRecipe, findingRecipe, findingTextRecipe, findingsRecipe, findingsSummaryRecipe };
+export { findingIconRecipe, findingMessageRecipe, findingPathRecipe, findingRecipe, findingTextRecipe, findingsAnatomy, findingsRecipe, findingsSummaryRecipe };
 
 //# sourceMappingURL=findings.js.map

package/dist/recipes/findings.js.map

@@ -1 +1 @@
-{"version":3,"file":"findings.js","names":[],"sources":["../../src/recipes/findings.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst findingsRecipe = cva('flex flex-col gap-1')\n\nconst findingRecipe = cva(\n  [\n    'flex items-start gap-2 rounded-tf-control tf-tinted px-4 py-3 blend-tf-accent',\n    '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ],\n  { defaultVariants: {}, variants: {} },\n)\n\nconst findingIconRecipe = cva('mt-0.5 flex-none')\n\nconst findingTextRecipe = cva('flex min-w-0 flex-col gap-0')\n\nconst findingPathRecipe = cva('truncate font-mono text-tf-caption-sm')\n\nconst findingMessageRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst findingsSummaryRecipe = cva(\n  'flex items-center gap-2 px-4 py-3 text-tf-caption-sm text-tf-muted',\n)\n\nexport {\n  findingIconRecipe,\n  findingMessageRecipe,\n  findingPathRecipe,\n  findingRecipe,\n  findingTextRecipe,\n  findingsRecipe,\n  findingsSummaryRecipe,\n}\n"],"mappings":";;AAEA,MAAM,iBAAiB,IAAI,qBAAqB;AAEhD,MAAM,gBAAgB,IACpB,CACE,iFACA,0CACF,GACA;CAAE,iBAAiB,CAAC;CAAG,UAAU,CAAC;AAAE,CACtC;AAEA,MAAM,oBAAoB,IAAI,kBAAkB;AAEhD,MAAM,oBAAoB,IAAI,6BAA6B;AAE3D,MAAM,oBAAoB,IAAI,uCAAuC;AAErE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,wBAAwB,IAC5B,oEACF"}
+{"version":3,"file":"findings.js","names":[],"sources":["../../src/recipes/findings.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst findingsRecipe = cva('flex flex-col gap-1')\n\nconst findingRecipe = cva(\n  [\n    'flex items-start gap-2 rounded-tf-control tf-tinted px-4 py-3 blend-tf-accent',\n    '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ],\n  { defaultVariants: {}, variants: {} },\n)\n\nconst findingIconRecipe = cva('mt-0.5 flex-none')\n\nconst findingTextRecipe = cva('flex min-w-0 flex-col gap-0')\n\nconst findingPathRecipe = cva('truncate font-mono text-tf-caption-sm')\n\nconst findingMessageRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst findingsSummaryRecipe = cva(\n  'flex items-center gap-2 px-4 py-3 text-tf-caption-sm text-tf-muted',\n)\n\nconst findingsAnatomy = anatomy({\n  item: { part: 'item', recipe: findingRecipe, required: true },\n  message: { part: 'message', recipe: findingMessageRecipe, required: true },\n  path: { part: 'path', recipe: findingPathRecipe, required: true },\n  root: { part: 'findings', recipe: findingsRecipe, required: true },\n  summary: { part: 'summary', recipe: findingsSummaryRecipe, required: false },\n  text: { part: 'text', recipe: findingTextRecipe, required: true },\n})\n\nexport {\n  findingIconRecipe,\n  findingMessageRecipe,\n  findingPathRecipe,\n  findingRecipe,\n  findingTextRecipe,\n  findingsAnatomy,\n  findingsRecipe,\n  findingsSummaryRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,iBAAiB,IAAI,qBAAqB;AAEhD,MAAM,gBAAgB,IACpB,CACE,iFACA,0CACF,GACA;CAAE,iBAAiB,CAAC;CAAG,UAAU,CAAC;AAAE,CACtC;AAEA,MAAM,oBAAoB,IAAI,kBAAkB;AAEhD,MAAM,oBAAoB,IAAI,6BAA6B;AAE3D,MAAM,oBAAoB,IAAI,uCAAuC;AAErE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,wBAAwB,IAC5B,oEACF;AAEA,MAAM,kBAAkB,QAAQ;CAC9B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAe,UAAU;CAAK;CAC5D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAsB,UAAU;CAAK;CACzE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAK;CACjE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAuB,UAAU;CAAM;CAC3E,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAmB,UAAU;CAAK;AAClE,CAAC"}

package/dist/recipes/heading.d.ts

@@ -3,7 +3,7 @@ type HeadingLevel = 'numeral' | 'display' | 'h2' | 'h3' | 'h4';
 declare const defaultHeadingLevel = "h3";
 declare const headingLevels: readonly ["numeral", "display", "h2", "h3", "h4"];
 declare const headingRecipe: (props?: ({
-  level?: "h2" | "h3" | "h4" | "numeral" | "display" | null | undefined;
+  level?: "numeral" | "display" | "h2" | "h3" | "h4" | null | undefined;
   tabular?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const HEADING_DEFAULT_TAG: {
@@ -13,6 +13,16 @@ declare const HEADING_DEFAULT_TAG: {
   h4: string;
   numeral: string;
 };
+declare const headingAnatomy: {
+  readonly root: {
+    readonly part: "heading";
+    readonly recipe: (props?: ({
+      level?: "numeral" | "display" | "h2" | "h3" | "h4" | null | undefined;
+      tabular?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { HEADING_DEFAULT_TAG, type HeadingLevel, defaultHeadingLevel, headingLevels, headingRecipe };
+export { HEADING_DEFAULT_TAG, type HeadingLevel, defaultHeadingLevel, headingAnatomy, headingLevels, headingRecipe };
 //# sourceMappingURL=heading.d.ts.map

package/dist/recipes/heading.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/heading.ts
 const defaultHeadingLevel = "h3";
@@ -34,7 +35,12 @@ const HEADING_DEFAULT_TAG = {
 	h4: "h3",
 	numeral: "p"
 };
+const headingAnatomy = anatomy({ root: {
+	part: "heading",
+	recipe: headingRecipe,
+	required: true
+} });
 //#endregion
-export { HEADING_DEFAULT_TAG, defaultHeadingLevel, headingLevels, headingRecipe };
+export { HEADING_DEFAULT_TAG, defaultHeadingLevel, headingAnatomy, headingLevels, headingRecipe };
 
 //# sourceMappingURL=heading.js.map

package/dist/recipes/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../src/recipes/heading.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\ntype HeadingLevel = 'numeral' | 'display' | 'h2' | 'h3' | 'h4'\n\nconst defaultHeadingLevel = 'h3' satisfies HeadingLevel\n\nconst headingLevels = [\n  'numeral',\n  'display',\n  'h2',\n  'h3',\n  'h4',\n] as const satisfies readonly HeadingLevel[]\n\nconst headingRecipe = cva(['font-tf-display font-bold tracking-tf-tight text-tf-fg'], {\n  defaultVariants: { level: defaultHeadingLevel, tabular: false },\n  variants: {\n    level: {\n      display: 'text-tf-display',\n      h2: 'text-tf-h2',\n      h3: 'text-tf-h3',\n      h4: 'text-tf-h4',\n      numeral: 'text-tf-numeral',\n    } satisfies Record<HeadingLevel, string>,\n    tabular: { false: '', true: 'tabular-nums' },\n  },\n})\n\nconst HEADING_DEFAULT_TAG = {\n  display: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h3',\n  numeral: 'p',\n} satisfies Record<HeadingLevel, string>\n\nexport { type HeadingLevel, HEADING_DEFAULT_TAG, defaultHeadingLevel, headingLevels, headingRecipe }\n"],"mappings":";;AAIA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,IAAI,CAAC,wDAAwD,GAAG;CACpF,iBAAiB;EAAE,OAAA;EAA4B,SAAS;CAAM;CAC9D,UAAU;EACR,OAAO;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;EACX;EACA,SAAS;GAAE,OAAO;GAAI,MAAM;EAAe;CAC7C;AACF,CAAC;AAED,MAAM,sBAAsB;CAC1B,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,SAAS;AACX"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../src/recipes/heading.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\ntype HeadingLevel = 'numeral' | 'display' | 'h2' | 'h3' | 'h4'\n\nconst defaultHeadingLevel = 'h3' satisfies HeadingLevel\n\nconst headingLevels = [\n  'numeral',\n  'display',\n  'h2',\n  'h3',\n  'h4',\n] as const satisfies readonly HeadingLevel[]\n\nconst headingRecipe = cva(['font-tf-display font-bold tracking-tf-tight text-tf-fg'], {\n  defaultVariants: { level: defaultHeadingLevel, tabular: false },\n  variants: {\n    level: {\n      display: 'text-tf-display',\n      h2: 'text-tf-h2',\n      h3: 'text-tf-h3',\n      h4: 'text-tf-h4',\n      numeral: 'text-tf-numeral',\n    } satisfies Record<HeadingLevel, string>,\n    tabular: { false: '', true: 'tabular-nums' },\n  },\n})\n\nconst HEADING_DEFAULT_TAG = {\n  display: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h3',\n  numeral: 'p',\n} satisfies Record<HeadingLevel, string>\n\nconst headingAnatomy = anatomy({\n  root: { part: 'heading', recipe: headingRecipe, required: true },\n})\n\nexport {\n  type HeadingLevel,\n  HEADING_DEFAULT_TAG,\n  defaultHeadingLevel,\n  headingAnatomy,\n  headingLevels,\n  headingRecipe,\n}\n"],"mappings":";;;AAMA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,IAAI,CAAC,wDAAwD,GAAG;CACpF,iBAAiB;EAAE,OAAA;EAA4B,SAAS;CAAM;CAC9D,UAAU;EACR,OAAO;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;EACX;EACA,SAAS;GAAE,OAAO;GAAI,MAAM;EAAe;CAC7C;AACF,CAAC;AAED,MAAM,sBAAsB;CAC1B,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,SAAS;AACX;AAEA,MAAM,iBAAiB,QAAQ,EAC7B,MAAM;CAAE,MAAM;CAAW,QAAQ;CAAe,UAAU;AAAK,EACjE,CAAC"}