@crisp-ui-kit/crisp 0.31.6 → 0.32.1

package/dist/esm/product/tasklist/tasklist.recipe.js

@@ -8,25 +8,25 @@ const config = defineRecipe({
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tasklist-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+    & .crisp-tasklist-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-tasklist-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
 
-    & .tasklist-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; padding: 0 ${c.space["2"]}; border-top: 1px solid ${c.borderSubtle}; }
-    & .tasklist-row:first-child { border-top: none; }
+    & .crisp-tasklist-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; padding: 0 ${c.space["2"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-tasklist-row:first-child { border-top: none; }
 
-    & .tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
-    & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
-    & .tasklist-check:checked { background: ${c.bgBrandSolid} 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"); }
-    & .tasklist-check:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    & .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: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 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, ${c.fgPrimary} 30%, transparent); }
+    & .crisp-tasklist-check:checked { background: ${c.bgBrandSolid} 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 ${c.bgBrandSolid}; outline-offset: 1px; }
 
-    & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .tasklist-row[data-done] .tasklist-title { color: ${c.fgMuted}; text-decoration: line-through; }
+    & .crisp-tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-tasklist-row[data-done] .crisp-tasklist-title { color: ${c.fgMuted}; text-decoration: line-through; }
 
-    & .tasklist-meta { display: inline-flex; align-items: center; gap: ${c.space["3"]}; flex-shrink: 0; }
-    & .tasklist-due { font-size: ${c.text.lg}; color: ${c.fgMuted}; white-space: nowrap; }
-    & .tasklist-due[data-overdue] { color: ${c.bgDanger}; }
+    & .crisp-tasklist-meta { display: inline-flex; align-items: center; gap: ${c.space["3"]}; flex-shrink: 0; }
+    & .crisp-tasklist-due { font-size: ${c.text.lg}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-tasklist-due[data-overdue] { color: ${c.bgDanger}; }
 
-    & .tasklist-empty { padding: ${c.space["4"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    & .crisp-tasklist-empty { padding: ${c.space["4"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/trialbanner/trialbanner.js

@@ -5,6 +5,6 @@ import { trialbannerRecipe } from "./trialbanner.recipe.js";
  * Icon + message + an optional small action pill (soft-glow outlined button).
  */
 export function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {
-    return (_jsxs("div", { className: trialbannerRecipe({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && _jsx("span", { className: "trialbanner-icon", children: icon }), _jsx("span", { className: "trialbanner-msg", children: children }), action != null && (_jsx("button", { type: "button", className: "trialbanner-action", onClick: onAction, children: action }))] }));
+    return (_jsxs("div", { className: trialbannerRecipe({ className }), ...rest, "data-tone": tone === "neutral" ? undefined : tone, children: [icon != null && _jsx("span", { className: "crisp-trialbanner-icon", children: icon }), _jsx("span", { className: "crisp-trialbanner-msg", children: children }), action != null && (_jsx("button", { type: "button", className: "crisp-trialbanner-action", onClick: onAction, children: action }))] }));
 }
 TrialBanner.displayName = "TrialBanner";

package/dist/esm/product/trialbanner/trialbanner.recipe.js

@@ -10,17 +10,17 @@ const config = defineRecipe({
     font-size: ${c.text.lg}; color: ${c.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
-    & .trialbanner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .trialbanner-action { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 20px; flex-shrink: 0;
+    & .crisp-trialbanner-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
+    & .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: ${c.space["1"]}; height: 20px; flex-shrink: 0;
       padding: 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface};
       box-shadow: ${e.fieldNoRing};
       font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
       white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .trialbanner-action:hover { background: ${c.bgRaised}; }
+    & .crisp-trialbanner-action:hover { background: ${c.bgRaised}; }
 
-    &[data-tone="warning"] .trialbanner-icon { color: ${c.bgWarning}; }
-    &[data-tone="danger"] .trialbanner-icon { color: ${c.bgDanger}; }`,
+    &[data-tone="warning"] .crisp-trialbanner-icon { color: ${c.bgWarning}; }
+    &[data-tone="danger"] .crisp-trialbanner-icon { color: ${c.bgDanger}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -17,6 +17,6 @@ export function ViewToggle({ options, value: valueProp, defaultValue, onValueCha
         onValueChange?.(next);
         onChange?.(next);
     };
-    return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));
+    return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "crisp-viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));
 }
 ViewToggle.displayName = "ViewToggle";

package/dist/esm/product/viewtoggle/viewtoggle.recipe.js

@@ -9,13 +9,13 @@ const config = defineRecipe({
     border-radius: ${c.radius.lg}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent);
     font-family: ${c.font.sans};
 
-    & .viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+    & .crisp-viewtoggle-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
       padding: 0; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted};
       font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
-    & .viewtoggle-tile:hover { color: ${c.fgPrimary}; }
-    & .viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
+    & .crisp-viewtoggle-tile:hover { color: ${c.fgPrimary}; }
+    & .crisp-viewtoggle-tile[data-active] { background: ${c.bgTileActive}; color: ${c.fgPrimary};
       box-shadow: 0 1px 2px -1px ${c.shadowTileActive}; }
-    & .viewtoggle-tile:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    & .crisp-viewtoggle-tile:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/tokens/contract.js

@@ -1,9 +1,10 @@
+import { VAR_PREFIX } from "../core/namespace.js";
 import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, weight as weightScale, } from "./scale.js";
 import { semantic } from "./semantic.js";
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-const toVar = (key) => `var(--${kebab(key)})`;
+const toVar = (key) => `var(--${VAR_PREFIX}${kebab(key)})`;
 // dots aren't valid in a CSS custom-property name → "2.5" becomes "2-5"
-const scaleVar = (prefix, key) => `var(--${prefix}-${key.replace(/\./g, "-")})`;
+const scaleVar = (prefix, key) => `var(--${VAR_PREFIX}${prefix}-${key.replace(/\./g, "-")})`;
 const mapScale = (prefix, scale) => Object.fromEntries(Object.keys(scale).map((k) => [k, scaleVar(prefix, k)]));
 const colors = Object.fromEntries(Object.keys(semantic).map((k) => [k, toVar(k)]));
 // contract = color tokens (theme-flipping) + the dimensional scale

package/dist/fileupload.css

@@ -1,87 +1,87 @@
-.fileupload {
+.crisp-fileupload {
   
-    display: flex; flex-direction: column; gap: var(--space-2);
-    font-family: var(--font-sans); min-width: 0;
+    display: flex; flex-direction: column; gap: var(--crisp-space-2);
+    font-family: var(--crisp-font-sans); min-width: 0;
 
-    & .fileupload-zone {
+    & .crisp-fileupload-zone {
       box-sizing: border-box; position: relative;
       display: flex; flex-direction: column; align-items: center;
-      justify-content: center; gap: var(--space-1);
-      width: 100%; padding: var(--space-6) var(--space-4);
-      border: 1px dashed var(--border-default); border-radius: var(--radius-md);
+      justify-content: center; gap: var(--crisp-space-1);
+      width: 100%; padding: var(--crisp-space-6) var(--crisp-space-4);
+      border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-md);
       background: transparent; cursor: pointer; text-align: center;
       font-family: inherit;
       transition: background-color .12s, border-color .12s;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-zone:hover { background: var(--bg-raised); }
-    & .fileupload-zone:focus-visible { outline-color: var(--stroke-focus-ring); }
-    & .fileupload-zone[data-dragging] {
-      border-color: var(--bg-brand-solid);
-      background: color-mix(in srgb, var(--bg-brand-solid) 6%, transparent);
+    & .crisp-fileupload-zone:hover { background: var(--crisp-bg-raised); }
+    & .crisp-fileupload-zone:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+    & .crisp-fileupload-zone[data-dragging] {
+      border-color: var(--crisp-bg-brand-solid);
+      background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent);
     }
-    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
-    & .fileupload-zone[data-invalid] { border-color: var(--bg-danger); }
+    & .crisp-fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .crisp-fileupload-zone[data-invalid] { border-color: var(--crisp-bg-danger); }
 
     /* "No files" 16/20 weight 600 */
-    & .fileupload-title {
-      color: var(--fg-primary); font-size: var(--text-xl); line-height: 20px;
-      font-weight: var(--weight-semibold);
+    & .crisp-fileupload-title {
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-xl); line-height: 20px;
+      font-weight: var(--crisp-weight-semibold);
     }
     /* The hint line, 14/20 weight 500 at 63% of the foreground */
-    & .fileupload-hint {
-      color: color-mix(in srgb, var(--fg-primary) 63%, transparent);
-      font-size: var(--text-lg); line-height: 20px;
-      font-weight: var(--weight-medium);
+    & .crisp-fileupload-hint {
+      color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent);
+      font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
     }
 
-    & .fileupload-input {
+    & .crisp-fileupload-input {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
 
-    & .fileupload-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-list { display: flex; flex-direction: column; gap: var(--crisp-space-1); margin: 0; padding: 0; list-style: none; }
     /* the row height crisp measured for a data-grid row */
-    & .fileupload-item {
-      display: flex; align-items: center; gap: var(--space-2);
-      min-height: var(--size-tableRow); padding: 0 var(--space-2);
-      border-radius: var(--radius-md); background: var(--bg-raised);
-      font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+    & .crisp-fileupload-item {
+      display: flex; align-items: center; gap: var(--crisp-space-2);
+      min-height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
     }
-    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .fileupload-item-size { flex-shrink: 0; color: var(--fg-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
-    & .fileupload-item[data-status="error"] { color: var(--bg-danger); }
-    & .fileupload-item[data-status="error"] .fileupload-item-size { color: var(--bg-danger); }
+    & .crisp-fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-fileupload-item-size { flex-shrink: 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-sm); font-variant-numeric: tabular-nums; }
+    & .crisp-fileupload-item[data-status="error"] { color: var(--crisp-bg-danger); }
+    & .crisp-fileupload-item[data-status="error"] .crisp-fileupload-item-size { color: var(--crisp-bg-danger); }
 
     /* progress track, reusing the measured Progress geometry */
-    & .fileupload-progress {
-      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--radius-full);
-      background: var(--bg-neutral-weak); overflow: hidden;
+    & .crisp-fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--crisp-radius-full);
+      background: var(--crisp-bg-neutral-weak); overflow: hidden;
     }
-    & .fileupload-progress-fill { height: 100%; background: var(--bg-brand-solid); transition: width .2s ease; }
+    & .crisp-fileupload-progress-fill { height: 100%; background: var(--crisp-bg-brand-solid); transition: width .2s ease; }
 
-    & .fileupload-remove {
+    & .crisp-fileupload-remove {
       display: inline-flex; align-items: center; justify-content: center;
-      flex-shrink: 0; width: var(--size-icon); height: var(--size-icon);
-      padding: 0; border: none; border-radius: var(--radius-sm);
-      background: transparent; color: var(--fg-muted); cursor: pointer;
+      flex-shrink: 0; width: var(--crisp-size-icon); height: var(--crisp-size-icon);
+      padding: 0; border: none; border-radius: var(--crisp-radius-sm);
+      background: transparent; color: var(--crisp-fg-muted); cursor: pointer;
       font-family: inherit;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-remove:hover { color: var(--fg-primary); }
-    & .fileupload-remove:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
+    & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
 
-    & .fileupload-errors { display: flex; flex-direction: column; gap: var(--space-0-5); margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
     /* out of flow while empty, so the always-mounted live region costs no
        layout: display:none would take it out of the accessibility tree, which
        is the one thing it exists to be in */
-    & .fileupload-errors:empty { position: absolute; }
-    & .fileupload-error { color: var(--bg-danger); font-size: var(--text-md); line-height: 18px; }
+    & .crisp-fileupload-errors:empty { position: absolute; }
+    & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
   
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .fileupload, .fileupload * {
+  .crisp-fileupload, .crisp-fileupload * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/fileupload.layered.css

@@ -0,0 +1,91 @@
+@layer crisp-components {
+.crisp-fileupload {
+  
+    display: flex; flex-direction: column; gap: var(--crisp-space-2);
+    font-family: var(--crisp-font-sans); min-width: 0;
+
+    & .crisp-fileupload-zone {
+      box-sizing: border-box; position: relative;
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; gap: var(--crisp-space-1);
+      width: 100%; padding: var(--crisp-space-6) var(--crisp-space-4);
+      border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-md);
+      background: transparent; cursor: pointer; text-align: center;
+      font-family: inherit;
+      transition: background-color .12s, border-color .12s;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .crisp-fileupload-zone:hover { background: var(--crisp-bg-raised); }
+    & .crisp-fileupload-zone:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+    & .crisp-fileupload-zone[data-dragging] {
+      border-color: var(--crisp-bg-brand-solid);
+      background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent);
+    }
+    & .crisp-fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .crisp-fileupload-zone[data-invalid] { border-color: var(--crisp-bg-danger); }
+
+    /* "No files" 16/20 weight 600 */
+    & .crisp-fileupload-title {
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-xl); line-height: 20px;
+      font-weight: var(--crisp-weight-semibold);
+    }
+    /* The hint line, 14/20 weight 500 at 63% of the foreground */
+    & .crisp-fileupload-hint {
+      color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent);
+      font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
+    & .crisp-fileupload-input {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+
+    & .crisp-fileupload-list { display: flex; flex-direction: column; gap: var(--crisp-space-1); margin: 0; padding: 0; list-style: none; }
+    /* the row height crisp measured for a data-grid row */
+    & .crisp-fileupload-item {
+      display: flex; align-items: center; gap: var(--crisp-space-2);
+      min-height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
+    }
+    & .crisp-fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-fileupload-item-size { flex-shrink: 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-sm); font-variant-numeric: tabular-nums; }
+    & .crisp-fileupload-item[data-status="error"] { color: var(--crisp-bg-danger); }
+    & .crisp-fileupload-item[data-status="error"] .crisp-fileupload-item-size { color: var(--crisp-bg-danger); }
+
+    /* progress track, reusing the measured Progress geometry */
+    & .crisp-fileupload-progress {
+      flex-shrink: 0; width: 64px; height: 4px; border-radius: var(--crisp-radius-full);
+      background: var(--crisp-bg-neutral-weak); overflow: hidden;
+    }
+    & .crisp-fileupload-progress-fill { height: 100%; background: var(--crisp-bg-brand-solid); transition: width .2s ease; }
+
+    & .crisp-fileupload-remove {
+      display: inline-flex; align-items: center; justify-content: center;
+      flex-shrink: 0; width: var(--crisp-size-icon); height: var(--crisp-size-icon);
+      padding: 0; border: none; border-radius: var(--crisp-radius-sm);
+      background: transparent; color: var(--crisp-fg-muted); cursor: pointer;
+      font-family: inherit;
+      outline: 2px solid transparent; outline-offset: -2px;
+    }
+    & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
+    & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+
+    & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
+    & .crisp-fileupload-errors:empty { position: absolute; }
+    & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-fileupload, .crisp-fileupload * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/flowcanvas.css

@@ -1,15 +1,15 @@
-.flowcanvas {
-  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--bg-surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--fg-primary) 14%, transparent) 1px, transparent 1px); font-family: var(--font-sans); cursor: grab; touch-action: none; user-select: none;
+.crisp-flowcanvas {
+  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--crisp-bg-surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 14%, transparent) 1px, transparent 1px); font-family: var(--crisp-font-sans); cursor: grab; touch-action: none; user-select: none;
     &[data-panning] { cursor: grabbing; }
-    & .flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
-    & .flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
-    & .flowcanvas-edge { fill: none; stroke: color-mix(in srgb, var(--fg-primary) 28%, transparent); stroke-width: 1.5; }
-    & .flowcanvas-edge-dot { fill: var(--bg-brand-solid); }
-    & .flowcanvas-node { position: absolute; cursor: grab; }
-    & .flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
-    & .flowcanvas-toolbar { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-default), 0 4px 14px -4px rgba(28,40,64,0.16); }
-    & .flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: 30px; min-width: 30px; padding: 0 var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
-    & .flowcanvas-tool:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
-    & .flowcanvas-tool-zoom { min-width: 48px; }
-    & .flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--border-subtle); }
+    & .crisp-flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .crisp-flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .crisp-flowcanvas-edge { fill: none; stroke: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); stroke-width: 1.5; }
+    & .crisp-flowcanvas-edge-dot { fill: var(--crisp-bg-brand-solid); }
+    & .crisp-flowcanvas-node { position: absolute; cursor: grab; }
+    & .crisp-flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .crisp-flowcanvas-toolbar { position: absolute; bottom: var(--crisp-space-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--crisp-space-1); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .crisp-flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); height: 30px; min-width: 30px; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-flowcanvas-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-flowcanvas-tool-zoom { min-width: 48px; }
+    & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--crisp-border-subtle); }
 }

package/dist/flowcanvas.layered.css

@@ -0,0 +1,17 @@
+@layer crisp-components {
+.crisp-flowcanvas {
+  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--crisp-bg-surface); background-image: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 14%, transparent) 1px, transparent 1px); font-family: var(--crisp-font-sans); cursor: grab; touch-action: none; user-select: none;
+    &[data-panning] { cursor: grabbing; }
+    & .crisp-flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .crisp-flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .crisp-flowcanvas-edge { fill: none; stroke: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); stroke-width: 1.5; }
+    & .crisp-flowcanvas-edge-dot { fill: var(--crisp-bg-brand-solid); }
+    & .crisp-flowcanvas-node { position: absolute; cursor: grab; }
+    & .crisp-flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .crisp-flowcanvas-toolbar { position: absolute; bottom: var(--crisp-space-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--crisp-space-1); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .crisp-flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); height: 30px; min-width: 30px; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-flowcanvas-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-flowcanvas-tool-zoom { min-width: 48px; }
+    & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--crisp-border-subtle); }
+}
+}

package/dist/formfield.css

@@ -1,8 +1,8 @@
-.formfield {
-  display: flex; flex-direction: column; gap: var(--space-1-5); box-sizing: border-box; font-family: var(--font-sans);
-    & .formfield-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
-    & .formfield-required { color: var(--bg-danger); }
-    & .formfield-optional { color: color-mix(in srgb, var(--fg-primary) 40%, transparent); font-weight: var(--weight-regular); }
-    & .formfield-desc { font-size: var(--text-sm); line-height: 16px; color: var(--fg-muted); }
-    & .formfield-error { font-size: var(--text-sm); line-height: 16px; color: var(--bg-danger); }
+.crisp-formfield {
+  display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
+    & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-formfield-required { color: var(--crisp-bg-danger); }
+    & .crisp-formfield-optional { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); font-weight: var(--crisp-weight-regular); }
+    & .crisp-formfield-desc { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-fg-muted); }
+    & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
 }

package/dist/formfield.layered.css

@@ -0,0 +1,10 @@
+@layer crisp-components {
+.crisp-formfield {
+  display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
+    & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-formfield-required { color: var(--crisp-bg-danger); }
+    & .crisp-formfield-optional { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); font-weight: var(--crisp-weight-regular); }
+    & .crisp-formfield-desc { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-fg-muted); }
+    & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
+}
+}

package/dist/inbox.css

@@ -1,37 +1,37 @@
-.inbox {
+.crisp-inbox {
   display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px;
-    border-radius: var(--radius-xl); background: var(--bg-surface); font-family: var(--font-sans); overflow: hidden;
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+    border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .inbox-head { padding: var(--space-3) var(--space-3) 0; }
-    & .inbox-title { font-size: var(--text-xl); line-height: 28px; font-weight: var(--weight-semibold); letter-spacing: -0.3px; color: var(--fg-primary); }
-    & .inbox-tabs { display: flex; gap: var(--space-3); margin-top: var(--space-2); box-shadow: inset 0 -1px 0 var(--border-subtle); }
-    & .inbox-tab { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
-    & .inbox-tab:hover { color: var(--fg-primary); }
-    & .inbox-tab[data-active] { color: var(--bg-brand-solid); box-shadow: inset 0 -2px 0 var(--bg-brand-solid); }
-    & .inbox-tab-count { font-size: var(--text-sm); color: var(--fg-muted); }
-    & .inbox-tab[data-active] .inbox-tab-count { color: var(--bg-brand-solid); }
+    & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
+    & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
+    & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
+    & .crisp-inbox-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
+    & .crisp-inbox-tab:hover { color: var(--crisp-fg-primary); }
+    & .crisp-inbox-tab[data-active] { color: var(--crisp-bg-brand-solid); box-shadow: inset 0 -2px 0 var(--crisp-bg-brand-solid); }
+    & .crisp-inbox-tab-count { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-inbox-tab[data-active] .crisp-inbox-tab-count { color: var(--crisp-bg-brand-solid); }
 
-    & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1); display: flex; flex-direction: column; gap: 1px; }
-    & .inbox-row { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-2) var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .inbox-row:hover { background: var(--bg-raised); }
-    & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
-    & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .inbox-row-msg { font-size: var(--text-lg); line-height: 18px; color: var(--fg-primary); }
-    & .inbox-row-msg b { font-weight: var(--weight-semibold); }
-    & .inbox-row-time { font-size: var(--text-sm); color: var(--fg-muted); }
-    & .inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--space-1); border-radius: var(--radius-full); background: var(--bg-brand-solid); }
+    & .crisp-inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1); display: flex; flex-direction: column; gap: 1px; }
+    & .crisp-inbox-row { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-inbox-row:hover { background: var(--crisp-bg-raised); }
+    & .crisp-inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
+    & .crisp-inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-inbox-row-msg { font-size: var(--crisp-text-lg); line-height: 18px; color: var(--crisp-fg-primary); }
+    & .crisp-inbox-row-msg b { font-weight: var(--crisp-weight-semibold); }
+    & .crisp-inbox-row-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--crisp-space-1); border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); }
 
-    & .inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-6) var(--space-4); text-align: center; }
-    & .inbox-empty-icon { display: inline-flex; margin-bottom: var(--space-2); color: color-mix(in srgb, var(--fg-primary) 22%, transparent); }
-    & .inbox-empty-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--fg-primary); }
-    & .inbox-empty-sub { font-size: var(--text-md); line-height: 18px; color: var(--fg-muted); max-width: 260px; }
-    & .inbox-empty-action { margin-top: var(--space-2); }
+    & .crisp-inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; }
+    & .crisp-inbox-empty-icon { display: inline-flex; margin-bottom: var(--crisp-space-2); color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); }
+    & .crisp-inbox-empty-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-inbox-empty-sub { font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); max-width: 260px; }
+    & .crisp-inbox-empty-action { margin-top: var(--crisp-space-2); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .inbox, .inbox * {
+  .crisp-inbox, .crisp-inbox * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/inbox.layered.css

@@ -0,0 +1,41 @@
+@layer crisp-components {
+.crisp-inbox {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px;
+    border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
+    & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
+    & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
+    & .crisp-inbox-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
+    & .crisp-inbox-tab:hover { color: var(--crisp-fg-primary); }
+    & .crisp-inbox-tab[data-active] { color: var(--crisp-bg-brand-solid); box-shadow: inset 0 -2px 0 var(--crisp-bg-brand-solid); }
+    & .crisp-inbox-tab-count { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-inbox-tab[data-active] .crisp-inbox-tab-count { color: var(--crisp-bg-brand-solid); }
+
+    & .crisp-inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1); display: flex; flex-direction: column; gap: 1px; }
+    & .crisp-inbox-row { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-inbox-row:hover { background: var(--crisp-bg-raised); }
+    & .crisp-inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
+    & .crisp-inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-inbox-row-msg { font-size: var(--crisp-text-lg); line-height: 18px; color: var(--crisp-fg-primary); }
+    & .crisp-inbox-row-msg b { font-weight: var(--crisp-weight-semibold); }
+    & .crisp-inbox-row-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--crisp-space-1); border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); }
+
+    & .crisp-inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; }
+    & .crisp-inbox-empty-icon { display: inline-flex; margin-bottom: var(--crisp-space-2); color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); }
+    & .crisp-inbox-empty-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-inbox-empty-sub { font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); max-width: 260px; }
+    & .crisp-inbox-empty-action { margin-top: var(--crisp-space-2); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-inbox, .crisp-inbox * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/input.css

@@ -1,41 +1,41 @@
-.input {
+.crisp-input {
   
     position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
-    width: 100%; 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: var(--font-sans); font-size: var(--text-lg); line-height: 20px;
+    width: 100%; 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: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
 
     &::after {
       content: ""; position: absolute; inset: 0; border-radius: inherit;
       border: 2px solid transparent; transition: border-color .1s ease;
       pointer-events: none;
     }
-    &:focus-within::after { border-color: var(--stroke-field-focus); }
+    &:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
 
-    & .input-value {
+    & .crisp-input-value {
       box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
       align-self: stretch; margin: 0; border: none; background: none; outline: none;
-      font: inherit; color: var(--fg-primary);
+      font: inherit; color: var(--crisp-fg-primary);
     }
-    & .input-value::placeholder { color: var(--fg-muted); }
-    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
-    &:has(.input-value:disabled) { opacity: 1; }
+    & .crisp-input-value::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.crisp-input-value:disabled) { opacity: 1; }
   
 }
-.input--size_medium {
-  height: 32px; border-radius: var(--radius-md); & .input-value { padding-inline: var(--space-2-5); }
+.crisp-input--size_medium {
+  height: 32px; border-radius: var(--crisp-radius-md); & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
-.input--size_large {
-  height: 36px; border-radius: 10px; & .input-value { padding-inline: var(--space-3); }
+.crisp-input--size_large {
+  height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: var(--crisp-space-3); }
 }
-.input--invalid_true {
-  &::after { border-color: var(--bg-danger); } &:focus-within::after { border-color: var(--bg-danger); }
+.crisp-input--invalid_true {
+  &::after { border-color: var(--crisp-bg-danger); } &:focus-within::after { border-color: var(--crisp-bg-danger); }
 }
-.input--invalid_false {
+.crisp-input--invalid_false {
   
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .input, .input * {
+  .crisp-input, .crisp-input * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;