@crisp-ui-kit/crisp 0.57.1 → 0.57.3

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); }

package/dist/statcard.layered.css

@@ -8,7 +8,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); }