@crisp-ui-kit/crisp 0.32.1 → 0.33.1

package/README.md

@@ -43,6 +43,10 @@ import "@crisp-ui-kit/crisp/base.css"; // optional app baseline
 import "@crisp-ui-kit/crisp/styles.css";
 ```
 
+If your own styles need to beat crisp's, import `@crisp-ui-kit/crisp/styles.layered.css`
+instead of `styles.css`. It is the same CSS wrapped in `@layer crisp-components`, and anything
+you write outside a layer wins over anything inside one regardless of specificity or order.
+
 `base.css` is optional: it sets `body`'s font, background, and text color from
 crisp's own tokens (plus box-sizing and `color-scheme`), so a fresh app doesn't
 render Times New Roman on a transparent background. Import it first, before
@@ -86,11 +90,39 @@ import { contract as c } from "@crisp-ui-kit/crisp";
 const styles = { padding: c.space["4"], borderRadius: c.radius.md };
 ```
 
-### Building your own recipe
+### Building your own component
 
 The same primitives the kit is built on are exported (`defineRecipe`, `resolveRecipe`,
 `Primitive`) so you can author components in the same style.
 
+For new components, prefer **`defineSpec`**: it takes the same styling as *data* — named slots
+with typed declarations — rather than as a CSS string, and `specToRecipe` compiles it to the
+recipe everything else already understands.
+
+```tsx
+import { defineSpec, resolveRecipe, specToRecipe, contract as c } from "@crisp-ui-kit/crisp";
+
+const spec = defineSpec({
+  name: "callout-lite",
+  base: { display: "flex", gap: c.space["2"], borderRadius: c.radius.md },
+  parts: [{ slot: "icon", selector: "& .icon", decls: { flexShrink: 0 } }],
+  variants: {
+    tone: {
+      neutral: { background: c.bgRaised, color: c.fgMuted },
+      danger: { background: c.bgDanger, color: c.fgOnTone },
+    },
+  },
+  defaultVariants: { tone: "neutral" },
+});
+
+export const calloutLite = resolveRecipe(specToRecipe(spec));
+```
+
+The variant keys survive into the type, so `VariantProps<typeof calloutLite>["tone"]` is
+`"neutral" | "danger"` and not `string`. A string recipe can only be rewritten and hoped over;
+a spec can be *read*, which is what lets a non-CSS target refuse a property it cannot express
+instead of silently dropping it. crisp's own primitives are moving to it component by component.
+
 ## Documentation
 
 The docs site renders a live, measured demo for every component. Run it locally:

package/dist/appshell.css

@@ -1,6 +1,5 @@
 .crisp-appshell {
-  
-    display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .crisp-appshell-side-inner { height: 100%; }
     & .crisp-appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
@@ -9,9 +8,7 @@
     & .crisp-appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .crisp-appshell-expand { position: absolute; top: var(--crisp-space-2); inset-inline-start: var(--crisp-space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--crisp-size-row); height: var(--crisp-size-row); padding: 0; border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .crisp-appshell-expand:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
-  
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/appshell.layered.css

@@ -1,7 +1,6 @@
 @layer crisp-components {
 .crisp-appshell {
-  
-    display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .crisp-appshell-side-inner { height: 100%; }
     & .crisp-appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
@@ -10,9 +9,7 @@
     & .crisp-appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .crisp-appshell-expand { position: absolute; top: var(--crisp-space-2); inset-inline-start: var(--crisp-space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--crisp-size-row); height: var(--crisp-size-row); padding: 0; border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .crisp-appshell-expand:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
-  
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/authshell.css

@@ -1,31 +1,18 @@
 .crisp-authshell {
-  min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
-    background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
+  min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
-
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
-
     & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
-
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
-
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
-
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
-
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
-
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
-
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-authshell-footer a { color: inherit; font-weight: var(--crisp-weight-medium); text-decoration: underline; }
-
-    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
-       hairline ring instead of elevation.field's soft glow, and a 36px (not
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain hairline ring instead of elevation.field's soft glow, and a 36px (not
        40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
        crisp's Input / FormField / Button and gets the auth treatment for free. */
     & .crisp-authshell-body .crisp-formfield-label { font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); padding-inline-start: var(--crisp-space-1); }
@@ -33,8 +20,7 @@
     & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: var(--crisp-space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
     & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* Same three-layer brand shadow as Button's primary intent, but the auth
-       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
-       the in-app button's rgba(255,255,255,0.07) highlight. */
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not the in-app button's rgba(255,255,255,0.07) highlight. */
     & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: var(--crisp-space-3); border-radius: 10px; }
     & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
 
@@ -43,8 +29,7 @@
        that bracket, not a measured value. A CONTAINER query, not a media
        query: the shell is embedded in the docs inside an ~800px column, where
        a viewport query would keep the 1130px card and overflow it. Asking the
-       shell's own width is what "there isn't room for the preview" means. */
-    container-type: inline-size;
+       shell's own width is what "there isn't room for the preview" means. */ container-type: inline-size;
     @container (max-width: 1200px) { & .crisp-authshell-preview { display: none; } }
 }
 

package/dist/authshell.layered.css

@@ -1,32 +1,19 @@
 @layer crisp-components {
 .crisp-authshell {
-  min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
-    background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
+  min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
-
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
-
     & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
-
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
-
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
-
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
-
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
-
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
-
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-authshell-footer a { color: inherit; font-weight: var(--crisp-weight-medium); text-decoration: underline; }
-
-    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
-       hairline ring instead of elevation.field's soft glow, and a 36px (not
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain hairline ring instead of elevation.field's soft glow, and a 36px (not
        40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
        crisp's Input / FormField / Button and gets the auth treatment for free. */
     & .crisp-authshell-body .crisp-formfield-label { font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); padding-inline-start: var(--crisp-space-1); }
@@ -34,8 +21,7 @@
     & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: var(--crisp-space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
     & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* Same three-layer brand shadow as Button's primary intent, but the auth
-       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
-       the in-app button's rgba(255,255,255,0.07) highlight. */
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not the in-app button's rgba(255,255,255,0.07) highlight. */
     & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: var(--crisp-space-3); border-radius: 10px; }
     & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
 
@@ -44,8 +30,7 @@
        that bracket, not a measured value. A CONTAINER query, not a media
        query: the shell is embedded in the docs inside an ~800px column, where
        a viewport query would keep the 1130px card and overflow it. Asking the
-       shell's own width is what "there isn't room for the preview" means. */
-    container-type: inline-size;
+       shell's own width is what "there isn't room for the preview" means. */ container-type: inline-size;
     @container (max-width: 1200px) { & .crisp-authshell-preview { display: none; } }
 }
 

package/dist/avatar.css

@@ -1,5 +1,6 @@
 .crisp-avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
+    & img { width: 100%; height: 100%; object-fit: cover; }
 }
 .crisp-avatar--size_sm {
   height: 16px; width: 16px; font-size: 9px;

package/dist/avatar.layered.css

@@ -1,6 +1,7 @@
 @layer crisp-components {
 .crisp-avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
+    & img { width: 100%; height: 100%; object-fit: cover; }
 }
 .crisp-avatar--size_sm {
   height: 16px; width: 16px; font-size: 9px;

package/dist/board.css

@@ -17,10 +17,7 @@
     & .crisp-board-card:focus { outline: none; }
     & .crisp-board-card:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     /* announced, never drawn */
-    & .crisp-board-live {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+    & .crisp-board-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/board.layered.css

@@ -18,10 +18,7 @@
     & .crisp-board-card:focus { outline: none; }
     & .crisp-board-card:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     /* announced, never drawn */
-    & .crisp-board-live {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+    & .crisp-board-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/breadcrumb.css

@@ -7,5 +7,4 @@
     & .crisp-breadcrumb-item[aria-current] { color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
-  
 }

package/dist/breadcrumb.layered.css

@@ -8,6 +8,5 @@
     & .crisp-breadcrumb-item[aria-current] { color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
-  
 }
 }

package/dist/button.css

@@ -1,17 +1,24 @@
 .crisp-button {
-  display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); font-family: var(--crisp-font-sans); font-weight: var(--crisp-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; }
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); font-family: var(--crisp-font-sans); font-weight: var(--crisp-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; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); 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: var(--crisp-bg-brand-solid-pressed); } &:active { background: var(--crisp-bg-brand-solid-pressed); }
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); 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: var(--crisp-bg-brand-solid-pressed); }
+    &:active { background: var(--crisp-bg-brand-solid-pressed); }
 }
 .crisp-button--intent_neutral {
-  background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); 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); &:hover { background: var(--crisp-bg-raised); }
+  background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); 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);
+    &:hover { background: var(--crisp-bg-raised); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); 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); }
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); 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); }
 }
 .crisp-button--intent_ghost {
-  background: transparent; color: var(--crisp-fg-muted); box-shadow: none; &:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+  background: transparent; color: var(--crisp-fg-muted); box-shadow: none;
+    &:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
 }
 .crisp-button--size_sm {
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
@@ -29,7 +36,8 @@
   padding-inline: 0; aspect-ratio: 1 / 1;
 }
 .crisp-button--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; }
+  position: relative;
+    &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }
 }
 .crisp-button--touchTarget_false {
   

package/dist/button.layered.css

@@ -1,18 +1,25 @@
 @layer crisp-components {
 .crisp-button {
-  display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); font-family: var(--crisp-font-sans); font-weight: var(--crisp-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; }
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); font-family: var(--crisp-font-sans); font-weight: var(--crisp-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; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); 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: var(--crisp-bg-brand-solid-pressed); } &:active { background: var(--crisp-bg-brand-solid-pressed); }
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); 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: var(--crisp-bg-brand-solid-pressed); }
+    &:active { background: var(--crisp-bg-brand-solid-pressed); }
 }
 .crisp-button--intent_neutral {
-  background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); 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); &:hover { background: var(--crisp-bg-raised); }
+  background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); 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);
+    &:hover { background: var(--crisp-bg-raised); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); 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); }
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); 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); }
 }
 .crisp-button--intent_ghost {
-  background: transparent; color: var(--crisp-fg-muted); box-shadow: none; &:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+  background: transparent; color: var(--crisp-fg-muted); box-shadow: none;
+    &:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
 }
 .crisp-button--size_sm {
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
@@ -30,7 +37,8 @@
   padding-inline: 0; aspect-ratio: 1 / 1;
 }
 .crisp-button--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; }
+  position: relative;
+    &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }
 }
 .crisp-button--touchTarget_false {
   

package/dist/card.css

@@ -13,7 +13,8 @@
   
 }
 .crisp-card--interactive_true {
-  cursor: pointer; transition: box-shadow 0.12s ease; &:hover { box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
+  cursor: pointer; transition: box-shadow 0.12s ease;
+    &:hover { box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
 }
 .crisp-card--interactive_false {
   

package/dist/card.layered.css

@@ -14,7 +14,8 @@
   
 }
 .crisp-card--interactive_true {
-  cursor: pointer; transition: box-shadow 0.12s ease; &:hover { box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
+  cursor: pointer; transition: box-shadow 0.12s ease;
+    &:hover { box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
 }
 .crisp-card--interactive_false {
   

package/dist/checkbox.css

@@ -1,13 +1,10 @@
 .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; &: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"); }
-  &:indeterminate { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
-  &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-  
+  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"); }
+    &:indeterminate { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
+    &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/checkbox.layered.css

@@ -1,14 +1,11 @@
 @layer crisp-components {
 .crisp-checkbox {
-  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm)
-  ; background: var(--crisp-bg-surface)
-  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary)
-  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &: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"); }
-  &:indeterminate { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
-  &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-  
+  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"); }
+    &:indeterminate { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
+    &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -1,35 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.avatarRecipe = void 0;
+exports.spec = exports.avatarRecipe = 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: "avatar",
-    base: `display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.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: tokens_1.contract.font.sans,
+        fontWeight: tokens_1.contract.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: ${tokens_1.contract.text.sm};`,
-            xl: `height: 32px; width: 32px; font-size: ${tokens_1.contract.text.lg};`,
+            sm: { height: "16px", width: "16px", fontSize: "9px" },
+            md: { height: "20px", width: "20px", fontSize: "10px" },
+            lg: { height: "24px", width: "24px", fontSize: tokens_1.contract.text.sm },
+            xl: { height: "32px", width: "32px", fontSize: tokens_1.contract.text.lg },
         },
         shape: {
-            circle: `border-radius: ${tokens_1.contract.radius.full};`,
-            rounded: `border-radius: 30%;`,
+            circle: { borderRadius: tokens_1.contract.radius.full },
+            rounded: { borderRadius: "30%" },
         },
         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: ${tokens_1.contract.bgBrandSolid}; color: #fff;`,
-            orange: `background: ${tokens_1.contract.bgOrange}; color: #fff;`,
-            cyan: `background: ${tokens_1.contract.bgCyan}; color: #fff;`,
-            purple: `background: ${tokens_1.contract.bgPurple}; color: #fff;`,
-            green: `background: ${tokens_1.contract.bgSuccess}; color: #fff;`,
+            neutral: {
+                background: tokens_1.contract.bgRaised,
+                color: tokens_1.contract.fgMuted,
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
+            },
+            brand: { background: tokens_1.contract.bgBrandSolid, color: "#fff" },
+            orange: { background: tokens_1.contract.bgOrange, color: "#fff" },
+            cyan: { background: tokens_1.contract.bgCyan, color: "#fff" },
+            purple: { background: tokens_1.contract.bgPurple, color: "#fff" },
+            green: { background: tokens_1.contract.bgSuccess, color: "#fff" },
         },
     },
     defaultVariants: { size: "md", shape: "circle", tone: "neutral" },
-    compoundVariants: [],
-});
-exports.avatarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.avatarRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;