@crisp-ui-kit/crisp 0.33.4 → 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/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/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/datepicker/datepicker.js

@@ -90,7 +90,13 @@ const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
         }, ...mergeProps(api.rootProps, rootProps), "aria-label": rootAriaLabel, "aria-labelledby": ariaLabelledby, className: datepickerRecipe({
             visibleRange: api.visibleRange,
             className,
-        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? (_jsxs("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "crisp-datepicker-continuous-scroll", children: [_jsx(WeekdayRow, { api: api, semantic: false }), _jsxs("div", { className: "crisp-datepicker-continuous-content", children: [_jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), _jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : (_jsxs(_Fragment, { children: [api.visibleRange !== "twoMonths" && _jsx(Header, { api: api }), _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" ? (_jsxs("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "crisp-datepicker-continuous-scroll", children: [_jsx(WeekdayRow, { api: api, semantic: false }), _jsxs("div", { className: "crisp-datepicker-continuous-content", children: [_jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), _jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : (_jsxs(_Fragment, { children: [api.visibleRange !== "twoMonths" && _jsx(Header, { api: api }), _jsx("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? ""
                             : undefined, "aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? true

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

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

package/dist/esm/components/linechart/linechart.js

@@ -41,9 +41,14 @@ export function LineChart({ data, height = 240, max, ticks = 5, color, area = tr
         : "";
     const summary = ariaLabel ??
         `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return (_jsxs("div", { className: linechartRecipe({ className }), ...rest, style: {
+    return (_jsxs("div", { className: 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: [_jsxs("div", { className: "crisp-linechart-body", children: [_jsx("div", { className: "crisp-linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "crisp-linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "crisp-linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "crisp-linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "crisp-linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "crisp-linechart-area", d: areaPath }), _jsx("polyline", { className: "crisp-linechart-line", points: line, style: { stroke: color } })] })), dots &&
                                 pts.map((p, i) => (_jsx("span", { className: "crisp-linechart-dot-html", style: {
                                         left: `${p.x}%`,

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

@@ -1,14 +1,20 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A pulsing placeholder block for loading states.
-const config = defineRecipe({
+const spec = defineSpec({
     name: "skeleton",
-    globalCss: `@keyframes crisp-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }`,
-    base: `display: block; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); border-radius: ${c.radius.md}; animation: crisp-skeleton 1.4s ease-in-out infinite;
-    &[data-circle] { border-radius: ${c.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, ${c.fgPrimary} 8%, transparent)`,
+        borderRadius: c.radius.md,
+        animation: "crisp-skeleton 1.4s ease-in-out infinite",
+    },
+    parts: [
+        { selector: "&[data-circle]", decls: { borderRadius: c.radius.full } },
+    ],
 });
+const config = specToRecipe(spec);
 export const skeletonRecipe = resolveRecipe(config);
+export { spec };
 export default config;

package/dist/esm/components/table/table.js

@@ -8,11 +8,15 @@ import { tableRecipe } from "./table.recipe.js";
  * `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`,
  * `TableCell`, and `TableCaption`.
  */
-export const Table = React.forwardRef(({ interactive, surface, className, wrapperClassName, scrollProps, children, ...props }, ref) => (_jsx("div", { className: tableRecipe({
+export const 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) => (_jsx("div", { className: tableRecipe({
         interactive,
         surface,
         className: wrapperClassName,
-    }), children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), style: style, children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, ...props, children: children }) }) })));
 Table.displayName = "Table";
 export const TableHeader = React.forwardRef((props, ref) => _jsx("thead", { ref: ref, ...props }));
 TableHeader.displayName = "TableHeader";

package/dist/esm/components/textarea/textarea.js

@@ -6,12 +6,19 @@ import { textareaRecipe } from "./textarea.recipe.js";
  * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
  * character counter (which turns red if the value exceeds the limit).
  */
-export const Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, ...props }, ref) => {
+export const 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 (_jsxs("div", { className: textareaRecipe({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [_jsx("span", { className: "crisp-textarea-wrap", children: _jsx("textarea", { ref: ref, className: `crisp-textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
+    return (_jsxs("div", { className: textareaRecipe({ className: wrapperClassName }), style: style, "data-counted": counted ? "" : undefined, children: [_jsx("span", { className: "crisp-textarea-wrap", children: _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/esm/components/textarea/textarea.recipe.js

@@ -1,8 +1,17 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
-// 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 = defineRecipe({
     name: "textarea",
     base: `
@@ -10,7 +19,7 @@ const config = defineRecipe({
 
     & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
-      margin: 0; padding: ${c.space["1.5"]} ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md};
+      margin: 0; padding: ${c.space["2.5"]} 14px; border: none; border-radius: ${c.radius.md};
       background: ${c.bgSurface}; box-shadow: ${e.field};
       font-family: inherit; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
       outline: none; transition: box-shadow .15s ease;
@@ -32,7 +41,7 @@ const config = defineRecipe({
     &[data-invalid] .crisp-textarea-wrap::after { border-color: ${c.bgDanger}; }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${c.bgDanger}; }
     &[data-counted] .crisp-textarea-field { padding-bottom: ${c.space["5"]}; }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: ${c.space["2.5"]}; bottom: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${c.space["2.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: ${c.bgDanger}; }
   `,
     variants: {},

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

@@ -1,13 +1,34 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // 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 = defineRecipe({
+const spec = defineSpec({
     name: "tooltip",
-    base: `position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: ${c.space["1"]} ${c.space["2"]}; border-radius: ${c.radius.sm}; background: #20242c; color: #fff; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.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: `${c.space["1"]} ${c.space["2"]}`,
+        borderRadius: c.radius.sm,
+        background: "#20242c",
+        color: "#fff",
+        fontFamily: c.font.sans,
+        fontSize: c.text.sm,
+        fontWeight: c.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 } },
+    ],
 });
+const config = specToRecipe(spec);
 export const tooltipRecipe = resolveRecipe(config);
+export { spec };
 export default config;

package/dist/navitem.css

@@ -1,5 +1,5 @@
 .crisp-navitem {
-  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5) ; height: 28px; padding-inline: var(--crisp-space-2) ; padding-inline-end: var(--crisp-space-1) ; border-radius: var(--crisp-radius-lg) ; font-family: var(--crisp-font-sans) ; font-size: var(--crisp-text-lg) ; font-weight: var(--crisp-weight-medium) ; letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary) ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
+  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
     &:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }

package/dist/navitem.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-navitem {
-  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5) ; height: 28px; padding-inline: var(--crisp-space-2) ; padding-inline-end: var(--crisp-space-1) ; border-radius: var(--crisp-radius-lg) ; font-family: var(--crisp-font-sans) ; font-size: var(--crisp-text-lg) ; font-weight: var(--crisp-weight-medium) ; letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary) ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
+  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
     &:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }

package/dist/sidebar.css

@@ -1,5 +1,5 @@
 .crisp-sidebar {
-  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar) ; border-inline-end: 1px solid var(--crisp-border-subtle) ; padding: var(--crisp-space-2) ; font-family: var(--crisp-font-sans) ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
+  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar); border-inline-end: 1px solid var(--crisp-border-subtle); padding: var(--crisp-space-2); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
     & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
     & .crisp-sidebar-section[data-collapsed] { display: none; }
     & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }

package/dist/sidebar.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-sidebar {
-  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar) ; border-inline-end: 1px solid var(--crisp-border-subtle) ; padding: var(--crisp-space-2) ; font-family: var(--crisp-font-sans) ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
+  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar); border-inline-end: 1px solid var(--crisp-border-subtle); padding: var(--crisp-space-2); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
     & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
     & .crisp-sidebar-section[data-collapsed] { display: none; }
     & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }

package/dist/styles.css

@@ -483,7 +483,7 @@
 }
 
 .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"); }
@@ -1531,7 +1531,7 @@
 
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
@@ -1547,7 +1547,7 @@
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: var(--crisp-space-2-5); bottom: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
 }
 
@@ -1717,7 +1717,7 @@
 }
 
 .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); }
@@ -1859,7 +1859,7 @@
 }
 
 .crisp-navitem {
-  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5) ; height: 28px; padding-inline: var(--crisp-space-2) ; padding-inline-end: var(--crisp-space-1) ; border-radius: var(--crisp-radius-lg) ; font-family: var(--crisp-font-sans) ; font-size: var(--crisp-text-lg) ; font-weight: var(--crisp-weight-medium) ; letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary) ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
+  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
     &:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
@@ -2380,7 +2380,7 @@
 }
 
 .crisp-sidebar {
-  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar) ; border-inline-end: 1px solid var(--crisp-border-subtle) ; padding: var(--crisp-space-2) ; font-family: var(--crisp-font-sans) ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
+  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar); border-inline-end: 1px solid var(--crisp-border-subtle); padding: var(--crisp-space-2); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
     & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
     & .crisp-sidebar-section[data-collapsed] { display: none; }
     & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }

package/dist/styles.layered.css

@@ -484,7 +484,7 @@
 }
 
 .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"); }
@@ -1532,7 +1532,7 @@
 
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
@@ -1548,7 +1548,7 @@
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: var(--crisp-space-2-5); bottom: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
 }
 
@@ -1718,7 +1718,7 @@
 }
 
 .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); }
@@ -1860,7 +1860,7 @@
 }
 
 .crisp-navitem {
-  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5) ; height: 28px; padding-inline: var(--crisp-space-2) ; padding-inline-end: var(--crisp-space-1) ; border-radius: var(--crisp-radius-lg) ; font-family: var(--crisp-font-sans) ; font-size: var(--crisp-text-lg) ; font-weight: var(--crisp-weight-medium) ; letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary) ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
+  box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
     &:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
@@ -2381,7 +2381,7 @@
 }
 
 .crisp-sidebar {
-  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar) ; border-inline-end: 1px solid var(--crisp-border-subtle) ; padding: var(--crisp-space-2) ; font-family: var(--crisp-font-sans) ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
+  box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar); border-inline-end: 1px solid var(--crisp-border-subtle); padding: var(--crisp-space-2); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
     & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
     & .crisp-sidebar-section[data-collapsed] { display: none; }
     & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }

package/dist/textarea.css

@@ -1,6 +1,6 @@
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
@@ -16,7 +16,7 @@
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: var(--crisp-space-2-5); bottom: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
 }
 

package/dist/textarea.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
@@ -17,7 +17,7 @@
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: var(--crisp-space-2-5); bottom: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
 }
 

package/dist/types/components/avatargroup/avatargroup.recipe.d.ts

@@ -1,3 +1,26 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const avatargroupRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "avatargroup";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+    };
+    readonly parts: [{
+        readonly slot: "member";
+        readonly selector: "& > *";
+        readonly decls: {
+            readonly marginInlineStart: `-var(--${string})`;
+            readonly boxShadow: `0 0 0 2px var(--${string})`;
+            readonly position: "relative";
+        };
+    }, {
+        readonly slot: "member";
+        readonly selector: "& > *:first-child";
+        readonly decls: {
+            readonly marginInlineStart: 0;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const avatargroupRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/dist/types/components/checkbox/checkbox.recipe.d.ts

@@ -1,5 +1,53 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const checkboxRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const spec: {
+    readonly name: "checkbox";
+    readonly base: {
+        readonly appearance: "none";
+        readonly WebkitAppearance: "none";
+        readonly boxSizing: "border-box";
+        readonly flexShrink: 0;
+        readonly margin: 0;
+        readonly width: "16px";
+        readonly height: "16px";
+        readonly border: "none";
+        readonly borderRadius: `var(--${string})`;
+        readonly background: `var(--${string})`;
+        readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 9%, transparent)`;
+        readonly cursor: "pointer";
+        readonly transition: "background-color .12s, box-shadow .12s";
+    };
+    readonly parts: [{
+        readonly selector: "&:hover";
+        readonly decls: {
+            readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 30%, transparent)`;
+        };
+    }, {
+        readonly selector: "&:checked, &:indeterminate";
+        readonly decls: {
+            readonly background: `var(--${string}) center / 10px no-repeat`;
+            readonly boxShadow: "none";
+        };
+    }, {
+        readonly selector: "&:checked";
+        readonly decls: {
+            backgroundImage: "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\")";
+        };
+    }, {
+        readonly selector: "&:indeterminate";
+        readonly decls: {
+            readonly backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
+            readonly backgroundSize: "8px 2px";
+        };
+    }, {
+        readonly selector: "&:focus-visible";
+        readonly decls: {
+            readonly outline: `2px solid var(--${string})`;
+            readonly outlineOffset: "1px";
+        };
+    }];
 };
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const checkboxRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>> & {
+    config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+};
+export { spec };
 export default config;

package/dist/types/components/kbd/kbd.recipe.d.ts

@@ -1,5 +1,26 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const kbdRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const spec: {
+    readonly name: "kbd";
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: `var(--${string})`;
+        readonly minWidth: "20px";
+        readonly height: "20px";
+        readonly paddingInline: `var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly color: `color-mix(in srgb, var(--${string}) 50%, transparent)`;
+        readonly background: "transparent";
+        readonly boxShadow: `inset 0 0 0 1px color-mix(in srgb, var(--${string}) 6%, transparent)`;
+    };
 };
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const kbdRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>> & {
+    config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+};
+export { spec };
 export default config;

package/dist/types/components/skeleton/skeleton.recipe.d.ts

@@ -1,3 +1,20 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const skeletonRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "skeleton";
+    readonly globalCss: "@keyframes crisp-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }";
+    readonly base: {
+        readonly display: "block";
+        readonly background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
+        readonly borderRadius: `var(--${string})`;
+        readonly animation: "crisp-skeleton 1.4s ease-in-out infinite";
+    };
+    readonly parts: [{
+        readonly selector: "&[data-circle]";
+        readonly decls: {
+            borderRadius: `var(--${string})`;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const skeletonRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/dist/types/components/tooltip/tooltip.recipe.d.ts

@@ -1,3 +1,31 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const tooltipRecipe: import("../..").RecipeFn<{}>;
+declare const spec: {
+    readonly name: "tooltip";
+    readonly base: {
+        readonly position: "fixed";
+        readonly zIndex: 70;
+        readonly boxSizing: "border-box";
+        readonly pointerEvents: "none";
+        readonly maxWidth: "260px";
+        readonly padding: `var(--${string}) var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly background: "#20242c";
+        readonly color: "#fff";
+        readonly fontFamily: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly lineHeight: "1.45";
+        readonly boxShadow: "0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04)";
+        readonly opacity: 1;
+        readonly transition: "opacity 0.12s ease";
+    };
+    readonly parts: [{
+        readonly selector: "@starting-style";
+        readonly decls: {
+            readonly opacity: 0;
+        };
+    }];
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const tooltipRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
 export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.33.4",
+  "version": "0.33.5",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -413,6 +413,7 @@
     "build:css": "bun run build.mjs",
     "build:types": "tsc -p tsconfig.build.json",
     "build": "bun run build:css && bun run build:tokens && bun run build:esm && bun run build:cjs && bun run build:types",
+    "audit:docs": "bun scripts/audit-docs.mjs",
     "check:css": "bun scripts/check-css.mjs",
     "check:dist": "bun scripts/check-dist.mjs",
     "prepublishOnly": "bun run build && bun run check:dist && bun run check:css",