@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/esm/components/datatable/datatable.recipe.js

@@ -7,13 +7,13 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "datatable",
     base: `display: flex; flex-direction: column; gap: ${c.space["2.5"]}; font-family: ${c.font.sans};
-    & .datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
-    & .datatable-search svg { position: absolute; inset-inline-start: ${c.space["2"]}; color: ${c.fgMuted}; pointer-events: none; }
-    & .datatable-search input { width: 100%; height: 32px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; transition: box-shadow .15s; }
-    & .datatable-search input::placeholder { color: ${c.fgMuted}; }
-    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
-    & .datatable-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
+    & .crisp-datatable-search svg { position: absolute; inset-inline-start: ${c.space["2"]}; color: ${c.fgMuted}; pointer-events: none; }
+    & .crisp-datatable-search input { width: 100%; height: 32px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; transition: box-shadow .15s; }
+    & .crisp-datatable-search input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-datatable-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 /* The header cell has no padding of its own -- the button owns the
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
@@ -25,71 +25,71 @@ const config = defineRecipe({
        -sized box to truncate against, and the th's own overflow hard-clipped
        it with no "...". Fill the wrapper, scoped to th so Menu's default
        (correct everywhere else) is untouched. */
-    & th .menu { width: 100%; height: 100%; }
-    & .datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
-    & .datatable-th-inner > svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & th .crisp-menu { width: 100%; height: 100%; }
+    & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
+    & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: ${c.fgMuted}; }
 /* The summary cell has NO padding of its own -- the calculation trigger
        owns the whole 246x37 area so a click anywhere in the cell opens the
        menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
     & tfoot td { padding: 0; }
 /* Group heading row -- a view is grouped under a subtle label with the
        bucket's count beside it. */
-& .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .datatable-viewsettings:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
-    & .datatable-group-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-        & .datatable-group { height: ${c.size.menuRow}; padding: 0 ${c.space["3"]}; background: ${c.bgSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
-    & .datatable-group-count { margin-inline-start: ${c.space["1.5"]}; color: ${c.fgMuted}; font-variant-numeric: tabular-nums; }
-    & .datatable-th-rename { width: 100%; min-width: 0; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["1"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; outline: none; }
-    & .datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
-    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-    & .datatable-sort { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
-    & th[data-align="right"] .datatable-sort { justify-content: flex-end; }
-    & .datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
-    & th[data-align="right"] .datatable-chevron { margin-inline-start: 0; }
-    & .datatable-sort:hover .datatable-chevron { opacity: 0.6; }
-    & .datatable-sort[data-sorted] .datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
+& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-datatable-group-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+        & .crisp-datatable-group { height: ${c.size.menuRow}; padding: 0 ${c.space["3"]}; background: ${c.bgSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-datatable-group-count { margin-inline-start: ${c.space["1.5"]}; color: ${c.fgMuted}; font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["1"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; outline: none; }
+    & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .crisp-datatable-sort { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
+    & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
+    & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
+    & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
+    & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${c.bgSurface}; }
     & th[data-sticky] { z-index: 3; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
-    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
-    & .datatable-addcell { padding: 0; border-top: none; }
-    & .datatable-addrow { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border: none; border-top: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; cursor: pointer; transition: background-color .12s; }
-    & .datatable-addrow:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
-    & .datatable-addrow svg { flex-shrink: 0; }
-    & .datatable-check { display: flex; align-items: center; justify-content: center; }
-    & .datatable-col-check { width: 40px; padding: 0; text-align: center; }
+    & .crisp-datatable-addcell { padding: 0; border-top: none; }
+    & .crisp-datatable-addrow { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border: none; border-top: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; cursor: pointer; transition: background-color .12s; }
+    & .crisp-datatable-addrow:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-datatable-addrow svg { flex-shrink: 0; }
+    & .crisp-datatable-check { display: flex; align-items: center; justify-content: center; }
+    & .crisp-datatable-col-check { width: 40px; padding: 0; text-align: center; }
     & tbody tr[data-selected] td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${c.fgPrimary} 4%, color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface})); }
-    & .datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
-    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
-    & .datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
-    & .datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+    & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
+    & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
+    & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
-    & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
+    & .crisp-datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .crisp-datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
-    & .datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
-    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
-    & .datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
-    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
-    & .datatable-tags { display: flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
-    & .datatable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
-    & .datatable-num { font-variant-numeric: tabular-nums; }
-    & .datatable-muted { color: ${c.fgMuted}; }
+    & .crisp-datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
+    & .crisp-datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
+    & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .crisp-datatable-tags { display: flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
+    & .crisp-datatable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .crisp-datatable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-muted { color: ${c.fgMuted}; }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
        a leading 20px grip column, a 16px grip icon, and the row's own
        hairline doubling as the drop indicator (it tints toward the brand
@@ -98,9 +98,9 @@ const config = defineRecipe({
        draggable + dataTransfer, the same one column reorder already uses
        (RecordsTable's reorderColumn) -- not a proprietary
        pointer-events implementation. */
-    & .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
-    & .datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: grab; }
-    & .datatable-grip:active { cursor: grabbing; }
+    & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
+    & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: grab; }
+    & .crisp-datatable-grip:active { cursor: grabbing; }
     & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${c.bgBrandSolid}; transition: box-shadow .12s; }`,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/datepicker/datepicker.js

@@ -6,15 +6,15 @@ import * as React from "react";
 import { WheelPicker } from "../wheelpicker/index.js";
 import { datepickerRecipe } from "./datepicker.recipe.js";
 function WeekdayRow({ api, semantic = true, }) {
-    return (_jsx("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "datepicker-weekday-row", children: api.weekdayLabels.map((weekday) => (_jsx("div", { role: semantic ? "columnheader" : undefined, "aria-label": semantic ? weekday.long : undefined, className: "datepicker-weekday", children: _jsx("span", { "aria-hidden": "true", children: weekday.short }) }, weekday.key))) }));
+    return (_jsx("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "crisp-datepicker-weekday-row", children: api.weekdayLabels.map((weekday) => (_jsx("div", { role: semantic ? "columnheader" : undefined, "aria-label": semantic ? weekday.long : undefined, className: "crisp-datepicker-weekday", children: _jsx("span", { "aria-hidden": "true", children: weekday.short }) }, weekday.key))) }));
 }
 function DateCellView({ cell, renderDateCellContent, renderDateCellSupplement, }) {
     // a leading/trailing blank in the grid: still a gridcell, so the row keeps
     // seven columns for a screen reader, but nothing to press
     if (cell === null)
-        return (_jsx("div", { role: "gridcell", className: "datepicker-empty-cell" }));
+        return (_jsx("div", { role: "gridcell", className: "crisp-datepicker-empty-cell" }));
     const { cellProps, buttonProps, key: _key, ...renderProps } = cell;
-    return (_jsx("div", { ...cellProps, className: "datepicker-cell", children: _jsx("button", { ...buttonProps, type: "button", className: "datepicker-date", children: _jsx("span", { className: "datepicker-date-content", children: renderDateCellContent ? (renderDateCellContent(renderProps)) : (_jsxs(_Fragment, { children: [_jsx("span", { "data-date-picker-day": "", children: cell.formattedDay }), renderDateCellSupplement?.(renderProps)] })) }) }) }));
+    return (_jsx("div", { ...cellProps, className: "crisp-datepicker-cell", children: _jsx("button", { ...buttonProps, type: "button", className: "crisp-datepicker-date", children: _jsx("span", { className: "crisp-datepicker-date-content", children: renderDateCellContent ? (renderDateCellContent(renderProps)) : (_jsxs(_Fragment, { children: [_jsx("span", { "data-date-picker-day": "", children: cell.formattedDay }), renderDateCellSupplement?.(renderProps)] })) }) }) }));
 }
 function NavigationButton({ direction, className, ...props }) {
     const Icon = direction === "left" ? ChevronLeft : ChevronRight;
@@ -24,9 +24,9 @@ function Header({ api }) {
     // in RTL the chevrons swap: "previous" is on the right
     const previousDirection = api.isRtl ? "right" : "left";
     const nextDirection = api.isRtl ? "left" : "right";
-    return (_jsxs("div", { className: "datepicker-header", children: [_jsxs("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
+    return (_jsxs("div", { className: "crisp-datepicker-header", children: [_jsxs("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
                     ? api.monthYearButtonProps["aria-controls"]
-                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [_jsx("span", { "data-date-picker-header-label": "", children: api.headerLabel }), _jsx("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "datepicker-nav", children: [_jsx(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), _jsx(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
+                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "crisp-datepicker-header-label", children: [_jsx("span", { "data-date-picker-header-label": "", children: api.headerLabel }), _jsx("span", { className: "crisp-datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "crisp-datepicker-nav", children: [_jsx(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "crisp-datepicker-nav-button" }), _jsx(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "crisp-datepicker-nav-button" })] })] }));
 }
 function TwoMonthHeader({ api, label, labelId, position, }) {
     const isFirst = position === "first";
@@ -37,19 +37,19 @@ function TwoMonthHeader({ api, label, labelId, position, }) {
         : isFirst
             ? "left"
             : "right";
-    return (_jsxs("div", { className: "datepicker-two-month-header", children: [_jsx("div", { id: labelId, className: "datepicker-two-month-label", children: label }), _jsx(NavigationButton, { ...(isFirst ? api.previousButtonProps : api.nextButtonProps), direction: direction, "data-placement": isFirst ? "start" : "end", className: "datepicker-nav-button" })] }));
+    return (_jsxs("div", { className: "crisp-datepicker-two-month-header", children: [_jsx("div", { id: labelId, className: "crisp-datepicker-two-month-label", children: label }), _jsx(NavigationButton, { ...(isFirst ? api.previousButtonProps : api.nextButtonProps), direction: direction, "data-placement": isFirst ? "start" : "end", className: "crisp-datepicker-nav-button" })] }));
 }
 function MonthView({ api, month, renderDateCellContent, renderDateCellSupplement, showWeekdays, showMonthLabel, renderHeader, monthRef, }) {
     const labelId = `${api.rootProps.id}-${month.key}-label`;
     const headerLabelId = `${api.rootProps.id}-header-label`;
-    return (_jsxs("div", { ref: monthRef, className: "datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? (_jsx("div", { id: labelId, className: "datepicker-month-label", children: month.label })) : (_jsx("span", { id: labelId, className: "datepicker-live-region", children: month.label })), _jsxs("div", { ...api.gridProps, "aria-labelledby": showMonthLabel || renderHeader
+    return (_jsxs("div", { ref: monthRef, className: "crisp-datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? (_jsx("div", { id: labelId, className: "crisp-datepicker-month-label", children: month.label })) : (_jsx("span", { id: labelId, className: "crisp-datepicker-live-region", children: month.label })), _jsxs("div", { ...api.gridProps, "aria-labelledby": showMonthLabel || renderHeader
                     ? labelId
                     : api.visibleRange === "month"
                         ? headerLabelId
-                        : labelId, className: "datepicker-grid", children: [showWeekdays && _jsx(WeekdayRow, { api: api }), month.weeks.map((week) => (_jsx("div", { role: "row", className: "datepicker-week-row", children: week.cells.map((cell, index) => (_jsx(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
+                        : labelId, className: "crisp-datepicker-grid", children: [showWeekdays && _jsx(WeekdayRow, { api: api }), month.weeks.map((week) => (_jsx("div", { role: "row", className: "crisp-datepicker-week-row", children: week.cells.map((cell, index) => (_jsx(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
 }
 function WheelView({ api }) {
-    return (_jsx("div", { ...api.wheelProps, className: "datepicker-wheel-container", children: _jsx(WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+    return (_jsx("div", { ...api.wheelProps, className: "crisp-datepicker-wheel-container", children: _jsx(WheelPicker, { className: "crisp-datepicker-wheel", "aria-label": api.headerLabel, columns: [
                 {
                     key: "year",
                     label: api.ariaLabels.yearWheel,
@@ -90,13 +90,13 @@ const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
         }, ...mergeProps(api.rootProps, rootProps), "aria-label": rootAriaLabel, "aria-labelledby": ariaLabelledby, className: datepickerRecipe({
             visibleRange: api.visibleRange,
             className,
-        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? (_jsxs("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "datepicker-continuous-scroll", children: [_jsx(WeekdayRow, { api: api, semantic: false }), _jsxs("div", { className: "datepicker-continuous-content", children: [_jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), _jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : (_jsxs(_Fragment, { children: [api.visibleRange !== "twoMonths" && _jsx(Header, { api: api }), _jsx("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
+        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? (_jsxs("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "crisp-datepicker-continuous-scroll", children: [_jsx(WeekdayRow, { api: api, semantic: false }), _jsxs("div", { className: "crisp-datepicker-continuous-content", children: [_jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), _jsx("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : (_jsxs(_Fragment, { children: [api.visibleRange !== "twoMonths" && _jsx(Header, { api: api }), _jsx("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? ""
                             : undefined, "aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? true
-                            : undefined, className: "datepicker-months", children: api.months.map((month, index) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: true, showMonthLabel: false, renderHeader: api.visibleRange === "twoMonths"
+                            : undefined, className: "crisp-datepicker-months", children: api.months.map((month, index) => (_jsx(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: true, showMonthLabel: false, renderHeader: api.visibleRange === "twoMonths"
                                 ? (labelId) => (_jsx(TwoMonthHeader, { api: api, label: month.label, labelId: labelId, position: index === 0 ? "first" : "last" }))
-                                : undefined }, month.key))) }), api.isWheelOpen && api.visibleRange !== "twoMonths" && (_jsx(WheelView, { api: api }))] })), _jsx("span", { ...api.liveRegionProps, className: "datepicker-live-region", children: api.headerLabel })] }));
+                                : undefined }, month.key))) }), api.isWheelOpen && api.visibleRange !== "twoMonths" && (_jsx(WheelView, { api: api }))] })), _jsx("span", { ...api.liveRegionProps, className: "crisp-datepicker-live-region", children: api.headerLabel })] }));
 });
 DatePickerImplementation.displayName = "DatePickerImplementation";
 export const DatePicker = React.forwardRef((props, ref) => (_jsx(DatePickerImplementation, { ref: ref, ...props, visibleRange: "month" })));

package/dist/esm/components/datepicker/datepicker.recipe.js

@@ -21,11 +21,11 @@ const config = defineRecipe({
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
     font-family: ${c.font.sans}; color: ${c.fgPrimary}; background: ${c.bgSurface};
 
-    & .datepicker-header {
+    & .crisp-datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
       height: ${c.size.menuRow};
     }
-    & .datepicker-header-label {
+    & .crisp-datepicker-header-label {
       display: inline-flex; align-items: center; gap: ${c.space["1"]};
       height: 100%; min-width: 0; border: 0; padding: 0 ${c.space["1"]};
       border-radius: ${c.radius.md}; background: transparent; cursor: pointer;
@@ -35,12 +35,12 @@ const config = defineRecipe({
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
     }
-    & .datepicker-header-label:focus-visible { outline-color: ${c.strokeFocusRing}; }
-    & .datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
-    & .datepicker-header-chevron[data-open] { transform: rotate(180deg); }
+    & .crisp-datepicker-header-label:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
+    & .crisp-datepicker-header-chevron[data-open] { transform: rotate(180deg); }
 
-    & .datepicker-nav { display: flex; align-items: center; }
-    & .datepicker-nav-button {
+    & .crisp-datepicker-nav { display: flex; align-items: center; }
+    & .crisp-datepicker-nav-button {
       display: inline-flex; align-items: center; justify-content: center;
       width: ${c.size.menuRow}; height: ${c.size.menuRow}; padding: 0;
       border: none; border-radius: ${c.radius.md}; background: none;
@@ -48,37 +48,37 @@ const config = defineRecipe({
       outline: 2px solid transparent; outline-offset: -2px;
       transition: background-color .12s, outline-color .2s ease;
     }
-    & .datepicker-nav-button:hover { background: ${c.bgRaised}; }
-    & .datepicker-nav-button:focus-visible { outline-color: ${c.strokeFocusRing}; }
-    & .datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
+    & .crisp-datepicker-nav-button:hover { background: ${c.bgRaised}; }
+    & .crisp-datepicker-nav-button:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
 
-    & .datepicker-weekday-row {
+    & .crisp-datepicker-weekday-row {
       display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
       position: relative; z-index: 2; background: ${c.bgSurface};
     }
-    & .datepicker-weekday {
+    & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
       height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
       font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium};
     }
 
-    & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
-    & .datepicker-months[data-wheel-open] { visibility: hidden; }
-    & .datepicker-month { min-width: 0; }
-    & .datepicker-month-label {
+    & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
+    & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
+    & .crisp-datepicker-month { min-width: 0; }
+    & .crisp-datepicker-month-label {
       display: flex; align-items: center; height: 24px;
       color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px;
       font-weight: ${c.weight.medium};
     }
 
-    & .datepicker-grid { display: grid; min-width: 0; }
-    & .datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    & .crisp-datepicker-grid { display: grid; min-width: 0; }
+    & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
 
-    & .datepicker-cell {
+    & .crisp-datepicker-cell {
       position: relative; min-width: 0; min-height: ${c.size.calendarCell};
       isolation: isolate;
     }
-    & .datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
+    & .crisp-datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
 
     /* The bridge joining days inside a completed range.
        The endpoints do NOT carry data-in-range -- only the interior days do --
@@ -87,22 +87,22 @@ const config = defineRecipe({
        element on an endpoint, which leaves a half-cell of white between the
        endpoint's pill and the run of grey beside it. Each rule declares its
        own content. */
-    & .datepicker-cell[data-range-complete][data-in-range]::before {
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
       content: ""; position: absolute; z-index: -1; inset-inline: 0;
       top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
-    & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
       content: ""; position: absolute; z-index: -1;
       inset-inline-start: 50%; inset-inline-end: 0;
       top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
-    & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
       content: ""; position: absolute; z-index: -1;
       inset-inline-start: 0; inset-inline-end: 50%;
       top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
 
-    & .datepicker-date {
+    & .crisp-datepicker-date {
       position: relative; display: flex; width: 100%; height: 100%;
       min-height: ${c.size.calendarCell}; min-width: 0;
       align-items: flex-start; justify-content: center;
@@ -111,27 +111,27 @@ const config = defineRecipe({
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
-    & .datepicker-date::before {
+    & .crisp-datepicker-date::before {
       content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
       width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
       border-radius: ${c.radius.md};
       background: transparent; transform: translateX(-50%);
     }
-    & .datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
-    & .datepicker-date[data-selected]::before { background: ${c.bgBrandSolid}; }
-    & .datepicker-date[data-selected] { color: ${c.fgOnBrand}; }
-    & .datepicker-date[data-in-range] { color: ${c.fgPrimary}; }
-    & .datepicker-date[data-in-range]::before { background: transparent; }
-    & .datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
-    & .datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
-    & .datepicker-date:focus-visible::after {
+    & .crisp-datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
+    & .crisp-datepicker-date[data-selected]::before { background: ${c.bgBrandSolid}; }
+    & .crisp-datepicker-date[data-selected] { color: ${c.fgOnBrand}; }
+    & .crisp-datepicker-date[data-in-range] { color: ${c.fgPrimary}; }
+    & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
+    & .crisp-datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
+    & .crisp-datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
+    & .crisp-datepicker-date:focus-visible::after {
       content: ""; position: absolute; top: ${pillInset}; left: 50%;
       width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
       transform: translateX(-50%); border-radius: ${c.radius.md};
       outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
     }
 
-    & .datepicker-date-content {
+    & .crisp-datepicker-date-content {
       position: relative; z-index: 1; display: flex; width: 100%;
       min-height: ${c.size.calendarCell}; min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
@@ -143,29 +143,29 @@ const config = defineRecipe({
        Without this the content column top-aligns the glyph and the pill reads
        as offset — the cell is 48px, the pill 42px inset 3px, and only a
        42px-tall numeral box shares the pill's centre line. */
-    & .datepicker-date-content > [data-date-picker-day] {
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
       display: flex; min-height: ${c.size.calendarPill}; flex-shrink: 0;
       align-items: center; justify-content: center;
     }
 
     /* the year/month wheel, laid over the grid it replaces */
-    & .datepicker-wheel-container {
+    & .crisp-datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
       top: ${c.size.menuRow}; bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: ${c.bgSurface};
     }
-    & .datepicker-wheel { width: 100%; }
+    & .crisp-datepicker-wheel { width: 100%; }
 
-    & .datepicker-continuous-scroll {
+    & .crisp-datepicker-continuous-scroll {
       height: 100%; min-height: 0; overflow-y: auto;
       overscroll-behavior: contain; scrollbar-width: none;
     }
-    & .datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
-    & .datepicker-continuous-content { display: flex; flex-direction: column; }
+    & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
+    & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
 
     /* announced, never drawn */
-    & .datepicker-live-region {
+    & .crisp-datepicker-live-region {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
@@ -173,11 +173,11 @@ const config = defineRecipe({
     variants: {
         visibleRange: {
             month: ``,
-            twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.menuRow}; }
-        & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }`,
+            twoMonths: `& .crisp-datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
+        & .crisp-datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.menuRow}; }
+        & .crisp-datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }`,
             week: ``,
-            continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
+            continuous: `& .crisp-datepicker-weekday-row { position: sticky; top: 0; }`,
         },
     },
     defaultVariants: { visibleRange: "month" },

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -33,7 +33,7 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
         onChange?.(d);
         setOpen(false);
     };
-    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "datepickerfield-panel", children: [_jsx(DatePicker
+    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
                     // DatePickerProps is a union over selectionMode, and TypeScript
                     // cannot narrow it through a spread: it tries every branch and
                     // reports the range one as missing props. The field is always
@@ -46,6 +46,6 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
                                 if (next)
                                     pick(toDate(next));
                             },
-                        } }), presets && presets.length > 0 && (_jsx("div", { className: "datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
+                        } }), presets && presets.length > 0 && (_jsx("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "crisp-datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
 }
 DatePickerField.displayName = "DatePickerField";

package/dist/esm/components/datepickerfield/datepickerfield.recipe.js

@@ -9,7 +9,7 @@ const config = defineRecipe({
     base: `
     display: inline-flex; font-family: ${c.font.sans};
 
-    & .datepickerfield-trigger {
+    & .crisp-datepickerfield-trigger {
       display: inline-flex; align-items: center; gap: ${c.space["2"]};
       box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0;
       border: none; border-radius: ${c.radius.md}; background: transparent;
@@ -17,19 +17,19 @@ const config = defineRecipe({
       color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg};
       white-space: nowrap; cursor: pointer;
     }
-    & .datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
-    & .datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
-    & .datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
-    & .datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
+    & .crisp-datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .crisp-datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
+    & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
 
-    & .datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
-    & .datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }
-    & .datepickerfield-preset {
+    & .crisp-datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
+    & .crisp-datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }
+    & .crisp-datepickerfield-preset {
       height: ${c.size.chip}; padding: 0 ${c.space["2"]}; border: none;
       border-radius: ${c.radius.chip}; background: ${c.bgRaised}; color: ${c.fgPrimary};
       font-family: inherit; font-size: ${c.text.sm}; cursor: pointer;
     }
-    & .datepickerfield-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
+    & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/dialog/dialog.js

@@ -32,21 +32,21 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
         },
         // Focus the first form field on open (like the command palette focuses its
         // search), rather than the close button; fall back to the machine default.
-        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
+        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
         "aria-label": typeof title === "string" ? title : ariaLabel,
     });
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("dialog-content", className), "data-crisp-dialog": id, 
+    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-dialog-content", className), "data-crisp-dialog": id, 
                         // `width` is the component's own knob, so it wins over a passed
                         // maxWidth; everything else a consumer sets survives
-                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-dialog-card", children: [title != null && (_jsxs("div", { className: "crisp-dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 export function DialogBody({ children, className, }) {
-    return (_jsx("div", { className: className ? `dialog-body ${className}` : "dialog-body", children: children }));
+    return (_jsx("div", { className: className ? `crisp-dialog-body ${className}` : "crisp-dialog-body", children: children }));
 }
 export function DialogFooter({ children }) {
-    return _jsx("div", { className: "dialog-footer", children: children });
+    return _jsx("div", { className: "crisp-dialog-footer", children: children });
 }

package/dist/esm/components/dialog/dialog.recipe.js

@@ -8,22 +8,22 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "dialog",
     base: `display: contents; font-family: ${c.font.sans};
-    & .dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
-    & .dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
-    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
-    & .dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
-    & .dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .dialog-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}; }
-    & .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
-    & .dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
-    & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
-    & .dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
-    & .dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
-    & .dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
-    & .dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
+    & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
+    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-dialog-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-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
+    & .crisp-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
+    & .crisp-dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],