@crisp-ui-kit/crisp 0.32.1 → 0.33.1

package/dist/switch.css

@@ -1,14 +1,10 @@
 .crisp-switch {
-  
-    display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
-    border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent);
-    cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
+  display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
     & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--crisp-radius-full); background: #fff; transition: transform .2s ease; }
     &[data-checked] { background: var(--crisp-bg-brand-solid); }
     &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
     &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
     &:disabled { opacity: 0.5; cursor: not-allowed; }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/switch.layered.css

@@ -1,15 +1,11 @@
 @layer crisp-components {
 .crisp-switch {
-  
-    display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
-    border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent);
-    cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
+  display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
     & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--crisp-radius-full); background: #fff; transition: transform .2s ease; }
     &[data-checked] { background: var(--crisp-bg-brand-solid); }
     &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
     &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
     &:disabled { opacity: 0.5; cursor: not-allowed; }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/table.css

@@ -13,7 +13,8 @@
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }
 }
 .crisp-table--interactive_true {
-  & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
+  & tbody tr { transition: background-color .12s; }
+    & tbody tr:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
 }
 .crisp-table--interactive_false {
   

package/dist/table.layered.css

@@ -14,7 +14,8 @@
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }
 }
 .crisp-table--interactive_true {
-  & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
+  & tbody tr { transition: background-color .12s; }
+    & tbody tr:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
 }
 .crisp-table--interactive_false {
   

package/dist/tabletoolbar.css

@@ -1,6 +1,5 @@
 .crisp-tabletoolbar {
-  
-    display: contents; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  display: contents; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
     & .crisp-tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-tabletoolbar-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); padding: 0 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-border-subtle); color: var(--crisp-fg-muted); }
@@ -66,7 +65,6 @@
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tabletoolbar.layered.css

@@ -1,7 +1,6 @@
 @layer crisp-components {
 .crisp-tabletoolbar {
-  
-    display: contents; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  display: contents; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
     & .crisp-tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-tabletoolbar-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); padding: 0 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-border-subtle); color: var(--crisp-fg-muted); }
@@ -67,7 +66,6 @@
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tabs.css

@@ -1,8 +1,5 @@
 .crisp-tabs {
-  
-    display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans);
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
+  display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
@@ -15,7 +12,6 @@
     & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tabs.layered.css

@@ -1,9 +1,6 @@
 @layer crisp-components {
 .crisp-tabs {
-  
-    display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans);
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
+  display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
@@ -16,7 +13,6 @@
     & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tasklist.css

@@ -1,25 +1,18 @@
 .crisp-tasklist {
-  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tasklist-group { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; padding: 0 var(--crisp-space-2); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); color: var(--crisp-fg-muted); }
-
     & .crisp-tasklist-row { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; padding: 0 var(--crisp-space-2); border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-tasklist-row:first-child { border-top: none; }
-
     & .crisp-tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
     & .crisp-tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
     & .crisp-tasklist-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
     & .crisp-tasklist-check:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-
     & .crisp-tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-tasklist-row[data-done] .crisp-tasklist-title { color: var(--crisp-fg-muted); text-decoration: line-through; }
-
     & .crisp-tasklist-meta { display: inline-flex; align-items: center; gap: var(--crisp-space-3); flex-shrink: 0; }
     & .crisp-tasklist-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
     & .crisp-tasklist-due[data-overdue] { color: var(--crisp-bg-danger); }
-
     & .crisp-tasklist-empty { padding: var(--crisp-space-4) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
 }
 

package/dist/tasklist.layered.css

@@ -1,26 +1,19 @@
 @layer crisp-components {
 .crisp-tasklist {
-  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tasklist-group { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; padding: 0 var(--crisp-space-2); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); color: var(--crisp-fg-muted); }
-
     & .crisp-tasklist-row { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; padding: 0 var(--crisp-space-2); border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-tasklist-row:first-child { border-top: none; }
-
     & .crisp-tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
     & .crisp-tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
     & .crisp-tasklist-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
     & .crisp-tasklist-check:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-
     & .crisp-tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-tasklist-row[data-done] .crisp-tasklist-title { color: var(--crisp-fg-muted); text-decoration: line-through; }
-
     & .crisp-tasklist-meta { display: inline-flex; align-items: center; gap: var(--crisp-space-3); flex-shrink: 0; }
     & .crisp-tasklist-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
     & .crisp-tasklist-due[data-overdue] { color: var(--crisp-bg-danger); }
-
     & .crisp-tasklist-empty { padding: var(--crisp-space-4) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
 }
 

package/dist/textarea.css

@@ -1,18 +1,8 @@
 .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;
-    }
+  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. */
@@ -28,7 +18,6 @@
     &[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) {

package/dist/textarea.layered.css

@@ -1,19 +1,9 @@
 @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;
-    }
+  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. */
@@ -29,7 +19,6 @@
     &[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) {

package/dist/tooltip.css

@@ -1,5 +1,6 @@
 .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; }
+  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) {

package/dist/tooltip.layered.css

@@ -1,6 +1,7 @@
 @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; }
+  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) {

package/dist/trialbanner.css

@@ -1,18 +1,9 @@
 .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;
-
+  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 { 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); }
 }

package/dist/trialbanner.layered.css

@@ -1,19 +1,10 @@
 @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;
-
+  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 { 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); }
 }

package/dist/types/components/avatar/avatar.d.ts

@@ -5,43 +5,43 @@ export type AvatarProps = Omit<React.ComponentPropsWithoutRef<"span">, "color">
     asChild?: boolean;
 };
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "color"> & VariantProps<import("../..").RecipeFn<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
     };
-    shape: {
-        circle: string;
-        rounded: string;
+    readonly shape: {
+        readonly circle: string;
+        readonly rounded: string;
     };
-    tone: {
-        neutral: string;
-        brand: string;
-        orange: string;
-        cyan: string;
-        purple: string;
-        green: string;
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly orange: string;
+        readonly cyan: string;
+        readonly purple: string;
+        readonly green: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
+        readonly size: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
         };
-        shape: {
-            circle: string;
-            rounded: string;
+        readonly shape: {
+            readonly circle: string;
+            readonly rounded: string;
         };
-        tone: {
-            neutral: string;
-            brand: string;
-            orange: string;
-            cyan: string;
-            purple: string;
-            green: string;
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly orange: string;
+            readonly cyan: string;
+            readonly purple: string;
+            readonly green: string;
         };
     }>;
 }> & {

package/dist/types/components/avatar/avatar.recipe.d.ts

@@ -1,62 +1,149 @@
+declare const spec: {
+    readonly name: "avatar";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly flexShrink: 0;
+        readonly fontFamily: `var(--${string})`;
+        readonly fontWeight: `var(--${string})`;
+        readonly overflow: "hidden";
+        readonly userSelect: "none";
+    };
+    readonly parts: [{
+        readonly slot: "image";
+        readonly selector: "& img";
+        readonly decls: {
+            readonly width: "100%";
+            readonly height: "100%";
+            readonly objectFit: "cover";
+        };
+    }];
+    readonly variants: {
+        readonly size: {
+            readonly sm: {
+                readonly height: "16px";
+                readonly width: "16px";
+                readonly fontSize: "9px";
+            };
+            readonly md: {
+                readonly height: "20px";
+                readonly width: "20px";
+                readonly fontSize: "10px";
+            };
+            readonly lg: {
+                readonly height: "24px";
+                readonly width: "24px";
+                readonly fontSize: `var(--${string})`;
+            };
+            readonly xl: {
+                readonly height: "32px";
+                readonly width: "32px";
+                readonly fontSize: `var(--${string})`;
+            };
+        };
+        readonly shape: {
+            readonly circle: {
+                borderRadius: `var(--${string})`;
+            };
+            readonly rounded: {
+                readonly borderRadius: "30%";
+            };
+        };
+        readonly tone: {
+            readonly neutral: {
+                readonly background: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
+            readonly brand: {
+                readonly background: `var(--${string})`;
+                readonly color: "#fff";
+            };
+            readonly orange: {
+                readonly background: `var(--${string})`;
+                readonly color: "#fff";
+            };
+            readonly cyan: {
+                readonly background: `var(--${string})`;
+                readonly color: "#fff";
+            };
+            readonly purple: {
+                readonly background: `var(--${string})`;
+                readonly color: "#fff";
+            };
+            readonly green: {
+                readonly background: `var(--${string})`;
+                readonly color: "#fff";
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly size: "md";
+        readonly shape: "circle";
+        readonly tone: "neutral";
+    };
+};
 declare const config: import("../..").RecipeConfig<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    shape: {
-        circle: string;
-        rounded: string;
-    };
-    tone: {
-        neutral: string;
-        brand: string;
-        orange: string;
-        cyan: string;
-        purple: string;
-        green: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+    };
+    readonly shape: {
+        readonly circle: string;
+        readonly rounded: string;
+    };
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly orange: string;
+        readonly cyan: string;
+        readonly purple: string;
+        readonly green: string;
     };
 }>;
 export declare const avatarRecipe: import("../..").RecipeFn<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    shape: {
-        circle: string;
-        rounded: string;
-    };
-    tone: {
-        neutral: string;
-        brand: string;
-        orange: string;
-        cyan: string;
-        purple: string;
-        green: string;
+    readonly size: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+    };
+    readonly shape: {
+        readonly circle: string;
+        readonly rounded: string;
+    };
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly orange: string;
+        readonly cyan: string;
+        readonly purple: string;
+        readonly green: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
-        size: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
+        readonly size: {
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
         };
-        shape: {
-            circle: string;
-            rounded: string;
+        readonly shape: {
+            readonly circle: string;
+            readonly rounded: string;
         };
-        tone: {
-            neutral: string;
-            brand: string;
-            orange: string;
-            cyan: string;
-            purple: string;
-            green: string;
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly orange: string;
+            readonly cyan: string;
+            readonly purple: string;
+            readonly green: string;
         };
     }>;
 };
+export { spec };
 export default config;