@crisp-ui-kit/crisp 0.45.0 → 0.46.0

package/dist/cjs/components/menu/menu.js

@@ -126,6 +126,24 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (`useMenuKeyboard`'s onKeyDown, below) only fires once
+    // focus is actually inside `.crisp-menu-content` -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (menu-keyboard.ts), not
+    // synchronously. An Escape pressed before that frame paints reaches
+    // whatever still has focus (the trigger button), which is outside the
+    // content div's subtree, so `onContentKeyDown` never sees it and nothing
+    // closes. This listener doesn't depend on focus location, so it closes
+    // regardless -- the same pattern `ContextMenu` already uses for the
+    // identical reason (its own comment: "Escape is handled twice on
+    // purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
         open,
         close,

package/dist/cjs/components/multiselect/multiselect.js

@@ -125,10 +125,10 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
@@ -182,6 +182,18 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back) -- see Select's
+    // matching comment: the listbox's own Escape handling depends on focus
+    // already being inside it, which a requestAnimationFrame moves there
+    // asynchronously after open, so an Escape pressed before that frame
+    // paints is missed entirely. This closes regardless of focus location.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ invalid, className }), ...rest, children: [name &&
                 (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)

package/dist/cjs/components/popover/popover.js

@@ -109,6 +109,23 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (its `onKeyDown`, below) only fires when focus is
+    // already inside `.crisp-popover-content` -- but Popover, unlike Menu,
+    // never moves focus there on open at all, so that handler only ever fires
+    // if a consumer's own content happens to contain something already
+    // focused. In the common case (trigger stays focused after the click that
+    // opened it) Escape reached nothing and did nothing. This listener
+    // doesn't depend on focus location, so it closes regardless -- the same
+    // pattern `ContextMenu` already uses for the identical reason (its own
+    // comment: "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,

package/dist/cjs/components/select/select.js

@@ -117,10 +117,10 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const pick = (opt) => {
         if (!opt || opt.disabled)
             return;
@@ -177,6 +177,24 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back): the listbox's own
+    // Escape handling lives on `useListboxKeyboard`'s `onKeyDown`, which only
+    // fires once focus is actually inside the listbox -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (below), not
+    // synchronously. Escape pressed before that frame paints reaches whatever
+    // still has focus (the trigger, or the search input before ITS OWN focus
+    // lands), which is outside the listbox's own subtree, so its handler never
+    // sees the keydown at all and nothing closes. This listener doesn't depend
+    // on focus location, so it closes regardless -- the same pattern
+    // `ContextMenu` already uses for the identical reason (its own comment:
+    // "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden

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

@@ -4,18 +4,25 @@ exports.tabsRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
-// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
-// with a 2px ink underline that slides along the baseline; inactive tabs are
-// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
-// and an optional count badge. Measured from the live app: 28px pills, 4/8
-// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// The list itself is the 36px bar — the 28px tab row plus the 8px the
+// baseline needs, reserved as bottom padding so it's real box height and not
+// paint that trailing content can sit on top of. The bar carries 12px inline
+// padding too, and draws its own full-width `::after` baseline in
+// borderSubtle at its bottom edge, spanning that padding. The active tab is
+// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
+// underline that sits on the baseline (painted above it) and slides along it;
+// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// a 16px leading icon and an optional count badge. Measured from the live
+// app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
+// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
 const config = (0, core_1.defineRecipe)({
     name: "tabs",
     base: `
     display: flex; flex-direction: column; min-height: 0; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; box-sizing: content-box; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${tokens_1.contract.borderSubtle}; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -24,7 +31,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${tokens_1.contract.space["2"]}); left: 0; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

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

@@ -86,6 +86,24 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (`useMenuKeyboard`'s onKeyDown, below) only fires once
+    // focus is actually inside `.crisp-menu-content` -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (menu-keyboard.ts), not
+    // synchronously. An Escape pressed before that frame paints reaches
+    // whatever still has focus (the trigger button), which is outside the
+    // content div's subtree, so `onContentKeyDown` never sees it and nothing
+    // closes. This listener doesn't depend on focus location, so it closes
+    // regardless -- the same pattern `ContextMenu` already uses for the
+    // identical reason (its own comment: "Escape is handled twice on
+    // purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
         open,
         close,

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

@@ -89,10 +89,10 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
@@ -146,6 +146,18 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back) -- see Select's
+    // matching comment: the listbox's own Escape handling depends on focus
+    // already being inside it, which a requestAnimationFrame moves there
+    // asynchronously after open, so an Escape pressed before that frame
+    // paints is missed entirely. This closes regardless of focus location.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ invalid, className }), ...rest, children: [name &&
                 (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)

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

@@ -73,6 +73,23 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (its `onKeyDown`, below) only fires when focus is
+    // already inside `.crisp-popover-content` -- but Popover, unlike Menu,
+    // never moves focus there on open at all, so that handler only ever fires
+    // if a consumer's own content happens to contain something already
+    // focused. In the common case (trigger stays focused after the click that
+    // opened it) Escape reached nothing and did nothing. This listener
+    // doesn't depend on focus location, so it closes regardless -- the same
+    // pattern `ContextMenu` already uses for the identical reason (its own
+    // comment: "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,

package/dist/esm/components/select/select.js

@@ -81,10 +81,10 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const pick = (opt) => {
         if (!opt || opt.disabled)
             return;
@@ -141,6 +141,24 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back): the listbox's own
+    // Escape handling lives on `useListboxKeyboard`'s `onKeyDown`, which only
+    // fires once focus is actually inside the listbox -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (below), not
+    // synchronously. Escape pressed before that frame paints reaches whatever
+    // still has focus (the trigger, or the search input before ITS OWN focus
+    // lands), which is outside the listbox's own subtree, so its handler never
+    // sees the keydown at all and nothing closes. This listener doesn't depend
+    // on focus location, so it closes regardless -- the same pattern
+    // `ContextMenu` already uses for the identical reason (its own comment:
+    // "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden

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

@@ -1,18 +1,25 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
-// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
-// with a 2px ink underline that slides along the baseline; inactive tabs are
-// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
-// and an optional count badge. Measured from the live app: 28px pills, 4/8
-// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// The list itself is the 36px bar — the 28px tab row plus the 8px the
+// baseline needs, reserved as bottom padding so it's real box height and not
+// paint that trailing content can sit on top of. The bar carries 12px inline
+// padding too, and draws its own full-width `::after` baseline in
+// borderSubtle at its bottom edge, spanning that padding. The active tab is
+// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
+// underline that sits on the baseline (painted above it) and slides along it;
+// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// a 16px leading icon and an optional count badge. Measured from the live
+// app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
+// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
 const config = defineRecipe({
     name: "tabs",
     base: `
     display: flex; flex-direction: column; min-height: 0; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; box-sizing: content-box; height: ${c.size.row}; padding: 0 ${c.space["3"]} ${c.space["2"]}; flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${c.borderSubtle}; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -21,7 +28,7 @@ const config = defineRecipe({
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${c.space["2"]}); left: 0; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

package/dist/styles.css

@@ -1625,7 +1625,8 @@
 
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -1634,7 +1635,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/styles.layered.css

@@ -1626,7 +1626,8 @@
 
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -1635,7 +1636,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/tabs.css

@@ -1,6 +1,7 @@
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -9,7 +10,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/tabs.layered.css

@@ -1,7 +1,8 @@
 @layer crisp-components {
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -10,7 +11,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/package.json

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