@crisp-ui-kit/crisp 0.54.7 → 0.54.9

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

@@ -22,10 +22,46 @@ const config = (0, core_1.defineRecipe)({
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
+    /* crisp/#645: visually-hidden-but-focusable, not visually-hidden-and-
+       inert like .crisp-datatable-live above -- same clip-rect shape,
+       this one just needs to actually hold DOM focus so a native
+       copy/paste event has something to fire on (see its own comment
+       in datatable.tsx). resize: none keeps a stray native textarea handle
+       from ever being drawable, even though it's clipped to 1px anyway. */
+    & .crisp-datatable-clipboard-proxy {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+      resize: none;
+    }
+    /* single active cell (crisp/#645 follow-up -- this had no styling of its
+       own at all before, a gap against Golden Rule 0: RecordsTable's own
+       measured value, .crisp-recordstable-td[data-selected], brought
+       across unchanged now that a visible anchor actually matters for the
+       Shift+Click range below). */
+    & td[data-selected] { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; z-index: 3; }
+    /* crisp/#645, G-101: a Shift+Click range -- reuses the row-selection
+       tint formula already used twice below (tbody tr[data-selected] td)
+       for the same reason a selected group of rows gets one: a selected
+       GROUP of cells is the same kind of state, just cell-scoped instead of
+       row-scoped. Not independently re-measured against Attio's own range
+       highlight (out of scope this slice -- flagged on crisp#645). */
+    & td[data-in-range] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     /* 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; }
+       Mirrors the summary-row fix.
+       \`& .crisp-table th\`, not bare \`& th\` (found while re-checking #691's
+       own fix live): DataTable's root nests \`Table\`'s own wrapper, whose
+       \`table.recipe.ts\` carries \`& th, & td { padding: 0 12px }\` at the
+       SAME specificity (.crisp-table th vs .crisp-datatable th, both one
+       class + one element) -- a bare \`& th\` here only won by source
+       order, which flipped the moment table.recipe.ts's own CSS file
+       happened to land after datatable's in the build (alphabetical:
+       datatable < table), silently reinstating 12px on every header cell
+       in the whole product and making every interactive column's button
+       double it to 24px. Scoping through \`.crisp-table\` adds a second
+       class to the selector (0,2,1 beats 0,1,1) so this can never lose a
+       specificity tie to source order again. */
+    & .crisp-table 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
@@ -36,6 +72,20 @@ const config = (0, core_1.defineRecipe)({
     & th .crisp-menu { width: 100%; height: 100%; }
     & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
     & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    /* crisp/#605 follow-up: a header with neither a Menu nor a sort button
+       (the primary/entity column's now-inert path, or any column with no
+       columnMenu/sortable at all) renders .crisp-datatable-th-inner as a
+       DIRECT child of th instead of nested inside a button -- and loses
+       the button's own 12px inset, drifting left of the td's 12px base
+       inset. Measured live on Attio's own Companies grid: the header label
+       and the cell's own text land at the exact same x (335px from the
+       viewport, both 40px from the column's left edge) via two different
+       padding+icon+gap combinations -- Attio does not leave the inert
+       primary header flush left either. The \`>\` combinator targets only
+       the button-less case: Menu's own wrapper (\`.crisp-menu\`) and the
+       plain sort \`button\` both put >=1 more level between \`th\` and this
+       span, so their own 12px (already on the button) isn't doubled. */
+    & th > .crisp-datatable-th-inner { box-sizing: border-box; padding: 0 ${tokens_1.contract.space["3"]}; }
 /* 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. */
@@ -119,17 +169,79 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
+    /* #579: click-to-expand overlay for a truncated cell -- a read-only,
+       full-value card, settled live as click (not Attio's usual
+       hover-expand) and measured position: absolute, unlike this file's
+       floating chrome (Menu/Select popovers) which portals and escapes the
+       scroll container. Deliberately NOT the edit-error pattern above
+       (grow the row, block-level, never clipped): a virtualized grid
+       assumes a fixed row height for its scroll math (owned by the grid
+       core, not this cell), so growing a row here would fight it. Anchored
+       to the SAME column width the cell itself renders at (measured:
+       Attio's own overlay came out only slightly wider than the
+       triggering cell's clientWidth -- the overshoot is this padding),
+       wrapping onto as many lines as the value needs; it CAN be clipped by
+       \`.crisp-table-scroll\`'s own \`overflow: auto\` if it grows past the
+       visible viewport, same as the edit-error comment above already
+       notes for any position:absolute escape -- unmeasured against Attio
+       for this exact case, flagged rather than guessed. */
+    & td[data-cell-expanded] { overflow: visible; z-index: 7; }
+    & .crisp-datatable-cell-overlay {
+      position: absolute; inset-inline-start: 0; top: 0; width: 100%; box-sizing: border-box;
+      padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSurface};
+      border: 1px solid ${tokens_1.contract.bgBrandSolid}; border-radius: 4px;
+      font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium};
+      color: ${tokens_1.contract.fgPrimary}; white-space: normal; word-break: break-word; cursor: default;
+    }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
+    /* read-only/computed column marker (#596) -- sits just inside the
+       resize handle, same absolute-positioned-against-the-th approach the
+       handle itself uses, since th has zero padding and the button/inner
+       row fills the whole cell with no room left for a trailing sibling. */
+    & .crisp-datatable-readonly { position: absolute; top: 50%; inset-inline-end: 11px; transform: translateY(-50%); color: ${tokens_1.contract.fgMuted}; pointer-events: none; z-index: 5; }
     /* 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: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
+    /* crisp/#731 -- column drag-to-reorder. Measured live against Attio's
+       own grid (the issue's own comment): the dragged header keeps full
+       opacity and the plain \`pointer\` cursor throughout (Attio draws no
+       ghost and no "grabbing" cursor of its own), so this adds nothing to
+       \`[data-dragging]\` itself -- the ONLY new paint is the drop-indicator
+       line, a 3px bar in the same measured brand blue the resize handle's
+       own hover state (above) already uses, positioned on whichever edge of
+       the hovered header the pointer is closer to. */
+    & th[data-dragging] { cursor: pointer; }
+    & th[data-drop-before]::before, & th[data-drop-after]::after {
+      content: ""; position: absolute; top: 0; width: 3px; height: 100%;
+      background: ${tokens_1.contract.bgBrandSolid}; z-index: 6; pointer-events: none;
+    }
+    & th[data-drop-before]::before { inset-inline-start: -1.5px; }
+    & th[data-drop-after]::after { inset-inline-end: -1.5px; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
+    /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text,
+       plain hover vs rest) that Attio's underline is unconditional, not a
+       hover reveal -- identical at rest and on hover: text-decoration-color
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text
+       colour. The previous :hover-gated, full-contrast rule here was itself
+       unmeasured and wrong in two ways at once. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
+       column, revealed on ROW hover (the issue's own title says "row
+       hover", and a live check confirmed hovering well past the name --
+       not just the icons' own hit target -- still reveals them) or
+       keyboard focus. Measured live: border-radius 6px, icon colour
+       rgba(0,0,0,0.55) at rest, darkening to the full text colour with a
+       rgba(0,0,0,0.04) background on the icon's OWN hover -- both
+       expressed as color-mix against fgPrimary so they stay correct in
+       dark mode instead of a literal black that would invert. */
+    & .crisp-datatable-entity-actions { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & tr:hover .crisp-datatable-entity-actions, & .crisp-datatable-entity-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-entity-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-entity-action:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
@@ -161,7 +273,8 @@ const config = (0, core_1.defineRecipe)({
     & .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: ${tokens_1.contract.fgMuted}; cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
-    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${tokens_1.contract.bgBrandSolid}; transition: box-shadow .12s; }`,
+    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${tokens_1.contract.bgBrandSolid}; transition: box-shadow .12s; }
+    ${core_1.rtlFlipCss}`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/dialog/dialog.js

@@ -60,12 +60,77 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+function Dialog({ open, onOpenChange, title, icon, width = 640, variant = "panel", description, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
     const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const id = useDialogInstanceId();
+    const isAlert = variant === "alert";
     const service = (0, react_1.useMachine)(dialog.machine, {
         id,
         open,
+        role: isAlert ? "alertdialog" : "dialog",
+        // #704: a stacked (second) Dialog can get marked `aria-hidden="true"`
+        // on its own outer wrapper a frame after it opens. Traced into
+        // `@zag-js/dialog`'s `hideContentBelow` effect and `@zag-js/aria-hidden`'s
+        // own source: a modal Dialog's `hideContentBelow` calls
+        // `hideOthers([itself])` (deferred one `requestAnimationFrame`), which
+        // walks `document.body`'s children and `aria-hidden`s every one that
+        // ISN'T an ancestor of its own content. Each open `Dialog` schedules
+        // this independently, with no shared registry of who else is open —
+        // when the effect re-runs for the FIRST (panel) Dialog (Zag re-runs an
+        // effect whenever any prop it reads is considered changed, which a
+        // parent re-render can trigger even when the boolean VALUE didn't),
+        // its walk runs again with the SECOND (alert) Dialog now mounted as a
+        // sibling body child it has never seen before, and marks that whole
+        // sibling subtree — including the alert's own wrapper, the thing
+        // actually on top and interactive — as hidden. A real upstream
+        // limitation (no per-instance awareness of other open Dialogs), not
+        // something crisp can fix by calling the library differently.
+        //
+        // `hideContentBelow` is gated purely on `modal` (no separate flag), so
+        // `modal: false` for the alert variant skips it — `trapFocus`/
+        // `preventScroll` are passed explicitly right below so they stay on
+        // regardless (their own defaults are ALSO `= modal`, so leaving them
+        // out here would silently turn them off too).
+        //
+        // A DOM-level fix was tried first — correcting the wrongly-set
+        // attribute after the fact instead of touching `modal` at all, so
+        // every other zag-managed behavior would stay untouched by
+        // construction. It broke `formdialog.test.tsx`'s own
+        // "the confirm's own Cancel keeps the dirtied form open" test (a real
+        // regression, reproduced with the correction reduced to literally one
+        // `removeAttribute` call, and reproduced again unmodified on the prior
+        // WIP commit — that version was never actually run against the full
+        // suite): `waitFor(() => expect(queryByRole("alertdialog")).toBeNull())`
+        // hung for the full test timeout rather than the confirm's real,
+        // sub-100ms unmount, in a way that traces to `aria-hidden` specifically
+        // (swapping the correction for a harmless, differently-named attribute
+        // did not reproduce it) — a fragile interaction this DOM-mutation
+        // approach could not be made to reliably avoid.
+        //
+        // `modal: false` also turns off `@zag-js/dismissable`'s own
+        // `pointerBlocking` for the alert. Verified live (a real
+        // headed-then-headless Chromium session against a built `FormDialog`,
+        // not just reasoning from the source) that this does NOT regress
+        // outside-click safety in practice — but for a DIFFERENT reason than
+        // `pointerBlocking` itself: the thing actually keeping a background
+        // click from reaching anything is `@zag-js/remove-scroll`'s
+        // `preventBodyScroll`, gated on `preventScroll` (kept `true` above,
+        // independent of `modal`) — it sets `pointer-events: none` directly on
+        // `<body>` while any modal-ish Dialog is open, and `getContentProps()`
+        // re-enables `pointer-events: auto` only on each Dialog's OWN content
+        // element. Confirmed live: the alert's content had an explicit
+        // `pointer-events: auto`; its OWN backdrop/positioner did not, and
+        // inherited body's `none`; clicking anywhere in that dead zone (the
+        // alert's backdrop, or the panel's, now both non-interactive) dismissed
+        // neither dialog, because the click lands on nothing that listens for
+        // it — a stronger guarantee than "click closes the wrong layer", not
+        // just an absence of that one failure mode. `pointerBlocking` is a
+        // second, redundant layer over the same problem `preventScroll` already
+        // solves here; the alert's own `closeOnInteractOutside` is already
+        // `false` for any `alertdialog` role regardless of `modal`.
+        modal: !isAlert,
+        trapFocus: true,
+        preventScroll: true,
         onOpenChange(details) {
             onOpenChange(details.open);
         },
@@ -89,15 +154,17 @@ function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ar
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-dialog-content", className), "data-crisp-dialog": id, 
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", "data-variant": variant, children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-dialog-content", className), "data-crisp-dialog": id, "data-variant": variant, 
                         // `width` is the component's own knob, so it wins over a passed
                         // maxWidth; everything else a consumer sets survives
-                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-card", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-card", children: [variant === "alert"
+                                    ? (title != null || description != null) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-alert-header", children: [title != null && ((0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-dialog-alert-title", children: title })), description != null && ((0, jsx_runtime_1.jsx)("p", { ...api.getDescriptionProps(), className: "crisp-dialog-alert-description", children: description }))] }))
+                                    : title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 function DialogBody({ children, className, }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: className ? `crisp-dialog-body ${className}` : "crisp-dialog-body", children: children }));
 }
-function DialogFooter({ children }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-dialog-footer", children: children });
+function DialogFooter({ children, variant = "panel", }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-dialog-footer", "data-variant": variant, children: children }));
 }

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

@@ -18,17 +18,31 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "dialog",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};
-    & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: ${tokens_1.contract.bgScrim}; }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; }
+    & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: ${tokens_1.contract.space["4"]}; }
     & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-dialog-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; 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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    /* The discard-confirm's own stacked title + sentence (crisp#677) — no
+       border, no close button, unlike the panel header above: measured
+       live, both themes, 18px/24px 600-weight title (no scale token
+       reaches 18px — the scale tops out at text.xl's 16px, so this is raw
+       px per Golden Rule 3's "genuinely intrinsic size" exception, same as
+       this file's own submit-key glyphs) then a 14px/20px 500-weight
+       sentence 4px below it. */
+    & .crisp-dialog-alert-header { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]} 0; }
+    & .crisp-dialog-alert-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-dialog-alert-description { margin: 0; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgAlertDescription}; }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; padding: ${tokens_1.contract.space["5"]} ${tokens_1.contract.space["4"]}; }
     & .crisp-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-dialog-footer[data-variant="alert"] { min-height: 45px; padding: ${tokens_1.contract.space["2"]}; }
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; }
     & .crisp-dialog-field-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }

package/dist/cjs/components/tabletoolbar/tabletoolbar.chrome.js

@@ -19,12 +19,34 @@ const tokens_1 = require("../../tokens");
 // stay byte-for-byte identical to what shipped before the extraction.
 //
 // `.menu--op` (#594 follow-up) is the filter condition's own operator list —
-// measured live against Attio's own popover at 135px (rounds to 134px), not
-// the default 232px every other menu here uses. `.menu-item` also picked up
+// no fixed min-width of its own (#593 correction below), unlike the default
+// 232px every other menu here uses. `.menu-item` also picked up
 // `line-height: 20px` and `font-weight: medium` from the same measurement
 // (its 8 rows read 14px/20px/500) — shared by every menu that renders one,
 // not just the operator list, since crisp's menu-item typography was
 // previously unset rather than wrong.
+//
+// #593 correction: `.menu--op` originally carried a fixed `min-width: 134px`
+// (rounded from one live measurement, the 8-op text set at 135px). Adding
+// number/date columns' own shorter operator sets and re-measuring them live
+// (104.86px for 6 number ops, 91.16px for 6 date ops — both narrower than
+// 134px) showed that number wasn't a real Attio constant, just one set's own
+// content width: a floor sized for the text set overshoots the other two.
+// Dropped to `min-width: 0` so every op set sizes to its own content, the
+// same as any other menu here without an explicit floor.
+//
+// `.menu-item` also picked up `text-decoration: none` for #595's Import/
+// Export menu — Attio's own "Import CSV" and "Learn about imports and
+// exports" rows are real `<a>` tags (the middle two, pure JS actions, are
+// plain `<div role="menuitem">`), and an anchor needs the underline reset
+// every button-based `.menu-item` never needed. No-op for every existing
+// button consumer of this class. Same menu's 2 dividers use `.menu-sep` on
+// a real `<hr>` (implicit `role="separator"`, no extra ARIA plumbing needed)
+// rather than a `<div role="separator">` — biome's a11y rules want a
+// separator either genuinely interactive (`tabIndex`, `aria-valuenow`, a
+// resizable-splitter kind of thing this isn't) or the semantic element
+// instead; `.menu-sep` picked up `border: none` for it, a no-op for the
+// existing plain-`<div>` consumers of this class.
 const toolbarChromeHead = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
     & .${namespace_1.CLASS_PREFIX}${p}-toolbar[data-inline] { padding-bottom: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
@@ -64,7 +86,7 @@ const toolbarChromeBody = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-menu-he
     & .${namespace_1.CLASS_PREFIX}${p}-sort-learn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.lg}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); text-decoration: none; }
     & .${namespace_1.CLASS_PREFIX}${p}-sort-learn svg { flex-shrink: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-sort-learn:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .${namespace_1.CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; text-align: left; cursor: pointer; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; text-align: left; text-decoration: none; cursor: pointer; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item:hover { background: ${tokens_1.contract.bgRaised}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item:disabled:hover { background: none; }
@@ -72,12 +94,34 @@ const toolbarChromeBody = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-menu-he
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item[data-on] svg { color: ${tokens_1.contract.bgBrandSolid}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item .${namespace_1.CLASS_PREFIX}${p}-menu-check { margin-left: auto; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-input { height: ${tokens_1.contract.size.row}; margin: ${tokens_1.contract.space["0.5"]}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
-    & .${namespace_1.CLASS_PREFIX}${p}-menu-sep { height: 1px; background: ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["0.5"]} 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-sep { height: 1px; border: none; background: ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["0.5"]} 0; }
+    /* #592: the Filter field picker's nested-scope header (back control +
+       search, once drilled into a nestedColumns column) and a search
+       result's own breadcrumb row ("Team › Twitter follower count",
+       surfaced by the SAME query matching a nested column). menu-back
+       reuses the established 28px icon-only control pattern this file
+       already uses twice (sort-remove, the kebab segment) rather than
+       an independent measurement of Attio's own back arrow. The breadcrumb
+       colours ARE measured live: the parent segment muted at the same
+       exact color-mix 63% sort-learn above already uses, the
+       separator chevron and leaf segment both full fgPrimary (the
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-nesthead { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin: ${tokens_1.contract.space["0.5"]}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-nesthead .${namespace_1.CLASS_PREFIX}${p}-menu-input { flex: 1; margin: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-back:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item--expand { justify-content: space-between; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item-path-sep { flex-shrink: 0; color: ${tokens_1.contract.fgPrimary}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu--up { top: auto; bottom: calc(100% + ${tokens_1.contract.space["1"]}); transform-origin: bottom; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu--hdr { min-width: 200px; }
-    & .${namespace_1.CLASS_PREFIX}${p}-menu--op { min-width: 134px; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu--op { min-width: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger { color: ${tokens_1.contract.bgDanger}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }