@crisp-ui-kit/crisp 0.33.3 → 0.33.5

package/dist/checkbox.css

@@ -1,5 +1,5 @@
 .crisp-checkbox {
-  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm) ; background: var(--crisp-bg-surface) ; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s;
+  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s;
     &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
     &:checked, &:indeterminate { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; }
     &:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }

package/dist/checkbox.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-checkbox {
-  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm) ; background: var(--crisp-bg-surface) ; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s;
+  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s;
     &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
     &:checked, &:indeterminate { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; }
     &:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }

package/dist/cjs/components/avatargroup/avatargroup.recipe.js

@@ -1,18 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.avatargroupRecipe = void 0;
+exports.spec = exports.avatargroupRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A row of overlapping avatars — each ringed in the surface colour so it reads
 // against its neighbour, with a "+N" overflow chip.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "avatargroup",
-    base: `display: inline-flex; align-items: center;
-    & > * { margin-inline-start: -${tokens_1.contract.space["2"]}; box-shadow: 0 0 0 2px ${tokens_1.contract.bgSurface}; position: relative; }
-    & > *:first-child { margin-inline-start: 0; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: { display: "inline-flex", alignItems: "center" },
+    parts: [
+        {
+            slot: "member",
+            selector: "& > *",
+            decls: {
+                marginInlineStart: `-${tokens_1.contract.space["2"]}`,
+                boxShadow: `0 0 0 2px ${tokens_1.contract.bgSurface}`,
+                position: "relative",
+            },
+        },
+        {
+            slot: "member",
+            selector: "& > *:first-child",
+            decls: { marginInlineStart: 0 },
+        },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.avatargroupRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/cjs/components/barchart/barchart.js

@@ -34,9 +34,14 @@ function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n
         : `max(34px, ${longestTickChars}ch + ${tokens_1.contract.space["4"]})`;
     const summary = ariaLabel ??
         `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, barchart_recipe_1.barchartRecipe)({ className }), ...rest, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, barchart_recipe_1.barchartRecipe)({ className }), ...rest, 
+        // merged, not assigned: written plainly this sits AFTER `{...rest}` and
+        // overwrites whatever style the consumer passed, so `style={{ maxWidth }}`
+        // on the chart did nothing at all. The consumer's wins on collision.
+        style: {
             height,
             "--crisp-barchart-yaxis-width": yAxisWidthValue,
+            ...rest.style,
         }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-barchart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-barchart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-col", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
                                         height: `${Math.max(0, (d.value / top) * 100)}%`,
                                         background: color,

package/dist/cjs/components/checkbox/checkbox.recipe.js

@@ -1,28 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxRecipe = void 0;
+exports.spec = exports.checkboxRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A 16px square checkbox measured from a record grid: r6, a subtle 1px
 // inset ring when empty, brand fill + white check when on. The check is a
 // data-URI SVG background so it renders reliably (input pseudo-content doesn't).
 const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "checkbox",
-    base: `appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.sm}
-  ; background: ${tokens_1.contract.bgSurface}
-  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary}
-  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
-  &:checked, &:indeterminate { background: ${tokens_1.contract.bgBrandSolid} center / 10px no-repeat; box-shadow: none; }
-  &:checked { background-image: ${CHECK}; }
-  &:indeterminate { background-image: linear-gradient(${tokens_1.contract.fgOnBrand}, ${tokens_1.contract.fgOnBrand}); background-size: 8px 2px; }
-  &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
-  `,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-});
-exports.checkboxRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
+    base: {
+        appearance: "none",
+        WebkitAppearance: "none",
+        boxSizing: "border-box",
+        flexShrink: 0,
+        margin: 0,
+        width: "16px",
+        height: "16px",
+        border: "none",
+        borderRadius: tokens_1.contract.radius.sm,
+        background: tokens_1.contract.bgSurface,
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent)`,
+        cursor: "pointer",
+        transition: "background-color .12s, box-shadow .12s",
+    },
+    parts: [
+        {
+            selector: "&:hover",
+            decls: {
+                boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent)`,
+            },
+        },
+        {
+            selector: "&:checked, &:indeterminate",
+            decls: {
+                background: `${tokens_1.contract.bgBrandSolid} center / 10px no-repeat`,
+                boxShadow: "none",
+            },
+        },
+        { selector: "&:checked", decls: { backgroundImage: CHECK } },
+        {
+            selector: "&:indeterminate",
+            decls: {
+                backgroundImage: `linear-gradient(${tokens_1.contract.fgOnBrand}, ${tokens_1.contract.fgOnBrand})`,
+                backgroundSize: "8px 2px",
+            },
+        },
+        {
+            selector: "&:focus-visible",
+            decls: {
+                outline: `2px solid ${tokens_1.contract.bgBrandSolid}`,
+                outlineOffset: "1px",
+            },
+        },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.checkboxRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -17,12 +17,12 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-/* The header cell has no padding of its own -- the button owns the
     /* announced, never drawn */
     & .crisp-datatable-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
+    /* The header cell has no padding of its own -- the button owns the
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
     & th { padding: 0; }

package/dist/cjs/components/datepicker/datepicker.js

@@ -126,7 +126,13 @@ const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
         }, ...(0, dom_utils_1.mergeProps)(api.rootProps, rootProps), "aria-label": rootAriaLabel, "aria-labelledby": ariaLabelledby, className: (0, datepicker_recipe_1.datepickerRecipe)({
             visibleRange: api.visibleRange,
             className,
-        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? ((0, jsx_runtime_1.jsxs)("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "crisp-datepicker-continuous-scroll", children: [(0, jsx_runtime_1.jsx)(WeekdayRow, { api: api, semantic: false }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-continuous-content", children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [api.visibleRange !== "twoMonths" && (0, jsx_runtime_1.jsx)(Header, { api: api }), (0, jsx_runtime_1.jsx)("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
+        }), 
+        // merged: this sits after the spread above, so assigning it plainly
+        // dropped any style the consumer passed. Theirs wins on collision.
+        style: {
+            ...styleOf({ height, minHeight, maxHeight }),
+            ...rootProps?.style,
+        }, children: [api.visibleRange === "continuous" ? ((0, jsx_runtime_1.jsxs)("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "crisp-datepicker-continuous-scroll", children: [(0, jsx_runtime_1.jsx)(WeekdayRow, { api: api, semantic: false }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-continuous-content", children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [api.visibleRange !== "twoMonths" && (0, jsx_runtime_1.jsx)(Header, { api: api }), (0, jsx_runtime_1.jsx)("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? ""
                             : undefined, "aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? true

package/dist/cjs/components/kbd/kbd.recipe.js

@@ -1,16 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.kbdRecipe = void 0;
+exports.spec = exports.kbdRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "kbd",
-    base: `box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["0.5"]}; min-width: 20px; height: 20px; padding-inline: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.regular}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent);`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-});
-exports.kbdRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
+    base: {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: tokens_1.contract.space["0.5"],
+        minWidth: "20px",
+        height: "20px",
+        paddingInline: tokens_1.contract.space["1"],
+        borderRadius: tokens_1.contract.radius.sm,
+        fontFamily: tokens_1.contract.font.sans,
+        fontSize: tokens_1.contract.text.xs,
+        fontWeight: tokens_1.contract.weight.regular,
+        color: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent)`,
+        background: "transparent",
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent)`,
+    },
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.kbdRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

package/dist/cjs/components/linechart/linechart.js

@@ -44,9 +44,14 @@ function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dot
         : "";
     const summary = ariaLabel ??
         `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, linechart_recipe_1.linechartRecipe)({ className }), ...rest, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, linechart_recipe_1.linechartRecipe)({ className }), ...rest, 
+        // merged, not assigned: written plainly this sits AFTER `{...rest}` and
+        // overwrites whatever style the consumer passed, so `style={{ maxWidth }}`
+        // on the chart did nothing at all. The consumer's wins on collision.
+        style: {
             height,
             "--crisp-linechart-yaxis-width": yAxisWidthValue,
+            ...rest.style,
         }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-linechart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-linechart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-linechart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && ((0, jsx_runtime_1.jsxs)("svg", { className: "crisp-linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && (0, jsx_runtime_1.jsx)("path", { className: "crisp-linechart-area", d: areaPath }), (0, jsx_runtime_1.jsx)("polyline", { className: "crisp-linechart-line", points: line, style: { stroke: color } })] })), dots &&
                                 pts.map((p, i) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-linechart-dot-html", style: {
                                         left: `${p.x}%`,

package/dist/cjs/components/skeleton/skeleton.recipe.js

@@ -1,17 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.skeletonRecipe = void 0;
+exports.spec = exports.skeletonRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A pulsing placeholder block for loading states.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "skeleton",
-    globalCss: `@keyframes crisp-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }`,
-    base: `display: block; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); border-radius: ${tokens_1.contract.radius.md}; animation: crisp-skeleton 1.4s ease-in-out infinite;
-    &[data-circle] { border-radius: ${tokens_1.contract.radius.full}; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    globalCss: "@keyframes crisp-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }",
+    base: {
+        display: "block",
+        background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent)`,
+        borderRadius: tokens_1.contract.radius.md,
+        animation: "crisp-skeleton 1.4s ease-in-out infinite",
+    },
+    parts: [
+        { selector: "&[data-circle]", decls: { borderRadius: tokens_1.contract.radius.full } },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.skeletonRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/cjs/components/table/table.js

@@ -44,11 +44,15 @@ const table_recipe_1 = require("./table.recipe");
  * `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`,
  * `TableCell`, and `TableCaption`.
  */
-exports.Table = React.forwardRef(({ interactive, surface, className, wrapperClassName, scrollProps, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { className: (0, table_recipe_1.tableRecipe)({
+exports.Table = React.forwardRef(({ interactive, surface, className, wrapperClassName, scrollProps, children, 
+// on the root for the same reason as Textarea: the wrapper is the box a
+// consumer sees and the scroll container they want to size. Native
+// table attributes still reach the <table> below.
+style, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { className: (0, table_recipe_1.tableRecipe)({
         interactive,
         surface,
         className: wrapperClassName,
-    }), children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), style: style, children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, ...props, children: children }) }) })));
 exports.Table.displayName = "Table";
 exports.TableHeader = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("thead", { ref: ref, ...props }));
 exports.TableHeader.displayName = "TableHeader";

package/dist/cjs/components/textarea/textarea.js

@@ -42,12 +42,19 @@ const textarea_recipe_1 = require("./textarea.recipe");
  * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
  * character counter (which turns red if the value exceeds the limit).
  */
-exports.Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, ...props }, ref) => {
+exports.Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, 
+// `style` is pulled out and put on the ROOT, the way Input does it.
+// Everything else belongs on the <textarea> -- id, name, form
+// association, aria -- but `style` sizes the visual box, and the box is
+// the root: it carries the focus ring (an ::after on the wrap) and the
+// character counter. Left on the field, `style={{ maxWidth: 480 }}` gave
+// a 480px control inside a full-width ring with the counter stranded.
+style, ...props }, ref) => {
     const initial = String(value ?? defaultValue ?? "").length;
     const [count, setCount] = React.useState(initial);
     const len = value !== undefined ? String(value).length : count;
     const counted = showCount && maxLength != null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, textarea_recipe_1.textareaRecipe)({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-textarea-wrap", children: (0, jsx_runtime_1.jsx)("textarea", { ref: ref, className: `crisp-textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, textarea_recipe_1.textareaRecipe)({ className: wrapperClassName }), style: style, "data-counted": counted ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-textarea-wrap", children: (0, jsx_runtime_1.jsx)("textarea", { ref: ref, className: `crisp-textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
                         if (value === undefined)
                             setCount(e.target.value.length);
                         onChange?.(e);

package/dist/cjs/components/textarea/textarea.recipe.js

@@ -3,9 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.textareaRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// A multiline text field, measured from a settings "Personal context" field: an
-// inset 1px ring (radius 8), 14px text, 6/10 padding, and an optional character
-// counter pinned bottom-right (12px, muted). Focus rings the field brand.
+// A multiline text field: an inset 1px ring (radius 8), 14px text, and an
+// optional character counter pinned bottom-right (12px, muted). Focus rings
+// the field brand.
+//
+// The inset is seed-design's, not Attio's -- the second deliberate divergence
+// after the focus treatment. seed's text-input sets its inline inset to
+// `$dimension.x3_5`, which rootage/dimension.yaml gives as **14px**, against
+// the 10px this had. seed ships no textarea, so only the horizontal inset is
+// theirs to copy; the vertical is derived from it: 10px above and below a
+// 20px line makes a single-line box 40px tall, which is exactly seed's
+// `$dimension.x10` medium field height. The counter's own inset moves to 14px
+// with it, so it lines up with the text rather than sitting 4px inside it.
 const config = (0, core_1.defineRecipe)({
     name: "textarea",
     base: `
@@ -13,7 +22,7 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
-      margin: 0; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md};
+      margin: 0; padding: ${tokens_1.contract.space["2.5"]} 14px; border: none; border-radius: ${tokens_1.contract.radius.md};
       background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field};
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
       outline: none; transition: box-shadow .15s ease;
@@ -35,7 +44,7 @@ const config = (0, core_1.defineRecipe)({
     &[data-invalid] .crisp-textarea-wrap::after { border-color: ${tokens_1.contract.bgDanger}; }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }
     &[data-counted] .crisp-textarea-field { padding-bottom: ${tokens_1.contract.space["5"]}; }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: ${tokens_1.contract.space["2.5"]}; bottom: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${tokens_1.contract.space["2.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: ${tokens_1.contract.bgDanger}; }
   `,
     variants: {},

package/dist/cjs/components/tooltip/tooltip.recipe.js

@@ -1,16 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltipRecipe = void 0;
+exports.spec = exports.tooltipRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // The floating bubble for a Tooltip — a dark hint chip. Applied to the
 // portaled bubble itself (not a wrapper), so its styles survive the portal.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "tooltip",
-    base: `position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.sm}; background: #20242c; color: #fff; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        position: "fixed",
+        zIndex: 70,
+        boxSizing: "border-box",
+        pointerEvents: "none",
+        maxWidth: "260px",
+        padding: `${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}`,
+        borderRadius: tokens_1.contract.radius.sm,
+        background: "#20242c",
+        color: "#fff",
+        fontFamily: tokens_1.contract.font.sans,
+        fontSize: tokens_1.contract.text.sm,
+        fontWeight: tokens_1.contract.weight.medium,
+        lineHeight: "1.45",
+        boxShadow: "0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04)",
+        opacity: 1,
+        transition: "opacity 0.12s ease",
+    },
+    parts: [
+        // An at-rule whose body is declarations rather than rules, so a part
+        // expresses it directly: the entry state the overlay animates from.
+        { selector: "@starting-style", decls: { opacity: 0 } },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.tooltipRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/command.css

@@ -1,5 +1,5 @@
 .crisp-command {
-  display: contents; font-family: var(--crisp-font-sans) ;
+  display: contents; font-family: var(--crisp-font-sans);
     & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
     & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }

package/dist/command.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-command {
-  display: contents; font-family: var(--crisp-font-sans) ;
+  display: contents; font-family: var(--crisp-font-sans);
     & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
     & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }

package/dist/datatable.css

@@ -7,9 +7,9 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    /* announced, never drawn */
     & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
     /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a

package/dist/datatable.layered.css

@@ -8,9 +8,9 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    /* announced, never drawn */
     & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
     /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a

package/dist/esm/components/avatargroup/avatargroup.recipe.js

@@ -1,15 +1,28 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A row of overlapping avatars — each ringed in the surface colour so it reads
 // against its neighbour, with a "+N" overflow chip.
-const config = defineRecipe({
+const spec = defineSpec({
     name: "avatargroup",
-    base: `display: inline-flex; align-items: center;
-    & > * { margin-inline-start: -${c.space["2"]}; box-shadow: 0 0 0 2px ${c.bgSurface}; position: relative; }
-    & > *:first-child { margin-inline-start: 0; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: { display: "inline-flex", alignItems: "center" },
+    parts: [
+        {
+            slot: "member",
+            selector: "& > *",
+            decls: {
+                marginInlineStart: `-${c.space["2"]}`,
+                boxShadow: `0 0 0 2px ${c.bgSurface}`,
+                position: "relative",
+            },
+        },
+        {
+            slot: "member",
+            selector: "& > *:first-child",
+            decls: { marginInlineStart: 0 },
+        },
+    ],
 });
+const config = specToRecipe(spec);
 export const avatargroupRecipe = resolveRecipe(config);
+export { spec };
 export default config;

package/dist/esm/components/barchart/barchart.js

@@ -31,9 +31,14 @@ export function BarChart({ data, height = 240, max, ticks = 5, color, format = (
         : `max(34px, ${longestTickChars}ch + ${c.space["4"]})`;
     const summary = ariaLabel ??
         `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return (_jsxs("div", { className: barchartRecipe({ className }), ...rest, style: {
+    return (_jsxs("div", { className: barchartRecipe({ className }), ...rest, 
+        // merged, not assigned: written plainly this sits AFTER `{...rest}` and
+        // overwrites whatever style the consumer passed, so `style={{ maxWidth }}`
+        // on the chart did nothing at all. The consumer's wins on collision.
+        style: {
             height,
             "--crisp-barchart-yaxis-width": yAxisWidthValue,
+            ...rest.style,
         }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "crisp-barchart-body", children: [_jsx("div", { className: "crisp-barchart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "crisp-barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "crisp-barchart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "crisp-barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => (_jsx("div", { className: "crisp-barchart-col", children: _jsx("div", { className: "crisp-barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
                                         height: `${Math.max(0, (d.value / top) * 100)}%`,
                                         background: color,

package/dist/esm/components/checkbox/checkbox.recipe.js

@@ -1,25 +1,58 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A 16px square checkbox measured from a record grid: r6, a subtle 1px
 // inset ring when empty, brand fill + white check when on. The check is a
 // data-URI SVG background so it renders reliably (input pseudo-content doesn't).
 const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
-const config = defineRecipe({
+const spec = defineSpec({
     name: "checkbox",
-    base: `appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.sm}
-  ; background: ${c.bgSurface}
-  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary}
-  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
-  &:checked, &:indeterminate { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; }
-  &:checked { background-image: ${CHECK}; }
-  &:indeterminate { background-image: linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand}); background-size: 8px 2px; }
-  &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
-  `,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-});
-export const checkboxRecipe = Object.assign(resolveRecipe(config), {
-    config,
+    base: {
+        appearance: "none",
+        WebkitAppearance: "none",
+        boxSizing: "border-box",
+        flexShrink: 0,
+        margin: 0,
+        width: "16px",
+        height: "16px",
+        border: "none",
+        borderRadius: c.radius.sm,
+        background: c.bgSurface,
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent)`,
+        cursor: "pointer",
+        transition: "background-color .12s, box-shadow .12s",
+    },
+    parts: [
+        {
+            selector: "&:hover",
+            decls: {
+                boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent)`,
+            },
+        },
+        {
+            selector: "&:checked, &:indeterminate",
+            decls: {
+                background: `${c.bgBrandSolid} center / 10px no-repeat`,
+                boxShadow: "none",
+            },
+        },
+        { selector: "&:checked", decls: { backgroundImage: CHECK } },
+        {
+            selector: "&:indeterminate",
+            decls: {
+                backgroundImage: `linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand})`,
+                backgroundSize: "8px 2px",
+            },
+        },
+        {
+            selector: "&:focus-visible",
+            decls: {
+                outline: `2px solid ${c.bgBrandSolid}`,
+                outlineOffset: "1px",
+            },
+        },
+    ],
 });
+const config = specToRecipe(spec);
+export const checkboxRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
 export default config;

package/dist/esm/components/datatable/datatable.recipe.js

@@ -14,12 +14,12 @@ const config = defineRecipe({
     & .crisp-datatable-search input::placeholder { color: ${c.fgMuted}; }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-/* The header cell has no padding of its own -- the button owns the
     /* announced, never drawn */
     & .crisp-datatable-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
+    /* The header cell has no padding of its own -- the button owns the
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
     & th { padding: 0; }