@crisp-ui-kit/crisp 0.5.0 → 0.7.1

package/dist/dialog.css

@@ -7,13 +7,21 @@
     & .dialog-header { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
     & .dialog-header svg { flex-shrink: 0; color: var(--fg-muted); }
     & .dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
-    & .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(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .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(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
     & .dialog-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
     & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
     & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--space-4); border-top: 1px solid var(--border-subtle); }
     & .dialog-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
     & .dialog-field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 50%, transparent); }
-    & .dialog-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; font-size: var(--text-md); color: var(--fg-muted); }
+    & .dialog-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--text-md); color: var(--fg-muted); cursor: pointer; }
     & .dialog-submit { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-1) 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
     & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog, .dialog * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/donutchart.css

@@ -14,3 +14,11 @@
     & .donutchart-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); }
     & .donutchart-val { flex-shrink: 0; font-weight: var(--weight-medium); color: var(--fg-primary); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .donutchart, .donutchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/drawer.css

@@ -1,17 +1,25 @@
 .drawer {
   display: contents; font-family: var(--font-sans);
     & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--fg-primary) 18%, transparent); opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
-    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; box-sizing: border-box; padding: var(--space-2); }
     & .drawer-positioner[data-side="right"] { justify-content: flex-end; }
     & .drawer-positioner[data-side="left"] { justify-content: flex-start; }
-    & .drawer-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 420px; max-width: 92vw; height: 100%; background: var(--bg-surface); transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
-    & .drawer-positioner[data-side="right"] .drawer-content { box-shadow: -12px 0 32px -8px rgba(28,40,64,0.18); @starting-style { transform: translateX(100%); } }
-    & .drawer-positioner[data-side="left"] .drawer-content { box-shadow: 12px 0 32px -8px rgba(28,40,64,0.18); @starting-style { transform: translateX(-100%); } }
+    & .drawer-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; width: 420px; max-width: 100%; height: 100%; background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
+    & .drawer-positioner[data-side="right"] .drawer-content { @starting-style { transform: translateX(calc(100% + var(--space-2))); } }
+    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - var(--space-2))); } }
     & .drawer-header { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
     & .drawer-header svg { flex-shrink: 0; color: var(--fg-muted); }
     & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg-primary); }
-    & .drawer-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(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .drawer-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(--radius-md); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; }
     & .drawer-close:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
     & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
     & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--space-4); border-top: 1px solid var(--border-subtle); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer, .drawer * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/entitycard.css

@@ -1,5 +1,5 @@
 .entitycard {
-  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: left;
+  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: start;
     padding: var(--space-3) var(--space-4); margin: 0; border: none; border-radius: var(--radius-xl);
     background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--fg-primary);
     font-family: var(--font-sans); cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease;
@@ -14,5 +14,13 @@
     & .entitycard-spacer { flex: 1; min-height: var(--space-3); }
     & .entitycard-foot { display: flex; align-items: center; gap: var(--space-1-5); padding-top: var(--space-2-5); margin-top: var(--space-1); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--fg-muted); }
     & .entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-primary); }
-    & .entitycard-date { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
+    & .entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entitycard, .entitycard * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/esm/components/accordion/accordion.js

@@ -7,23 +7,24 @@ import { accordionRecipe } from "./accordion.recipe.js";
  * multiple open; panels animate their height (grid-rows 0fr->1fr). Headers are
  * buttons with `aria-expanded` / `aria-controls`.
  */
-export function Accordion({ items, multiple, defaultValue, className, }) {
-    const [open, setOpen] = React.useState(() => new Set(defaultValue == null
-        ? []
-        : Array.isArray(defaultValue)
-            ? defaultValue
-            : [defaultValue]));
-    const toggle = (value) => {
-        setOpen((prev) => {
-            const next = new Set(multiple ? prev : []);
-            if (prev.has(value))
-                next.delete(value);
-            else
-                next.add(value);
-            return next;
-        });
+const toSet = (v) => new Set(v == null ? [] : Array.isArray(v) ? v : [v]);
+export function Accordion({ items, multiple, value, defaultValue, onValueChange, className, ...rest }) {
+    const [internal, setInternal] = React.useState(() => toSet(defaultValue));
+    // `value` present means the caller owns the open set; our own state is then
+    // never read, so a click can only change what is shown by going through
+    // onValueChange and coming back as a new `value`.
+    const open = value !== undefined ? toSet(value) : internal;
+    const toggle = (itemValue) => {
+        const next = new Set(multiple ? open : []);
+        if (open.has(itemValue))
+            next.delete(itemValue);
+        else
+            next.add(itemValue);
+        onValueChange?.(multiple ? [...next] : ([...next][0] ?? ""));
+        if (value === undefined)
+            setInternal(next);
     };
-    return (_jsx("div", { className: accordionRecipe({ className }), children: items.map((item) => {
+    return (_jsx("div", { className: accordionRecipe({ className }), ...rest, children: items.map((item) => {
             const isOpen = open.has(item.value);
             const panelId = `accordion-panel-${item.value}`;
             return (_jsxs("div", { className: "accordion-item", children: [_jsxs("button", { type: "button", className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [_jsx("span", { className: "accordion-title", children: item.title }), _jsx(ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx("div", { id: panelId, className: "accordion-panel", role: "region", "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: _jsx("div", { className: "accordion-panel-inner", children: _jsx("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));

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

@@ -6,7 +6,7 @@ const config = defineRecipe({
     name: "accordion",
     base: `display: flex; flex-direction: column; font-family: ${c.font.sans};
     & .accordion-item { border-bottom: 1px solid ${c.borderSubtle}; }
-    & .accordion-trigger { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 44px; padding: 0 ${c.space["1"]}; margin: 0; border: none; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; text-align: left; cursor: pointer; }
+    & .accordion-trigger { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 44px; padding: 0 ${c.space["1"]}; margin: 0; border: none; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; text-align: start; cursor: pointer; }
     & .accordion-trigger:hover { color: ${c.fgPrimary}; }
     & .accordion-title { flex: 1; min-width: 0; }
     & .accordion-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .2s ease; }

package/dist/esm/components/avatargroup/avatargroup.js

@@ -7,10 +7,10 @@ import { avatargroupRecipe } from "./avatargroup.recipe.js";
  * from Attio's team / member rows. Pass `<Avatar>` children; each is ringed in
  * the surface colour so it reads against its neighbour.
  */
-export function AvatarGroup({ children, max, size = "md", className, "aria-label": ariaLabel, }) {
+export function AvatarGroup({ children, max, size = "md", className, "aria-label": ariaLabel, ...rest }) {
     const items = React.Children.toArray(children);
     const shown = max != null ? items.slice(0, max) : items;
     const overflow = items.length - shown.length;
-    return (_jsxs("div", { className: avatargroupRecipe({ className }), role: "group", "aria-label": ariaLabel, children: [shown, overflow > 0 && (_jsxs(Avatar, { size: size, shape: "circle", tone: "neutral", children: ["+", overflow] }))] }));
+    return (_jsxs("div", { className: avatargroupRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: [shown, overflow > 0 && (_jsxs(Avatar, { size: size, shape: "circle", tone: "neutral", children: ["+", overflow] }))] }));
 }
 AvatarGroup.displayName = "AvatarGroup";

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

@@ -5,8 +5,8 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "avatargroup",
     base: `display: inline-flex; align-items: center;
-    & > * { margin-left: -${c.space["2"]}; box-shadow: 0 0 0 2px ${c.bgSurface}; position: relative; }
-    & > *:first-child { margin-left: 0; }`,
+    & > * { margin-inline-start: -${c.space["2"]}; box-shadow: 0 0 0 2px ${c.bgSurface}; position: relative; }
+    & > *:first-child { margin-inline-start: 0; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -15,7 +15,7 @@ const config = defineRecipe({
         size: {
             small: `height: 16px; padding-inline: ${c.space["1.5"]}; font-size: ${c.text.xs}; border-radius: ${c.radius.sm};`,
             medium: `height: 20px; padding-inline: ${c.space["2"]}; font-size: ${c.text.sm}; border-radius: ${c.radius.sm};`,
-            large: `height: 22px; padding-inline: 9px; font-size: ${c.text.lg}; border-radius: 7px;`,
+            large: `height: ${c.size.chip}; padding-inline: 9px; font-size: ${c.text.lg}; border-radius: ${c.radius.chip};`,
         },
         variant: {
             soft: ``,
@@ -32,17 +32,17 @@ const config = defineRecipe({
         {
             variant: "solid",
             tone: "success",
-            css: `background: ${c.bgSuccess}; color: ${c.fgOnBrand}; box-shadow: none;`,
+            css: `background: ${c.bgSuccess}; color: ${c.fgOnTone}; box-shadow: none;`,
         },
         {
             variant: "solid",
             tone: "warning",
-            css: `background: ${c.bgWarning}; color: ${c.fgOnBrand}; box-shadow: none;`,
+            css: `background: ${c.bgWarning}; color: ${c.fgOnTone}; box-shadow: none;`,
         },
         {
             variant: "solid",
             tone: "danger",
-            css: `background: ${c.bgDanger}; color: ${c.fgOnBrand}; box-shadow: none;`,
+            css: `background: ${c.bgDanger}; color: ${c.fgOnTone}; box-shadow: none;`,
         },
         {
             variant: "solid",

package/dist/esm/components/barchart/barchart.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { contract as c } from "../../tokens/index.js";
 import { barchartRecipe } from "./barchart.recipe.js";
 // round up to a friendly 1/2/5 × 10^n value (for tick steps)
 function niceNum(raw) {
@@ -13,15 +14,27 @@ function niceNum(raw) {
  * A responsive bar chart — measured from Attio's Reports dashboard. Pure CSS, so
  * it scales with its container. Renders `role="img"` with an accessible summary.
  */
-export function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n.toLocaleString(), xAxisTitle, "aria-label": ariaLabel, className, }) {
+export function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {
     const rawMax = Math.max(1, ...data.map((d) => d.value));
     // pick a nice step so the top tick is round and >= the data max
     const step = max ? max / (ticks - 1) : niceNum(rawMax / (ticks - 1));
     const top = step * (ticks - 1);
     const tickValues = Array.from({ length: ticks }, (_, i) => step * i);
+    // The value-axis gutter must fit whatever `format` actually returns — a
+    // hardcoded width fits "4.0k" but not "4,000,000₮". `ch` is the width of
+    // "0" in the current font, so sizing off the longest formatted tick tracks
+    // the real label width without measuring the DOM (works during SSR, no
+    // ResizeObserver). `yAxisWidth` lets a caller pin the gutter instead.
+    const longestTickChars = Math.max(0, ...tickValues.map((t) => format(t).length));
+    const yAxisWidthValue = yAxisWidth != null
+        ? `${yAxisWidth}px`
+        : `max(34px, ${longestTickChars}ch + ${c.space["4"]})`;
     const summary = ariaLabel ??
         `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return (_jsxs("div", { className: barchartRecipe({ className }), style: { height }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "barchart-body", children: [_jsx("div", { className: "barchart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "barchart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => (_jsx("div", { className: "barchart-col", children: _jsx("div", { className: "barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
+    return (_jsxs("div", { className: barchartRecipe({ className }), ...rest, style: {
+            height,
+            "--barchart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "barchart-body", children: [_jsx("div", { className: "barchart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "barchart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => (_jsx("div", { className: "barchart-col", children: _jsx("div", { className: "barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
                                         height: `${Math.max(0, (d.value / top) * 100)}%`,
                                         background: color,
                                     }, title: `${d.label}: ${format(d.value)}` }) }, d.label)))] })] }), _jsx("div", { className: "barchart-xaxis", "data-inset": "", children: data.map((d) => (_jsx("span", { className: "barchart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && (_jsx("div", { className: "barchart-axis-title", children: xAxisTitle }))] }));

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

@@ -5,19 +5,24 @@ import { contract as c } from "../../tokens/index.js";
 // and category labels below. Pure CSS (no SVG), so it scales with its container.
 const config = defineRecipe({
     name: "barchart",
-    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    // --barchart-yaxis-width is the one source of truth for the value-axis
+    // gutter: the component sets it (auto-sized to the longest tick label, or
+    // pinned via `yAxisWidth`) on the root element, and it inherits down to the
+    // x-axis padding and axis title so they never drift out of alignment. 34px
+    // is only the pre-JS fallback (e.g. if `barchartRecipe` is used bare).
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans}; --barchart-yaxis-width: 34px;
     & .barchart-body { display: flex; flex: 1; min-height: 0; }
-    & .barchart-yaxis { position: relative; flex-shrink: 0; width: 34px; }
-    & .barchart-ytick { position: absolute; right: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .barchart-yaxis { position: relative; flex-shrink: 0; width: var(--barchart-yaxis-width); }
+    & .barchart-ytick { position: absolute; inset-inline-end: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
     & .barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${c.space["3"]}; border-bottom: 1px solid ${c.borderDefault}; }
     & .barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.borderSubtle}; pointer-events: none; }
     & .barchart-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
     & .barchart-bar { width: 100%; max-width: 96px; border-radius: ${c.radius.sm} ${c.radius.sm} 0 0; background: ${c.bgBrandSolid}; transition: height 0.3s ease; }
     & .barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
     & .barchart-xaxis { display: flex; gap: ${c.space["3"]}; margin-top: ${c.space["1.5"]}; }
-    & .barchart-xaxis[data-inset] { padding-left: 34px; }
+    & .barchart-xaxis[data-inset] { padding-inline-start: var(--barchart-yaxis-width); }
     & .barchart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .barchart-axis-title { margin-top: ${c.space["1"]}; padding-left: 34px; text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
+    & .barchart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--barchart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -6,9 +6,9 @@ import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
  * A breadcrumb trail — measured from Attio's record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
-export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, }) {
+export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
     const sep = separator ?? (_jsx(ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
-    return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), children: items.map((item, i) => {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = (_jsxs(_Fragment, { children: [item.icon, item.label] }));
             return (_jsxs(React.Fragment, { children: [last ? (_jsx("span", { className: "breadcrumb-item", "aria-current": "page", children: content })) : item.href ? (_jsx("a", { className: "breadcrumb-item", href: item.href, children: content })) : (_jsx("button", { type: "button", className: "breadcrumb-item", onClick: item.onClick, children: content })), !last && _jsx("span", { className: "breadcrumb-sep", children: sep })] }, i));

package/dist/esm/components/bulkbar/bulkbar.js

@@ -7,8 +7,8 @@ import { bulkbarRecipe } from "./bulkbar.recipe.js";
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
  */
-export function BulkBar({ count, onClear, countLabel = "selected", children, className, }) {
-    return (_jsx("div", { className: bulkbarRecipe({ className }), children: _jsxs("div", { className: "bulkbar-bar", role: "status", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: "Clear selection", children: [count, " ", countLabel, _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
+export function BulkBar({ count, onClear, countLabel = "selected", children, className, clearLabel = "Clear selection", ...rest }) {
+    return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "bulkbar-bar", role: "status", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [count, " ", countLabel, _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
 }
 BulkBar.displayName = "BulkBar";
 /** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */

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

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // A floating bulk-action bar — the pill that rises from the bottom of a
 // selection surface (a table, a gallery) when one or more rows are selected.
 // Measured from Attio's records-table bulk bar. The root is an absolutely-
@@ -10,12 +10,12 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "bulkbar",
     base: `position: absolute; left: 0; right: 0; bottom: ${c.space["4"]}; display: flex; justify-content: center; pointer-events: none; z-index: 10;
-    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: ${c.space["0.5"]}; height: 44px; padding: 0 ${c.space["1"]} 0 ${c.space["1.5"]}; border-radius: 14px; background: ${c.bgSurface}; box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16); color: ${c.fgPrimary}; transition: opacity .16s ease, transform .16s ease; }
+    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: ${c.space["0.5"]}; height: 48px; padding: 0 ${c.space["1"]} 0 ${c.space["1.5"]}; border-radius: 14px; background: ${c.bgSurface}; box-shadow: ${e.floating}; color: ${c.fgPrimary}; transition: opacity .16s ease, transform .16s ease; }
     & .bulkbar-bar { @starting-style { opacity: 0; transform: translateY(10px); } }
-    & .bulkbar-count { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 32px; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-count { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .bulkbar-count:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); color: ${c.fgPrimary}; }
     & .bulkbar-count svg { flex-shrink: 0; }
-    & .bulkbar-btn { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 32px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-btn { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.menuRow}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .bulkbar-btn:hover { background: ${c.bgRaised}; }
     & .bulkbar-btn--danger { color: ${c.bgDanger}; }
     & .bulkbar-btn--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }

package/dist/esm/components/button/button.js

@@ -6,10 +6,21 @@ import { buttonRecipe } from "./button.recipe.js";
 function Spinner() {
     return (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { flexShrink: 0 }, children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M8 1.5a6.5 6.5 0 0 1 6.5 6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })] }));
 }
-export const Button = React.forwardRef(({ intent, size, shape, className, asChild, loading, disabled, children, ...props }, ref) => {
+export const Button = React.forwardRef(({ intent, size, shape, touchTarget, className, asChild, loading, disabled, children, type, ...props }, ref) => {
     const isDisabled = disabled || loading;
     // Slot (asChild) requires a single child — never inject the spinner in that mode.
     const content = loading && !asChild ? (_jsxs(_Fragment, { children: [_jsx(Spinner, {}), children] })) : (children);
-    return (_jsx(Primitive.button, { ref: ref, asChild: asChild, className: buttonRecipe({ intent, size, shape, className }), disabled: isDisabled, "aria-busy": loading || undefined, "data-loading": loading ? "" : undefined, ...props, children: content }));
+    return (_jsx(Primitive.button, { ref: ref, asChild: asChild, className: buttonRecipe({
+            intent,
+            size,
+            shape,
+            touchTarget,
+            className,
+        }), 
+        // A bare <button> inside a <form> defaults to type="submit". Nothing in
+        // a design system should submit a form by accident, so default to
+        // "button" and make submitting explicit. `asChild` renders someone
+        // else's element, which must not be given a button-only attribute.
+        type: asChild ? type : (type ?? "button"), disabled: isDisabled, "aria-busy": loading || undefined, "data-loading": loading ? "" : undefined, ...props, children: content }));
 });
 Button.displayName = "Button";

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

@@ -1,13 +1,13 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "button",
     base: `display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; font-family: ${c.font.sans}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; line-height: 20px; white-space: nowrap; border: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; &:disabled { opacity: 0.5; cursor: not-allowed; }`,
     variants: {
         intent: {
             primary: `background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); &:hover { background: ${c.bgBrandSolidPressed}; } &:active { background: ${c.bgBrandSolidPressed}; }`,
-            neutral: `background: ${c.bgSurface}; color: ${c.fgPrimary}; box-shadow: inset 0 0 0 1px ${c.ringNeutral}, 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); &:hover { background: ${c.bgRaised}; }`,
-            danger: `background: ${c.bgDanger}; color: ${c.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(229,72,77,0.20), 0 3px 6px -2px rgba(229,72,77,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }`,
+            neutral: `background: ${c.bgSurface}; color: ${c.fgPrimary}; box-shadow: ${e.field}; &:hover { background: ${c.bgRaised}; }`,
+            danger: `background: ${c.bgDangerSolid}; color: ${c.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }`,
             ghost: `background: transparent; color: ${c.fgMuted}; box-shadow: none; &:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }`,
         },
         size: {
@@ -19,8 +19,24 @@ const config = defineRecipe({
             text: ``,
             icon: `padding-inline: 0; aspect-ratio: 1 / 1;`,
         },
+        // Opt-in hit-area expansion (crisp/#62): none of sm/md/lg reaches the
+        // 44x44 touch-target minimum (Apple HIG / Material), and enlarging the
+        // visual sizes isn't an option — crisp is deliberately dense. A
+        // `::after` overlay grows the *clickable* region from the button's
+        // centre without reflow, so the rendered size/position never changes.
+        // Opt-in rather than always-on: an always-on overlay would swallow
+        // clicks meant for a neighbour in a toolbar packed tighter than 44px.
+        touchTarget: {
+            true: `position: relative; &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }`,
+            false: ``,
+        },
+    },
+    defaultVariants: {
+        intent: "primary",
+        size: "md",
+        shape: "text",
+        touchTarget: false,
     },
-    defaultVariants: { intent: "primary", size: "md", shape: "text" },
     compoundVariants: [],
 });
 export const buttonRecipe = Object.assign(resolveRecipe(config), {

package/dist/esm/components/callout/callout.js

@@ -12,11 +12,11 @@ const DEFAULT_ICONS = {
  * An inline callout / banner — measured from Attio's info notices. `tone` tints
  * the background and icon; pass a `title` and/or body `children`.
  */
-export function Callout({ tone = "neutral", icon, title, children, action, className, }) {
+export function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {
     const Fallback = DEFAULT_ICONS[tone];
     const iconNode = icon === undefined
         ? Fallback && _jsx(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
         : icon;
-    return (_jsxs("div", { className: calloutRecipe({ className }), "data-tone": tone, role: "note", children: [iconNode && _jsx("span", { className: "callout-icon", children: iconNode }), _jsxs("div", { className: "callout-body", children: [title != null && _jsx("div", { className: "callout-title", children: title }), children != null && _jsx("div", { className: "callout-desc", children: children })] }), action && _jsx("div", { className: "callout-action", children: action })] }));
+    return (_jsxs("div", { className: calloutRecipe({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && _jsx("span", { className: "callout-icon", children: iconNode }), _jsxs("div", { className: "callout-body", children: [title != null && _jsx("div", { className: "callout-title", children: title }), children != null && _jsx("div", { className: "callout-desc", children: children })] }), action && _jsx("div", { className: "callout-action", children: action })] }));
 }
 Callout.displayName = "Callout";

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

@@ -6,7 +6,15 @@ import { contract as c } from "../../tokens/index.js";
 const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
 const config = defineRecipe({
     name: "checkbox",
-    base: `appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); } &:checked, &:indeterminate { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; } &:checked { background-image: ${CHECK}; } &:indeterminate { background-image: linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand}); background-size: 8px 2px; } &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }`,
+    base: `appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${c.radius.sm}
+  ; background: ${c.bgSurface}
+  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary}
+  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
+  &:checked, &:indeterminate { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; }
+  &:checked { background-image: ${CHECK}; }
+  &:indeterminate { background-image: linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand}); background-size: 8px 2px; }
+  &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/columncalc/columncalc.js

@@ -0,0 +1,100 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Plus } from "lucide-react";
+import * as React from "react";
+import { Menu, MenuItem } from "../menu/index.js";
+import { columncalcRecipe } from "./columncalc.recipe.js";
+/** The four Attio offers on every column, in its order. */
+export const UNIVERSAL_CALCS = [
+    "countEmpty",
+    "countFilled",
+    "percentEmpty",
+    "percentFilled",
+];
+/** The four Attio adds for numeric columns, in its order. */
+export const NUMERIC_CALCS = ["sum", "average", "min", "max"];
+export const CALC_LABEL = {
+    none: "None",
+    countEmpty: "Count empty",
+    countFilled: "Count filled",
+    percentEmpty: "Percent empty",
+    percentFilled: "Percent filled",
+    sum: "Sum",
+    average: "Average",
+    min: "Min",
+    max: "Max",
+};
+/** A value counts as empty when it is null/undefined, "" or an empty array. */
+export function isEmptyValue(v) {
+    if (v == null)
+        return true;
+    if (typeof v === "string")
+        return v.trim() === "";
+    if (Array.isArray(v))
+        return v.length === 0;
+    return false;
+}
+/**
+ * Pure so the arithmetic is testable without rendering. Returns `null` for
+ * "none" and for numeric ops with no numbers to work on — a caller renders
+ * nothing rather than a misleading 0.
+ */
+export function computeCalc(values, op) {
+    if (op === "none")
+        return null;
+    const total = values.length;
+    const empty = values.filter(isEmptyValue).length;
+    const filled = total - empty;
+    switch (op) {
+        case "countEmpty":
+            return empty;
+        case "countFilled":
+            return filled;
+        case "percentEmpty":
+            return total === 0 ? 0 : (empty / total) * 100;
+        case "percentFilled":
+            return total === 0 ? 0 : (filled / total) * 100;
+        default:
+            break;
+    }
+    const nums = values
+        .filter((v) => !isEmptyValue(v))
+        .map((v) => (typeof v === "number" ? v : Number(v)))
+        .filter((n) => Number.isFinite(n));
+    if (nums.length === 0)
+        return null;
+    switch (op) {
+        case "sum":
+            return nums.reduce((a, b) => a + b, 0);
+        case "average":
+            return nums.reduce((a, b) => a + b, 0) / nums.length;
+        case "min":
+            return Math.min(...nums);
+        case "max":
+            return Math.max(...nums);
+        default:
+            return null;
+    }
+}
+const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
+    ? `${Math.round(n)}%`
+    : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, format = defaultFormat, align, opLabels, className, ...rest }) {
+    // a partial override, so a consumer can translate one op without
+    // restating all nine
+    const labelFor = (o) => opLabels?.[o] ?? CALC_LABEL[o];
+    const [internal, setInternal] = React.useState(defaultOp);
+    const op = opProp ?? internal;
+    const setOp = (next) => {
+        if (opProp === undefined)
+            setInternal(next);
+        onOpChange?.(next);
+    };
+    const values = React.useMemo(() => rows.map(value), [rows, value]);
+    const result = React.useMemo(() => computeCalc(values, op), [values, op]);
+    const ops = [
+        ...UNIVERSAL_CALCS,
+        ...(numeric ? NUMERIC_CALCS : []),
+        "none",
+    ];
+    return (_jsx("span", { className: columncalcRecipe({ className }), ...rest, children: _jsxs(Menu, { trigger: _jsx("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? (_jsxs(_Fragment, { children: [_jsx(Plus, { size: 12, strokeWidth: 2 }), _jsx("span", { className: "columncalc-placeholder", children: "Add calculation" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "columncalc-value", children: format(result, op) }), _jsx("span", { className: "columncalc-op", children: labelFor(op) }), _jsx(ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [_jsx("div", { className: "columncalc-section", children: "Aggregations" }), ops.map((o) => (_jsx(MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
+}

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

@@ -0,0 +1,30 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Attio's column footer calculation. The summary row is 36px and sticky at the
+// grid's bottom edge; each cell holds a quiet trigger that reads "Add
+// calculation" until an aggregation is chosen, then shows the value with its
+// operation name beside it.
+const config = defineRecipe({
+    name: "columncalc",
+    base: `display: flex; align-items: stretch; width: 100%; height: 100%; font-family: ${c.font.sans};
+/* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
+    & .menu { width: 100%; height: 100%; }
+        /* Attio's hit target is the WHOLE summary cell -- measured 246x37 with
+       padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
+       opens the aggregation menu. */
+    & .columncalc-trigger { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; height: 100%; min-height: ${c.size.tableRow}; margin: 0; padding: 0 ${c.space["3"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .columncalc-trigger:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
+    & .columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
+    & .columncalc-trigger[data-align="right"] { justify-content: flex-end; }
+    & .columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
+    & .columncalc-value { color: ${c.fgPrimary}; font-variant-numeric: tabular-nums; }
+    & .columncalc-op { color: ${c.fgMuted}; }
+    & .columncalc-section { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const columncalcRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/columncalc/index.js

@@ -0,0 +1 @@
+export { CALC_LABEL, ColumnCalc, computeCalc, isEmptyValue, NUMERIC_CALCS, UNIVERSAL_CALCS, } from "./columncalc.js";

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

@@ -1,17 +1,17 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // A right-click menu on the measured popover surface, positioned at the cursor.
 const config = defineRecipe({
     name: "contextmenu",
     base: `display: contents; font-family: ${c.font.sans};
-    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3}; 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); } }
-    & .contextmenu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 32px; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: left; white-space: nowrap; cursor: pointer; }
+    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.floating}; 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); } }
+    & .contextmenu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.menuRow}; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
     & .contextmenu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .contextmenu-item:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
     & .contextmenu-item--danger { color: ${c.bgDanger}; }
     & .contextmenu-item--danger svg { color: ${c.bgDanger}; }
     & .contextmenu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
-    & .contextmenu-shortcut { margin-left: auto; padding-left: ${c.space["3"]}; color: ${c.fgMuted}; font-size: ${c.text.sm}; }
+    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${c.space["3"]}; color: ${c.fgMuted}; font-size: ${c.text.sm}; }
     & .contextmenu-sep { height: 1px; margin: ${c.space["1"]} 0; border: none; background: ${c.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},