@crisp-ui-kit/crisp 0.33.4 → 0.34.0

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/esm/product/recordpage/recordpage.js

@@ -355,7 +355,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
                                                 autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
                                                     if (e.key === "Escape") {

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

@@ -122,90 +122,6 @@
   --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
-/* -----------------------------------------------------------------
- * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
- * the next major version. Prefer the --crisp-* custom property
- * above; these only forward to it so an existing override keeps working.
- * ----------------------------------------------------------------- */
-:root {
-  --bg-brand-solid: var(--crisp-bg-brand-solid);
-  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
-  --fg-on-brand: var(--crisp-fg-on-brand);
-  --fg-on-tone: var(--crisp-fg-on-tone);
-  --bg-surface: var(--crisp-bg-surface);
-  --bg-raised: var(--crisp-bg-raised);
-  --border-default: var(--crisp-border-default);
-  --border-subtle: var(--crisp-border-subtle);
-  --ring-neutral: var(--crisp-ring-neutral);
-  --bg-tile-active: var(--crisp-bg-tile-active);
-  --shadow-tile-active: var(--crisp-shadow-tile-active);
-  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
-  --shadow-overlay1: var(--crisp-shadow-overlay1);
-  --shadow-overlay2: var(--crisp-shadow-overlay2);
-  --shadow-overlay3: var(--crisp-shadow-overlay3);
-  --bg-popover: var(--crisp-bg-popover);
-  --ring-popover: var(--crisp-ring-popover);
-  --shadow-popover1: var(--crisp-shadow-popover1);
-  --shadow-popover2: var(--crisp-shadow-popover2);
-  --shadow-popover3: var(--crisp-shadow-popover3);
-  --fg-primary: var(--crisp-fg-primary);
-  --fg-muted: var(--crisp-fg-muted);
-  --bg-danger: var(--crisp-bg-danger);
-  --bg-danger-solid: var(--crisp-bg-danger-solid);
-  --stroke-field-focus: var(--crisp-stroke-field-focus);
-  --fg-disabled: var(--crisp-fg-disabled);
-  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
-  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
-  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
-  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
-  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
-  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
-  --bg-success: var(--crisp-bg-success);
-  --bg-warning: var(--crisp-bg-warning);
-  --bg-orange: var(--crisp-bg-orange);
-  --bg-cyan: var(--crisp-bg-cyan);
-  --bg-purple: var(--crisp-bg-purple);
-  --bg-sidebar: var(--crisp-bg-sidebar);
-  --bg-subtle: var(--crisp-bg-subtle);
-  --space-1: var(--crisp-space-1);
-  --space-2: var(--crisp-space-2);
-  --space-3: var(--crisp-space-3);
-  --space-4: var(--crisp-space-4);
-  --space-5: var(--crisp-space-5);
-  --space-6: var(--crisp-space-6);
-  --space-8: var(--crisp-space-8);
-  --space-px: var(--crisp-space-px);
-  --space-0-5: var(--crisp-space-0-5);
-  --space-1-5: var(--crisp-space-1-5);
-  --space-2-5: var(--crisp-space-2-5);
-  --radius-chip: var(--crisp-radius-chip);
-  --radius-sm: var(--crisp-radius-sm);
-  --radius-md: var(--crisp-radius-md);
-  --radius-lg: var(--crisp-radius-lg);
-  --radius-xl: var(--crisp-radius-xl);
-  --radius-2xl: var(--crisp-radius-2xl);
-  --radius-full: var(--crisp-radius-full);
-  --size-icon: var(--crisp-size-icon);
-  --size-chip: var(--crisp-size-chip);
-  --size-row: var(--crisp-size-row);
-  --size-menuRow: var(--crisp-size-menuRow);
-  --size-tableRow: var(--crisp-size-tableRow);
-  --size-tableHeader: var(--crisp-size-tableHeader);
-  --size-header: var(--crisp-size-header);
-  --size-calendarCell: var(--crisp-size-calendarCell);
-  --size-calendarPill: var(--crisp-size-calendarPill);
-  --text-xs: var(--crisp-text-xs);
-  --text-sm: var(--crisp-text-sm);
-  --text-md: var(--crisp-text-md);
-  --text-lg: var(--crisp-text-lg);
-  --text-xl: var(--crisp-text-xl);
-  --weight-regular: var(--crisp-weight-regular);
-  --weight-medium: var(--crisp-weight-medium);
-  --weight-semibold: var(--crisp-weight-semibold);
-  --weight-bold: var(--crisp-weight-bold);
-  --font-sans: var(--crisp-font-sans);
-}
-
 .crisp-accordion {
   display: flex; flex-direction: column; font-family: var(--crisp-font-sans);
     & .crisp-accordion-item { border-bottom: 1px solid var(--crisp-border-subtle); }
@@ -483,7 +399,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 +1447,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 +1463,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 +1633,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 +1775,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 +2296,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

@@ -122,90 +122,6 @@
   --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
-/* -----------------------------------------------------------------
- * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
- * the next major version. Prefer the --crisp-* custom property
- * above; these only forward to it so an existing override keeps working.
- * ----------------------------------------------------------------- */
-:root {
-  --bg-brand-solid: var(--crisp-bg-brand-solid);
-  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
-  --fg-on-brand: var(--crisp-fg-on-brand);
-  --fg-on-tone: var(--crisp-fg-on-tone);
-  --bg-surface: var(--crisp-bg-surface);
-  --bg-raised: var(--crisp-bg-raised);
-  --border-default: var(--crisp-border-default);
-  --border-subtle: var(--crisp-border-subtle);
-  --ring-neutral: var(--crisp-ring-neutral);
-  --bg-tile-active: var(--crisp-bg-tile-active);
-  --shadow-tile-active: var(--crisp-shadow-tile-active);
-  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
-  --shadow-overlay1: var(--crisp-shadow-overlay1);
-  --shadow-overlay2: var(--crisp-shadow-overlay2);
-  --shadow-overlay3: var(--crisp-shadow-overlay3);
-  --bg-popover: var(--crisp-bg-popover);
-  --ring-popover: var(--crisp-ring-popover);
-  --shadow-popover1: var(--crisp-shadow-popover1);
-  --shadow-popover2: var(--crisp-shadow-popover2);
-  --shadow-popover3: var(--crisp-shadow-popover3);
-  --fg-primary: var(--crisp-fg-primary);
-  --fg-muted: var(--crisp-fg-muted);
-  --bg-danger: var(--crisp-bg-danger);
-  --bg-danger-solid: var(--crisp-bg-danger-solid);
-  --stroke-field-focus: var(--crisp-stroke-field-focus);
-  --fg-disabled: var(--crisp-fg-disabled);
-  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
-  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
-  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
-  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
-  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
-  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
-  --bg-success: var(--crisp-bg-success);
-  --bg-warning: var(--crisp-bg-warning);
-  --bg-orange: var(--crisp-bg-orange);
-  --bg-cyan: var(--crisp-bg-cyan);
-  --bg-purple: var(--crisp-bg-purple);
-  --bg-sidebar: var(--crisp-bg-sidebar);
-  --bg-subtle: var(--crisp-bg-subtle);
-  --space-1: var(--crisp-space-1);
-  --space-2: var(--crisp-space-2);
-  --space-3: var(--crisp-space-3);
-  --space-4: var(--crisp-space-4);
-  --space-5: var(--crisp-space-5);
-  --space-6: var(--crisp-space-6);
-  --space-8: var(--crisp-space-8);
-  --space-px: var(--crisp-space-px);
-  --space-0-5: var(--crisp-space-0-5);
-  --space-1-5: var(--crisp-space-1-5);
-  --space-2-5: var(--crisp-space-2-5);
-  --radius-chip: var(--crisp-radius-chip);
-  --radius-sm: var(--crisp-radius-sm);
-  --radius-md: var(--crisp-radius-md);
-  --radius-lg: var(--crisp-radius-lg);
-  --radius-xl: var(--crisp-radius-xl);
-  --radius-2xl: var(--crisp-radius-2xl);
-  --radius-full: var(--crisp-radius-full);
-  --size-icon: var(--crisp-size-icon);
-  --size-chip: var(--crisp-size-chip);
-  --size-row: var(--crisp-size-row);
-  --size-menuRow: var(--crisp-size-menuRow);
-  --size-tableRow: var(--crisp-size-tableRow);
-  --size-tableHeader: var(--crisp-size-tableHeader);
-  --size-header: var(--crisp-size-header);
-  --size-calendarCell: var(--crisp-size-calendarCell);
-  --size-calendarPill: var(--crisp-size-calendarPill);
-  --text-xs: var(--crisp-text-xs);
-  --text-sm: var(--crisp-text-sm);
-  --text-md: var(--crisp-text-md);
-  --text-lg: var(--crisp-text-lg);
-  --text-xl: var(--crisp-text-xl);
-  --weight-regular: var(--crisp-weight-regular);
-  --weight-medium: var(--crisp-weight-medium);
-  --weight-semibold: var(--crisp-weight-semibold);
-  --weight-bold: var(--crisp-weight-bold);
-  --font-sans: var(--crisp-font-sans);
-}
-
 @layer crisp-components {
 .crisp-accordion {
   display: flex; flex-direction: column; font-family: var(--crisp-font-sans);
@@ -484,7 +400,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 +1448,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 +1464,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 +1634,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 +1776,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 +2297,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); }
 }