@crisp-ui-kit/crisp 0.32.1 → 0.33.1

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

@@ -1,60 +1,119 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeRecipe = void 0;
+exports.spec = exports.badgeRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-const config = (0, core_1.defineRecipe)({
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const spec = (0, core_1.defineSpec)({
     name: "badge",
-    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.1px; white-space: nowrap;
-    & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: currentColor; }`,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: tokens_1.contract.space["1"],
+        fontFamily: tokens_1.contract.font.sans,
+        fontWeight: tokens_1.contract.weight.medium,
+        letterSpacing: "-0.1px",
+        whiteSpace: "nowrap",
+    },
+    parts: [
+        {
+            slot: "dot",
+            selector: "& .crisp-badge-dot",
+            decls: {
+                width: "6px",
+                height: "6px",
+                flexShrink: 0,
+                borderRadius: tokens_1.contract.radius.full,
+                background: "currentColor",
+            },
+        },
+    ],
     variants: {
         tone: {
-            neutral: `background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault};`,
-            brand: `background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: ${tokens_1.contract.bgBrandSolid}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent);`,
-            success: `background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 14%, transparent); color: ${tokens_1.contract.bgSuccess}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgSuccess} 30%, transparent);`,
-            warning: `background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 16%, transparent); color: ${tokens_1.contract.bgWarning}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgWarning} 32%, transparent);`,
-            danger: `background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 14%, transparent); color: ${tokens_1.contract.bgDanger}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgDanger} 30%, transparent);`,
+            neutral: {
+                background: tokens_1.contract.bgRaised,
+                color: tokens_1.contract.fgMuted,
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
+            },
+            brand: {
+                background: soft(tokens_1.contract.bgBrandSolid, 14),
+                color: tokens_1.contract.bgBrandSolid,
+                boxShadow: ring(tokens_1.contract.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(tokens_1.contract.bgSuccess, 14),
+                color: tokens_1.contract.bgSuccess,
+                boxShadow: ring(tokens_1.contract.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(tokens_1.contract.bgWarning, 16),
+                color: tokens_1.contract.bgWarning,
+                boxShadow: ring(tokens_1.contract.bgWarning, 32),
+            },
+            danger: {
+                background: soft(tokens_1.contract.bgDanger, 14),
+                color: tokens_1.contract.bgDanger,
+                boxShadow: ring(tokens_1.contract.bgDanger, 30),
+            },
         },
         size: {
-            small: `height: 16px; padding-inline: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.xs}; border-radius: ${tokens_1.contract.radius.sm};`,
-            medium: `height: 20px; padding-inline: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.sm}; border-radius: ${tokens_1.contract.radius.sm};`,
-            large: `height: ${tokens_1.contract.size.chip}; padding-inline: 9px; font-size: ${tokens_1.contract.text.lg}; border-radius: ${tokens_1.contract.radius.chip};`,
-        },
-        variant: {
-            soft: ``,
-            solid: ``,
+            small: {
+                height: "16px",
+                paddingInline: tokens_1.contract.space["1.5"],
+                fontSize: tokens_1.contract.text.xs,
+                borderRadius: tokens_1.contract.radius.sm,
+            },
+            medium: {
+                height: "20px",
+                paddingInline: tokens_1.contract.space["2"],
+                fontSize: tokens_1.contract.text.sm,
+                borderRadius: tokens_1.contract.radius.sm,
+            },
+            large: {
+                height: tokens_1.contract.size.chip,
+                paddingInline: "9px",
+                fontSize: tokens_1.contract.text.lg,
+                borderRadius: tokens_1.contract.radius.chip,
+            },
         },
+        variant: { soft: {}, solid: {} },
     },
     defaultVariants: { tone: "neutral", size: "medium", variant: "soft" },
     compoundVariants: [
         {
             variant: "solid",
             tone: "brand",
-            css: `background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: none;`,
+            decls: {
+                background: tokens_1.contract.bgBrandSolid,
+                color: tokens_1.contract.fgOnBrand,
+                boxShadow: "none",
+            },
         },
         {
             variant: "solid",
             tone: "success",
-            css: `background: ${tokens_1.contract.bgSuccess}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.bgSuccess, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "warning",
-            css: `background: ${tokens_1.contract.bgWarning}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.bgWarning, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "danger",
-            css: `background: ${tokens_1.contract.bgDanger}; color: ${tokens_1.contract.fgOnTone}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.bgDanger, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
         },
         {
             variant: "solid",
             tone: "neutral",
-            css: `background: ${tokens_1.contract.fgMuted}; color: ${tokens_1.contract.bgSurface}; box-shadow: none;`,
+            decls: { background: tokens_1.contract.fgMuted, color: tokens_1.contract.bgSurface, boxShadow: "none" },
         },
     ],
 });
-exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
-});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

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

@@ -1,26 +1,99 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonRecipe = void 0;
+exports.spec = exports.buttonRecipe = 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: "button",
-    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; line-height: 20px; white-space: nowrap; border: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; &:disabled { opacity: 0.5; cursor: not-allowed; }`,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: tokens_1.contract.space["1.5"],
+        fontFamily: tokens_1.contract.font.sans,
+        fontWeight: tokens_1.contract.weight.medium,
+        letterSpacing: "-0.14px",
+        lineHeight: "20px",
+        whiteSpace: "nowrap",
+        border: "none",
+        cursor: "pointer",
+        transition: "background-color .2s, box-shadow .2s, color .2s",
+    },
+    parts: [
+        { selector: "&:disabled", decls: { opacity: 0.5, cursor: "not-allowed" } },
+    ],
     variants: {
         intent: {
-            primary: `background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); &:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; } &:active { background: ${tokens_1.contract.bgBrandSolidPressed}; }`,
-            neutral: `background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.field}; &:hover { background: ${tokens_1.contract.bgRaised}; }`,
-            danger: `background: ${tokens_1.contract.bgDangerSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }`,
-            ghost: `background: transparent; color: ${tokens_1.contract.fgMuted}; box-shadow: none; &:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }`,
+            primary: {
+                decls: {
+                    background: tokens_1.contract.bgBrandSolid,
+                    color: tokens_1.contract.fgOnBrand,
+                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
+                },
+                parts: [
+                    { selector: "&:hover", decls: { background: tokens_1.contract.bgBrandSolidPressed } },
+                    {
+                        selector: "&:active",
+                        decls: { background: tokens_1.contract.bgBrandSolidPressed },
+                    },
+                ],
+            },
+            neutral: {
+                decls: {
+                    background: tokens_1.contract.bgSurface,
+                    color: tokens_1.contract.fgPrimary,
+                    boxShadow: tokens_1.elevation.field,
+                },
+                parts: [{ selector: "&:hover", decls: { background: tokens_1.contract.bgRaised } }],
+            },
+            danger: {
+                decls: {
+                    background: tokens_1.contract.bgDangerSolid,
+                    color: tokens_1.contract.fgOnBrand,
+                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
+                },
+                parts: [
+                    { selector: "&:hover", decls: { filter: "brightness(0.96)" } },
+                    { selector: "&:active", decls: { filter: "brightness(0.92)" } },
+                ],
+            },
+            ghost: {
+                decls: {
+                    background: "transparent",
+                    color: tokens_1.contract.fgMuted,
+                    boxShadow: "none",
+                },
+                parts: [
+                    {
+                        selector: "&:hover",
+                        decls: { background: tokens_1.contract.bgRaised, color: tokens_1.contract.fgPrimary },
+                    },
+                ],
+            },
         },
         size: {
-            sm: `height: 24px; padding-inline: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.md}; border-radius: ${tokens_1.contract.radius.md};`,
-            md: `height: 28px; padding-inline: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.lg}; border-radius: ${tokens_1.contract.radius.md};`,
-            lg: `height: 40px; padding-inline: 14px; font-size: ${tokens_1.contract.text.lg}; border-radius: 10px;`,
+            sm: {
+                height: "24px",
+                paddingInline: tokens_1.contract.space["1.5"],
+                fontSize: tokens_1.contract.text.md,
+                borderRadius: tokens_1.contract.radius.md,
+            },
+            md: {
+                height: "28px",
+                paddingInline: tokens_1.contract.space["2"],
+                fontSize: tokens_1.contract.text.lg,
+                borderRadius: tokens_1.contract.radius.md,
+            },
+            lg: {
+                height: "40px",
+                paddingInline: "14px",
+                fontSize: tokens_1.contract.text.lg,
+                borderRadius: "10px",
+            },
         },
         shape: {
-            text: ``,
-            icon: `padding-inline: 0; aspect-ratio: 1 / 1;`,
+            text: {},
+            icon: { paddingInline: 0, aspectRatio: "1 / 1" },
         },
         // Opt-in hit-area expansion (crisp/#62): none of sm/md/lg reaches the
         // 44x44 touch-target minimum (Apple HIG / Material), and enlarging the
@@ -30,8 +103,27 @@ const config = (0, core_1.defineRecipe)({
         // Opt-in rather than always-on: an always-on overlay would swallow
         // clicks meant for a neighbour in a toolbar packed tighter than 44px.
         touchTarget: {
-            true: `position: relative; &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }`,
-            false: ``,
+            true: {
+                decls: { position: "relative" },
+                parts: [
+                    {
+                        slot: "hitArea",
+                        selector: "&::after",
+                        decls: {
+                            content: '""',
+                            position: "absolute",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
+                            width: "100%",
+                            height: "100%",
+                            minWidth: "44px",
+                            minHeight: "44px",
+                        },
+                    },
+                ],
+            },
+            false: {},
         },
     },
     defaultVariants: {
@@ -40,9 +132,8 @@ const config = (0, core_1.defineRecipe)({
         shape: "text",
         touchTarget: false,
     },
-    compoundVariants: [],
-});
-exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

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

@@ -1,17 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dividerRecipe = void 0;
+exports.spec = exports.dividerRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A hairline separator — horizontal (default) or vertical.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "divider",
-    base: `flex-shrink: 0; border: none; margin: 0; background: ${tokens_1.contract.borderSubtle};
-    &[data-orientation="horizontal"] { width: 100%; height: 1px; }
-    &[data-orientation="vertical"] { width: 1px; align-self: stretch; min-height: 1em; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        flexShrink: 0,
+        border: "none",
+        margin: 0,
+        background: tokens_1.contract.borderSubtle,
+    },
+    parts: [
+        {
+            selector: '&[data-orientation="horizontal"]',
+            decls: { width: "100%", height: "1px" },
+        },
+        {
+            selector: '&[data-orientation="vertical"]',
+            decls: { width: "1px", alignSelf: "stretch", minHeight: "1em" },
+        },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.dividerRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

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

@@ -1,20 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.progressRecipe = void 0;
+exports.spec = exports.progressRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A progress indicator — a continuous brand-filled track, or a segmented row of
 // pills (a "Getting started 3/6" bar).
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "progress",
-    base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden;
-    & .crisp-progress-fill { display: block; height: 100%; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; transition: width 0.25s ease; }
-    &[data-segmented] { display: flex; gap: ${tokens_1.contract.space["1"]}; background: transparent; overflow: visible; }
-    &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); transition: background 0.2s; }
-    &[data-segmented] .crisp-progress-seg[data-filled] { background: ${tokens_1.contract.bgBrandSolid}; }`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    base: {
+        display: "block",
+        boxSizing: "border-box",
+        height: "6px",
+        borderRadius: tokens_1.contract.radius.full,
+        background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent)`,
+        overflow: "hidden",
+    },
+    parts: [
+        {
+            slot: "fill",
+            selector: "& .crisp-progress-fill",
+            decls: {
+                display: "block",
+                height: "100%",
+                borderRadius: tokens_1.contract.radius.full,
+                background: tokens_1.contract.bgBrandSolid,
+                transition: "width 0.25s ease",
+            },
+        },
+        {
+            selector: "&[data-segmented]",
+            decls: {
+                display: "flex",
+                gap: tokens_1.contract.space["1"],
+                background: "transparent",
+                overflow: "visible",
+            },
+        },
+        {
+            slot: "seg",
+            selector: "&[data-segmented] .crisp-progress-seg",
+            decls: {
+                flex: 1,
+                height: "100%",
+                borderRadius: tokens_1.contract.radius.full,
+                background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent)`,
+                transition: "background 0.2s",
+            },
+        },
+        {
+            slot: "seg",
+            selector: "&[data-segmented] .crisp-progress-seg[data-filled]",
+            decls: { background: tokens_1.contract.bgBrandSolid },
+        },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.progressRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

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

@@ -1,16 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spinnerRecipe = void 0;
+exports.spec = exports.spinnerRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A spinning ring loading indicator.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "spinner",
-    globalCss: `@keyframes crisp-spin { to { transform: rotate(360deg); } }`,
-    base: `display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.full}; border: 2px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 15%, transparent); border-top-color: ${tokens_1.contract.fgMuted}; animation: crisp-spin 0.6s linear infinite;`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    globalCss: "@keyframes crisp-spin { to { transform: rotate(360deg); } }",
+    base: {
+        display: "inline-block",
+        boxSizing: "border-box",
+        width: "16px",
+        height: "16px",
+        borderRadius: tokens_1.contract.radius.full,
+        border: `2px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 15%, transparent)`,
+        borderTopColor: tokens_1.contract.fgMuted,
+        animation: "crisp-spin 0.6s linear infinite",
+    },
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
 exports.spinnerRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

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

@@ -1,28 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.switchRecipe = void 0;
+exports.spec = exports.switchRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A settings toggle, measured from the live app: a 24×16 pill track that
 // flips from a muted grey to brand blue (#266df0), with a 12px white thumb
 // (2px inset) that slides 8px across. background + transform both animate .2s.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "switch",
-    base: `
-    display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
-    border: none; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent);
-    cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
-    & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: ${tokens_1.contract.radius.full}; background: #fff; transition: transform .2s ease; }
-    &[data-checked] { background: ${tokens_1.contract.bgBrandSolid}; }
-    &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
-    &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
-    &:disabled { opacity: 0.5; cursor: not-allowed; }
-  `,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-});
-exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexShrink: 0,
+        width: "24px",
+        height: "16px",
+        padding: 0,
+        margin: 0,
+        border: "none",
+        borderRadius: tokens_1.contract.radius.full,
+        background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent)`,
+        cursor: "pointer",
+        transition: "background-color .2s ease",
+        WebkitTapHighlightColor: "transparent",
+    },
+    parts: [
+        {
+            slot: "thumb",
+            selector: "& .crisp-switch-thumb",
+            decls: {
+                width: "12px",
+                height: "12px",
+                margin: "0 2px",
+                borderRadius: tokens_1.contract.radius.full,
+                background: "#fff",
+                transition: "transform .2s ease",
+            },
+        },
+        { selector: "&[data-checked]", decls: { background: tokens_1.contract.bgBrandSolid } },
+        {
+            slot: "thumb",
+            selector: "&[data-checked] .crisp-switch-thumb",
+            decls: { transform: "translateX(8px)" },
+        },
+        {
+            selector: "&:focus-visible",
+            decls: {
+                outline: `2px solid ${tokens_1.contract.bgBrandSolid}`,
+                outlineOffset: "2px",
+            },
+        },
+        { selector: "&:disabled", decls: { opacity: 0.5, cursor: "not-allowed" } },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
@@ -32,6 +32,9 @@ Object.defineProperty(exports, "Primitive", { enumerable: true, get: function ()
 var resolve_1 = require("./resolve");
 Object.defineProperty(exports, "resolveRecipe", { enumerable: true, get: function () { return resolve_1.resolveRecipe; } });
 __exportStar(require("./rtl"), exports);
+var spec_1 = require("./spec");
+Object.defineProperty(exports, "defineSpec", { enumerable: true, get: function () { return spec_1.defineSpec; } });
+Object.defineProperty(exports, "specToRecipe", { enumerable: true, get: function () { return spec_1.specToRecipe; } });
 var use_focus_after_removal_1 = require("./use-focus-after-removal");
 Object.defineProperty(exports, "useFocusAfterRemoval", { enumerable: true, get: function () { return use_focus_after_removal_1.useFocusAfterRemoval; } });
 var use_form_reset_1 = require("./use-form-reset");

package/dist/cjs/core/spec.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.declsToCss = declsToCss;
+exports.defineSpec = defineSpec;
+exports.specToRecipe = specToRecipe;
+const kebab = (p) => p.startsWith("--") ? p : p.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+/** `{ flexShrink: 0 }` -> `flex-shrink: 0;`, in insertion order. */
+function declsToCss(decls) {
+    return Object.entries(decls)
+        .map(([prop, value]) => `${kebab(prop)}: ${value};`)
+        .join(" ");
+}
+/**
+ * `const` type parameter, not a plain `ComponentSpec` return: widening the
+ * variant keys here loses the literal union that `VariantProps<typeof recipe>`
+ * hands a component, and `BadgeProps["tone"]` silently degrades from
+ * `"neutral" | "brand" | …` to `string`. That is a public API regression that
+ * typechecks everywhere except at the call sites it was meant to protect.
+ */
+function defineSpec(spec) {
+    return spec;
+}
+/**
+ * Compile a spec into the RecipeConfig the existing pipeline already takes, so
+ * nothing downstream — the CSS generator, the d.ts generator, `resolveRecipe`,
+ * the spec guards — has to know a spec exists. That is what keeps the
+ * conversion provable: `dist/` must not move, and CI's
+ * `git diff --exit-code dist/` is the gate.
+ *
+ * The formatting here is not cosmetic freedom. It reproduces exactly what the
+ * hand-written template strings emit — root declarations space-joined, each
+ * nested rule on its own line indented four spaces — because any other choice
+ * rewrites every committed stylesheet and buries the conversion's real diff.
+ */
+function specToRecipe(spec) {
+    const root = declsToCss(spec.base);
+    const nested = (spec.parts ?? []).map((p) => `${p.selector} { ${declsToCss(p.decls)} }`);
+    const base = nested.length ? `${root}\n    ${nested.join("\n    ")}` : root;
+    // A variant value compiles the same way the root does: declarations first,
+    // then any nested rules it contributes, so a variant that restyles a part
+    // (Badge's solid dot) stays in the variant rather than leaking into base.
+    const compileValue = (v) => {
+        const decls = "decls" in v ? v.decls : v;
+        const nestedParts = "decls" in v ? (v.parts ?? []) : [];
+        const head = declsToCss(decls);
+        if (!nestedParts.length)
+            return head;
+        const tail = nestedParts
+            .map((p) => `${p.selector} { ${declsToCss(p.decls)} }`)
+            .join("\n    ");
+        return head ? `${head}\n    ${tail}` : tail;
+    };
+    const variants = {};
+    for (const [name, values] of Object.entries(spec.variants ?? {})) {
+        variants[name] = {};
+        for (const [value, v] of Object.entries(values)) {
+            variants[name][value] = compileValue(v);
+        }
+    }
+    return {
+        name: spec.name,
+        base,
+        variants: variants,
+        defaultVariants: (spec.defaultVariants ?? {}),
+        compoundVariants: (spec.compoundVariants ?? []).map(({ decls, ...sel }) => ({
+            ...sel,
+            css: declsToCss(decls),
+        })),
+        ...(spec.globalCss ? { globalCss: spec.globalCss } : {}),
+    };
+}

package/dist/columncalc.css

@@ -1,11 +1,7 @@
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans);
-/* Menu wraps its trigger in a flex div that sizes to content, which would
-       shrink the button back to its text. Make the wrapper fill too, so the
-       whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-        /* No radius: the trigger fills the cell, so rounding its own corners
-       leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px

package/dist/columncalc.layered.css

@@ -1,12 +1,8 @@
 @layer crisp-components {
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans);
-/* Menu wraps its trigger in a flex div that sizes to content, which would
-       shrink the button back to its text. Make the wrapper fill too, so the
-       whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-        /* No radius: the trigger fills the cell, so rounding its own corners
-       leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px