@crisp-ui-kit/crisp 0.57.1 → 0.57.2

package/dist/resizablepanel.css

@@ -8,13 +8,15 @@
     & .crisp-resizablepanel-panel[data-floating="false"] { border-radius: 0; box-shadow: none; }
     & .crisp-resizablepanel-panel[data-floating="false"][data-side="left"] { border-inline-end: 1px solid var(--crisp-border-subtle); }
     & .crisp-resizablepanel-panel[data-floating="false"][data-side="right"] { border-inline-start: 1px solid var(--crisp-border-subtle); }
-    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation. Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
+    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation.
+       Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
     & .crisp-resizablepanel-panel[data-floating="true"] { position: fixed; top: var(--crisp-space-2); bottom: var(--crisp-space-2); border-inline-end: none; border-inline-start: none; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: none; transition: transform 0.14s, padding 0.14s; }
     & .crisp-resizablepanel-panel[data-floating="true"][data-side="left"] { padding: var(--crisp-space-2) 0 var(--crisp-space-2) var(--crisp-space-2); @starting-style { transform: translateX(calc(-100% - var(--crisp-space-2))); } }
     & .crisp-resizablepanel-panel[data-floating="true"][data-side="right"] { padding: var(--crisp-space-2) var(--crisp-space-2) var(--crisp-space-2) 0; @starting-style { transform: translateX(calc(100% + var(--crisp-space-2))); } }
     & .crisp-resizablepanel-inner { height: 100%; opacity: 1; }
     & .crisp-resizablepanel-panel[data-floating="true"] .crisp-resizablepanel-inner { opacity: 1; transition: opacity 0.14s; @starting-style { opacity: 0; } }
-    /* handle — variant "panel" (default): a 10px hit target, its ::before the only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
+    /* handle — variant "panel" (default): a 10px hit target, its ::before the
+       only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
     & .crisp-resizablepanel-handle { position: absolute; top: 0; width: 10px; height: 100%; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; }
     & .crisp-resizablepanel-handle[data-side="left"] { right: 0; }
     & .crisp-resizablepanel-handle[data-side="right"] { left: 0; }
@@ -22,9 +24,10 @@
     & .crisp-resizablepanel-handle[data-side="left"]::before { right: 0; }
     & .crisp-resizablepanel-handle[data-side="right"]::before { left: 0; }
     & .crisp-resizablepanel-handle:hover::before, & .crisp-resizablepanel-handle[data-dragging="true"]::before { width: 2px; background: var(--crisp-bg-brand-solid); }
-    /* handle — variant "column": a wider 7px hit target straddling a 1px divider (table column edges), with a real 3px inner bar whose opacity comes in on a 100ms DELAY — distinct from the panel variant's instant
-       ::before swap. */
-    /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
+    /* handle — variant "column": a wider 7px hit target straddling a 1px
+       divider (table column edges), with a real 3px inner bar whose opacity
+       comes in on a 100ms DELAY — distinct from the panel variant's instant
+       ::before swap. */ /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
        out-specificity the base [data-side] left/right rules above, which
        otherwise tie-break by source order alone and would win. */
     & .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column { display: flex; align-items: center; justify-content: center; width: 7px; left: -3px; right: -3px; z-index: 1; cursor: col-resize; }

package/dist/resizablepanel.layered.css

@@ -9,13 +9,15 @@
     & .crisp-resizablepanel-panel[data-floating="false"] { border-radius: 0; box-shadow: none; }
     & .crisp-resizablepanel-panel[data-floating="false"][data-side="left"] { border-inline-end: 1px solid var(--crisp-border-subtle); }
     & .crisp-resizablepanel-panel[data-floating="false"][data-side="right"] { border-inline-start: 1px solid var(--crisp-border-subtle); }
-    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation. Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
+    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation.
+       Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
     & .crisp-resizablepanel-panel[data-floating="true"] { position: fixed; top: var(--crisp-space-2); bottom: var(--crisp-space-2); border-inline-end: none; border-inline-start: none; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: none; transition: transform 0.14s, padding 0.14s; }
     & .crisp-resizablepanel-panel[data-floating="true"][data-side="left"] { padding: var(--crisp-space-2) 0 var(--crisp-space-2) var(--crisp-space-2); @starting-style { transform: translateX(calc(-100% - var(--crisp-space-2))); } }
     & .crisp-resizablepanel-panel[data-floating="true"][data-side="right"] { padding: var(--crisp-space-2) var(--crisp-space-2) var(--crisp-space-2) 0; @starting-style { transform: translateX(calc(100% + var(--crisp-space-2))); } }
     & .crisp-resizablepanel-inner { height: 100%; opacity: 1; }
     & .crisp-resizablepanel-panel[data-floating="true"] .crisp-resizablepanel-inner { opacity: 1; transition: opacity 0.14s; @starting-style { opacity: 0; } }
-    /* handle — variant "panel" (default): a 10px hit target, its ::before the only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
+    /* handle — variant "panel" (default): a 10px hit target, its ::before the
+       only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
     & .crisp-resizablepanel-handle { position: absolute; top: 0; width: 10px; height: 100%; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; }
     & .crisp-resizablepanel-handle[data-side="left"] { right: 0; }
     & .crisp-resizablepanel-handle[data-side="right"] { left: 0; }
@@ -23,9 +25,10 @@
     & .crisp-resizablepanel-handle[data-side="left"]::before { right: 0; }
     & .crisp-resizablepanel-handle[data-side="right"]::before { left: 0; }
     & .crisp-resizablepanel-handle:hover::before, & .crisp-resizablepanel-handle[data-dragging="true"]::before { width: 2px; background: var(--crisp-bg-brand-solid); }
-    /* handle — variant "column": a wider 7px hit target straddling a 1px divider (table column edges), with a real 3px inner bar whose opacity comes in on a 100ms DELAY — distinct from the panel variant's instant
-       ::before swap. */
-    /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
+    /* handle — variant "column": a wider 7px hit target straddling a 1px
+       divider (table column edges), with a real 3px inner bar whose opacity
+       comes in on a 100ms DELAY — distinct from the panel variant's instant
+       ::before swap. */ /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
        out-specificity the base [data-side] left/right rules above, which
        otherwise tie-break by source order alone and would win. */
     & .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column { display: flex; align-items: center; justify-content: center; width: 7px; left: -3px; right: -3px; z-index: 1; cursor: col-resize; }

package/dist/richtext.css

@@ -9,13 +9,28 @@
     & .crisp-rte-body h1 { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; margin-top: var(--crisp-space-4); }
     & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; margin-top: var(--crisp-space-3); }
     & .crisp-rte-body h3 { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-semibold); margin-top: var(--crisp-space-2-5); }
-    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped ul, ol { list-style: none }
-    , specificity 0,0,1) was winning every list marker outright -- this rule set padding but never declared list-style-type, so there was no higher-specificity value (this selector is 0,1,1) to beat the reset with. Split into two single-selector rules, each declaring its own marker type, rather than the old single comma-joined rule ( .crisp-rte-body ul, & .crisp-rte-body ol ) the issue flagged as malformed. #611: padding-inline-start re-measured live once CRUD on the measurement workspace was allowed (a "zz-parity" note with a bulleted list, a nested bulleted list, and a numbered list) -- Attio's own <ul>/<ol> measures 36px (getComputedStyle,
+    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped
+       ul, ol { list-style: none }, specificity 0,0,1) was winning every
+       list marker outright -- this rule set padding but never declared
+       list-style-type, so there was no higher-specificity value (this
+       selector is 0,1,1) to beat the reset with. Split into two
+       single-selector rules, each declaring its own marker type, rather
+       than the old single comma-joined rule ( .crisp-rte-body ul, &
+       .crisp-rte-body ol ) the issue flagged as malformed.
+       #611: padding-inline-start re-measured live once CRUD on the
+       measurement workspace was allowed (a "zz-parity" note with a
+       bulleted list, a nested bulleted list, and a numbered list) --
+       Attio's own <ul>/<ol> measures 36px (getComputedStyle,
        ~36.1353px), not the 20px placeholder #575 shipped with no real
-       content to check against. 36px isn't in tokens/scale.ts (steps stop at 24px, jump to 32px) and is a single component-intrinsic value, so it stays a raw px per AUTHORING.md's golden rule 4b
+       content to check against. 36px isn't in tokens/scale.ts (steps
+       stop at 24px, jump to 32px) and is a single component-intrinsic
+       value, so it stays a raw px per AUTHORING.md's golden rule 4b
        rather than being rounded to an existing token or added to the
        shared scale. Marker colour (currentColor via the already-measured
-       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) == #101112 exactly) and the ~4px li-to-li gap (the existing li margin-top rule below) were re-checked at the same time and already matched -- only the padding was wrong. Attio doesn't vary
+       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) ==
+       #101112 exactly) and the ~4px li-to-li gap (the existing li
+       margin-top rule below) were re-checked at the same time and
+       already matched -- only the padding was wrong. Attio doesn't vary
        marker type for a nested list either (nested <ul> is disc too,
        not circle), which this already doesn't attempt. */
     & .crisp-rte-body ul { list-style-type: disc; padding-inline-start: 36px; }
@@ -26,10 +41,13 @@
     & .crisp-rte-body a { color: var(--crisp-bg-brand-solid); text-decoration: underline; text-underline-offset: 2px; }
     & .crisp-rte-body strong { font-weight: var(--crisp-weight-semibold); }
     & .crisp-rte-body img { display: block; max-width: 100%; border-radius: var(--crisp-radius-md); }
-    /* Not measured against Attio (#428) — nothing in a read-only pass over app.attio.com had a live @mention rendered to read computed styles from, and typing one to create one is off-limits there. Reused verbatim from the one measured "brand" tag/chip this repo already has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
+    /* Not measured against Attio (#428) — nothing in a read-only pass over
+       app.attio.com had a live @mention rendered to read computed styles
+       from, and typing one to create one is off-limits there. Reused
+       verbatim from the one measured "brand" tag/chip this repo already
+       has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
        inventing a new color or shape. */
     & .crisp-rte-mention { display: inline; border-radius: var(--crisp-radius-chip); padding: 0 var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default; }
-
     & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-toolbar { @starting-style { opacity: 0; } }
     & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); min-width: 30px; height: 28px; padding: 0 7px; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .1s; }
@@ -37,13 +55,11 @@
     & .crisp-rte-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-rte-tool[data-active], & .crisp-rte-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
     & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--crisp-border-subtle); }
-
     & .crisp-rte-swatchpanel { position: fixed; z-index: 71; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--crisp-space-1); width: 168px; padding: var(--crisp-space-1-5); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, var(--crisp-space-1-5)); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-swatchpanel { @starting-style { opacity: 0; } }
     & .crisp-rte-swatch { width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 50%; background: none; font-family: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); cursor: pointer; }
     & .crisp-rte-swatch--none { background: var(--crisp-bg-surface); position: relative; }
     & .crisp-rte-swatch--none::after { content: ""; position: absolute; inset: 6px; border-top: 1.5px solid color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); transform: rotate(-45deg); }
-
     & .crisp-rte-blockmenu { position: fixed; z-index: 71; box-sizing: border-box; width: 356px; padding: 0; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-blockmenu { @starting-style { opacity: 0; } }
     & .crisp-rte-blockmenu-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-2-5) var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }

package/dist/richtext.layered.css

@@ -10,13 +10,28 @@
     & .crisp-rte-body h1 { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; margin-top: var(--crisp-space-4); }
     & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; margin-top: var(--crisp-space-3); }
     & .crisp-rte-body h3 { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-semibold); margin-top: var(--crisp-space-2-5); }
-    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped ul, ol { list-style: none }
-    , specificity 0,0,1) was winning every list marker outright -- this rule set padding but never declared list-style-type, so there was no higher-specificity value (this selector is 0,1,1) to beat the reset with. Split into two single-selector rules, each declaring its own marker type, rather than the old single comma-joined rule ( .crisp-rte-body ul, & .crisp-rte-body ol ) the issue flagged as malformed. #611: padding-inline-start re-measured live once CRUD on the measurement workspace was allowed (a "zz-parity" note with a bulleted list, a nested bulleted list, and a numbered list) -- Attio's own <ul>/<ol> measures 36px (getComputedStyle,
+    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped
+       ul, ol { list-style: none }, specificity 0,0,1) was winning every
+       list marker outright -- this rule set padding but never declared
+       list-style-type, so there was no higher-specificity value (this
+       selector is 0,1,1) to beat the reset with. Split into two
+       single-selector rules, each declaring its own marker type, rather
+       than the old single comma-joined rule ( .crisp-rte-body ul, &
+       .crisp-rte-body ol ) the issue flagged as malformed.
+       #611: padding-inline-start re-measured live once CRUD on the
+       measurement workspace was allowed (a "zz-parity" note with a
+       bulleted list, a nested bulleted list, and a numbered list) --
+       Attio's own <ul>/<ol> measures 36px (getComputedStyle,
        ~36.1353px), not the 20px placeholder #575 shipped with no real
-       content to check against. 36px isn't in tokens/scale.ts (steps stop at 24px, jump to 32px) and is a single component-intrinsic value, so it stays a raw px per AUTHORING.md's golden rule 4b
+       content to check against. 36px isn't in tokens/scale.ts (steps
+       stop at 24px, jump to 32px) and is a single component-intrinsic
+       value, so it stays a raw px per AUTHORING.md's golden rule 4b
        rather than being rounded to an existing token or added to the
        shared scale. Marker colour (currentColor via the already-measured
-       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) == #101112 exactly) and the ~4px li-to-li gap (the existing li margin-top rule below) were re-checked at the same time and already matched -- only the padding was wrong. Attio doesn't vary
+       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) ==
+       #101112 exactly) and the ~4px li-to-li gap (the existing li
+       margin-top rule below) were re-checked at the same time and
+       already matched -- only the padding was wrong. Attio doesn't vary
        marker type for a nested list either (nested <ul> is disc too,
        not circle), which this already doesn't attempt. */
     & .crisp-rte-body ul { list-style-type: disc; padding-inline-start: 36px; }
@@ -27,10 +42,13 @@
     & .crisp-rte-body a { color: var(--crisp-bg-brand-solid); text-decoration: underline; text-underline-offset: 2px; }
     & .crisp-rte-body strong { font-weight: var(--crisp-weight-semibold); }
     & .crisp-rte-body img { display: block; max-width: 100%; border-radius: var(--crisp-radius-md); }
-    /* Not measured against Attio (#428) — nothing in a read-only pass over app.attio.com had a live @mention rendered to read computed styles from, and typing one to create one is off-limits there. Reused verbatim from the one measured "brand" tag/chip this repo already has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
+    /* Not measured against Attio (#428) — nothing in a read-only pass over
+       app.attio.com had a live @mention rendered to read computed styles
+       from, and typing one to create one is off-limits there. Reused
+       verbatim from the one measured "brand" tag/chip this repo already
+       has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
        inventing a new color or shape. */
     & .crisp-rte-mention { display: inline; border-radius: var(--crisp-radius-chip); padding: 0 var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default; }
-
     & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-toolbar { @starting-style { opacity: 0; } }
     & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); min-width: 30px; height: 28px; padding: 0 7px; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .1s; }
@@ -38,13 +56,11 @@
     & .crisp-rte-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-rte-tool[data-active], & .crisp-rte-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
     & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--crisp-border-subtle); }
-
     & .crisp-rte-swatchpanel { position: fixed; z-index: 71; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--crisp-space-1); width: 168px; padding: var(--crisp-space-1-5); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, var(--crisp-space-1-5)); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-swatchpanel { @starting-style { opacity: 0; } }
     & .crisp-rte-swatch { width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 50%; background: none; font-family: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); cursor: pointer; }
     & .crisp-rte-swatch--none { background: var(--crisp-bg-surface); position: relative; }
     & .crisp-rte-swatch--none::after { content: ""; position: absolute; inset: 6px; border-top: 1.5px solid color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); transform: rotate(-45deg); }
-
     & .crisp-rte-blockmenu { position: fixed; z-index: 71; box-sizing: border-box; width: 356px; padding: 0; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-blockmenu { @starting-style { opacity: 0; } }
     & .crisp-rte-blockmenu-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-2-5) var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }

package/dist/savedviews.css

@@ -74,9 +74,16 @@
   
 .crisp-savedviews {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
-       actual position (Attio's real view bar, next to View settings -- fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255) exact) with elevation.field's 3-layer shadow, the same raised
+       actual position (Attio's real view bar, next to View settings --
+       fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255)
+       exact) with elevation.field's 3-layer shadow, the same raised
        chrome View settings and Import/Export both carry
-       (tabletoolbar.recipe.ts's own --raised, not reused here directly since this is a separate recipe/component, but the identical measured values). Supersedes the original #555 measurement (rgb(246,247,247), reused as bgRaised -- a flat grey fill with no shadow at all), which was wrong: this trigger was never re-checked once it moved into its real view-bar position. */
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly
+       since this is a separate recipe/component, but the identical measured
+       values). Supersedes the original #555 measurement (rgb(246,247,247),
+       reused as bgRaised -- a flat grey fill with no shadow at all), which
+       was wrong: this trigger was never re-checked once it moved into its
+       real view-bar position. */
     & .crisp-savedviews-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; transition: background-color .12s ease; }
     & .crisp-savedviews-trigger:hover, & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }

package/dist/savedviews.layered.css

@@ -75,9 +75,16 @@
   
 .crisp-savedviews {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
-       actual position (Attio's real view bar, next to View settings -- fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255) exact) with elevation.field's 3-layer shadow, the same raised
+       actual position (Attio's real view bar, next to View settings --
+       fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255)
+       exact) with elevation.field's 3-layer shadow, the same raised
        chrome View settings and Import/Export both carry
-       (tabletoolbar.recipe.ts's own --raised, not reused here directly since this is a separate recipe/component, but the identical measured values). Supersedes the original #555 measurement (rgb(246,247,247), reused as bgRaised -- a flat grey fill with no shadow at all), which was wrong: this trigger was never re-checked once it moved into its real view-bar position. */
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly
+       since this is a separate recipe/component, but the identical measured
+       values). Supersedes the original #555 measurement (rgb(246,247,247),
+       reused as bgRaised -- a flat grey fill with no shadow at all), which
+       was wrong: this trigger was never re-checked once it moved into its
+       real view-bar position. */
     & .crisp-savedviews-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; transition: background-color .12s ease; }
     & .crisp-savedviews-trigger:hover, & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }

package/dist/select.css

@@ -27,6 +27,20 @@
     .crisp-select-search svg { flex-shrink: 0; }
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; color: var(--crisp-fg-select-neutral); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* select.yaml's own divider slot (marginX x4, height 1px, colour
+       stroke.neutral-muted -- described upstream as "the line marking a
+       boundary between semantic units: between sections, between content
+       and an action area, between a header and a body" -- exactly the
+       search-field/option-list boundary crisp#904's review flagged as
+       reading too tight). Not the general-purpose separator #867 declined
+       to build (nothing groups options with one) -- scoped to this one
+       specific header/body seam, which now exists because searchable
+       does. Sits as an ordinary flex child, so the listbox's own 8px gap
+       still applies on both sides of it -- total visual seam is
+       gap+1px+gap (17px), deliberately more than the 8px between two
+       plain option rows, so it reads as a section break, not a wider list
+       gap. */
+    .crisp-select-divider { flex-shrink: 0; height: 1px; margin-inline: var(--crisp-space-4); background: var(--crisp-stroke-select-divider); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-neutral-subtle); }
     /* select.yaml's groupLabel -- font-size/line-height/weight are the same
        across sizes, only paddingY differs (medium 8px, large 10px). */
@@ -56,21 +70,27 @@
 .crisp-select {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-select-trigger { box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-width: 0; margin: 0; border: 1px solid var(--crisp-stroke-select-trigger); background: transparent; cursor: pointer; font-family: inherit; color: var(--crisp-fg-select-neutral); transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1); }
-    /* seed defines no hover state for this trigger -- only pressed, invalid, disabled and readonly. The scale-down is scoped to the CONTENT (seed's scaleScope: content), not the button itself, so the border
-       never moves. */
-    /* Only the value scales, not the chevron: the chevron's own transform is its open/close rotation, and a scale would fight it for one shared CSS property when both are true at once (pressing while open). */
+    /* seed defines no hover state for this trigger -- only pressed, invalid,
+       disabled and readonly. The scale-down is scoped to the CONTENT
+       (seed's scaleScope: content), not the button itself, so the border
+       never moves. */ /* Only the value scales, not the chevron: the chevron's own transform is
+       its open/close rotation, and a scale would fight it for one shared
+       CSS property when both are true at once (pressing while open). */
     & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: var(--crisp-bg-select-pressed); }
     & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) .crisp-select-value { transform: scale(0.98); }
     & .crisp-select-trigger:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
     & .crisp-select-trigger:disabled { background: var(--crisp-bg-select-disabled); cursor: not-allowed; }
     & .crisp-select-trigger:disabled .crisp-select-value, & .crisp-select-trigger:disabled .crisp-select-placeholder, & .crisp-select-trigger:disabled .crisp-select-chevron { color: var(--crisp-fg-disabled); }
-    /* readonly: same fill as disabled, but the value/placeholder text stays normal ink -- it reads as "answered and locked", not "answered and
+    /* readonly: same fill as disabled, but the value/placeholder text stays
+       normal ink -- it reads as "answered and locked", not "answered and
        greyed out" (select-trigger.yaml's readonly state only overrides
        root.color; value/placeholder keep their enabled colours). */
     & .crisp-select-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
     & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; transition: transform .15s cubic-bezier(0,0,.15,1); }
     & .crisp-select-placeholder { color: var(--crisp-fg-select-placeholder); }
-    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing" curve. Overridden to 150ms on open (openRotateDuration) below -- same curve both ways, only the duration differs. */
+    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing"
+       curve. Overridden to 150ms on open (openRotateDuration) below --
+       same curve both ways, only the duration differs. */
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }

package/dist/select.layered.css

@@ -28,6 +28,20 @@
     .crisp-select-search svg { flex-shrink: 0; }
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; color: var(--crisp-fg-select-neutral); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* select.yaml's own divider slot (marginX x4, height 1px, colour
+       stroke.neutral-muted -- described upstream as "the line marking a
+       boundary between semantic units: between sections, between content
+       and an action area, between a header and a body" -- exactly the
+       search-field/option-list boundary crisp#904's review flagged as
+       reading too tight). Not the general-purpose separator #867 declined
+       to build (nothing groups options with one) -- scoped to this one
+       specific header/body seam, which now exists because searchable
+       does. Sits as an ordinary flex child, so the listbox's own 8px gap
+       still applies on both sides of it -- total visual seam is
+       gap+1px+gap (17px), deliberately more than the 8px between two
+       plain option rows, so it reads as a section break, not a wider list
+       gap. */
+    .crisp-select-divider { flex-shrink: 0; height: 1px; margin-inline: var(--crisp-space-4); background: var(--crisp-stroke-select-divider); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-neutral-subtle); }
     /* select.yaml's groupLabel -- font-size/line-height/weight are the same
        across sizes, only paddingY differs (medium 8px, large 10px). */
@@ -57,21 +71,27 @@
 .crisp-select {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-select-trigger { box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-width: 0; margin: 0; border: 1px solid var(--crisp-stroke-select-trigger); background: transparent; cursor: pointer; font-family: inherit; color: var(--crisp-fg-select-neutral); transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1); }
-    /* seed defines no hover state for this trigger -- only pressed, invalid, disabled and readonly. The scale-down is scoped to the CONTENT (seed's scaleScope: content), not the button itself, so the border
-       never moves. */
-    /* Only the value scales, not the chevron: the chevron's own transform is its open/close rotation, and a scale would fight it for one shared CSS property when both are true at once (pressing while open). */
+    /* seed defines no hover state for this trigger -- only pressed, invalid,
+       disabled and readonly. The scale-down is scoped to the CONTENT
+       (seed's scaleScope: content), not the button itself, so the border
+       never moves. */ /* Only the value scales, not the chevron: the chevron's own transform is
+       its open/close rotation, and a scale would fight it for one shared
+       CSS property when both are true at once (pressing while open). */
     & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: var(--crisp-bg-select-pressed); }
     & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) .crisp-select-value { transform: scale(0.98); }
     & .crisp-select-trigger:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
     & .crisp-select-trigger:disabled { background: var(--crisp-bg-select-disabled); cursor: not-allowed; }
     & .crisp-select-trigger:disabled .crisp-select-value, & .crisp-select-trigger:disabled .crisp-select-placeholder, & .crisp-select-trigger:disabled .crisp-select-chevron { color: var(--crisp-fg-disabled); }
-    /* readonly: same fill as disabled, but the value/placeholder text stays normal ink -- it reads as "answered and locked", not "answered and
+    /* readonly: same fill as disabled, but the value/placeholder text stays
+       normal ink -- it reads as "answered and locked", not "answered and
        greyed out" (select-trigger.yaml's readonly state only overrides
        root.color; value/placeholder keep their enabled colours). */
     & .crisp-select-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
     & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; transition: transform .15s cubic-bezier(0,0,.15,1); }
     & .crisp-select-placeholder { color: var(--crisp-fg-select-placeholder); }
-    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing" curve. Overridden to 150ms on open (openRotateDuration) below -- same curve both ways, only the duration differs. */
+    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing"
+       curve. Overridden to 150ms on open (openRotateDuration) below --
+       same curve both ways, only the duration differs. */
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }

package/dist/settingsshell.css

@@ -5,14 +5,14 @@
     & .crisp-settingsshell-back svg { color: var(--crisp-fg-muted); }
     & .crisp-settingsshell-back:hover svg { color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 32px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-muted); }
-    /* The field box owns the ring, so focus has to move it -- the inner input kills its own outline. Measured live: a focused field's
+    /* The field box owns the ring, so focus has to move it -- the inner
+       input kills its own outline. Measured live: a focused field's
        input carries box-shadow: none while its wrapper carries
        inset 0 0 0 1px #266df0. */
     & .crisp-settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-settingsshell-search svg { flex-shrink: 0; }
     & .crisp-settingsshell-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-search input::placeholder { color: var(--crisp-fg-muted); }
-
     & .crisp-settingsshell-groups { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-2-5); }
     & .crisp-settingsshell-group { display: flex; flex-direction: column; gap: 1px; }
     & .crisp-settingsshell-group-label { padding: var(--crisp-space-1) var(--crisp-space-2); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -23,7 +23,6 @@
     & .crisp-settingsshell-item[data-active] { background: var(--crisp-bg-raised); font-weight: var(--crisp-weight-medium); }
     & .crisp-settingsshell-item[data-active] svg { color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-empty { padding: var(--crisp-space-3) var(--crisp-space-2); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-
     & .crisp-settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--crisp-space-6) var(--crisp-space-8); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }

package/dist/settingsshell.layered.css

@@ -6,14 +6,14 @@
     & .crisp-settingsshell-back svg { color: var(--crisp-fg-muted); }
     & .crisp-settingsshell-back:hover svg { color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 32px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-muted); }
-    /* The field box owns the ring, so focus has to move it -- the inner input kills its own outline. Measured live: a focused field's
+    /* The field box owns the ring, so focus has to move it -- the inner
+       input kills its own outline. Measured live: a focused field's
        input carries box-shadow: none while its wrapper carries
        inset 0 0 0 1px #266df0. */
     & .crisp-settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-settingsshell-search svg { flex-shrink: 0; }
     & .crisp-settingsshell-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-search input::placeholder { color: var(--crisp-fg-muted); }
-
     & .crisp-settingsshell-groups { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-2-5); }
     & .crisp-settingsshell-group { display: flex; flex-direction: column; gap: 1px; }
     & .crisp-settingsshell-group-label { padding: var(--crisp-space-1) var(--crisp-space-2); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -24,7 +24,6 @@
     & .crisp-settingsshell-item[data-active] { background: var(--crisp-bg-raised); font-weight: var(--crisp-weight-medium); }
     & .crisp-settingsshell-item[data-active] svg { color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-empty { padding: var(--crisp-space-3) var(--crisp-space-2); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-
     & .crisp-settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--crisp-space-6) var(--crisp-space-8); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }

package/dist/slider.css

@@ -1,40 +1,19 @@
 .crisp-slider {
-  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a thumb's name — read, never drawn */
-    & .crisp-slider-thumblabel {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .crisp-slider-thumblabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
     & .crisp-slider-control { position: relative; height: 26px; display: flex; align-items: center; }
-
-    & .crisp-slider-track {
-      position: relative; flex-grow: 1; height: var(--crisp-space-1);
-      border-radius: var(--crisp-radius-full); background: var(--crisp-bg-neutral-weak);
-      overflow: hidden;
-    }
-
+    & .crisp-slider-track { position: relative; flex-grow: 1; height: var(--crisp-space-1); border-radius: var(--crisp-radius-full); background: var(--crisp-bg-neutral-weak); overflow: hidden; }
     & .crisp-slider-range { position: absolute; height: 100%; background: var(--crisp-bg-brand-solid); }
     & .crisp-slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
     & .crisp-slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
-
-    & .crisp-slider-thumb {
-      position: absolute; top: 50%;
-      width: var(--crisp-space-5); height: var(--crisp-space-5);
-      transform: translate(-50%, -50%);
-      border: none; background: none; padding: 0;
-    }
+    & .crisp-slider-thumb { position: absolute; top: 50%; width: var(--crisp-space-5); height: var(--crisp-space-5); transform: translate(-50%, -50%); border: none; background: none; padding: 0; }
     & .crisp-slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
     & .crisp-slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
-    & .crisp-slider-thumb::after {
-      content: ""; position: absolute; inset: 0;
-      border-radius: var(--crisp-radius-full); background: #fff; 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);
-      outline: 2px solid transparent; outline-offset: 2px;
-      transition: transform .2s ease, outline-color .2s ease;
-      cursor: grab;
-    }
+    & .crisp-slider-thumb::after { content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-full); background: #fff; 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); outline: 2px solid transparent; outline-offset: 2px; transition: transform .2s ease, outline-color .2s ease; cursor: grab; }
     & .crisp-slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
     & .crisp-slider-thumb:focus { outline: none; }
     & .crisp-slider-thumb:focus-visible::after { outline-color: var(--crisp-stroke-focus-ring); }
-
     &[data-disabled] { cursor: not-allowed; }
     &[data-disabled] .crisp-slider-range { background: var(--crisp-fg-disabled); }
     &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }

package/dist/slider.layered.css

@@ -1,41 +1,20 @@
 @layer crisp-components {
 .crisp-slider {
-  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a thumb's name — read, never drawn */
-    & .crisp-slider-thumblabel {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .crisp-slider-thumblabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
     & .crisp-slider-control { position: relative; height: 26px; display: flex; align-items: center; }
-
-    & .crisp-slider-track {
-      position: relative; flex-grow: 1; height: var(--crisp-space-1);
-      border-radius: var(--crisp-radius-full); background: var(--crisp-bg-neutral-weak);
-      overflow: hidden;
-    }
-
+    & .crisp-slider-track { position: relative; flex-grow: 1; height: var(--crisp-space-1); border-radius: var(--crisp-radius-full); background: var(--crisp-bg-neutral-weak); overflow: hidden; }
     & .crisp-slider-range { position: absolute; height: 100%; background: var(--crisp-bg-brand-solid); }
     & .crisp-slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
     & .crisp-slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
-
-    & .crisp-slider-thumb {
-      position: absolute; top: 50%;
-      width: var(--crisp-space-5); height: var(--crisp-space-5);
-      transform: translate(-50%, -50%);
-      border: none; background: none; padding: 0;
-    }
+    & .crisp-slider-thumb { position: absolute; top: 50%; width: var(--crisp-space-5); height: var(--crisp-space-5); transform: translate(-50%, -50%); border: none; background: none; padding: 0; }
     & .crisp-slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
     & .crisp-slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
-    & .crisp-slider-thumb::after {
-      content: ""; position: absolute; inset: 0;
-      border-radius: var(--crisp-radius-full); background: #fff; 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);
-      outline: 2px solid transparent; outline-offset: 2px;
-      transition: transform .2s ease, outline-color .2s ease;
-      cursor: grab;
-    }
+    & .crisp-slider-thumb::after { content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-full); background: #fff; 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); outline: 2px solid transparent; outline-offset: 2px; transition: transform .2s ease, outline-color .2s ease; cursor: grab; }
     & .crisp-slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
     & .crisp-slider-thumb:focus { outline: none; }
     & .crisp-slider-thumb:focus-visible::after { outline-color: var(--crisp-stroke-focus-ring); }
-
     &[data-disabled] { cursor: not-allowed; }
     &[data-disabled] .crisp-slider-range { background: var(--crisp-fg-disabled); }
     &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }

package/dist/snackbar.css

@@ -0,0 +1,24 @@
+.crisp-snackbar {
+  & .crisp-snackbar-region { position: fixed; z-index: 80; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: var(--crisp-space-2); /* snackbar.yaml:95-96 region.paddingX/paddingY = $dimension.x2 (8px) */ pointer-events: none; }
+    & .crisp-snackbar { pointer-events: auto; box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2-5); /* snackbar.yaml:116 content.gap = $dimension.x2_5 (10px), reused as the icon+message-to-action gap */ min-height: 44px; max-width: 464px; /* snackbar.yaml:102-103 */ width: max-content; padding: var(--crisp-space-2-5); /* snackbar.yaml:104-105 root.paddingX/paddingY = $dimension.x2_5 (10px) */ border-radius: var(--crisp-radius-md); /* snackbar.yaml:101 root.cornerRadius = $radius.r2 (8px) */ background: var(--crisp-bg-neutral-inverted); /* snackbar.yaml:100 root.color = $color.bg.neutral-inverted */ font-family: var(--crisp-font-sans); opacity: 1; transform: scale(1); transition: opacity 150ms cubic-bezier(0,0,.15,1), transform 150ms cubic-bezier(0,0,.15,1); /* snackbar.yaml:108-109 enterDuration/enterTimingFunction = $duration.d3 (150ms) / $timing-function.enter */ @starting-style { opacity: 0; transform: scale(0.8); } /* snackbar.yaml:106-107 enterOpacity/enterScale */ }
+    & .crisp-snackbar-content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+    /* snackbar.yaml:124 prefixIcon.paddingRight = $dimension.x0_5 (2px), used as the icon-to-message gap */
+    & .crisp-snackbar-icon { flex-shrink: 0; display: inline-flex; }
+    & .crisp-snackbar[data-variant="positive"] .crisp-snackbar-icon { color: var(--crisp-bg-success); }
+    /* snackbar.yaml:138-139 variant=positive prefixIcon.color = $color.fg.positive */
+    & .crisp-snackbar[data-variant="critical"] .crisp-snackbar-icon { color: var(--crisp-bg-danger); }
+    /* snackbar.yaml:142-143 variant=critical prefixIcon.color = $color.fg.critical */
+    & .crisp-snackbar-message { flex: 1 1 auto; min-width: 0; color: var(--crisp-fg-on-neutral-inverted); font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-regular); }
+    /* snackbar.yaml:117-121: message.color = $color.fg.neutral-inverted, fontSize/lineHeight = $font-size.t4/$line-height.t4 (14px/19px), fontWeight = regular */
+    & .crisp-snackbar-action { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--crisp-space-2); margin: -12px calc(-1 * var(--crisp-space-2)); /* snackbar.yaml:126-127 targetPaddingX/targetMinHeight = $dimension.x2 (8px, doubled here as horizontal padding)/44px -- a larger invisible tap target than the pill's own 44px content row, via negative margin so it doesn't grow the pill visually */ border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-on-neutral-inverted); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-bold); /* fontSize/lineHeight = t4/line-height.t4; fontWeight = bold (snackbar.yaml:129-131); colour deviation documented above */ cursor: pointer; transition: transform 150ms cubic-bezier(0,0,.15,1); }
+    & .crisp-snackbar-action:active { transform: scale(0.98); }
+    /* snackbar.yaml:133-134 pressed.actionButton.scaleScope = self */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-snackbar, .crisp-snackbar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/snackbar.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface SnackbarVariants {
+
+}
+
+export declare const snackbarRecipe: RecipeFn<{  }>;

package/dist/snackbar.layered.css

@@ -0,0 +1,26 @@
+@layer crisp-components {
+.crisp-snackbar {
+  & .crisp-snackbar-region { position: fixed; z-index: 80; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: var(--crisp-space-2); /* snackbar.yaml:95-96 region.paddingX/paddingY = $dimension.x2 (8px) */ pointer-events: none; }
+    & .crisp-snackbar { pointer-events: auto; box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2-5); /* snackbar.yaml:116 content.gap = $dimension.x2_5 (10px), reused as the icon+message-to-action gap */ min-height: 44px; max-width: 464px; /* snackbar.yaml:102-103 */ width: max-content; padding: var(--crisp-space-2-5); /* snackbar.yaml:104-105 root.paddingX/paddingY = $dimension.x2_5 (10px) */ border-radius: var(--crisp-radius-md); /* snackbar.yaml:101 root.cornerRadius = $radius.r2 (8px) */ background: var(--crisp-bg-neutral-inverted); /* snackbar.yaml:100 root.color = $color.bg.neutral-inverted */ font-family: var(--crisp-font-sans); opacity: 1; transform: scale(1); transition: opacity 150ms cubic-bezier(0,0,.15,1), transform 150ms cubic-bezier(0,0,.15,1); /* snackbar.yaml:108-109 enterDuration/enterTimingFunction = $duration.d3 (150ms) / $timing-function.enter */ @starting-style { opacity: 0; transform: scale(0.8); } /* snackbar.yaml:106-107 enterOpacity/enterScale */ }
+    & .crisp-snackbar-content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+    /* snackbar.yaml:124 prefixIcon.paddingRight = $dimension.x0_5 (2px), used as the icon-to-message gap */
+    & .crisp-snackbar-icon { flex-shrink: 0; display: inline-flex; }
+    & .crisp-snackbar[data-variant="positive"] .crisp-snackbar-icon { color: var(--crisp-bg-success); }
+    /* snackbar.yaml:138-139 variant=positive prefixIcon.color = $color.fg.positive */
+    & .crisp-snackbar[data-variant="critical"] .crisp-snackbar-icon { color: var(--crisp-bg-danger); }
+    /* snackbar.yaml:142-143 variant=critical prefixIcon.color = $color.fg.critical */
+    & .crisp-snackbar-message { flex: 1 1 auto; min-width: 0; color: var(--crisp-fg-on-neutral-inverted); font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-regular); }
+    /* snackbar.yaml:117-121: message.color = $color.fg.neutral-inverted, fontSize/lineHeight = $font-size.t4/$line-height.t4 (14px/19px), fontWeight = regular */
+    & .crisp-snackbar-action { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--crisp-space-2); margin: -12px calc(-1 * var(--crisp-space-2)); /* snackbar.yaml:126-127 targetPaddingX/targetMinHeight = $dimension.x2 (8px, doubled here as horizontal padding)/44px -- a larger invisible tap target than the pill's own 44px content row, via negative margin so it doesn't grow the pill visually */ border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-on-neutral-inverted); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-bold); /* fontSize/lineHeight = t4/line-height.t4; fontWeight = bold (snackbar.yaml:129-131); colour deviation documented above */ cursor: pointer; transition: transform 150ms cubic-bezier(0,0,.15,1); }
+    & .crisp-snackbar-action:active { transform: scale(0.98); }
+    /* snackbar.yaml:133-134 pressed.actionButton.scaleScope = self */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-snackbar, .crisp-snackbar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/statcard.css

@@ -7,7 +7,9 @@
     /* caption's own status colour, opt-in via data-tone: not a new measured
        value — the same fg*Soft tokens Badge's tone already uses (and Badge's
        own doc comment records why: a dedicated soft-text token, not the
-       tone's accent colour, is the one that clears AA). No "ok" reading on Badge itself; fgSuccessSoft is Badge's own "success" tone's text colour, reused here under the name a caption's own good-news state
+       tone's accent colour, is the one that clears AA). No "ok" reading on
+       Badge itself; fgSuccessSoft is Badge's own "success" tone's text
+       colour, reused here under the name a caption's own good-news state
        reads as. */
     & .crisp-statcard-caption[data-tone="ok"] { color: var(--crisp-fg-success-soft); }
     & .crisp-statcard-caption[data-tone="warning"] { color: var(--crisp-fg-warning-soft); }