@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/slider.layered.css

@@ -0,0 +1,58 @@
+@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;
+    }
+    & .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-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[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[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; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-slider, .crisp-slider * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/spinner.css

@@ -1,10 +1,10 @@
 @keyframes crisp-spin { to { transform: rotate(360deg); } }
-.spinner {
-  display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--radius-full); border: 2px solid color-mix(in srgb, var(--fg-primary) 15%, transparent); border-top-color: var(--fg-muted); animation: crisp-spin 0.6s linear infinite;
+.crisp-spinner {
+  display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--crisp-radius-full); border: 2px solid color-mix(in srgb, var(--crisp-fg-primary) 15%, transparent); border-top-color: var(--crisp-fg-muted); animation: crisp-spin 0.6s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .spinner, .spinner * {
+  .crisp-spinner, .crisp-spinner * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/spinner.layered.css

@@ -0,0 +1,14 @@
+@layer crisp-components {
+@keyframes crisp-spin { to { transform: rotate(360deg); } }
+.crisp-spinner {
+  display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--crisp-radius-full); border: 2px solid color-mix(in srgb, var(--crisp-fg-primary) 15%, transparent); border-top-color: var(--crisp-fg-muted); animation: crisp-spin 0.6s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-spinner, .crisp-spinner * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/stagebar.css

@@ -1,10 +1,10 @@
-.stagebar {
-  display: flex; align-items: center; gap: var(--space-0-5); width: 100%; height: 6px; font-family: var(--font-sans);
-    & .stagebar-seg { flex: 1; height: 100%; border-radius: var(--radius-full); transition: background 0.2s ease; }
+.crisp-stagebar {
+  display: flex; align-items: center; gap: var(--crisp-space-0-5); width: 100%; height: 6px; font-family: var(--crisp-font-sans);
+    & .crisp-stagebar-seg { flex: 1; height: 100%; border-radius: var(--crisp-radius-full); transition: background 0.2s ease; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .stagebar, .stagebar * {
+  .crisp-stagebar, .crisp-stagebar * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/stagebar.layered.css

@@ -0,0 +1,14 @@
+@layer crisp-components {
+.crisp-stagebar {
+  display: flex; align-items: center; gap: var(--crisp-space-0-5); width: 100%; height: 6px; font-family: var(--crisp-font-sans);
+    & .crisp-stagebar-seg { flex: 1; height: 100%; border-radius: var(--crisp-radius-full); transition: background 0.2s ease; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-stagebar, .crisp-stagebar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/statcard.css

@@ -1,19 +1,19 @@
-.statcard {
-  display: flex; flex-direction: column; gap: var(--space-1-5); box-sizing: border-box; font-family: var(--font-sans);
+.crisp-statcard {
+  display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .statcard-label { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
-    & .statcard-label svg { color: var(--fg-muted); }
-    & .statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--weight-semibold); letter-spacing: -0.4px; color: var(--fg-primary); }
-    & .statcard-foot { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); }
-    & .statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--space-1); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); }
-    & .statcard-delta svg { flex-shrink: 0; }
-    & .statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--bg-success) 16%, transparent); color: color-mix(in srgb, var(--bg-success) 80%, var(--fg-primary)); }
-    & .statcard-delta[data-trend="down"] { background: color-mix(in srgb, var(--bg-danger) 15%, transparent); color: color-mix(in srgb, var(--bg-danger) 80%, var(--fg-primary)); }
-    & .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-muted); }
+    & .crisp-statcard-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
+    & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
+    & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
+    & .crisp-statcard-delta svg { flex-shrink: 0; }
+    & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 80%, var(--crisp-fg-primary)); }
+    & .crisp-statcard-delta[data-trend="down"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); }
+    & .crisp-statcard-delta[data-trend="flat"] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-muted); }
 }
-.statcard--card_true {
-  padding: var(--space-4); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle);
+.crisp-statcard--card_true {
+  padding: var(--crisp-space-4); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
 }
-.statcard--card_false {
+.crisp-statcard--card_false {
   
 }

package/dist/statcard.layered.css

@@ -0,0 +1,21 @@
+@layer crisp-components {
+.crisp-statcard {
+  display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-statcard-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
+    & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
+    & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
+    & .crisp-statcard-delta svg { flex-shrink: 0; }
+    & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 80%, var(--crisp-fg-primary)); }
+    & .crisp-statcard-delta[data-trend="down"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); }
+    & .crisp-statcard-delta[data-trend="flat"] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-muted); }
+}
+.crisp-statcard--card_true {
+  padding: var(--crisp-space-4); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-statcard--card_false {
+  
+}
+}