@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/datatable.css

@@ -1,12 +1,12 @@
-.datatable {
-  display: flex; flex-direction: column; gap: var(--space-2-5); font-family: var(--font-sans);
-    & .datatable-toolbar { display: flex; align-items: center; gap: var(--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: var(--space-2); color: var(--fg-muted); pointer-events: none; }
-    & .datatable-search input { width: 100%; height: 32px; padding: 0 var(--space-2) 0 var(--space-6); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; transition: box-shadow .15s; }
-    & .datatable-search input::placeholder { color: var(--fg-muted); }
-    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
-    & .datatable-count { margin-inline-start: auto; font-size: var(--text-md); color: var(--fg-muted); }
+.crisp-datatable {
+  display: flex; flex-direction: column; gap: var(--crisp-space-2-5); font-family: var(--crisp-font-sans);
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: var(--crisp-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: var(--crisp-space-2); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-datatable-search input { width: 100%; height: 32px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-6); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s; }
+    & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
 /* 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. */
@@ -18,71 +18,71 @@
        -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: var(--space-1-5); width: 100%; min-width: 0; height: 100%; }
-    & .datatable-th-inner > svg { flex-shrink: 0; color: var(--fg-muted); }
+    & th .crisp-menu { width: 100%; height: 100%; }
+    & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; }
+    & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
 /* 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: var(--space-1-5); height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .datatable-viewsettings:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
-    & .datatable-group-label { padding: var(--space-1-5) var(--space-2) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
-        & .datatable-group { height: var(--size-menuRow); padding: 0 var(--space-3); background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-md); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); }
-    & .datatable-group-count { margin-inline-start: var(--space-1-5); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
-    & .datatable-th-rename { width: 100%; min-width: 0; height: var(--size-row); margin: 0; padding: 0 var(--space-1); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--bg-brand-solid); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); outline: none; }
-    & .datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
-    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-    & .datatable-sort { display: flex; align-items: center; gap: var(--space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--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: var(--fg-muted); 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: var(--fg-primary); }
+& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-datatable-group-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+        & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
+    & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-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: var(--crisp-fg-muted); 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: var(--crisp-fg-primary); }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
-    & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--bg-surface); }
+    & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     & th[data-sticky] { z-index: 3; }
-    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface)); }
-    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); }
-    & .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); }
+    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
+    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
+    & .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: var(--space-2); width: 100%; height: var(--size-tableRow); padding: 0 var(--space-2); border: none; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; font-size: var(--text-lg); cursor: pointer; transition: background-color .12s; }
-    & .datatable-addrow:hover { background: var(--bg-raised); color: var(--fg-primary); }
-    & .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; }
-    & tbody tr[data-selected] td { background: color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface)); }
-    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--fg-primary) 4%, color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface))); }
-    & .datatable-editable:hover { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); cursor: text; }
-    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--space-1-5); border: none; border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--bg-brand-solid); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; vertical-align: middle; }
-    & .datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
-    & .datatable-empty { padding: var(--space-8) var(--space-3); text-align: center; color: var(--fg-muted); font-size: var(--text-lg); }
+    & .crisp-datatable-addcell { padding: 0; border-top: none; }
+    & .crisp-datatable-addrow { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
+    & .crisp-datatable-addrow:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .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, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
+    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
+    & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
+    & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-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: var(--bg-brand-solid); 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: var(--crisp-bg-brand-solid); 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: var(--space-1-5); min-width: 0; color: var(--fg-primary); font-weight: var(--weight-medium); }
-    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .datatable-avatar { width: var(--size-icon); height: var(--size-icon); border-radius: var(--radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--weight-semibold); text-transform: uppercase; color: var(--fg-on-brand); background: var(--bg-brand-solid); }
-    & .datatable-avatar[data-tone="success"] { background: var(--bg-success); } & .datatable-avatar[data-tone="warning"] { background: var(--bg-warning); } & .datatable-avatar[data-tone="danger"] { background: var(--bg-danger); } & .datatable-avatar[data-tone="purple"] { background: var(--bg-purple); } & .datatable-avatar[data-tone="cyan"] { background: var(--bg-cyan); } & .datatable-avatar[data-tone="orange"] { background: var(--bg-orange); }
-    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
-    & .datatable-tags { display: flex; align-items: center; gap: var(--space-1); overflow: hidden; }
-    & .datatable-tag { display: inline-flex; align-items: center; height: var(--size-chip); padding: 0 var(--space-1); border-radius: var(--radius-chip); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: color-mix(in srgb, var(--fg-primary) 82%, transparent); }
-    & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--bg-brand-solid) 82%, var(--fg-primary)); }
-    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, var(--bg-success) 16%, transparent); color: color-mix(in srgb, var(--bg-success) 78%, var(--fg-primary)); }
-    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--bg-warning) 18%, transparent); color: color-mix(in srgb, var(--bg-warning) 82%, var(--fg-primary)); }
-    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--bg-danger) 15%, transparent); color: color-mix(in srgb, var(--bg-danger) 80%, var(--fg-primary)); }
-    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--bg-purple) 16%, transparent); color: color-mix(in srgb, var(--bg-purple) 80%, var(--fg-primary)); }
-    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--bg-cyan) 82%, var(--fg-primary)); }
-    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--bg-orange) 16%, transparent); color: color-mix(in srgb, var(--bg-orange) 82%, var(--fg-primary)); }
-    & .datatable-num { font-variant-numeric: tabular-nums; }
-    & .datatable-muted { color: var(--fg-muted); }
+    & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
+    & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
+    & .crisp-datatable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* 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
@@ -91,14 +91,14 @@
        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: var(--fg-muted); cursor: grab; }
-    & .datatable-grip:active { cursor: grabbing; }
-    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 var(--bg-brand-solid); transition: box-shadow .12s; }
+    & .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: var(--crisp-fg-muted); 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 var(--crisp-bg-brand-solid); transition: box-shadow .12s; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .datatable, .datatable * {
+  .crisp-datatable, .crisp-datatable * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/datatable.layered.css

@@ -0,0 +1,108 @@
+@layer crisp-components {
+.crisp-datatable {
+  display: flex; flex-direction: column; gap: var(--crisp-space-2-5); font-family: var(--crisp-font-sans);
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: var(--crisp-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: var(--crisp-space-2); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-datatable-search input { width: 100%; height: 32px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-6); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s; }
+    & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+/* 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. */
+    & th { padding: 0; }
+/* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
+       Menu wraps its trigger in a flex div that sizes to its content, so a
+       long header grew past the column instead of filling it -- with nothing
+       left to squeeze, the label's own ellipsis CSS (below) had no properly
+       -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 .crisp-menu { width: 100%; height: 100%; }
+    & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; }
+    & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+/* 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. */
+& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-datatable-group-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+        & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
+    & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-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: var(--crisp-fg-muted); 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: var(--crisp-fg-primary); }
+    /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
+    & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
+    & th[data-sticky] { z-index: 3; }
+    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
+    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
+    & .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 */
+    & .crisp-datatable-addcell { padding: 0; border-top: none; }
+    & .crisp-datatable-addrow { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
+    & .crisp-datatable-addrow:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .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, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
+    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface))); }
+    & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
+    & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
+    & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
+    /* fixed layout so column widths (and resize) are exact — like RecordsTable */
+    & table { table-layout: fixed; }
+    /* column resize grip */
+    & .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: var(--crisp-bg-brand-solid); 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 */
+    & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
+    & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
+    & .crisp-datatable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
+    & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
+    /* 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
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
+    & .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: var(--crisp-fg-muted); 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 var(--crisp-bg-brand-solid); transition: box-shadow .12s; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-datatable, .crisp-datatable * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/datepicker.css

@@ -1,66 +1,66 @@
-.datepicker {
+.crisp-datepicker {
   
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
-    font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-surface);
+    font-family: var(--crisp-font-sans); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface);
 
-    & .datepicker-header {
+    & .crisp-datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
-      height: var(--size-menuRow);
-    }
-    & .datepicker-header-label {
-      display: inline-flex; align-items: center; gap: var(--space-1);
-      height: 100%; min-width: 0; border: 0; padding: 0 var(--space-1);
-      border-radius: var(--radius-md); background: transparent; cursor: pointer;
-      color: var(--fg-primary); font-family: inherit;
-      font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
+      height: var(--crisp-size-menuRow);
+    }
+    & .crisp-datepicker-header-label {
+      display: inline-flex; align-items: center; gap: var(--crisp-space-1);
+      height: 100%; min-width: 0; border: 0; padding: 0 var(--crisp-space-1);
+      border-radius: var(--crisp-radius-md); background: transparent; cursor: pointer;
+      color: var(--crisp-fg-primary); font-family: inherit;
+      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
       white-space: nowrap;
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
     }
-    & .datepicker-header-label:focus-visible { outline-color: var(--stroke-focus-ring); }
-    & .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: var(--crisp-stroke-focus-ring); }
+    & .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: var(--size-menuRow); height: var(--size-menuRow); padding: 0;
-      border: none; border-radius: var(--radius-md); background: none;
-      color: var(--fg-muted); font-family: inherit; cursor: pointer;
+      width: var(--crisp-size-menuRow); height: var(--crisp-size-menuRow); padding: 0;
+      border: none; border-radius: var(--crisp-radius-md); background: none;
+      color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer;
       outline: 2px solid transparent; outline-offset: -2px;
       transition: background-color .12s, outline-color .2s ease;
     }
-    & .datepicker-nav-button:hover { background: var(--bg-raised); }
-    & .datepicker-nav-button:focus-visible { outline-color: var(--stroke-focus-ring); }
-    & .datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
+    & .crisp-datepicker-nav-button:hover { background: var(--crisp-bg-raised); }
+    & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
+    & .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: var(--bg-surface);
+      position: relative; z-index: 2; background: var(--crisp-bg-surface);
     }
-    & .datepicker-weekday {
+    & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
-      height: var(--size-calendarCell); color: var(--fg-neutral-subtle);
-      font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium);
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-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: var(--fg-primary); font-size: var(--text-lg); line-height: 20px;
-      font-weight: var(--weight-medium);
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-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 {
-      position: relative; min-width: 0; min-height: var(--size-calendarCell);
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
-    & .datepicker-empty-cell { min-height: var(--size-calendarCell); }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
 
     /* The bridge joining days inside a completed range.
        The endpoints do NOT carry data-in-range -- only the interior days do --
@@ -69,107 +69,107 @@
        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: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
+      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
     }
-    & .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: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
+      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
     }
-    & .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: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
+      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
     }
 
-    & .datepicker-date {
+    & .crisp-datepicker-date {
       position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--size-calendarCell); min-width: 0;
+      min-height: var(--crisp-size-calendarCell); min-width: 0;
       align-items: flex-start; justify-content: center;
       border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--fg-primary); font: inherit; outline: none;
+      color: var(--crisp-fg-primary); font: inherit; outline: none;
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
-    & .datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
-      width: var(--size-calendarPill); height: var(--size-calendarPill);
-      border-radius: var(--radius-md);
+    & .crisp-datepicker-date::before {
+      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
+      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
+      border-radius: var(--crisp-radius-md);
       background: transparent; transform: translateX(-50%);
     }
-    & .datepicker-date[data-today]::before { background: var(--bg-neutral-weak); }
-    & .datepicker-date[data-selected]::before { background: var(--bg-brand-solid); }
-    & .datepicker-date[data-selected] { color: var(--fg-on-brand); }
-    & .datepicker-date[data-in-range] { color: var(--fg-primary); }
-    & .datepicker-date[data-in-range]::before { background: transparent; }
-    & .datepicker-date[data-unavailable] { color: var(--fg-disabled); }
-    & .datepicker-date:disabled { color: var(--fg-disabled); cursor: not-allowed; }
-    & .datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
-      width: var(--size-calendarPill); height: var(--size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--radius-md);
-      outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
+    & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
+    & .crisp-datepicker-date[data-in-range] { color: var(--crisp-fg-primary); }
+    & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
+    & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
+    & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
+    & .crisp-datepicker-date:focus-visible::after {
+      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
+      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
+      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
+      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
     }
 
-    & .datepicker-date-content {
+    & .crisp-datepicker-date-content {
       position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--size-calendarCell); min-width: 0; box-sizing: border-box;
+      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); color: inherit;
-      font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
+      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
+      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
       font-variant-numeric: tabular-nums;
     }
     /* The numeral is its own 42px flex box so it centres on the 42px pill.
        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] {
-      display: flex; min-height: var(--size-calendarPill); flex-shrink: 0;
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-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: var(--size-menuRow); bottom: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
       display: flex; align-items: center; overflow: hidden;
-      background: var(--bg-surface);
+      background: var(--crisp-bg-surface);
     }
-    & .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;
     }
   
 }
-.datepicker--visibleRange_month {
+.crisp-datepicker--visibleRange_month {
   
 }
-.datepicker--visibleRange_twoMonths {
-  & .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-menuRow); }
-        & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); }
+.crisp-datepicker--visibleRange_twoMonths {
+  & .crisp-datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--crisp-space-6); }
+        & .crisp-datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--crisp-size-menuRow); }
+        & .crisp-datepicker-two-month-label { color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
 }
-.datepicker--visibleRange_week {
+.crisp-datepicker--visibleRange_week {
   
 }
-.datepicker--visibleRange_continuous {
-  & .datepicker-weekday-row { position: sticky; top: 0; }
+.crisp-datepicker--visibleRange_continuous {
+  & .crisp-datepicker-weekday-row { position: sticky; top: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .datepicker, .datepicker * {
+  .crisp-datepicker, .crisp-datepicker * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;