@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/NOTICE

@@ -0,0 +1,88 @@
+crisp
+Copyright (c) 2026 Munkherdene
+
+This product includes software developed by third parties, listed below.
+crisp itself is distributed under the MIT License (see LICENSE).
+
+================================================================================
+SEED Design — Apache License 2.0
+================================================================================
+
+crisp depends on, and contains work derived from, SEED Design by 주식회사 당근마켓
+(Karrot). Upstream: https://github.com/daangn/seed-design
+
+A copy of the Apache License 2.0 is provided at licenses/Apache-2.0.txt, and the
+attribution notice from SEED Design's own NOTICE file is reproduced verbatim at
+the end of this section, as Apache-2.0 §4 requires.
+
+Used as dependencies (unmodified, resolved from npm):
+
+  @seed-design/dom-utils
+  @seed-design/react-date-picker
+  @seed-design/react-file-upload
+  @seed-design/react-middle-truncate
+  @seed-design/react-quantity-picker
+  @seed-design/react-slider
+  @seed-design/react-time-picker
+
+Contains derived work. Each file named here carries a comment recording what was
+taken and what was changed; the summary is that the GEOMETRY is SEED's, read from
+@seed-design/css, and every colour is remapped to crisp's own token roles:
+
+  components/datepicker/datepicker.recipe.ts   calendar structure and range model,
+                                               incl. the 48px cell / 42px pill and
+                                               the [data-in-range]::before bridge
+  components/quantitypicker/quantitypicker.recipe.ts  control geometry per size
+  components/slider/slider.recipe.ts           26px row, 4px track, thumb discs
+  components/wheelpicker/wheelpicker.recipe.ts wheel metrics and selection band
+  components/input/input.recipe.ts             focus ring treatment (2px ::after)
+  components/textarea/textarea.recipe.ts       focus ring treatment, as Input
+  tokens/palette.ts                            SEED's neutral greys, focus-ring
+                                               contrast and wheel-picker values
+  tokens/scale.ts                              font-weight-bold for the calendar
+
+No SEED Design brand resource — logo, product name, character or other
+Karrot-identifying element — is used, reproduced or redistributed by crisp. The
+references above name SEED Design solely to attribute the source of the software,
+as the licence requires. crisp is not affiliated with, sponsored by, or endorsed
+by 주식회사 당근마켓.
+
+--- SEED Design NOTICE, reproduced verbatim -----------------------------------
+
+SEED Design
+Copyright 2025 주식회사 당근마켓
+
+이 소프트웨어는 Apache License 2.0에 따라 배포되며, 상업적 목적을 포함하여 자유롭게 사용, 수정, 재배포할 수 있습니다.
+재배포할 때에는 Apache License 2.0 제4조에 따라 라이선스 사본을 제공하고 이 파일에 담긴 귀속 고지를 전달해야 합니다.
+
+아래 "브랜드 리소스"에 관한 내용은 상표에 관한 안내이며, Apache License 2.0이 정하는 조건을 변경하지 않습니다.
+
+이 저장소에서 제공하는 "브랜드 리소스"는 주식회사 당근마켓(이하 "당근마켓")의 자산으로 대한민국 상표법의 보호를 받습니다.
+브랜드 리소스란 로고, 상호명, 캐릭터 등 당근마켓이나 당근마켓의 제품으로 식별될 수 있는 모든 요소를 의미합니다.
+
+당근마켓과 사전 협의가 없는 경우 비상업적 목적으로만 사용이 허가되며 [당근마켓 브랜드 리소스 가이드라인]을 준수해야 합니다.
+상표 사용 허가는 당근마켓의 요청에 따라 언제든지 철회될 수 있습니다.
+
+또한 브랜드 리소스를 다음과 같은 방식으로 사용할 수 없습니다.
+
+- 당근마켓을 사칭하거나, 당근마켓이 제공하는 제품 또는 서비스인 것처럼 오인하게 하는 사용
+- 당근마켓의 제품 또는 서비스와 제휴, 후원, 보증, 그 밖의 관련이 있는 것처럼 오인하게 하는 사용
+
+[당근마켓 브랜드 리소스 가이드라인]: https://app.notion.com/p/daangn/6fdd92981e4a42d8b29c89cbbba7a8b7
+
+--- end of reproduced notice ---------------------------------------------------
+
+================================================================================
+Other third-party dependencies
+================================================================================
+
+MIT License:
+  @radix-ui/react-compose-refs, @radix-ui/react-slot  Copyright (c) WorkOS
+  @zag-js/combobox, @zag-js/dialog, @zag-js/react     Copyright (c) Chakra Systems
+  clsx                                                Copyright (c) Luke Edwards
+
+ISC License:
+  lucide-react                                        Copyright (c) Lucide Contributors
+
+Each is resolved from npm as an unmodified dependency and is not bundled into
+crisp's published output; their licence texts ship with their own packages.

package/README.md

@@ -99,6 +99,28 @@ The docs site renders a live, measured demo for every component. Run it locally:
 cd docs && bun run dev   # http://localhost:3000
 ```
 
+## Credits
+
+crisp stands on other people's work.
+
+**[SEED Design](https://github.com/daangn/seed-design)** by 주식회사 당근마켓 (Karrot),
+Apache-2.0. Seven `@seed-design/*` packages drive crisp's DatePicker, TimePicker, Slider,
+QuantityPicker, FileUpload and MiddleTruncate, and the geometry of those components — plus the
+WheelPicker, the field focus rings and several neutral token values — is read from
+`@seed-design/css` and remapped onto crisp's own token roles. The layering that crisp's
+multi-platform work follows is theirs too: see [ADR 0002](./docs/adr/0002-cross-platform-boundary.md).
+Each derived file records what was taken and what changed; the full attribution, including
+SEED Design's own notice, is in [NOTICE](./NOTICE).
+
+**[Radix](https://www.radix-ui.com) Slot and compose-refs** (MIT) for `asChild`,
+**[Zag](https://zagjs.com)** (MIT) for the combobox and dialog state machines,
+**[Lucide](https://lucide.dev)** (ISC) for every icon, and **clsx** (MIT).
+
+crisp is not affiliated with, sponsored by or endorsed by any of them.
+
 ## License
 
 [MIT](./LICENSE) © Munkherdene
+
+crisp's own code is MIT. It includes work under the Apache License 2.0 — see
+[NOTICE](./NOTICE) and [licenses/Apache-2.0.txt](./licenses/Apache-2.0.txt).

package/dist/accordion.css

@@ -1,19 +1,19 @@
-.accordion {
-  display: flex; flex-direction: column; font-family: var(--font-sans);
-    & .accordion-item { border-bottom: 1px solid var(--border-subtle); }
-    & .accordion-trigger { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 44px; padding: 0 var(--space-1); margin: 0; border: none; background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); text-align: start; cursor: pointer; }
-    & .accordion-trigger:hover { color: var(--fg-primary); }
-    & .accordion-title { flex: 1; min-width: 0; }
-    & .accordion-chevron { flex-shrink: 0; color: var(--fg-muted); transition: transform .2s ease; }
-    & .accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
-    & .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
-    & .accordion-panel[data-open] { grid-template-rows: 1fr; }
-    & .accordion-panel-inner { overflow: hidden; }
-    & .accordion-content { padding: 0 var(--space-1) var(--space-3); font-size: var(--text-md); color: var(--fg-muted); }
+.crisp-accordion {
+  display: flex; flex-direction: column; font-family: var(--crisp-font-sans);
+    & .crisp-accordion-item { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-accordion-trigger { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: 44px; padding: 0 var(--crisp-space-1); margin: 0; border: none; background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); text-align: start; cursor: pointer; }
+    & .crisp-accordion-trigger:hover { color: var(--crisp-fg-primary); }
+    & .crisp-accordion-title { flex: 1; min-width: 0; }
+    & .crisp-accordion-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .2s ease; }
+    & .crisp-accordion-trigger[aria-expanded="true"] .crisp-accordion-chevron { transform: rotate(180deg); }
+    & .crisp-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
+    & .crisp-accordion-panel[data-open] { grid-template-rows: 1fr; }
+    & .crisp-accordion-panel-inner { overflow: hidden; }
+    & .crisp-accordion-content { padding: 0 var(--crisp-space-1) var(--crisp-space-3); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .accordion, .accordion * {
+  .crisp-accordion, .crisp-accordion * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/accordion.layered.css

@@ -0,0 +1,23 @@
+@layer crisp-components {
+.crisp-accordion {
+  display: flex; flex-direction: column; font-family: var(--crisp-font-sans);
+    & .crisp-accordion-item { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-accordion-trigger { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: 44px; padding: 0 var(--crisp-space-1); margin: 0; border: none; background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); text-align: start; cursor: pointer; }
+    & .crisp-accordion-trigger:hover { color: var(--crisp-fg-primary); }
+    & .crisp-accordion-title { flex: 1; min-width: 0; }
+    & .crisp-accordion-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .2s ease; }
+    & .crisp-accordion-trigger[aria-expanded="true"] .crisp-accordion-chevron { transform: rotate(180deg); }
+    & .crisp-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
+    & .crisp-accordion-panel[data-open] { grid-template-rows: 1fr; }
+    & .crisp-accordion-panel-inner { overflow: hidden; }
+    & .crisp-accordion-content { padding: 0 var(--crisp-space-1) var(--crisp-space-3); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-accordion, .crisp-accordion * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/appshell.css

@@ -1,21 +1,21 @@
-.appshell {
+.crisp-appshell {
   
-    display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--bg-surface); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
-    & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: var(--border-subtle); transition: background-color .16s, height .16s; }
-    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: var(--bg-brand-solid); }
-    & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
-    & .appshell-expand { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .appshell-expand:hover { background: var(--bg-raised); color: var(--fg-primary); }
+    display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
+    & .crisp-appshell-side-inner { height: 100%; }
+    & .crisp-appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: var(--crisp-border-subtle); transition: background-color .16s, height .16s; }
+    & .crisp-appshell-resize:hover::after, & .crisp-appshell-resize[data-dragging]::after { width: 2px; background: var(--crisp-bg-brand-solid); }
+    & .crisp-appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+    & .crisp-appshell-expand { position: absolute; top: var(--crisp-space-2); inset-inline-start: var(--crisp-space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--crisp-size-row); height: var(--crisp-size-row); padding: 0; border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-appshell-expand:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
   
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
   
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .appshell, .appshell * {
+  .crisp-appshell, .crisp-appshell * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/appshell.layered.css

@@ -0,0 +1,25 @@
+@layer crisp-components {
+.crisp-appshell {
+  
+    display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
+    & .crisp-appshell-side-inner { height: 100%; }
+    & .crisp-appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: var(--crisp-border-subtle); transition: background-color .16s, height .16s; }
+    & .crisp-appshell-resize:hover::after, & .crisp-appshell-resize[data-dragging]::after { width: 2px; background: var(--crisp-bg-brand-solid); }
+    & .crisp-appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+    & .crisp-appshell-expand { position: absolute; top: var(--crisp-space-2); inset-inline-start: var(--crisp-space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--crisp-size-row); height: var(--crisp-size-row); padding: 0; border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-appshell-expand:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+  
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-appshell, .crisp-appshell * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/authshell.css

@@ -1,42 +1,42 @@
-.authshell {
+.crisp-authshell {
   min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
-    background: var(--bg-surface); font-family: var(--font-sans); font-size: var(--text-lg); line-height: 20px; color: var(--fg-primary);
+    background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--border-default); }
-    & .authshell-progress-fill { height: 2px; background: var(--fg-primary); border-radius: 4px; transition: width .2s; }
+    & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
+    & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
 
-    & .authshell-logo { margin-top: var(--space-8); height: 24px; display: flex; align-items: center; }
+    & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
 
-    & .authshell-card { margin-top: var(--space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--border-subtle); overflow: hidden; }
+    & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
 
-    & .authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
 
-    & .authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
-    & .authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--bg-subtle) 0%, transparent) 0%, var(--bg-subtle) 100%); pointer-events: none; }
+    & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
 
-    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); align-items: center; }
+    & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
 
-    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--weight-semibold); letter-spacing: -0.4px; color: var(--fg-primary); align-self: stretch; }
+    & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
 
-    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+    & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
 
-    & .authshell-footer { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); line-height: 16px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); }
-    & .authshell-footer a { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; }
+    & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-authshell-footer a { color: inherit; font-weight: var(--crisp-weight-medium); text-decoration: underline; }
 
     /* Auth-surface control treatment: flatter than the in-app chrome — a plain
        hairline ring instead of elevation.field's soft glow, and a 36px (not
-       40px) submit. Scoped to .authshell-body so a consumer keeps using
+       40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
        crisp's Input / FormField / Button and gets the auth treatment for free. */
-    & .authshell-body .formfield-label { font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--fg-primary) 50%, transparent); padding-inline-start: var(--space-1); }
-    & .authshell-body .formfield { gap: var(--space-1); }
-    & .authshell-body .input { height: 34px; padding-inline: var(--space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
-    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
+    & .crisp-authshell-body .crisp-formfield-label { font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); padding-inline-start: var(--crisp-space-1); }
+    & .crisp-authshell-body .crisp-formfield { gap: var(--crisp-space-1); }
+    & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: var(--crisp-space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* Same three-layer brand shadow as Button's primary intent, but the auth
        button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
        the in-app button's rgba(255,255,255,0.07) highlight. */
-    & .authshell-body .button { height: 36px; padding-inline: var(--space-3); border-radius: 10px; }
-    & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+    & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: var(--crisp-space-3); border-radius: 10px; }
+    & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
 
     /* The preview pane drops out in JS on narrow viewports (measured: two
        panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
@@ -45,11 +45,11 @@
        a viewport query would keep the 1130px card and overflow it. Asking the
        shell's own width is what "there isn't room for the preview" means. */
     container-type: inline-size;
-    @container (max-width: 1200px) { & .authshell-preview { display: none; } }
+    @container (max-width: 1200px) { & .crisp-authshell-preview { display: none; } }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .authshell, .authshell * {
+  .crisp-authshell, .crisp-authshell * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/authshell.layered.css

@@ -0,0 +1,59 @@
+@layer crisp-components {
+.crisp-authshell {
+  min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
+    background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
+    & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
+
+    & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
+
+    & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+
+    & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+
+    & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
+
+    & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
+
+    & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
+
+    & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+
+    & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-authshell-footer a { color: inherit; font-weight: var(--crisp-weight-medium); text-decoration: underline; }
+
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
+       hairline ring instead of elevation.field's soft glow, and a 36px (not
+       40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
+       crisp's Input / FormField / Button and gets the auth treatment for free. */
+    & .crisp-authshell-body .crisp-formfield-label { font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); padding-inline-start: var(--crisp-space-1); }
+    & .crisp-authshell-body .crisp-formfield { gap: var(--crisp-space-1); }
+    & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: var(--crisp-space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    /* Same three-layer brand shadow as Button's primary intent, but the auth
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
+       the in-app button's rgba(255,255,255,0.07) highlight. */
+    & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: var(--crisp-space-3); border-radius: 10px; }
+    & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+
+    /* The preview pane drops out in JS on narrow viewports (measured: two
+       panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
+       that bracket, not a measured value. A CONTAINER query, not a media
+       query: the shell is embedded in the docs inside an ~800px column, where
+       a viewport query would keep the 1130px card and overflow it. Asking the
+       shell's own width is what "there isn't room for the preview" means. */
+    container-type: inline-size;
+    @container (max-width: 1200px) { & .crisp-authshell-preview { display: none; } }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-authshell, .crisp-authshell * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/avatar.css

@@ -1,39 +1,39 @@
-.avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-sans); font-weight: var(--weight-semibold); overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }
+.crisp-avatar {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }
 }
-.avatar--size_sm {
+.crisp-avatar--size_sm {
   height: 16px; width: 16px; font-size: 9px;
 }
-.avatar--size_md {
+.crisp-avatar--size_md {
   height: 20px; width: 20px; font-size: 10px;
 }
-.avatar--size_lg {
-  height: 24px; width: 24px; font-size: var(--text-sm);
+.crisp-avatar--size_lg {
+  height: 24px; width: 24px; font-size: var(--crisp-text-sm);
 }
-.avatar--size_xl {
-  height: 32px; width: 32px; font-size: var(--text-lg);
+.crisp-avatar--size_xl {
+  height: 32px; width: 32px; font-size: var(--crisp-text-lg);
 }
-.avatar--shape_circle {
-  border-radius: var(--radius-full);
+.crisp-avatar--shape_circle {
+  border-radius: var(--crisp-radius-full);
 }
-.avatar--shape_rounded {
+.crisp-avatar--shape_rounded {
   border-radius: 30%;
 }
-.avatar--tone_neutral {
-  background: var(--bg-raised); color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--border-default);
+.crisp-avatar--tone_neutral {
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
-.avatar--tone_brand {
-  background: var(--bg-brand-solid); color: #fff;
+.crisp-avatar--tone_brand {
+  background: var(--crisp-bg-brand-solid); color: #fff;
 }
-.avatar--tone_orange {
-  background: var(--bg-orange); color: #fff;
+.crisp-avatar--tone_orange {
+  background: var(--crisp-bg-orange); color: #fff;
 }
-.avatar--tone_cyan {
-  background: var(--bg-cyan); color: #fff;
+.crisp-avatar--tone_cyan {
+  background: var(--crisp-bg-cyan); color: #fff;
 }
-.avatar--tone_purple {
-  background: var(--bg-purple); color: #fff;
+.crisp-avatar--tone_purple {
+  background: var(--crisp-bg-purple); color: #fff;
 }
-.avatar--tone_green {
-  background: var(--bg-success); color: #fff;
+.crisp-avatar--tone_green {
+  background: var(--crisp-bg-success); color: #fff;
 }

package/dist/avatar.layered.css

@@ -0,0 +1,41 @@
+@layer crisp-components {
+.crisp-avatar {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none; & img { width: 100%; height: 100%; object-fit: cover; }
+}
+.crisp-avatar--size_sm {
+  height: 16px; width: 16px; font-size: 9px;
+}
+.crisp-avatar--size_md {
+  height: 20px; width: 20px; font-size: 10px;
+}
+.crisp-avatar--size_lg {
+  height: 24px; width: 24px; font-size: var(--crisp-text-sm);
+}
+.crisp-avatar--size_xl {
+  height: 32px; width: 32px; font-size: var(--crisp-text-lg);
+}
+.crisp-avatar--shape_circle {
+  border-radius: var(--crisp-radius-full);
+}
+.crisp-avatar--shape_rounded {
+  border-radius: 30%;
+}
+.crisp-avatar--tone_neutral {
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+}
+.crisp-avatar--tone_brand {
+  background: var(--crisp-bg-brand-solid); color: #fff;
+}
+.crisp-avatar--tone_orange {
+  background: var(--crisp-bg-orange); color: #fff;
+}
+.crisp-avatar--tone_cyan {
+  background: var(--crisp-bg-cyan); color: #fff;
+}
+.crisp-avatar--tone_purple {
+  background: var(--crisp-bg-purple); color: #fff;
+}
+.crisp-avatar--tone_green {
+  background: var(--crisp-bg-success); color: #fff;
+}
+}

package/dist/avatargroup.css

@@ -1,5 +1,5 @@
-.avatargroup {
+.crisp-avatargroup {
   display: inline-flex; align-items: center;
-    & > * { margin-inline-start: -var(--space-2); box-shadow: 0 0 0 2px var(--bg-surface); position: relative; }
+    & > * { margin-inline-start: -var(--crisp-space-2); box-shadow: 0 0 0 2px var(--crisp-bg-surface); position: relative; }
     & > *:first-child { margin-inline-start: 0; }
 }

package/dist/avatargroup.layered.css

@@ -0,0 +1,7 @@
+@layer crisp-components {
+.crisp-avatargroup {
+  display: inline-flex; align-items: center;
+    & > * { margin-inline-start: -var(--crisp-space-2); box-shadow: 0 0 0 2px var(--crisp-bg-surface); position: relative; }
+    & > *:first-child { margin-inline-start: 0; }
+}
+}

package/dist/badge.css

@@ -1,49 +1,49 @@
-.badge {
-  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); font-family: var(--font-sans); font-weight: var(--weight-medium); letter-spacing: -0.1px; white-space: nowrap;
-    & .badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--radius-full); background: currentColor; }
+.crisp-badge {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); letter-spacing: -0.1px; white-space: nowrap;
+    & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: currentColor; }
 }
-.badge--tone_neutral {
-  background: var(--bg-raised); color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--border-default);
+.crisp-badge--tone_neutral {
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
-.badge--tone_brand {
-  background: color-mix(in srgb, var(--bg-brand-solid) 14%, transparent); color: var(--bg-brand-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-brand-solid) 30%, transparent);
+.crisp-badge--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
 }
-.badge--tone_success {
-  background: color-mix(in srgb, var(--bg-success) 14%, transparent); color: var(--bg-success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-success) 30%, transparent);
+.crisp-badge--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 14%, transparent); color: var(--crisp-bg-success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
 }
-.badge--tone_warning {
-  background: color-mix(in srgb, var(--bg-warning) 16%, transparent); color: var(--bg-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-warning) 32%, transparent);
+.crisp-badge--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); color: var(--crisp-bg-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 32%, transparent);
 }
-.badge--tone_danger {
-  background: color-mix(in srgb, var(--bg-danger) 14%, transparent); color: var(--bg-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-danger) 30%, transparent);
+.crisp-badge--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 14%, transparent); color: var(--crisp-bg-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
 }
-.badge--size_small {
-  height: 16px; padding-inline: var(--space-1-5); font-size: var(--text-xs); border-radius: var(--radius-sm);
+.crisp-badge--size_small {
+  height: 16px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-xs); border-radius: var(--crisp-radius-sm);
 }
-.badge--size_medium {
-  height: 20px; padding-inline: var(--space-2); font-size: var(--text-sm); border-radius: var(--radius-sm);
+.crisp-badge--size_medium {
+  height: 20px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-sm); border-radius: var(--crisp-radius-sm);
 }
-.badge--size_large {
-  height: var(--size-chip); padding-inline: 9px; font-size: var(--text-lg); border-radius: var(--radius-chip);
+.crisp-badge--size_large {
+  height: var(--crisp-size-chip); padding-inline: 9px; font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-chip);
 }
-.badge--variant_soft {
+.crisp-badge--variant_soft {
   
 }
-.badge--variant_solid {
+.crisp-badge--variant_solid {
   
 }
-.badge--compound_0 {
-  background: var(--bg-brand-solid); color: var(--fg-on-brand); box-shadow: none;
+.crisp-badge--compound_0 {
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: none;
 }
-.badge--compound_1 {
-  background: var(--bg-success); color: var(--fg-on-tone); box-shadow: none;
+.crisp-badge--compound_1 {
+  background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
-.badge--compound_2 {
-  background: var(--bg-warning); color: var(--fg-on-tone); box-shadow: none;
+.crisp-badge--compound_2 {
+  background: var(--crisp-bg-warning); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
-.badge--compound_3 {
-  background: var(--bg-danger); color: var(--fg-on-tone); box-shadow: none;
+.crisp-badge--compound_3 {
+  background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
-.badge--compound_4 {
-  background: var(--fg-muted); color: var(--bg-surface); box-shadow: none;
+.crisp-badge--compound_4 {
+  background: var(--crisp-fg-muted); color: var(--crisp-bg-surface); box-shadow: none;
 }