@crisp-ui-kit/crisp 0.32.1 → 0.33.1

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

@@ -1,32 +1,51 @@
-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: "avatar",
-    base: `display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: ${c.font.sans}; font-weight: ${c.weight.semibold}; overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }`,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        fontFamily: c.font.sans,
+        fontWeight: c.weight.semibold,
+        overflow: "hidden",
+        userSelect: "none",
+    },
+    parts: [
+        {
+            slot: "image",
+            selector: "& img",
+            decls: { width: "100%", height: "100%", objectFit: "cover" },
+        },
+    ],
     variants: {
         size: {
-            sm: `height: 16px; width: 16px; font-size: 9px;`,
-            md: `height: 20px; width: 20px; font-size: 10px;`,
-            lg: `height: 24px; width: 24px; font-size: ${c.text.sm};`,
-            xl: `height: 32px; width: 32px; font-size: ${c.text.lg};`,
+            sm: { height: "16px", width: "16px", fontSize: "9px" },
+            md: { height: "20px", width: "20px", fontSize: "10px" },
+            lg: { height: "24px", width: "24px", fontSize: c.text.sm },
+            xl: { height: "32px", width: "32px", fontSize: c.text.lg },
         },
         shape: {
-            circle: `border-radius: ${c.radius.full};`,
-            rounded: `border-radius: 30%;`,
+            circle: { borderRadius: c.radius.full },
+            rounded: { borderRadius: "30%" },
         },
         tone: {
-            neutral: `background: ${c.bgRaised}; color: ${c.fgMuted}; box-shadow: inset 0 0 0 1px ${c.borderDefault};`,
-            brand: `background: ${c.bgBrandSolid}; color: #fff;`,
-            orange: `background: ${c.bgOrange}; color: #fff;`,
-            cyan: `background: ${c.bgCyan}; color: #fff;`,
-            purple: `background: ${c.bgPurple}; color: #fff;`,
-            green: `background: ${c.bgSuccess}; color: #fff;`,
+            neutral: {
+                background: c.bgRaised,
+                color: c.fgMuted,
+                boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
+            },
+            brand: { background: c.bgBrandSolid, color: "#fff" },
+            orange: { background: c.bgOrange, color: "#fff" },
+            cyan: { background: c.bgCyan, color: "#fff" },
+            purple: { background: c.bgPurple, color: "#fff" },
+            green: { background: c.bgSuccess, color: "#fff" },
         },
     },
     defaultVariants: { size: "md", shape: "circle", tone: "neutral" },
-    compoundVariants: [],
-});
-export const avatarRecipe = Object.assign(resolveRecipe(config), {
-    config,
 });
+const config = specToRecipe(spec);
+export const avatarRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
 export default config;

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

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

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

@@ -1,23 +1,96 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
-const config = defineRecipe({
+const spec = defineSpec({
     name: "button",
-    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; font-family: ${c.font.sans}; font-weight: ${c.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: c.space["1.5"],
+        fontFamily: c.font.sans,
+        fontWeight: c.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: ${c.bgBrandSolid}; color: ${c.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: ${c.bgBrandSolidPressed}; } &:active { background: ${c.bgBrandSolidPressed}; }`,
-            neutral: `background: ${c.bgSurface}; color: ${c.fgPrimary}; box-shadow: ${e.field}; &:hover { background: ${c.bgRaised}; }`,
-            danger: `background: ${c.bgDangerSolid}; color: ${c.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: ${c.fgMuted}; box-shadow: none; &:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }`,
+            primary: {
+                decls: {
+                    background: c.bgBrandSolid,
+                    color: c.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: c.bgBrandSolidPressed } },
+                    {
+                        selector: "&:active",
+                        decls: { background: c.bgBrandSolidPressed },
+                    },
+                ],
+            },
+            neutral: {
+                decls: {
+                    background: c.bgSurface,
+                    color: c.fgPrimary,
+                    boxShadow: e.field,
+                },
+                parts: [{ selector: "&:hover", decls: { background: c.bgRaised } }],
+            },
+            danger: {
+                decls: {
+                    background: c.bgDangerSolid,
+                    color: c.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: c.fgMuted,
+                    boxShadow: "none",
+                },
+                parts: [
+                    {
+                        selector: "&:hover",
+                        decls: { background: c.bgRaised, color: c.fgPrimary },
+                    },
+                ],
+            },
         },
         size: {
-            sm: `height: 24px; padding-inline: ${c.space["1.5"]}; font-size: ${c.text.md}; border-radius: ${c.radius.md};`,
-            md: `height: 28px; padding-inline: ${c.space["2"]}; font-size: ${c.text.lg}; border-radius: ${c.radius.md};`,
-            lg: `height: 40px; padding-inline: 14px; font-size: ${c.text.lg}; border-radius: 10px;`,
+            sm: {
+                height: "24px",
+                paddingInline: c.space["1.5"],
+                fontSize: c.text.md,
+                borderRadius: c.radius.md,
+            },
+            md: {
+                height: "28px",
+                paddingInline: c.space["2"],
+                fontSize: c.text.lg,
+                borderRadius: c.radius.md,
+            },
+            lg: {
+                height: "40px",
+                paddingInline: "14px",
+                fontSize: c.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
@@ -27,8 +100,27 @@ const config = 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: {
@@ -37,9 +129,8 @@ const config = defineRecipe({
         shape: "text",
         touchTarget: false,
     },
-    compoundVariants: [],
-});
-export const buttonRecipe = Object.assign(resolveRecipe(config), {
-    config,
 });
+const config = specToRecipe(spec);
+export const buttonRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
 export default config;

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

@@ -1,14 +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";
 // A hairline separator — horizontal (default) or vertical.
-const config = defineRecipe({
+const spec = defineSpec({
     name: "divider",
-    base: `flex-shrink: 0; border: none; margin: 0; background: ${c.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: c.borderSubtle,
+    },
+    parts: [
+        {
+            selector: '&[data-orientation="horizontal"]',
+            decls: { width: "100%", height: "1px" },
+        },
+        {
+            selector: '&[data-orientation="vertical"]',
+            decls: { width: "1px", alignSelf: "stretch", minHeight: "1em" },
+        },
+    ],
 });
+const config = specToRecipe(spec);
 export const dividerRecipe = resolveRecipe(config);
+export { spec };
 export default config;

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

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

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

@@ -1,13 +1,21 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A spinning ring loading indicator.
-const config = defineRecipe({
+const spec = 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: ${c.radius.full}; border: 2px solid color-mix(in srgb, ${c.fgPrimary} 15%, transparent); border-top-color: ${c.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: c.radius.full,
+        border: `2px solid color-mix(in srgb, ${c.fgPrimary} 15%, transparent)`,
+        borderTopColor: c.fgMuted,
+        animation: "crisp-spin 0.6s linear infinite",
+    },
 });
+const config = specToRecipe(spec);
 export const spinnerRecipe = resolveRecipe(config);
+export { spec };
 export default config;

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

@@ -1,25 +1,55 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // 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 = defineRecipe({
+const spec = 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: ${c.radius.full}; background: color-mix(in srgb, ${c.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: ${c.radius.full}; background: #fff; transition: transform .2s ease; }
-    &[data-checked] { background: ${c.bgBrandSolid}; }
-    &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
-    &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 2px; }
-    &:disabled { opacity: 0.5; cursor: not-allowed; }
-  `,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-});
-export const switchRecipe = Object.assign(resolveRecipe(config), {
-    config,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexShrink: 0,
+        width: "24px",
+        height: "16px",
+        padding: 0,
+        margin: 0,
+        border: "none",
+        borderRadius: c.radius.full,
+        background: `color-mix(in srgb, ${c.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: c.radius.full,
+                background: "#fff",
+                transition: "transform .2s ease",
+            },
+        },
+        { selector: "&[data-checked]", decls: { background: c.bgBrandSolid } },
+        {
+            slot: "thumb",
+            selector: "&[data-checked] .crisp-switch-thumb",
+            decls: { transform: "translateX(8px)" },
+        },
+        {
+            selector: "&:focus-visible",
+            decls: {
+                outline: `2px solid ${c.bgBrandSolid}`,
+                outlineOffset: "2px",
+            },
+        },
+        { selector: "&:disabled", decls: { opacity: 0.5, cursor: "not-allowed" } },
+    ],
 });
+const config = specToRecipe(spec);
+export const switchRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
 export default config;

package/dist/esm/core/index.js

@@ -7,6 +7,7 @@ export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";
+export { defineSpec, specToRecipe } from "./spec.js";
 export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
 export { useFormReset } from "./use-form-reset.js";
 export { useLabelAssociation } from "./use-label-association.js";

package/dist/esm/core/spec.js

@@ -0,0 +1,66 @@
+const kebab = (p) => p.startsWith("--") ? p : p.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+/** `{ flexShrink: 0 }` -> `flex-shrink: 0;`, in insertion order. */
+export 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.
+ */
+export 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.
+ */
+export 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 } : {}),
+    };
+}