@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/switch.css

@@ -10,3 +10,11 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .switch, .switch * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/table.css

@@ -2,18 +2,18 @@
   display: block; box-sizing: border-box; background: var(--bg-surface);
     & .table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); font-size: var(--text-lg); color: var(--fg-primary); }
-    & th, & td { position: relative; height: var(--size-tableRow); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; }
-    & th { height: 40px; background: var(--bg-surface); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: var(--fg-primary); user-select: none; }
+    & th, & td { position: relative; height: var(--size-tableRow); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); border-inline-end: 1px solid var(--border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th { height: var(--size-tableHeader); background: var(--bg-surface); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--fg-primary); background: var(--bg-surface); }
-    & th:last-child, & td:last-child { border-right: none; }
+    & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
     & tfoot td { border-top: 1px solid var(--border-subtle); border-bottom: none; font-weight: var(--weight-medium); color: var(--fg-muted); }
-    & caption { padding: var(--space-2) var(--space-2); text-align: left; font-size: var(--text-sm); color: var(--fg-muted); caption-side: bottom; }
-    & td[data-align="right"], & th[data-align="right"] { text-align: right; }
+    & caption { padding: var(--space-2) var(--space-2); text-align: start; font-size: var(--text-sm); color: var(--fg-muted); caption-side: bottom; }
+    & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }
 }
 .table--interactive_true {
-  & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--fg-primary) 3%, var(--bg-surface)); }
+  & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); }
 }
 .table--interactive_false {
   
@@ -24,3 +24,11 @@
 .table--surface_bleed {
   border: none; border-radius: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .table, .table * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tabletoolbar.css

@@ -68,3 +68,11 @@
     & .tabletoolbar-new:hover { background: var(--bg-brand-solid-pressed); }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tabletoolbar, .tabletoolbar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tabs.css

@@ -3,17 +3,25 @@
     display: flex; flex-direction: column; min-height: 0; font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tabs-list { position: relative; display: flex; align-items: center; gap: var(--space-1); height: 40px; flex-shrink: 0; box-shadow: inset 0 -1px 0 var(--border-subtle); }
-    & .tabs-leading { display: inline-flex; align-items: center; margin-right: var(--space-1); }
+    & .tabs-list { position: relative; display: flex; align-items: center; gap: var(--space-1); height: var(--size-row); flex-shrink: 0; }
+    & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--space-1); }
     & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; margin: 0; padding: 0 var(--space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: var(--fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
-    & .tabs-tab[data-selected] { color: var(--fg-primary); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
+    & .tabs-tab[data-selected] { color: var(--fg-primary); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-subtle); }
     & .tabs-tab:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
     & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); }
     & .tabs-tab[data-selected] .tabs-tab-badge { color: var(--fg-primary); }
-    & .tabs-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--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; }
+    & .tabs-indicator { position: absolute; bottom: calc(-1 * var(--space-2)); left: 0; height: 1px; background: var(--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; }
     & .tabs-panel { flex: 1; min-height: 0; }
     & .tabs-panel:focus-visible { outline: none; }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tabs, .tabs * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tasklist.css

@@ -22,3 +22,11 @@
 
     & .tasklist-empty { padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tasklist, .tasklist * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/textarea.css

@@ -5,16 +5,36 @@
     & .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: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      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);
       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:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
     & .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);
+      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; right: var(--space-2-5); bottom: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); pointer-events: none; }
+    & .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); }
   
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea, .textarea * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/toast.css

@@ -1,6 +1,6 @@
 .toast {
   display: contents; font-family: var(--font-sans);
-    & .toast-viewport { position: fixed; z-index: 80; right: 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-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); }
@@ -12,6 +12,14 @@
     & .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); cursor: pointer; }
+    & .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); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .toast, .toast * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/tokens.css

@@ -2,6 +2,7 @@
   --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;
@@ -21,18 +22,29 @@
   --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;
 }
 
 [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;
@@ -52,12 +64,22 @@
   --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;
 }
 
 :root {
@@ -72,6 +94,7 @@
   --space-0-5: 2px;
   --space-1-5: 6px;
   --space-2-5: 10px;
+  --radius-chip: 7px;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 9px;
@@ -79,9 +102,14 @@
   --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: 48px;
+  --size-calendarPill: 42px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 13px;
@@ -90,5 +118,6 @@
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
+  --weight-bold: 700;
   --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }

package/dist/tokens.json

@@ -0,0 +1,217 @@
+{
+  "color": {
+    "light": {
+      "bgBrandSolid": "#266df0",
+      "bgBrandSolidPressed": "#1f5fd6",
+      "fgOnBrand": "#ffffff",
+      "fgOnTone": "#101112",
+      "bgSurface": "#ffffff",
+      "bgRaised": "#f4f4f5",
+      "borderDefault": "#e4e4e7",
+      "borderSubtle": "#eeeff1",
+      "ringNeutral": "transparent",
+      "bgTileActive": "#ffffff",
+      "shadowTileActive": "rgba(0,0,0,0.04)",
+      "bgOverlayFrost": "#ffffff",
+      "shadowOverlay1": "rgba(28,40,64,0.12)",
+      "shadowOverlay2": "rgba(28,40,64,0.16)",
+      "shadowOverlay3": "rgba(28,40,64,0.16)",
+      "bgPopover": "#ffffff",
+      "ringPopover": "rgba(0,0,0,0)",
+      "shadowPopover1": "rgba(28,40,64,0.04)",
+      "shadowPopover2": "rgba(28,40,64,0.12)",
+      "shadowPopover3": "rgba(24,41,75,0.16)",
+      "fgPrimary": "#101112",
+      "fgMuted": "#71717a",
+      "bgDanger": "#e5484d",
+      "bgDangerSolid": "#ba2525",
+      "strokeFieldFocus": "#1a1c20",
+      "fgDisabled": "#d1d3d8",
+      "bgNeutralWeak": "#f3f4f5",
+      "bgNeutralInverted": "#2a3038",
+      "fgOnNeutralInverted": "#ffffff",
+      "fgNeutralSubtle": "#868b94",
+      "fgNeutralMuted": "#555d6d",
+      "strokeFocusRing": "#1e82eb",
+      "bgSuccess": "#1f9d57",
+      "bgWarning": "#b5730f",
+      "bgOrange": "#f97514",
+      "bgCyan": "#00b9eb",
+      "bgPurple": "#9b69ff",
+      "bgSidebar": "#fbfbfb",
+      "bgSubtle": "#fbfbfb"
+    },
+    "dark": {
+      "bgBrandSolid": "#266df0",
+      "bgBrandSolidPressed": "#1f5fd6",
+      "fgOnBrand": "#ffffff",
+      "fgOnTone": "#101112",
+      "bgSurface": "#0a0a0a",
+      "bgRaised": "#101112",
+      "borderDefault": "#212224",
+      "borderSubtle": "#1c1d1f",
+      "ringNeutral": "#212224",
+      "bgTileActive": "#101112",
+      "shadowTileActive": "rgba(0,0,0,0)",
+      "bgOverlayFrost": "#1c1d1f",
+      "shadowOverlay1": "rgba(0,0,0,0.48)",
+      "shadowOverlay2": "rgba(0,0,0,0.64)",
+      "shadowOverlay3": "rgba(0,0,0,0)",
+      "bgPopover": "#17181a",
+      "ringPopover": "#212224",
+      "shadowPopover1": "rgba(0,0,0,0.16)",
+      "shadowPopover2": "rgba(0,0,0,0.24)",
+      "shadowPopover3": "rgba(0,0,0,0.32)",
+      "fgPrimary": "#f5f5f5",
+      "fgMuted": "#9a9aa2",
+      "bgDanger": "#ff5a5f",
+      "bgDangerSolid": "#ba2525",
+      "strokeFieldFocus": "#f3f4f5",
+      "fgDisabled": "#5b606a",
+      "bgNeutralWeak": "#1d2025",
+      "bgNeutralInverted": "#f3f4f5",
+      "fgOnNeutralInverted": "#16171b",
+      "fgNeutralSubtle": "#b0b3ba",
+      "fgNeutralMuted": "#dcdee3",
+      "strokeFocusRing": "#5e98fe",
+      "bgSuccess": "#2ea968",
+      "bgWarning": "#e0982a",
+      "bgOrange": "#f97514",
+      "bgCyan": "#00b9eb",
+      "bgPurple": "#9b69ff",
+      "bgSidebar": "#0e0f10",
+      "bgSubtle": "#0e0f10"
+    }
+  },
+  "palette": {
+    "light": {
+      "gray00": "#ffffff",
+      "white": "#ffffff",
+      "ink": "#101112",
+      "gray50": "#f4f4f5",
+      "gray900": "#101112",
+      "line200": "#e4e4e7",
+      "line100": "#eeeff1",
+      "ringNeutral": "transparent",
+      "tileActive": "#ffffff",
+      "tileActiveShadow": "rgba(0,0,0,0.04)",
+      "overlayFrost": "#ffffff",
+      "shadowOverlay1": "rgba(28,40,64,0.12)",
+      "shadowOverlay2": "rgba(28,40,64,0.16)",
+      "shadowOverlay3": "rgba(28,40,64,0.16)",
+      "popoverBg": "#ffffff",
+      "ringPopover": "rgba(0,0,0,0)",
+      "shadowPopover1": "rgba(28,40,64,0.04)",
+      "shadowPopover2": "rgba(28,40,64,0.12)",
+      "shadowPopover3": "rgba(24,41,75,0.16)",
+      "gray400": "#71717a",
+      "brand600": "#266df0",
+      "brand700": "#1f5fd6",
+      "red600": "#e5484d",
+      "red700": "#ba2525",
+      "fieldFocus": "#1a1c20",
+      "disabledFg": "#d1d3d8",
+      "neutralWeak": "#f3f4f5",
+      "neutralInverted": "#2a3038",
+      "onNeutralInverted": "#ffffff",
+      "neutralSubtle": "#868b94",
+      "neutralMuted": "#555d6d",
+      "focusRing": "#1e82eb",
+      "green600": "#1f9d57",
+      "amber600": "#b5730f",
+      "orange600": "#f97514",
+      "cyan600": "#00b9eb",
+      "purple600": "#9b69ff",
+      "graySidebar": "#fbfbfb"
+    },
+    "dark": {
+      "gray00": "#0a0a0a",
+      "white": "#ffffff",
+      "ink": "#101112",
+      "gray50": "#101112",
+      "gray900": "#f5f5f5",
+      "line200": "#212224",
+      "line100": "#1c1d1f",
+      "ringNeutral": "#212224",
+      "tileActive": "#101112",
+      "tileActiveShadow": "rgba(0,0,0,0)",
+      "overlayFrost": "#1c1d1f",
+      "shadowOverlay1": "rgba(0,0,0,0.48)",
+      "shadowOverlay2": "rgba(0,0,0,0.64)",
+      "shadowOverlay3": "rgba(0,0,0,0)",
+      "popoverBg": "#17181a",
+      "ringPopover": "#212224",
+      "shadowPopover1": "rgba(0,0,0,0.16)",
+      "shadowPopover2": "rgba(0,0,0,0.24)",
+      "shadowPopover3": "rgba(0,0,0,0.32)",
+      "gray400": "#9a9aa2",
+      "brand600": "#266df0",
+      "brand700": "#1f5fd6",
+      "red600": "#ff5a5f",
+      "red700": "#ba2525",
+      "fieldFocus": "#f3f4f5",
+      "disabledFg": "#5b606a",
+      "neutralWeak": "#1d2025",
+      "neutralInverted": "#f3f4f5",
+      "onNeutralInverted": "#16171b",
+      "neutralSubtle": "#b0b3ba",
+      "neutralMuted": "#dcdee3",
+      "focusRing": "#5e98fe",
+      "green600": "#2ea968",
+      "amber600": "#e0982a",
+      "orange600": "#f97514",
+      "cyan600": "#00b9eb",
+      "purple600": "#9b69ff",
+      "graySidebar": "#0e0f10"
+    }
+  },
+  "space": {
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "px": 1,
+    "0.5": 2,
+    "1.5": 6,
+    "2.5": 10
+  },
+  "radius": {
+    "chip": 7,
+    "sm": 6,
+    "md": 8,
+    "lg": 9,
+    "xl": 12,
+    "2xl": 16,
+    "full": 999
+  },
+  "size": {
+    "icon": 16,
+    "chip": 22,
+    "row": 28,
+    "menuRow": 32,
+    "tableRow": 36,
+    "tableHeader": 40,
+    "header": 48,
+    "calendarCell": 48,
+    "calendarPill": 42
+  },
+  "text": {
+    "xs": 11,
+    "sm": 12,
+    "md": 13,
+    "lg": 14,
+    "xl": 16
+  },
+  "font": {
+    "sans": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
+  },
+  "weight": {
+    "regular": "400",
+    "medium": "500",
+    "semibold": "600",
+    "bold": "700"
+  }
+}

package/dist/tooltip.css

@@ -1,3 +1,11 @@
 .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; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip, .tooltip * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/trialbanner.css

@@ -16,3 +16,11 @@
     &[data-tone="warning"] .trialbanner-icon { color: var(--bg-warning); }
     &[data-tone="danger"] .trialbanner-icon { color: var(--bg-danger); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .trialbanner, .trialbanner * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

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

@@ -4,20 +4,22 @@ export type AccordionItemData = {
     title: React.ReactNode;
     content: React.ReactNode;
 };
-export type AccordionProps = {
+export type AccordionProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue"> & {
     items: AccordionItemData[];
     /** Allow multiple panels open at once (default: single). */
     multiple?: boolean;
-    /** Initially open value(s). */
+    /** Controlled open value(s). Omit to let Accordion manage them (see
+     * `defaultValue`). A string in single mode, an array when `multiple`. */
+    value?: string | string[];
+    /** Initially open value(s), when uncontrolled. */
     defaultValue?: string | string[];
+    /** Fires with the next open value(s) on every toggle, controlled or not.
+     * Emits the shape the mode implies: `string[]` when `multiple`, otherwise
+     * the open value, or `""` when the panel was closed. */
+    onValueChange?: (value: string | string[]) => void;
     className?: string;
 };
-/**
- * A collapsible section list — measured from Attio's sidebar groups. Single or
- * multiple open; panels animate their height (grid-rows 0fr->1fr). Headers are
- * buttons with `aria-expanded` / `aria-controls`.
- */
-export declare function Accordion({ items, multiple, defaultValue, className, }: AccordionProps): React.JSX.Element;
+export declare function Accordion({ items, multiple, value, defaultValue, onValueChange, className, ...rest }: AccordionProps): React.JSX.Element;
 export declare namespace Accordion {
     var displayName: string;
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type AvatarProps } from "../avatar/avatar";
-export type AvatarGroupProps = {
+export type AvatarGroupProps = React.ComponentPropsWithoutRef<"div"> & {
     /** Avatar elements to stack, in order (left on the outside). */
     children: React.ReactNode;
     /** Show at most this many, then a "+N" overflow chip. */
@@ -15,7 +15,7 @@ export type AvatarGroupProps = {
  * from Attio's team / member rows. Pass `<Avatar>` children; each is ringed in
  * the surface colour so it reads against its neighbour.
  */
-export declare function AvatarGroup({ children, max, size, className, "aria-label": ariaLabel, }: AvatarGroupProps): React.JSX.Element;
+export declare function AvatarGroup({ children, max, size, className, "aria-label": ariaLabel, ...rest }: AvatarGroupProps): React.JSX.Element;
 export declare namespace AvatarGroup {
     var displayName: string;
 }

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

@@ -3,7 +3,7 @@ export type BarDatum = {
     label: string;
     value: number;
 };
-export type BarChartProps = {
+export type BarChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "color"> & {
     data: BarDatum[];
     /** Overall height in px (default 240). */
     height?: number;
@@ -15,6 +15,8 @@ export type BarChartProps = {
     color?: string;
     /** Formats axis ticks and bar values. */
     format?: (n: number) => string;
+    /** Pins the value-axis gutter width in px, overriding the width auto-derived from the longest tick label. */
+    yAxisWidth?: number;
     /** Category-axis title, shown centred below the labels. */
     xAxisTitle?: React.ReactNode;
     "aria-label"?: string;
@@ -24,7 +26,7 @@ export type BarChartProps = {
  * A responsive bar chart — measured from Attio's Reports dashboard. Pure CSS, so
  * it scales with its container. Renders `role="img"` with an accessible summary.
  */
-export declare function BarChart({ data, height, max, ticks, color, format, xAxisTitle, "aria-label": ariaLabel, className, }: BarChartProps): React.JSX.Element;
+export declare function BarChart({ data, height, max, ticks, color, format, yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }: BarChartProps): React.JSX.Element;
 export declare namespace BarChart {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ export type BreadcrumbItem = {
     icon?: React.ReactNode;
     onClick?: () => void;
 };
-export type BreadcrumbProps = {
+export type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
     items: BreadcrumbItem[];
     /** Separator between items (default a chevron). */
     separator?: React.ReactNode;
@@ -16,7 +16,7 @@ export type BreadcrumbProps = {
  * A breadcrumb trail — measured from Attio's record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
-export declare function Breadcrumb({ items, separator, "aria-label": ariaLabel, className, }: BreadcrumbProps): React.JSX.Element;
+export declare function Breadcrumb({ items, separator, "aria-label": ariaLabel, className, ...rest }: BreadcrumbProps): React.JSX.Element;
 export declare namespace Breadcrumb {
     var displayName: string;
 }

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

@@ -1,11 +1,13 @@
 import * as React from "react";
-export type BulkBarProps = {
+export type BulkBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     /** Selected count — renders the leading "N selected" pill when provided. */
     count?: number;
     /** Called when the count pill (its ✕) is pressed — clear the selection. */
     onClear?: () => void;
     /** Word after the count in the pill (default "selected"). */
     countLabel?: string;
+    /** title on the count pill's clear (✕) control (default "Clear selection"). */
+    clearLabel?: string;
     /** Action buttons — usually `<BulkBarButton>`s and a `<Menu>` overflow. */
     children?: React.ReactNode;
     className?: string;
@@ -15,7 +17,7 @@ export type BulkBarProps = {
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
  */
-export declare function BulkBar({ count, onClear, countLabel, children, className, }: BulkBarProps): React.JSX.Element;
+export declare function BulkBar({ count, onClear, countLabel, children, className, clearLabel, ...rest }: BulkBarProps): React.JSX.Element;
 export declare namespace BulkBar {
     var displayName: string;
 }

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

@@ -22,6 +22,10 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
         text: string;
         icon: string;
     };
+    touchTarget: {
+        true: string;
+        false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         intent: {
@@ -39,6 +43,10 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
             text: string;
             icon: string;
         };
+        touchTarget: {
+            true: string;
+            false: string;
+        };
     }>;
     meta: {
         primary: {