@crisp-ui-kit/crisp 0.5.0 → 0.7.1

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

@@ -1,21 +1,21 @@
 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 side sheet — a focus-trapped panel that slides in from the right or left,
 // over a scrim. Shares the Dialog header/body/footer language.
 const config = defineRecipe({
     name: "drawer",
     base: `display: contents; font-family: ${c.font.sans};
     & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${c.fgPrimary} 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: ${c.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: ${c.bgSurface}; 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: ${c.bgSurface}; border-radius: ${c.radius.xl}; box-shadow: ${e.floating}; 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% + ${c.space["2"]})); } }
+    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - ${c.space["2"]})); } }
     & .drawer-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
     & .drawer-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .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: ${c.radius.md}; background: none; color: ${c.fgMuted}; 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: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .drawer-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["4"]}; }
     & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,

package/dist/esm/components/emptystate/emptystate.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { emptystateRecipe } from "./emptystate.recipe.js";
 /** A centred empty-state panel — icon, title, description, optional action. */
-export function EmptyState({ icon, title, description, action, variant, className, }) {
-    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), children: [icon && _jsx("span", { className: "emptystate-icon", children: icon }), _jsx("div", { className: "emptystate-title", children: title }), description != null && (_jsx("div", { className: "emptystate-desc", children: description })), action && _jsx("div", { className: "emptystate-action", children: action })] }));
+export function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
+    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "emptystate-icon", children: icon }), _jsx("div", { className: "emptystate-title", children: title }), description != null && (_jsx("div", { className: "emptystate-desc", children: description })), action && _jsx("div", { className: "emptystate-action", children: action })] }));
 }
 EmptyState.displayName = "EmptyState";

package/dist/esm/components/formfield/formfield.js

@@ -6,9 +6,9 @@ import { formfieldRecipe } from "./formfield.recipe.js";
  * above any control, with an optional description or error line below. When
  * `error` is set, it replaces the description and gets `aria-describedby` wiring.
  */
-export function FormField({ label, htmlFor, required, optional, description, error, children, className, }) {
+export function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }) {
     const descId = React.useId();
     const hasMsg = error != null || description != null;
-    return (_jsxs("div", { className: formfieldRecipe({ className }), children: [_jsxs("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "formfield-optional", children: "(optional)" }))] }), children, error != null ? (_jsx("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

package/dist/esm/components/input/input.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { Primitive } from "../../core/index.js";
 import { inputRecipe } from "./input.recipe.js";
-export const Input = React.forwardRef(({ size, invalid, className, ...props }, ref) => {
-    return (_jsx(Primitive.input, { ref: ref, className: inputRecipe({ size, invalid, className }), "aria-invalid": invalid === true || undefined, ...props }));
+export const Input = React.forwardRef(({ size, invalid, className, style, ...props }, ref) => {
+    // The wrapper exists only to host the ::after focus ring — an <input> is a
+    // replaced element and cannot have one. Everything the consumer passes
+    // still lands on the <input> itself, so `id`, `name`, `onChange`, form
+    // association and every native attribute behave exactly as before.
+    return (_jsx("span", { className: inputRecipe({ size, invalid, className }), style: style, children: _jsx("input", { ref: ref, className: "input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
 });
 Input.displayName = "Input";

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

@@ -1,15 +1,48 @@
 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";
+// Geometry is Attio's, measured: 32/36px tall, r8/r10, 10/12px side padding.
+// The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
+// ring on an ::after overlay that is present-but-transparent at rest, so
+// focusing cannot shift layout the way a width change would, and animates
+// `border-color` over 100ms. The ring colour is a high-contrast neutral rather
+// than the brand hue — it reads as "this field has focus", not as a state.
+//
+// The ring needs the ::after, and ::after needs a non-replaced element, so
+// Input renders a wrapper around the <input>. The wrapper is presentational:
+// every consumer prop still goes to the <input>, which is what `id`, `name`,
+// `onChange` and form semantics require.
 const config = defineRecipe({
     name: "input",
-    base: `box-sizing: border-box; display: inline-flex; width: 100%; font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary}; background: ${c.bgSurface}; border: none; outline: none; box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow .15s; &::placeholder { color: ${c.fgMuted}; } &:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; } &:disabled { opacity: 0.5; cursor: not-allowed; }`,
+    base: `
+    position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
+    width: 100%; background: ${c.bgSurface}; box-shadow: ${e.field};
+    font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px;
+
+    &::after {
+      content: ""; position: absolute; inset: 0; border-radius: inherit;
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    &:focus-within::after { border-color: ${c.strokeFieldFocus}; }
+
+    & .input-value {
+      box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
+      align-self: stretch; margin: 0; border: none; background: none; outline: none;
+      font: inherit; color: ${c.fgPrimary};
+    }
+    & .input-value::placeholder { color: ${c.fgMuted}; }
+    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.input-value:disabled) { opacity: 1; }
+  `,
     variants: {
         size: {
-            medium: `height: 32px; padding-inline: ${c.space["2.5"]}; border-radius: ${c.radius.md};`,
-            large: `height: 36px; padding-inline: ${c.space["3"]}; border-radius: 10px;`,
+            medium: `height: 32px; border-radius: ${c.radius.md}; & .input-value { padding-inline: ${c.space["2.5"]}; }`,
+            large: `height: 36px; border-radius: 10px; & .input-value { padding-inline: ${c.space["3"]}; }`,
         },
         invalid: {
-            true: `box-shadow: inset 0 0 0 1px ${c.bgDanger}; &:focus { box-shadow: inset 0 0 0 1px ${c.bgDanger}; }`,
+            // critical outranks focus: a field that is wrong stays visibly wrong
+            // while you are correcting it, which is seed's behaviour too
+            true: `&::after { border-color: ${c.bgDanger}; } &:focus-within::after { border-color: ${c.bgDanger}; }`,
             false: ``,
         },
     },

package/dist/esm/components/linechart/linechart.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 { linechartRecipe } from "./linechart.recipe.js";
 function niceNum(raw) {
     if (raw <= 0)
@@ -13,11 +14,20 @@ function niceNum(raw) {
  * A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
  * gridlines; dots are HTML so they stay round. `role="img"` with a summary.
  */
-export function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dots = true, format = (n) => n.toLocaleString(), xAxisTitle, "aria-label": ariaLabel, className, }) {
+export function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dots = true, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {
     const rawMax = Math.max(1, ...data.map((d) => d.value));
     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"]})`;
     // points in a 0..100 viewBox (y inverted: 0 at top)
     const n = data.length;
     const pts = data.map((d, i) => {
@@ -31,7 +41,10 @@ export function LineChart({ data, height = 240, max, ticks = 5, color, area = tr
         : "";
     const summary = ariaLabel ??
         `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
-    return (_jsxs("div", { className: linechartRecipe({ className }), style: { height }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "linechart-body", children: [_jsx("div", { className: "linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "linechart-area", d: areaPath }), _jsx("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
+    return (_jsxs("div", { className: linechartRecipe({ className }), ...rest, style: {
+            height,
+            "--linechart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "linechart-body", children: [_jsx("div", { className: "linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "linechart-area", d: areaPath }), _jsx("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
                                 pts.map((p, i) => (_jsx("span", { className: "linechart-dot-html", style: {
                                         left: `${p.x}%`,
                                         bottom: `${p.frac * 100}%`,

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

@@ -6,19 +6,24 @@ import { contract as c } from "../../tokens/index.js";
 // its box (non-scaling stroke keeps the line crisp); axes are HTML.
 const config = defineRecipe({
     name: "linechart",
-    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    // --linechart-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 `linechartRecipe` is used bare).
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans}; --linechart-yaxis-width: 34px;
     & .linechart-body { display: flex; flex: 1; min-height: 0; }
-    & .linechart-yaxis { position: relative; flex-shrink: 0; width: 34px; }
-    & .linechart-ytick { position: absolute; right: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .linechart-yaxis { position: relative; flex-shrink: 0; width: var(--linechart-yaxis-width); }
+    & .linechart-ytick { position: absolute; inset-inline-end: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
     & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${c.borderDefault}; }
     & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.borderSubtle}; pointer-events: none; }
     & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
     & .linechart-area { fill: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); stroke: none; }
     & .linechart-line { fill: none; stroke: ${c.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
     & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${c.radius.full}; background: ${c.bgSurface}; border: 2px solid ${c.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
-    & .linechart-xaxis { display: flex; margin-top: ${c.space["1.5"]}; padding-left: 34px; }
+    & .linechart-xaxis { display: flex; margin-top: ${c.space["1.5"]}; padding-inline-start: var(--linechart-yaxis-width); }
     & .linechart-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}; }
-    & .linechart-axis-title { margin-top: ${c.space["1"]}; padding-left: 34px; text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
+    & .linechart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--linechart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -1,2 +1,3 @@
 export { Menu, MenuCheckboxItem, MenuItem, MenuLabel, MenuSeparator, } from "./menu.js";
 export { menuRecipe } from "./menu.recipe.js";
+export { MENU_ITEM_SELECTOR, useMenuKeyboard, } from "./menu-keyboard.js";

package/dist/esm/components/menu/menu-keyboard.js

@@ -0,0 +1,80 @@
+import * as React from "react";
+/**
+ * The elements a `role="menu"` may own, minus the disabled ones. Kept here so
+ * every menu surface in crisp agrees on what counts as an item.
+ */
+export const MENU_ITEM_SELECTOR = [
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+]
+    // a disabled item is not focusable, so leaving it in the list would strand
+    // the roving focus on it — both spellings have to go
+    .map((role) => `${role}:not([data-disabled]):not(:disabled)`)
+    .join(",");
+/**
+ * The WAI-ARIA menu keyboard model: focus the first item on open, ↑/↓ to move
+ * (wrapping), Home/End to jump, printable characters for typeahead, Esc to
+ * close, Tab to dismiss. Returns the `onKeyDown` to put on the menu element.
+ *
+ * Extracted from `Menu` so the table surfaces, which build their own popovers
+ * against measured positions, get the identical model instead of a second
+ * partial one.
+ */
+export function useMenuKeyboard({ open, close, dismiss = close, contentRef, }) {
+    const typeahead = React.useRef("");
+    const typeaheadTimer = React.useRef(undefined);
+    const items = React.useCallback(() => Array.from(contentRef.current?.querySelectorAll(MENU_ITEM_SELECTOR) ??
+        []), [contentRef]);
+    // focus the first item when the menu opens
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const id = requestAnimationFrame(() => contentRef.current
+            ?.querySelector(MENU_ITEM_SELECTOR)
+            ?.focus());
+        return () => cancelAnimationFrame(id);
+    }, [open, contentRef]);
+    React.useEffect(() => () => clearTimeout(typeaheadTimer.current), []);
+    const onKeyDown = (e) => {
+        const list = items();
+        const idx = list.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            list[(idx + 1) % list.length]?.focus();
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            list[(idx - 1 + list.length) % list.length]?.focus();
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            list[0]?.focus();
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            list[list.length - 1]?.focus();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+        else if (e.key === "Tab") {
+            dismiss();
+        }
+        else if (e.key.length === 1 && /\S/.test(e.key)) {
+            // typeahead: jump to the next item starting with the typed run
+            typeahead.current += e.key.toLowerCase();
+            clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = setTimeout(() => {
+                typeahead.current = "";
+            }, 500);
+            const match = list.find((el) => (el.textContent ?? "")
+                .trim()
+                .toLowerCase()
+                .startsWith(typeahead.current));
+            match?.focus();
+        }
+    };
+    return { onKeyDown, items };
+}

package/dist/esm/components/menu/menu.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import * as React from "react";
 import { menuRecipe } from "./menu.recipe.js";
+import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
-const ITEM_SELECTOR = '[role="menuitem"]:not([data-disabled]),[role="menuitemcheckbox"]:not([data-disabled]),[role="menuitemradio"]:not([data-disabled])';
 /**
  * A dropdown menu — the ⋯ / sort / filter menu surface, on Attio's measured
  * popover. Give it a `trigger` element and Menu items as children. Opens on
@@ -11,23 +11,26 @@ const ITEM_SELECTOR = '[role="menuitem"]:not([data-disabled]),[role="menuitemche
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export function Menu({ trigger, children, align = "start", className, "aria-label": ariaLabel, }) {
-    const [open, setOpen] = React.useState(false);
+export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const contentRef = React.useRef(null);
-    const typeahead = React.useRef("");
-    const typeaheadTimer = React.useRef(undefined);
     // Position the (fixed) menu against the trigger so it escapes any overflow
-    // clip; flip up / right-align when there isn't room.
-    const openMenu = () => {
+    // clip; flip up / right-align when there isn't room. Runs on every open,
+    // not just a click, so a controlled consumer gets the same placement.
+    const place = () => {
         const rect = triggerRef.current?.getBoundingClientRect();
-        if (!rect) {
-            setOpen(true);
+        if (!rect)
             return;
-        }
         const gap = 4;
         const flipUp = window.innerHeight - rect.bottom < 280;
         const style = flipUp
@@ -39,18 +42,16 @@ export function Menu({ trigger, children, align = "start", className, "aria-labe
             style.left = rect.left;
         setUp(flipUp);
         setPos(style);
-        setOpen(true);
     };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
     const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus?.();
-    }, []);
-    const items = () => Array.from(contentRef.current?.querySelectorAll(ITEM_SELECTOR) ?? []);
-    // focus the first item when the menu opens
-    React.useEffect(() => {
-        if (open)
-            requestAnimationFrame(() => contentRef.current?.querySelector(ITEM_SELECTOR)?.focus());
-    }, [open]);
+    }, [setOpen]);
     // close on outside pointer-down
     React.useEffect(() => {
         if (!open)
@@ -61,54 +62,20 @@ export function Menu({ trigger, children, align = "start", className, "aria-labe
         };
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
-    }, [open]);
-    const onContentKeyDown = (e) => {
-        const list = items();
-        const idx = list.indexOf(document.activeElement);
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            list[(idx + 1) % list.length]?.focus();
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            list[(idx - 1 + list.length) % list.length]?.focus();
-        }
-        else if (e.key === "Home") {
-            e.preventDefault();
-            list[0]?.focus();
-        }
-        else if (e.key === "End") {
-            e.preventDefault();
-            list[list.length - 1]?.focus();
-        }
-        else if (e.key === "Escape") {
-            e.preventDefault();
-            close();
-        }
-        else if (e.key === "Tab") {
-            setOpen(false);
-        }
-        else if (e.key.length === 1 && /\S/.test(e.key)) {
-            // typeahead: jump to the next item starting with the typed run
-            typeahead.current += e.key.toLowerCase();
-            clearTimeout(typeaheadTimer.current);
-            typeaheadTimer.current = setTimeout(() => {
-                typeahead.current = "";
-            }, 500);
-            const match = list.find((el) => (el.textContent ?? "")
-                .trim()
-                .toLowerCase()
-                .startsWith(typeahead.current));
-            match?.focus();
-        }
-    };
+    }, [open, setOpen]);
+    const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
+        open,
+        close,
+        dismiss: () => setOpen(false),
+        contentRef,
+    });
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         "aria-haspopup": "menu",
         "aria-expanded": open,
         onClick: (e) => {
             trigger.props.onClick?.(e);
-            open ? setOpen(false) : openMenu();
+            setOpen(!open);
         },
     });
     return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "menu-content", role: "menu", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));

package/dist/esm/components/menu/menu.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 dropdown menu — same popover surface Attio uses for its ⋯ / sort / filter
 // menus (measured from the app's listboxes): radius 12, 4px padding, a layered
 // soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
@@ -15,7 +15,7 @@ const config = defineRecipe({
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; 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};
+      box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .menu-content[data-align="end"] { transform-origin: top right; }
@@ -24,9 +24,9 @@ const config = defineRecipe({
     & .menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
     & .menu-item {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: 32px; flex-shrink: 0;
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; flex-shrink: 0;
       margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md};
-      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; white-space: nowrap;
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
     & .menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .menu-item:focus { outline: none; }
@@ -36,7 +36,7 @@ const config = defineRecipe({
     & .menu-item--danger svg { color: ${c.bgDanger}; }
     & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
     & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .menu-item-shortcut { flex-shrink: 0; margin-left: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
+    & .menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
     & .menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
     & .menu-item-check--placeholder { width: 15px; }
 

package/dist/esm/components/multiselect/multiselect.js

@@ -27,7 +27,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export function MultiSelect({ options, value, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, }) {
+export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
     const [open, setOpen] = React.useState(false);
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
@@ -36,6 +36,8 @@ export function MultiSelect({ options, value, onValueChange, placeholder = "Sele
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const searchRef = React.useRef(null);
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);
+    const value = valueProp ?? internalValue;
     const selectedSet = React.useMemo(() => new Set(value), [value]);
     const selectedOptions = options.filter((o) => selectedSet.has(o.value));
     const q = query.trim().toLowerCase();
@@ -68,7 +70,12 @@ export function MultiSelect({ options, value, onValueChange, placeholder = "Sele
         triggerRef.current?.focus({ preventScroll: true });
     };
     const toggle = (v) => {
-        onValueChange(selectedSet.has(v) ? value.filter((x) => x !== v) : [...value, v]);
+        const next = selectedSet.has(v)
+            ? value.filter((x) => x !== v)
+            : [...value, v];
+        if (valueProp === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
     };
     const onNavKeys = (e) => {
         if (e.key === "ArrowDown") {
@@ -100,7 +107,7 @@ export function MultiSelect({ options, value, onValueChange, placeholder = "Sele
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/esm/components/multiselect/multiselect.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 multi-select / tag editor — measured from Attio's cell tag picker: an
 // outlined trigger showing the selected values as coloured chips, opening a
 // popover with a search field over rows of "[coloured chip] … [checkbox]" that
@@ -12,10 +12,10 @@ const config = defineRecipe({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
     & .multiselect-trigger {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; min-width: 0; min-height: 32px;
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; min-width: 0; min-height: ${c.size.menuRow};
       margin: 0; padding: ${c.space["0.5"]} ${c.space["1.5"]} ${c.space["0.5"]} ${c.space["2"]};
       border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
-      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; text-align: left;
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; text-align: start;
       transition: background-color .12s ease, box-shadow .12s ease;
     }
     & .multiselect-trigger:hover { background: ${c.bgRaised}; }
@@ -30,7 +30,7 @@ const config = defineRecipe({
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 300px; overflow-y: auto; 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};
+      box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     & .multiselect-listbox[data-up] { transform-origin: bottom left; }
@@ -40,16 +40,16 @@ const config = defineRecipe({
     & .multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     & .multiselect-search input::placeholder { color: ${c.fgMuted}; }
     & .multiselect-option {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 32px; flex-shrink: 0;
-      padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; cursor: pointer; text-align: left;
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
+      padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; cursor: pointer; text-align: start;
     }
     & .multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
     & .multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
-    & .multiselect-check { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
+    & .multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
     & .multiselect-option[aria-selected="true"] .multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
     & .multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 
-    & .recordstable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 ${c.space["1"]}; border-radius: 7px; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
     & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
     & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
     & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }

package/dist/esm/components/popover/popover.js

@@ -6,8 +6,8 @@ import { popoverRecipe } from "./popover.recipe.js";
  * content. Opens below the trigger (flipping up when there's no room),
  * closes on outside pointer-down and Escape. Controlled or self-managed.
  */
-export function Popover({ trigger, children, align = "start", open: openProp, onOpenChange, "aria-label": ariaLabel, className, }) {
-    const [internalOpen, setInternalOpen] = React.useState(false);
+export function Popover({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, className, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
     const open = openProp ?? internalOpen;
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);

package/dist/esm/components/popover/popover.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 generic anchored popover — the same measured surface as Menu / Select
 // (radius 12, 4px padding, layered soft shadow, inset border), but holding
 // arbitrary content. Rendered inside a display:contents root and lifted out of
@@ -7,7 +7,7 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "popover",
     base: `display: contents; font-family: ${c.font.sans};
-    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; 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); } }
     & .popover-content[data-align="end"] { transform-origin: top right; }
     & .popover-content[data-up] { transform-origin: bottom left; }`,
     variants: {},

package/dist/esm/components/progress/progress.js

@@ -5,7 +5,7 @@ import { progressRecipe } from "./progress.recipe.js";
  * `segments` is set (the "Getting started 3/6" pattern). Reports its state via
  * `role="progressbar"` and the ARIA value attributes.
  */
-export function Progress({ value, max = 100, segments, "aria-label": ariaLabel, className, }) {
+export function Progress({ value, max = 100, segments, "aria-label": ariaLabel, className, ...rest }) {
     const pct = Math.max(0, Math.min(100, (value / max) * 100));
     const aria = {
         role: "progressbar",
@@ -16,8 +16,8 @@ export function Progress({ value, max = 100, segments, "aria-label": ariaLabel,
     };
     if (segments && segments > 0) {
         const filled = Math.round((pct / 100) * segments);
-        return (_jsx("div", { ...aria, className: progressRecipe({ className }), "data-segmented": "", children: Array.from({ length: segments }, (_, i) => (_jsx("span", { className: "progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));
+        return (_jsx("div", { ...aria, className: progressRecipe({ className }), ...rest, "data-segmented": "", children: Array.from({ length: segments }, (_, i) => (_jsx("span", { className: "progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));
     }
-    return (_jsx("div", { ...aria, className: progressRecipe({ className }), children: _jsx("span", { className: "progress-fill", style: { width: `${pct}%` } }) }));
+    return (_jsx("div", { ...aria, className: progressRecipe({ className }), ...rest, children: _jsx("span", { className: "progress-fill", style: { width: `${pct}%` } }) }));
 }
 Progress.displayName = "Progress";