@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/textarea.css

@@ -1,38 +1,38 @@
-.textarea {
+.crisp-textarea {
   
-    position: relative; display: block; width: 100%; font-family: var(--font-sans);
+    position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
 
-    & .textarea-field {
+    & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
-      margin: 0; padding: var(--space-1-5) var(--space-2-5); border: none; border-radius: var(--radius-md);
-      background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--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(--text-lg); line-height: 20px; color: var(--fg-primary);
+      margin: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2-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); line-height: 20px; color: var(--crisp-fg-primary);
       outline: none; transition: box-shadow .15s ease;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
-    & .textarea-field::placeholder { color: var(--fg-muted); }
-    & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
 
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
        overlay that is present-but-transparent at rest, so focusing never
        shifts the box, animating only its colour. */
-    & .textarea-wrap { position: relative; display: block; }
-    & .textarea-wrap::after {
-      content: ""; position: absolute; inset: 0; border-radius: var(--radius-md);
+    & .crisp-textarea-wrap { position: relative; display: block; }
+    & .crisp-textarea-wrap::after {
+      content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md);
       border: 2px solid transparent; transition: border-color .1s ease;
       pointer-events: none;
     }
-    & .textarea-wrap:focus-within::after { border-color: var(--stroke-field-focus); }
-    &[data-invalid] .textarea-wrap::after { border-color: var(--bg-danger); }
-    &[data-invalid] .textarea-wrap:focus-within::after { border-color: var(--bg-danger); }
-    &[data-counted] .textarea-field { padding-bottom: var(--space-5); }
-    & .textarea-count { position: absolute; inset-inline-end: var(--space-2-5); bottom: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); pointer-events: none; }
-    & .textarea-count[data-over] { color: var(--bg-danger); }
+    & .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
+    &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
+    &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
+    &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: var(--crisp-space-2-5); bottom: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
   
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .textarea, .textarea * {
+  .crisp-textarea, .crisp-textarea * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/textarea.layered.css

@@ -0,0 +1,42 @@
+@layer crisp-components {
+.crisp-textarea {
+  
+    position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
+
+    & .crisp-textarea-field {
+      box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
+      margin: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2-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); line-height: 20px; color: var(--crisp-fg-primary);
+      outline: none; transition: box-shadow .15s ease;
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    }
+    & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
+       overlay that is present-but-transparent at rest, so focusing never
+       shifts the box, animating only its colour. */
+    & .crisp-textarea-wrap { position: relative; display: block; }
+    & .crisp-textarea-wrap::after {
+      content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md);
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    & .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
+    &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
+    &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
+    &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: var(--crisp-space-2-5); bottom: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-textarea, .crisp-textarea * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/toast.css

@@ -1,23 +1,23 @@
-.toast {
-  display: contents; font-family: var(--font-sans);
-    & .toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); width: 360px; max-width: calc(100vw - var(--space-8)); pointer-events: none; }
-    & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-2-5); box-sizing: border-box; padding: var(--space-3); border-radius: var(--radius-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
-    & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--fg-muted); }
-    & .toast[data-tone="info"] .toast-icon { color: var(--bg-brand-solid); }
-    & .toast[data-tone="success"] .toast-icon { color: var(--bg-success); }
-    & .toast[data-tone="warning"] .toast-icon { color: var(--bg-warning); }
-    & .toast[data-tone="danger"] .toast-icon { color: var(--bg-danger); }
-    & .toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .toast-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-primary); }
-    & .toast-desc { font-size: var(--text-md); color: var(--fg-muted); }
-    & .toast-action { align-self: flex-start; margin-top: var(--space-1-5); height: 24px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
-    & .toast-action:hover { background: color-mix(in srgb, var(--fg-primary) 10%, transparent); }
-    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
-    & .toast-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
+.crisp-toast {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
+    & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
+    & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }
+    & .crisp-toast[data-tone="warning"] .crisp-toast-icon { color: var(--crisp-bg-warning); }
+    & .crisp-toast[data-tone="danger"] .crisp-toast-icon { color: var(--crisp-bg-danger); }
+    & .crisp-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-toast-title { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-toast-desc { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    & .crisp-toast-action { align-self: flex-start; margin-top: var(--crisp-space-1-5); height: 24px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-toast-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); }
+    & .crisp-toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-toast-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .toast, .toast * {
+  .crisp-toast, .crisp-toast * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/toast.layered.css

@@ -0,0 +1,27 @@
+@layer crisp-components {
+.crisp-toast {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
+    & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
+    & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }
+    & .crisp-toast[data-tone="warning"] .crisp-toast-icon { color: var(--crisp-bg-warning); }
+    & .crisp-toast[data-tone="danger"] .crisp-toast-icon { color: var(--crisp-bg-danger); }
+    & .crisp-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-toast-title { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-toast-desc { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    & .crisp-toast-action { align-self: flex-start; margin-top: var(--crisp-space-1-5); height: 24px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-toast-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); }
+    & .crisp-toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-toast-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-toast, .crisp-toast * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/tokens.css

@@ -1,123 +1,207 @@
 :root {
-  --bg-brand-solid: #266df0;
-  --bg-brand-solid-pressed: #1f5fd6;
-  --fg-on-brand: #ffffff;
-  --fg-on-tone: #101112;
-  --bg-surface: #ffffff;
-  --bg-raised: #f4f4f5;
-  --border-default: #e4e4e7;
-  --border-subtle: #eeeff1;
-  --ring-neutral: transparent;
-  --bg-tile-active: #ffffff;
-  --shadow-tile-active: rgba(0,0,0,0.04);
-  --bg-overlay-frost: #ffffff;
-  --shadow-overlay1: rgba(28,40,64,0.12);
-  --shadow-overlay2: rgba(28,40,64,0.16);
-  --shadow-overlay3: rgba(28,40,64,0.16);
-  --bg-popover: #ffffff;
-  --ring-popover: rgba(0,0,0,0);
-  --shadow-popover1: rgba(28,40,64,0.04);
-  --shadow-popover2: rgba(28,40,64,0.12);
-  --shadow-popover3: rgba(24,41,75,0.16);
-  --fg-primary: #101112;
-  --fg-muted: #71717a;
-  --bg-danger: #e5484d;
-  --bg-danger-solid: #ba2525;
-  --stroke-field-focus: #1a1c20;
-  --fg-disabled: #d1d3d8;
-  --bg-neutral-weak: #f3f4f5;
-  --bg-neutral-inverted: #2a3038;
-  --fg-on-neutral-inverted: #ffffff;
-  --fg-neutral-subtle: #868b94;
-  --fg-neutral-muted: #555d6d;
-  --stroke-focus-ring: #1e82eb;
-  --bg-success: #1f9d57;
-  --bg-warning: #b5730f;
-  --bg-orange: #f97514;
-  --bg-cyan: #00b9eb;
-  --bg-purple: #9b69ff;
-  --bg-sidebar: #fbfbfb;
-  --bg-subtle: #fbfbfb;
+  --crisp-bg-brand-solid: #266df0;
+  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-fg-on-brand: #ffffff;
+  --crisp-fg-on-tone: #101112;
+  --crisp-bg-surface: #ffffff;
+  --crisp-bg-raised: #f4f4f5;
+  --crisp-border-default: #e4e4e7;
+  --crisp-border-subtle: #eeeff1;
+  --crisp-ring-neutral: transparent;
+  --crisp-bg-tile-active: #ffffff;
+  --crisp-shadow-tile-active: rgba(0,0,0,0.04);
+  --crisp-bg-overlay-frost: #ffffff;
+  --crisp-shadow-overlay1: rgba(28,40,64,0.12);
+  --crisp-shadow-overlay2: rgba(28,40,64,0.16);
+  --crisp-shadow-overlay3: rgba(28,40,64,0.16);
+  --crisp-bg-popover: #ffffff;
+  --crisp-ring-popover: rgba(0,0,0,0);
+  --crisp-shadow-popover1: rgba(28,40,64,0.04);
+  --crisp-shadow-popover2: rgba(28,40,64,0.12);
+  --crisp-shadow-popover3: rgba(24,41,75,0.16);
+  --crisp-fg-primary: #101112;
+  --crisp-fg-muted: #71717a;
+  --crisp-bg-danger: #e5484d;
+  --crisp-bg-danger-solid: #ba2525;
+  --crisp-stroke-field-focus: #1a1c20;
+  --crisp-fg-disabled: #d1d3d8;
+  --crisp-bg-neutral-weak: #f3f4f5;
+  --crisp-bg-neutral-inverted: #2a3038;
+  --crisp-fg-on-neutral-inverted: #ffffff;
+  --crisp-fg-neutral-subtle: #868b94;
+  --crisp-fg-neutral-muted: #555d6d;
+  --crisp-stroke-focus-ring: #1e82eb;
+  --crisp-bg-success: #1f9d57;
+  --crisp-bg-warning: #b5730f;
+  --crisp-bg-orange: #f97514;
+  --crisp-bg-cyan: #00b9eb;
+  --crisp-bg-purple: #9b69ff;
+  --crisp-bg-sidebar: #fbfbfb;
+  --crisp-bg-subtle: #fbfbfb;
 }
 
 [data-theme="dark"] {
-  --bg-brand-solid: #266df0;
-  --bg-brand-solid-pressed: #1f5fd6;
-  --fg-on-brand: #ffffff;
-  --fg-on-tone: #101112;
-  --bg-surface: #0a0a0a;
-  --bg-raised: #101112;
-  --border-default: #212224;
-  --border-subtle: #1c1d1f;
-  --ring-neutral: #212224;
-  --bg-tile-active: #101112;
-  --shadow-tile-active: rgba(0,0,0,0);
-  --bg-overlay-frost: #1c1d1f;
-  --shadow-overlay1: rgba(0,0,0,0.48);
-  --shadow-overlay2: rgba(0,0,0,0.64);
-  --shadow-overlay3: rgba(0,0,0,0);
-  --bg-popover: #17181a;
-  --ring-popover: #212224;
-  --shadow-popover1: rgba(0,0,0,0.16);
-  --shadow-popover2: rgba(0,0,0,0.24);
-  --shadow-popover3: rgba(0,0,0,0.32);
-  --fg-primary: #f5f5f5;
-  --fg-muted: #9a9aa2;
-  --bg-danger: #ff5a5f;
-  --bg-danger-solid: #ba2525;
-  --stroke-field-focus: #f3f4f5;
-  --fg-disabled: #5b606a;
-  --bg-neutral-weak: #1d2025;
-  --bg-neutral-inverted: #f3f4f5;
-  --fg-on-neutral-inverted: #16171b;
-  --fg-neutral-subtle: #b0b3ba;
-  --fg-neutral-muted: #dcdee3;
-  --stroke-focus-ring: #5e98fe;
-  --bg-success: #2ea968;
-  --bg-warning: #e0982a;
-  --bg-orange: #f97514;
-  --bg-cyan: #00b9eb;
-  --bg-purple: #9b69ff;
-  --bg-sidebar: #0e0f10;
-  --bg-subtle: #0e0f10;
+  --crisp-bg-brand-solid: #266df0;
+  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-fg-on-brand: #ffffff;
+  --crisp-fg-on-tone: #101112;
+  --crisp-bg-surface: #0a0a0a;
+  --crisp-bg-raised: #101112;
+  --crisp-border-default: #212224;
+  --crisp-border-subtle: #1c1d1f;
+  --crisp-ring-neutral: #212224;
+  --crisp-bg-tile-active: #101112;
+  --crisp-shadow-tile-active: rgba(0,0,0,0);
+  --crisp-bg-overlay-frost: #1c1d1f;
+  --crisp-shadow-overlay1: rgba(0,0,0,0.48);
+  --crisp-shadow-overlay2: rgba(0,0,0,0.64);
+  --crisp-shadow-overlay3: rgba(0,0,0,0);
+  --crisp-bg-popover: #17181a;
+  --crisp-ring-popover: #212224;
+  --crisp-shadow-popover1: rgba(0,0,0,0.16);
+  --crisp-shadow-popover2: rgba(0,0,0,0.24);
+  --crisp-shadow-popover3: rgba(0,0,0,0.32);
+  --crisp-fg-primary: #f5f5f5;
+  --crisp-fg-muted: #9a9aa2;
+  --crisp-bg-danger: #ff5a5f;
+  --crisp-bg-danger-solid: #ba2525;
+  --crisp-stroke-field-focus: #f3f4f5;
+  --crisp-fg-disabled: #5b606a;
+  --crisp-bg-neutral-weak: #1d2025;
+  --crisp-bg-neutral-inverted: #f3f4f5;
+  --crisp-fg-on-neutral-inverted: #16171b;
+  --crisp-fg-neutral-subtle: #b0b3ba;
+  --crisp-fg-neutral-muted: #dcdee3;
+  --crisp-stroke-focus-ring: #5e98fe;
+  --crisp-bg-success: #2ea968;
+  --crisp-bg-warning: #e0982a;
+  --crisp-bg-orange: #f97514;
+  --crisp-bg-cyan: #00b9eb;
+  --crisp-bg-purple: #9b69ff;
+  --crisp-bg-sidebar: #0e0f10;
+  --crisp-bg-subtle: #0e0f10;
 }
 
 :root {
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-px: 1px;
-  --space-0-5: 2px;
-  --space-1-5: 6px;
-  --space-2-5: 10px;
-  --radius-chip: 7px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 9px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-full: 999px;
-  --size-icon: 16px;
-  --size-chip: 22px;
-  --size-row: 28px;
-  --size-menuRow: 32px;
-  --size-tableRow: 36px;
-  --size-tableHeader: 40px;
-  --size-header: 48px;
-  --size-calendarCell: 34px;
-  --size-calendarPill: 32px;
-  --text-xs: 11px;
-  --text-sm: 12px;
-  --text-md: 13px;
-  --text-lg: 14px;
-  --text-xl: 16px;
-  --weight-regular: 400;
-  --weight-medium: 500;
-  --weight-semibold: 600;
-  --weight-bold: 700;
-  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-space-1: 4px;
+  --crisp-space-2: 8px;
+  --crisp-space-3: 12px;
+  --crisp-space-4: 16px;
+  --crisp-space-5: 20px;
+  --crisp-space-6: 24px;
+  --crisp-space-8: 32px;
+  --crisp-space-px: 1px;
+  --crisp-space-0-5: 2px;
+  --crisp-space-1-5: 6px;
+  --crisp-space-2-5: 10px;
+  --crisp-radius-chip: 7px;
+  --crisp-radius-sm: 6px;
+  --crisp-radius-md: 8px;
+  --crisp-radius-lg: 9px;
+  --crisp-radius-xl: 12px;
+  --crisp-radius-2xl: 16px;
+  --crisp-radius-full: 999px;
+  --crisp-size-icon: 16px;
+  --crisp-size-chip: 22px;
+  --crisp-size-row: 28px;
+  --crisp-size-menuRow: 32px;
+  --crisp-size-tableRow: 36px;
+  --crisp-size-tableHeader: 40px;
+  --crisp-size-header: 48px;
+  --crisp-size-calendarCell: 34px;
+  --crisp-size-calendarPill: 32px;
+  --crisp-text-xs: 11px;
+  --crisp-text-sm: 12px;
+  --crisp-text-md: 13px;
+  --crisp-text-lg: 14px;
+  --crisp-text-xl: 16px;
+  --crisp-weight-regular: 400;
+  --crisp-weight-medium: 500;
+  --crisp-weight-semibold: 600;
+  --crisp-weight-bold: 700;
+  --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+/* -----------------------------------------------------------------
+ * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
+ * the next major version. Prefer the --crisp-* custom property
+ * above; these only forward to it so an existing override keeps working.
+ * ----------------------------------------------------------------- */
+:root {
+  --bg-brand-solid: var(--crisp-bg-brand-solid);
+  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
+  --fg-on-brand: var(--crisp-fg-on-brand);
+  --fg-on-tone: var(--crisp-fg-on-tone);
+  --bg-surface: var(--crisp-bg-surface);
+  --bg-raised: var(--crisp-bg-raised);
+  --border-default: var(--crisp-border-default);
+  --border-subtle: var(--crisp-border-subtle);
+  --ring-neutral: var(--crisp-ring-neutral);
+  --bg-tile-active: var(--crisp-bg-tile-active);
+  --shadow-tile-active: var(--crisp-shadow-tile-active);
+  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
+  --shadow-overlay1: var(--crisp-shadow-overlay1);
+  --shadow-overlay2: var(--crisp-shadow-overlay2);
+  --shadow-overlay3: var(--crisp-shadow-overlay3);
+  --bg-popover: var(--crisp-bg-popover);
+  --ring-popover: var(--crisp-ring-popover);
+  --shadow-popover1: var(--crisp-shadow-popover1);
+  --shadow-popover2: var(--crisp-shadow-popover2);
+  --shadow-popover3: var(--crisp-shadow-popover3);
+  --fg-primary: var(--crisp-fg-primary);
+  --fg-muted: var(--crisp-fg-muted);
+  --bg-danger: var(--crisp-bg-danger);
+  --bg-danger-solid: var(--crisp-bg-danger-solid);
+  --stroke-field-focus: var(--crisp-stroke-field-focus);
+  --fg-disabled: var(--crisp-fg-disabled);
+  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
+  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
+  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
+  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
+  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
+  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
+  --bg-success: var(--crisp-bg-success);
+  --bg-warning: var(--crisp-bg-warning);
+  --bg-orange: var(--crisp-bg-orange);
+  --bg-cyan: var(--crisp-bg-cyan);
+  --bg-purple: var(--crisp-bg-purple);
+  --bg-sidebar: var(--crisp-bg-sidebar);
+  --bg-subtle: var(--crisp-bg-subtle);
+  --space-1: var(--crisp-space-1);
+  --space-2: var(--crisp-space-2);
+  --space-3: var(--crisp-space-3);
+  --space-4: var(--crisp-space-4);
+  --space-5: var(--crisp-space-5);
+  --space-6: var(--crisp-space-6);
+  --space-8: var(--crisp-space-8);
+  --space-px: var(--crisp-space-px);
+  --space-0-5: var(--crisp-space-0-5);
+  --space-1-5: var(--crisp-space-1-5);
+  --space-2-5: var(--crisp-space-2-5);
+  --radius-chip: var(--crisp-radius-chip);
+  --radius-sm: var(--crisp-radius-sm);
+  --radius-md: var(--crisp-radius-md);
+  --radius-lg: var(--crisp-radius-lg);
+  --radius-xl: var(--crisp-radius-xl);
+  --radius-2xl: var(--crisp-radius-2xl);
+  --radius-full: var(--crisp-radius-full);
+  --size-icon: var(--crisp-size-icon);
+  --size-chip: var(--crisp-size-chip);
+  --size-row: var(--crisp-size-row);
+  --size-menuRow: var(--crisp-size-menuRow);
+  --size-tableRow: var(--crisp-size-tableRow);
+  --size-tableHeader: var(--crisp-size-tableHeader);
+  --size-header: var(--crisp-size-header);
+  --size-calendarCell: var(--crisp-size-calendarCell);
+  --size-calendarPill: var(--crisp-size-calendarPill);
+  --text-xs: var(--crisp-text-xs);
+  --text-sm: var(--crisp-text-sm);
+  --text-md: var(--crisp-text-md);
+  --text-lg: var(--crisp-text-lg);
+  --text-xl: var(--crisp-text-xl);
+  --weight-regular: var(--crisp-weight-regular);
+  --weight-medium: var(--crisp-weight-medium);
+  --weight-semibold: var(--crisp-weight-semibold);
+  --weight-bold: var(--crisp-weight-bold);
+  --font-sans: var(--crisp-font-sans);
 }

package/dist/tooltip.css

@@ -1,9 +1,9 @@
-.tooltip {
-  position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: #20242c; color: #fff; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }
+.crisp-tooltip {
+  position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1) var(--crisp-space-2); border-radius: var(--crisp-radius-sm); background: #20242c; color: #fff; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .tooltip, .tooltip * {
+  .crisp-tooltip, .crisp-tooltip * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/tooltip.layered.css

@@ -0,0 +1,13 @@
+@layer crisp-components {
+.crisp-tooltip {
+  position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1) var(--crisp-space-2); border-radius: var(--crisp-radius-sm); background: #20242c; color: #fff; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease; @starting-style { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-tooltip, .crisp-tooltip * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/trialbanner.css

@@ -1,24 +1,24 @@
-.trialbanner {
-  display: flex; align-items: center; gap: var(--space-1-5); box-sizing: border-box; min-height: 28px;
-    padding: 0 var(--space-1); border-radius: var(--radius-lg); font-family: var(--font-sans);
-    font-size: var(--text-lg); color: var(--fg-primary);
+.crisp-trialbanner {
+  display: flex; align-items: center; gap: var(--crisp-space-1-5); box-sizing: border-box; min-height: 28px;
+    padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans);
+    font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: var(--fg-muted); }
-    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .trialbanner-action { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; flex-shrink: 0;
-      padding: 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-sm); background: var(--bg-surface);
+    & .crisp-trialbanner-icon { display: inline-flex; flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-trialbanner-action { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 20px; flex-shrink: 0;
+      padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface);
       box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
-      font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-primary);
+      font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
       white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .trialbanner-action:hover { background: var(--bg-raised); }
+    & .crisp-trialbanner-action:hover { background: var(--crisp-bg-raised); }
 
-    &[data-tone="warning"] .trialbanner-icon { color: var(--bg-warning); }
-    &[data-tone="danger"] .trialbanner-icon { color: var(--bg-danger); }
+    &[data-tone="warning"] .crisp-trialbanner-icon { color: var(--crisp-bg-warning); }
+    &[data-tone="danger"] .crisp-trialbanner-icon { color: var(--crisp-bg-danger); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .trialbanner, .trialbanner * {
+  .crisp-trialbanner, .crisp-trialbanner * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/trialbanner.layered.css

@@ -0,0 +1,28 @@
+@layer crisp-components {
+.crisp-trialbanner {
+  display: flex; align-items: center; gap: var(--crisp-space-1-5); box-sizing: border-box; min-height: 28px;
+    padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans);
+    font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-trialbanner-icon { display: inline-flex; flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-trialbanner-action { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 20px; flex-shrink: 0;
+      padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface);
+      box-shadow: 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-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+      white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-trialbanner-action:hover { background: var(--crisp-bg-raised); }
+
+    &[data-tone="warning"] .crisp-trialbanner-icon { color: var(--crisp-bg-warning); }
+    &[data-tone="danger"] .crisp-trialbanner-icon { color: var(--crisp-bg-danger); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-trialbanner, .crisp-trialbanner * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/types/core/dialog-description.d.ts

@@ -1,7 +1,7 @@
 /**
  * Zag's dialog machine always advertises a description: `getContentProps()`
  * returns an `aria-describedby` pointing at the id of a description element.
- * crisp renders no such element — Attio's modals have a title and a body, no
+ * crisp renders no such element — the measured modals have a title and a body, no
  * description line — so the reference dangles, and a dangling id is not a
  * relationship a screen reader can follow.
  *

package/dist/types/core/namespace.d.ts

@@ -0,0 +1,2 @@
+export declare const CLASS_PREFIX = "crisp-";
+export declare const VAR_PREFIX = "crisp-";

package/dist/types/tokens/elevation.d.ts

@@ -1,8 +1,8 @@
 /**
- * Attio's measured elevation recipes, written **once**.
+ * The measured elevation recipes, written **once**.
  *
  * The whole product runs on two elevation tiers plus one control shadow
- * (measured live — see `docs/study/attio-panels.md` §4). Before this module each
+ * (measured live — see the panels study §4). Before this module each
  * surface carried its own copy of the string: the tier-1 stack appeared in 9
  * places, the control shadow in 12. Copies drift, and every drift was a real
  * bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
@@ -19,14 +19,14 @@ export declare const elevation: {
     /**
      * Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
      * `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
-     * card at radius 12. Attio dims nothing behind it; the blur does the work.
+     * card at radius 12. Nothing is dimmed behind it; the blur does the work.
      */
     readonly modal: `0 8px 28px -6px var(--${string}), 0 18px 88px -4px var(--${string}), 0 0 1px var(--${string})`;
     /**
      * The neutral/outlined control shadow — buttons, inputs, textareas, the
      * sidebar search, record-page actions.
      *
-     * The two raw values **are** the measured Attio value (Lessons 22 and 29) and
+     * The two raw values **are** the measured value (Lessons 22 and 29) and
      * must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
      * coincidence, not by meaning; tokenizing it would delete a measured layer in
      * dark mode. Only the ring is theme-aware, via `ringNeutral`.