@crisp-ui-kit/crisp 0.35.0 → 0.37.0

package/dist/recordpanel.css

@@ -25,6 +25,12 @@
     & .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
     & .crisp-recordpanel-link { color: var(--crisp-bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the header's own measured values rather than inventing new ones -- the
+       same horizontal inset (space.3), the same hairline border token
+       (borderSubtle, flipped to border-top since this sits at the opposite
+       edge), and the header/body gap (space.2) for its own vertical padding
+       and for spacing between whatever it's given. */
+    & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); border-top: 1px solid var(--crisp-border-subtle); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/recordpanel.layered.css

@@ -26,6 +26,12 @@
     & .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
     & .crisp-recordpanel-link { color: var(--crisp-bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the header's own measured values rather than inventing new ones -- the
+       same horizontal inset (space.3), the same hairline border token
+       (borderSubtle, flipped to border-top since this sits at the opposite
+       edge), and the header/body gap (space.2) for its own vertical padding
+       and for spacing between whatever it's given. */
+    & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); border-top: 1px solid var(--crisp-border-subtle); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/select.css

@@ -8,7 +8,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/select.layered.css

@@ -9,7 +9,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/styles.css

@@ -283,6 +283,9 @@
     & .crisp-bulkbar-count { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-bulkbar-count:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-bulkbar-count svg { flex-shrink: 0; }
+    /* the ", Clear selection" ARIA concatenates onto the pill's name (#324)
+       -- read, never drawn. Same technique as Slider's thumblabel. */
+    & .crisp-bulkbar-clearlabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
     & .crisp-bulkbar-btn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-bulkbar-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-bulkbar-btn--danger { color: var(--crisp-bg-danger); }
@@ -447,7 +450,7 @@
 
 .crisp-contextmenu {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-content { position: fixed; z-index: 70; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-contextmenu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-menuRow); box-sizing: border-box; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
     & .crisp-contextmenu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-contextmenu-item:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
@@ -707,7 +710,7 @@
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
     & .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: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-4); padding: var(--crisp-space-5) var(--crisp-space-4); }
@@ -970,7 +973,7 @@
 
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
@@ -1009,7 +1012,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1042,7 +1045,7 @@
 
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }
@@ -1214,7 +1217,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -2062,6 +2065,12 @@
     & .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
     & .crisp-recordpanel-link { color: var(--crisp-bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the header's own measured values rather than inventing new ones -- the
+       same horizontal inset (space.3), the same hairline border token
+       (borderSubtle, flipped to border-top since this sits at the opposite
+       edge), and the header/body gap (space.2) for its own vertical padding
+       and for spacing between whatever it's given. */
+    & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); border-top: 1px solid var(--crisp-border-subtle); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles.layered.css

@@ -284,6 +284,9 @@
     & .crisp-bulkbar-count { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-bulkbar-count:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-bulkbar-count svg { flex-shrink: 0; }
+    /* the ", Clear selection" ARIA concatenates onto the pill's name (#324)
+       -- read, never drawn. Same technique as Slider's thumblabel. */
+    & .crisp-bulkbar-clearlabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
     & .crisp-bulkbar-btn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-bulkbar-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-bulkbar-btn--danger { color: var(--crisp-bg-danger); }
@@ -448,7 +451,7 @@
 
 .crisp-contextmenu {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-content { position: fixed; z-index: 70; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-contextmenu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-menuRow); box-sizing: border-box; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
     & .crisp-contextmenu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-contextmenu-item:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
@@ -708,7 +711,7 @@
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
     & .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: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-4); padding: var(--crisp-space-5) var(--crisp-space-4); }
@@ -971,7 +974,7 @@
 
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
@@ -1010,7 +1013,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1043,7 +1046,7 @@
 
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }
@@ -1215,7 +1218,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-    & .crisp-select-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -2063,6 +2066,12 @@
     & .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
     & .crisp-recordpanel-link { color: var(--crisp-bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the header's own measured values rather than inventing new ones -- the
+       same horizontal inset (space.3), the same hairline border token
+       (borderSubtle, flipped to border-top since this sits at the opposite
+       edge), and the header/body gap (space.2) for its own vertical padding
+       and for spacing between whatever it's given. */
+    & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); border-top: 1px solid var(--crisp-border-subtle); }
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -8,18 +8,27 @@ export type ToolbarSort = {
     key: string;
     dir: SortDir;
 };
-export type ToolbarFilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
+export type ToolbarFilterOp = "contains" | "is" | "isnot" | "isanyof" | "empty" | "notempty";
 export type ToolbarFilter = {
     id: string;
     key: string;
     op: ToolbarFilterOp;
     value: string;
+    /** Selected values for `"isanyof"` — ignored by every other op. */
+    values?: string[];
 };
 export type TableToolbarColumn = {
     key: string;
     label: string;
     /** Leading field-type icon, shown in the field pickers. */
     icon?: IconType;
+    /**
+     * This column's distinct values (a status/select field's option set, e.g.).
+     * Supplying it adds `"isanyof"` — a searchable checkbox list, Attio's
+     * faceted multi-select filter — to the column's condition picker. Omit it
+     * for a free-text column; there is nothing to check off.
+     */
+    values?: string[];
 };
 export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     /** The fields that can be sorted and filtered on. */

package/dist/types/core/floating-portal.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+/**
+ * Portals a floating layer (a `position: fixed` listbox/menu/popover
+ * content) to `document.body` — exactly what Tooltip already did with a
+ * bare `createPortal` call, pulled out so `Select`, `MultiSelect`, `Menu`,
+ * `Popover` and `ContextMenu` share the one implementation (#339).
+ *
+ * Needed because a `position: fixed` box resolves against the nearest
+ * ancestor that establishes a containing block for it — not necessarily the
+ * viewport. `transform` (even the identity `scale(1)`), `filter` and
+ * `backdrop-filter` all qualify, and `Dialog`'s own measured surface sets
+ * both a resting `transform: scale(1)` (so its `@starting-style` entrance
+ * has something to animate from) and `backdrop-filter: blur(15px)` (Attio's
+ * frosted-glass modal). A floating layer opened from a trigger inside a
+ * `Dialog` was rendering offset by the dialog's own box instead of anchored
+ * to its trigger.
+ *
+ * Every caller renders this conditionally on its own `open` state, which
+ * starts `false` and is driven only by client interaction — never a prop a
+ * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
+ * touches `document` during SSR, the same safety Tooltip already had.
+ */
+export declare function FloatingPortal({ children, }: {
+    children: React.ReactNode;
+}): React.ReactPortal;

package/dist/types/core/floating-stack.d.ts

@@ -0,0 +1,13 @@
+/** Call when a layer opens; call the returned cleanup when it closes. */
+export declare function registerFloatingLayer(el: HTMLElement): () => void;
+/**
+ * True when `target` sits inside a layer that was registered strictly after
+ * `self` — a layer that could only have been spawned from inside `self`,
+ * directly or through further nesting.
+ *
+ * Pass `null` for `self` when the caller is a hand-rolled dropdown that
+ * doesn't register itself on this stack (RecordsTable's and TableToolbar's
+ * own popovers, e.g.) — every registered layer then counts, which is the
+ * right query for "was this click inside some floating child I opened".
+ */
+export declare function isInsideLaterFloatingLayer(target: Node, self: HTMLElement | null): boolean;

package/dist/types/core/index.d.ts

@@ -3,6 +3,8 @@ export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
+export { FloatingPortal } from "./floating-portal";
+export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/dist/types/product/recordpanel/recordpanel.d.ts

@@ -4,10 +4,20 @@ export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "chil
     /** The record to show; render nothing when null. */
     /** Label for the close control. */
     closeLabel?: string;
+    /**
+     * The panel's heading, and so its accessible name (via `aria-labelledby`,
+     * not a stringified `aria-label` — it also drives the visible title, which
+     * can be any node). Defaults to the entity column's name, same as before
+     * this prop existed; pass it to title the panel by something else, e.g.
+     * "{Collection} record".
+     */
+    title?: React.ReactNode;
     /** Heading above the field list. */
     detailsLabel?: React.ReactNode;
     /** Shown in place of a field that has no value. */
     emptyLabel?: React.ReactNode;
+    /** Rendered below the field list, e.g. an Edit button. Omit for no footer. */
+    footer?: React.ReactNode;
     record: Row | null;
     columns: Column[];
     onClose: () => void;
@@ -19,7 +29,7 @@ export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export declare function RecordPanel({ record, columns, onClose, className, closeLabel, detailsLabel, emptyLabel, ...rest }: RecordPanelProps): React.JSX.Element | null;
+export declare function RecordPanel({ record, columns, onClose, className, closeLabel, title, detailsLabel, emptyLabel, footer, ...rest }: RecordPanelProps): React.JSX.Element | null;
 export declare namespace RecordPanel {
     var displayName: string;
 }

package/dist/types/product/sidebar/sidebar.d.ts

@@ -40,6 +40,42 @@ export type SidebarListsSection = {
     label: string;
     newListLabel: string;
 };
+/** A row in a `groups` section (#325). */
+export type SidebarNavGroupItem = {
+    label: string;
+    /** 16px icon component, rendered `<Icon />`. Optional — not every group's
+     * rows carry one (unlike the main nav's `SidebarNavItem`, where it's
+     * required). */
+    icon?: React.ComponentType<IconProps>;
+    /** Either this or `onSelect` — a plain link, or a handler for anything
+     * that isn't real navigation (opening a panel, selecting a view). Both
+     * may be set; neither is required to make the row *something* clickable
+     * (it still renders as a link, defaulting `href` to "#"). */
+    href?: string;
+    onSelect?: () => void;
+    active?: boolean;
+    /** Trailing content — a count, a badge, anything `NavItem`'s own
+     * `trailing` slot already takes. */
+    count?: React.ReactNode;
+};
+/**
+ * A named, collapsible group of `SidebarNavGroupItem` rows — navigation as
+ * data, for a consumer whose sections aren't Attio's Records/Lists/Chats
+ * (#325). Pass `groups` to `Sidebar` and it replaces those three sections
+ * entirely; a group's `items` can come from runtime data (a re-render with a
+ * new array is all a group needs to pick up new rows).
+ */
+export type SidebarNavGroup = {
+    /** Identity for this group's own collapse state across renders. Falls
+     * back to `label` — set it explicitly if two groups could ever share a
+     * label, or if a group's label itself changes at runtime. */
+    key?: string;
+    label: string;
+    items: SidebarNavGroupItem[];
+    /** Starts this group collapsed (default: expanded, matching every
+     * existing section). Read once, on mount. */
+    defaultCollapsed?: boolean;
+};
 /** Footer copy: the onboarding pill, the invite row, and the trial banner. */
 export type SidebarFooter = {
     gettingStartedLabel: string;
@@ -67,6 +103,16 @@ export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     listsSection?: SidebarListsSection;
     /** The Chats section (label + nav-item rows). */
     chatsSection?: SidebarSection;
+    /**
+     * Navigation as data (#325): any number of named, collapsible groups,
+     * reusing the same section markup/recipe as Records/Lists/Chats. When
+     * given, it REPLACES those three sections entirely — a consumer whose
+     * sections aren't Attio's (internal/grc's Activity, Governance, Identity,
+     * Organization, System Administration, plus user-built registers) passes
+     * `groups` instead of the three fixed props. Omit it and `<Sidebar />`
+     * renders exactly as before this prop existed.
+     */
+    groups?: SidebarNavGroup[];
     /** Footer copy (onboarding pill, invite row, trial banner). */
     footer?: SidebarFooter;
 };
@@ -102,6 +148,16 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.Detaile
     listsSection?: SidebarListsSection;
     /** The Chats section (label + nav-item rows). */
     chatsSection?: SidebarSection;
+    /**
+     * Navigation as data (#325): any number of named, collapsible groups,
+     * reusing the same section markup/recipe as Records/Lists/Chats. When
+     * given, it REPLACES those three sections entirely — a consumer whose
+     * sections aren't Attio's (internal/grc's Activity, Governance, Identity,
+     * Organization, System Administration, plus user-built registers) passes
+     * `groups` instead of the three fixed props. Omit it and `<Sidebar />`
+     * renders exactly as before this prop existed.
+     */
+    groups?: SidebarNavGroup[];
     /** Footer copy (onboarding pill, invite row, trial banner). */
     footer?: SidebarFooter;
 } & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",