@stackone/malachite 2.41.3 → 2.42.1

package/COMPONENTS.md

@@ -60,7 +60,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Breadcrumbs`** — Breadcrumb trail with caret separators, an optional back button (shown only when there is more than one crumb AND the parent — the second-to-last — carries a `url` to target) and a right-aligned `actions` row. A lone crumb marked `isRoot` switches to title mode: plain emphasised text, no trail chrome, but the `actions` row still renders. Renders as a `nav`/`ol` with `aria-current="page"` on the last crumb. Pass `renderLink` to route crumbs through the app's own router instead of a plain `<a>`. Used by `PageLayout`, but standalone too. _Key props:_ `links[]` (`name`, `url`, `isRoot`), `actions[]`, `renderLink`, `className`, `style`.
 - **`ActionMenu`** — Dropdown menu of actions (kebab/overflow style). The trigger is an icon-only `Button` by default, so `size` draws exactly the square a `Button` of that size draws beside it: `xsmall` is Figma's 20px "Button Element - Square (X-Small)", `small` the 28px rung above it. Both squares are fixed rather than read off the `controlHeights` tokens, so re-theming those does not resize the trigger. A supplied `triggerIcon` is held to the tier's glyph size — 11px at `xsmall`, 16px at `small`. At 20px the `xsmall` trigger meets WCAG 2.5.8 through the *Spacing* exception rather than the 24px minimum, so keep at least 4px between adjacent triggers. `showLabel` draws `label` beside the icon instead of leaving it to the accessible name — for a menu that is the point of its corner rather than an overflow for a row that already says what it acts on — and `variant` puts the trigger on any `Button` variant, so a menu handing work to the assistant can wear the assistant ground rather than the overflow-kebab outline. An item's `icon` leads its label: every caller's names the action itself — copy, open, delete — and an icon that is part of an item's identity belongs where the eye starts rather than right-aligned, where it reads as a status column. The menu is Figma's `Dropdown Component - Options List`: a fixed sized to its widest item between a 180px floor and the 280px Figma draws, by default under the trigger's right edge, 14px below it, flipping above or clamping sideways when the viewport has no room, rounding at the library's 12px and padding wider (8px) than the menu a `Dropdown` opens. Items read in the primary text colour, or the secondary one with `tone="muted"` (e.g. a sidebar's menus); destructive ones in red; `danger: 'hover'` keeps an item in its normal colour and turns it destructive (red text on a light red ground) only on hover or keyboard focus, for an action like signing out. A ceiling rather than a flat width: taken literally it gave a menu of four short verbs 130px of air and made every kebab in an app the same width whatever it held. `minWidth` only raises it above that ceiling, so it is the one way to go past 280px, and a label too long for the box truncates rather than wrapping. _Key props:_ `ActionMenuItem[]`, `size`, `label`, `triggerIcon`, `minWidth`, `showLabel`, `variant`, `tone` (`default` | `muted`), `trigger` (your own control in place of the kebab, cloned with the menu's ref and aria state), `placement` (`bottom-end` default | `bottom-start` | `right-start` | `top-start` | `top-center`), `offset` (`small` 8px | `medium` 12px | `large` 14px; applies to every placement; without it the default `bottom-end` keeps the options menu's 14px and the others use 8px). An item's `tag` (e.g. an "Early access" `Tag`) follows its label in a lazily loaded shadow host of its own, since the menu renders into `document.body`, and joins its accessible name; `current: true` marks the item for the page the user is on (`aria-current="page"` and the selected row paint; a `danger` item keeps its red text). An item with `type: 'text'` is context rather than an action (an account's email above its actions): secondary text the arrow keys skip. Opened from the keyboard, focus lands on the first item; Up/Down/Home/End move through enabled items, Tab closes the menu and moves on as usual; Escape or a picked item returns focus to the trigger.
 - **`NavItem`** — A row in an app's side navigation. Idle rows read secondary and take the list hover; the `active` row wears the accent tint and sets `aria-current="page"` on a link. `collapsed` shrinks it to a 36px icon tile whose label becomes the accessible name and a right-hand tooltip, with any `badge` pinned to the tile's corner. `variant="subitem"` indents a child row behind a dot instead of an icon; `disclosure` makes a group header button with `aria-expanded` and a rotating chevron, and `hasActiveChild` colours its text while a child is current. Renders an `<a>` with `href`, the element passed with `asChild` (a router `Link`), or a `<button>`, and forwards its ref and extra attributes so it can be a `Popover` or `ActionMenu` trigger. _Key props:_ `label`, `icon`, `active`, `hasActiveChild`, `collapsed`, `variant` (`item` | `subitem`), `danger`, `trailing`, `badge`, `disclosure` (`expanded` | `collapsed`), `tooltip`, `accessibleLabel` (overrides the accessible name; collapsed it defaults to the tooltip text plus `badgeLabel`), `href`, `target`, `rel`, `onClick`, `asChild` + `children`, `className`, `size` (`medium` | `small`, the tighter row for lists inside a popover), `tag` (beside the label, e.g. early access), `badgeLabel` (read in place of the badge and added to the collapsed name). A passed `aria-expanded` (e.g. from a `Popover`) wins over `disclosure`, and a button row forwards a passed `aria-current`.
-- **`Sidebar`** — An app's left navigation shell, pinned to the viewport's left edge: 260px wide, 60px `collapsed`, on the sunken page background. Composed from `Sidebar.Header` (a 56px band for `Sidebar.Switcher`, the logo + workspace + parent trigger), `Sidebar.Body` (the part that scrolls), `Sidebar.Notices`, `Sidebar.Search`, `Sidebar.Section` (rows of `NavItem`s at the gutter), `Sidebar.Group` + `Sidebar.GroupItems` (a disclosure header and its sub-items), `Sidebar.Divider`, `Sidebar.Usage` (a `UsageCard` placed at the sidebar's gutter) and `Sidebar.Footer` holding `Sidebar.Account`. Popovers opened from it (with `padding="none"`) wrap their body in `Sidebar.Panel`, sized so the popover comes to `SIDEBAR_POPOVER_WIDTH_PX`, and build it from the `Popover` parts. `onToggleCollapse` adds the edge toggle, shown in CSS while the pointer is over the sidebar or a keyboard focus is inside it. Notices, the divider and the usage card hide while collapsed. _Key props:_ `collapsed`, `onToggleCollapse`, `expandLabel`, `collapseLabel`, `aria-label`; `Sidebar.Switcher`: `logo`, `title`, `subtitle` + button attributes; `Sidebar.Account`: `avatar` or `initials` (a small chip when there is no photo), `name`, `tooltip` (the tooltip on the collapsed rail, `name` by default; pass a node to wrap it, e.g. to keep it out of session recordings) + button attributes; `Sidebar.Usage`: the `UsageCard` props; `Sidebar.Notices`: `aria-label` (required). `useSidebarCollapsed()` reads the state from inside; `SIDEBAR_WIDTH_PX` gives the page its offset beside the sidebar.
+- **`Sidebar`** — An app's left navigation shell, pinned to the viewport's left edge: 260px wide, 60px `collapsed`, on the sunken page background. Composed from `Sidebar.Header` (a 56px band for `Sidebar.Switcher`, the logo + workspace + parent trigger), `Sidebar.Body` (the part that scrolls), `Sidebar.Notices`, `Sidebar.Search`, `Sidebar.Section` (rows of `NavItem`s at the gutter), `Sidebar.Group` + `Sidebar.GroupItems` (a disclosure header and its sub-items), `Sidebar.Divider`, `Sidebar.Usage` (a `UsageCard` placed at the sidebar's gutter) and `Sidebar.Footer` holding `Sidebar.Account`. Popovers opened from it (with `padding="none"`) wrap their body in `Sidebar.Panel`, sized so the popover comes to `SIDEBAR_POPOVER_WIDTH_PX`, and build it from the `Popover` parts. `onToggleCollapse` adds the edge toggle, shown in CSS while the pointer is over the sidebar or a keyboard focus is inside it. Notices, the divider and the usage card hide while collapsed. Render it inside `<MalachiteContext layer="sidebar">`, or the page paints over the edge toggle. _Key props:_ `collapsed`, `onToggleCollapse`, `expandLabel`, `collapseLabel`, `aria-label`; `Sidebar.Switcher`: `logo`, `title`, `subtitle` + button attributes; `Sidebar.Account`: `avatar` or `initials` (a small chip when there is no photo), `name`, `tooltip` (the tooltip on the collapsed rail, `name` by default; pass a node to wrap it, e.g. to keep it out of session recordings) + button attributes; `Sidebar.Usage`: the `UsageCard` props; `Sidebar.Notices`: `aria-label` (required). `useSidebarCollapsed()` reads the state from inside; `SIDEBAR_WIDTH_PX` gives the page its offset beside the sidebar.
 - **`SearchTrigger`** — A button drawn as a filled search field, for opening a command palette or search dialog from app chrome such as a sidebar. It is not an input — typing happens in what it opens. `shortcut` draws flat `<kbd>` chips at the end (not `Keycap`, whose raised shadow reads as a second button inside a filled field), kept out of the accessible name; `iconOnly` makes a 36px icon tile matching a collapsed `NavItem`, named by `label`. _Key props:_ `label` (default `Search`), `shortcut` (`ReactNode[]`), `iconOnly`, `aria-label`, `className`, plus native button attributes (`onClick`, `aria-haspopup`, `aria-expanded`, `aria-keyshortcuts`).
 - **`FooterNav`** — Footer navigation bar of links. _Key props:_ `FooterNavLink[]`.
 - **`FooterLinks`** — Inline list of footer links (e.g. terms, privacy, support).
@@ -116,7 +116,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 
 ## Theming & utility
 
-- **`MalachiteContext`** — Wraps a subtree in the shadow root + theme context. Wrap groups of components in this.
+- **`MalachiteContext`** — Wraps a subtree in the shadow root + theme context. Wrap groups of components in this. _Key props:_ `className`, `fillHeight`, `layer` (`'page'` by default; `'sidebar'` lifts the host above the page for a `Sidebar`)
 - **`ThemeScope`** — Pins a subtree to a fixed theme (e.g. a dark island in a light app) via its own shadow root, since theme tokens are scoped per shadow root.
 - **`CustomIcons`** — Namespace of all built-in icons (`CustomIcons.<Name>Icon`), coloured via `currentColor`.
 - **`ShadowEscape`** — Renders children into the document (escaping the shadow root) for portals/overlays.

package/dist/components/MalachiteContext.js

@@ -1,18 +1,23 @@
 import { jsx as t } from "react/jsx-runtime";
-import { ShadowRootWrapper as h } from "../ShadowRootWrapper.js";
-const i = ({
-  children: r,
-  className: e = "",
-  fillHeight: o = !1
+import { ShadowRootWrapper as i } from "../ShadowRootWrapper.js";
+import { SIDEBAR_Z_INDEX as p } from "./sidebarContext.js";
+const s = {
+  page: {},
+  sidebar: { position: "relative", zIndex: p }
+}, m = ({
+  children: e,
+  className: r = "",
+  fillHeight: o = !1,
+  layer: a = "page"
 }) => /* @__PURE__ */ t(
-  h,
+  i,
   {
     fillHeight: o,
-    hostStyle: o ? { height: "100%" } : void 0,
-    children: /* @__PURE__ */ t("div", { className: e, style: o ? { height: "100%" } : void 0, children: r })
+    hostStyle: { ...s[a], ...o ? { height: "100%" } : {} },
+    children: /* @__PURE__ */ t("div", { className: r, style: o ? { height: "100%" } : void 0, children: e })
   }
 );
 export {
-  i as MalachiteContext
+  m as MalachiteContext
 };
 //# sourceMappingURL=MalachiteContext.js.map

package/dist/components/MalachiteContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MalachiteContext.js","sources":["../../src/components/MalachiteContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\n\ninterface MalachiteContextProps {\n    children: React.ReactNode;\n    className?: string;\n    /**\n     * Stretches the shadow host, and every plain div between it and `children`, to 100% of\n     * the height available from this component's own parent. Without it, the host sizes to\n     * its content: a percentage height set further down (inside `children`) has nothing\n     * non-`auto` to resolve against, and a chain of plain `<div>`s does not propagate a\n     * parent's height to its children on its own. Off by default: every existing consumer\n     * relies on the host hugging its content, and turning this on for all of them would\n     * change how much space they take up.\n     */\n    fillHeight?: boolean;\n}\n\n/**\n * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.\n * Use this to wrap groups of Malachite components instead of each component managing its own Shadow DOM.\n *\n * @example\n * <MalachiteContext>\n *   <Button variant=\"filled\">Click me</Button>\n *   <Card>\n *     <CardContent>Hello world</CardContent>\n *   </Card>\n * </MalachiteContext>\n */\nexport const MalachiteContext: React.FC<MalachiteContextProps> = ({\n    children,\n    className = '',\n    fillHeight = false,\n}) => {\n    return (\n        <ShadowRootWrapper\n            fillHeight={fillHeight}\n            hostStyle={fillHeight ? { height: '100%' } : undefined}\n        >\n            <div className={className} style={fillHeight ? { height: '100%' } : undefined}>\n                {children}\n            </div>\n        </ShadowRootWrapper>\n    );\n};\n\nexport default MalachiteContext;\n"],"names":["MalachiteContext","children","className","fillHeight","jsx","ShadowRootWrapper"],"mappings":";;AA8BO,MAAMA,IAAoD,CAAC;AAAA,EAC9D,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AACjB,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,YAAAF;AAAA,IACA,WAAWA,IAAa,EAAE,QAAQ,WAAW;AAAA,IAE7C,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAAF,GAAsB,OAAOC,IAAa,EAAE,QAAQ,WAAW,QAC/D,UAAAF,EAAA,CACL;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"MalachiteContext.js","sources":["../../src/components/MalachiteContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport { SIDEBAR_Z_INDEX } from './sidebarContext';\n\ntype MalachiteLayer = 'page' | 'sidebar';\n\nconst LAYER_HOST_STYLE: Record<MalachiteLayer, React.CSSProperties> = {\n    page: {},\n    sidebar: { position: 'relative', zIndex: SIDEBAR_Z_INDEX },\n};\n\ninterface MalachiteContextProps {\n    children: React.ReactNode;\n    className?: string;\n    /**\n     * Stretches the shadow host, and every plain div between it and `children`, to 100% of\n     * the height available from this component's own parent. Without it, the host sizes to\n     * its content: a percentage height set further down (inside `children`) has nothing\n     * non-`auto` to resolve against, and a chain of plain `<div>`s does not propagate a\n     * parent's height to its children on its own. Off by default: every existing consumer\n     * relies on the host hugging its content, and turning this on for all of them would\n     * change how much space they take up.\n     */\n    fillHeight?: boolean;\n    /**\n     * Where the shadow host sits in the page's stacking order. The shadow tree is isolated, so\n     * a z-index inside it never reaches the page: wrap a `Sidebar` in `layer=\"sidebar\"`, or the\n     * page paints over its edge toggle and anything else that overhangs it.\n     */\n    layer?: MalachiteLayer;\n}\n\n/**\n * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.\n * Use this to wrap groups of Malachite components instead of each component managing its own Shadow DOM.\n *\n * @example\n * <MalachiteContext>\n *   <Button variant=\"filled\">Click me</Button>\n *   <Card>\n *     <CardContent>Hello world</CardContent>\n *   </Card>\n * </MalachiteContext>\n */\nexport const MalachiteContext: React.FC<MalachiteContextProps> = ({\n    children,\n    className = '',\n    fillHeight = false,\n    layer = 'page',\n}) => {\n    return (\n        <ShadowRootWrapper\n            fillHeight={fillHeight}\n            hostStyle={{ ...LAYER_HOST_STYLE[layer], ...(fillHeight ? { height: '100%' } : {}) }}\n        >\n            <div className={className} style={fillHeight ? { height: '100%' } : undefined}>\n                {children}\n            </div>\n        </ShadowRootWrapper>\n    );\n};\n\nexport default MalachiteContext;\n"],"names":["LAYER_HOST_STYLE","SIDEBAR_Z_INDEX","MalachiteContext","children","className","fillHeight","layer","jsx","ShadowRootWrapper"],"mappings":";;;AAMA,MAAMA,IAAgE;AAAA,EAClE,MAAM,CAAA;AAAA,EACN,SAAS,EAAE,UAAU,YAAY,QAAQC,EAAA;AAC7C,GAmCaC,IAAoD,CAAC;AAAA,EAC9D,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AACZ,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,YAAAH;AAAA,IACA,WAAW,EAAE,GAAGL,EAAiBM,CAAK,GAAG,GAAID,IAAa,EAAE,QAAQ,OAAA,IAAW,GAAC;AAAA,IAEhF,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAAH,GAAsB,OAAOC,IAAa,EAAE,QAAQ,WAAW,QAC/D,UAAAF,EAAA,CACL;AAAA,EAAA;AAAA;"}

package/dist/components/SelectableCard.js

@@ -1,28 +1,28 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useRef as Ie, useId as ve } from "react";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useRef as ve, useId as Se } from "react";
 import { Button as ye } from "./Button.js";
-import Se from "./CustomIcons/DismissIcon.js";
+import Ae from "./CustomIcons/DismissIcon.js";
 import Ne from "./CustomIcons/PinIcon.js";
-import { Tag as Ae } from "./Tag.js";
+import { Tag as Le } from "./Tag.js";
 import Ce from "./Tooltip.js";
 import Q from "./TruncatedTooltip.js";
 import p from "./Typography/Text.js";
-import { useCardStripSlot as Le } from "./cardStripSlot.js";
-import { FOCUS_RING_WITHIN as Oe } from "./focusRing.js";
-import { useAdoptedStyleSheet as De } from "./useAdoptedStyleSheet.js";
-const F = 240, ee = `${F}px`, te = "116px", le = "var(--malachite-radius-xxl, 14px)", O = `${le} ${le} 0 0`, b = "var(--malachite-selectable-card-muted-foreground, #7b7b7b)", Pe = "var(--malachite-text-secondary, #7b7b7b)", de = "var(--malachite-selectable-card-accent, #047b43)", ke = "var(--malachite-selectable-card-selected-tint, #e7f8f1)", Be = "var(--malachite-selectable-card-selected-border, #047b43)", ae = 0.7, Fe = "var(--malachite-selectable-card-library-selected-tint, #f1f1f1)", we = "var(--malachite-selectable-card-library-selected-border, #bbbbbb)", pe = "var(--malachite-selectable-card-pending-foreground, #96580a)", he = "var(--malachite-selectable-card-editing-tint, #f9f2e9)", se = "var(--malachite-selectable-card-selected-surface-end, #ffffff)", Ue = "var(--malachite-selectable-card-background, #f1f1f1)", Ye = "1px solid var(--malachite-selectable-card-border, #dddddd)", ze = "var(--malachite-selectable-card-hover-background, #e8e8e8)", Ge = 14, s = Ge, E = 2, fe = 116, We = 14, me = 2, Tt = s - E / 2, x = F + s * 2, T = fe + me + E, He = (l) => {
-  const t = E / 2, a = s + t, c = s + F - t, i = t, r = We - t;
+import { useCardStripSlot as Oe } from "./cardStripSlot.js";
+import { FOCUS_RING_WITHIN as De } from "./focusRing.js";
+import { useAdoptedStyleSheet as Pe } from "./useAdoptedStyleSheet.js";
+const F = 240, ee = `${F}px`, te = "116px", ae = "var(--malachite-radius-xxl, 14px)", O = `${ae} ${ae} 0 0`, b = "var(--malachite-selectable-card-muted-foreground, #7b7b7b)", ke = "var(--malachite-text-secondary, #7b7b7b)", de = "var(--malachite-selectable-card-accent, #047b43)", Be = "var(--malachite-selectable-card-selected-tint, #e7f8f1)", Fe = "var(--malachite-selectable-card-selected-border, #047b43)", le = 0.7, we = "var(--malachite-selectable-card-library-selected-tint, #f1f1f1)", Ye = "var(--malachite-selectable-card-library-selected-border, #bbbbbb)", pe = "var(--malachite-selectable-card-pending-foreground, #96580a)", he = "var(--malachite-selectable-card-editing-tint, #f9f2e9)", se = "var(--malachite-selectable-card-selected-surface-end, #ffffff)", Ue = "var(--malachite-selectable-card-background, #f1f1f1)", Ge = "1px solid var(--malachite-selectable-card-border, #dddddd)", ze = "var(--malachite-selectable-card-hover-background, #e8e8e8)", We = 14, s = We, E = 2, me = 116, He = 14, fe = 2, It = s - E / 2, x = F + s * 2, g = me + fe + E, je = (t) => {
+  const a = E / 2, l = s + a, c = s + F - a, i = a, r = He - a;
   return [
-    `M${a - s} ${l}`,
-    `A${s} ${s} 0 0 0 ${a} ${l - s}`,
-    `L${a} ${i + r}`,
-    `A${r} ${r} 0 0 1 ${a + r} ${i}`,
+    `M${l - s} ${t}`,
+    `A${s} ${s} 0 0 0 ${l} ${t - s}`,
+    `L${l} ${i + r}`,
+    `A${r} ${r} 0 0 1 ${l + r} ${i}`,
     `L${c - r} ${i}`,
     `A${r} ${r} 0 0 1 ${c} ${i + r}`,
-    `L${c} ${l - s}`,
-    `A${s} ${s} 0 0 0 ${c + s} ${l}`
+    `L${c} ${t - s}`,
+    `A${s} ${s} 0 0 0 ${c + s} ${t}`
   ].join(" ");
-}, B = He(fe + me / 2), re = `${B} Z`, I = "malachite-selectable-card-outline", n = "malachite-selectable-card", je = "malachite-selectable-card-style", f = "--malachite-selectable-card-state-outline", m = "--malachite-selectable-card-state-tint", D = {
+}, B = je(me + fe / 2), re = `${B} Z`, v = "malachite-selectable-card-outline", o = "malachite-selectable-card", Xe = "malachite-selectable-card-style", m = "--malachite-selectable-card-state-outline", f = "--malachite-selectable-card-state-tint", D = {
   "background-color": ze,
   "border-left-color": "transparent"
 }, P = {
@@ -32,41 +32,41 @@ const F = 240, ee = `${F}px`, te = "116px", le = "var(--malachite-radius-xxl, 14
     resting: P,
     hover: D,
     selected: {
-      [f]: Be,
-      [m]: ke
+      [m]: Fe,
+      [f]: Be
     }
   },
   library: {
     resting: P,
     hover: D,
     selected: {
-      [f]: we,
-      [m]: Fe
+      [m]: Ye,
+      [f]: we
     }
   },
   editing: {
     resting: P,
     hover: D,
     selected: {
-      [f]: pe,
-      [m]: he
+      [m]: pe,
+      [f]: he
     }
   }
-}, g = { color: Pe }, Xe = {
+}, I = { color: ke }, Me = {
   profile: {
-    resting: g,
-    selected: { color: de, opacity: ae }
+    resting: I,
+    selected: { color: de, opacity: le }
   },
-  library: { resting: g, selected: g },
+  library: { resting: I, selected: I },
   editing: {
-    resting: g,
-    selected: { color: pe, opacity: ae }
+    resting: I,
+    selected: { color: pe, opacity: le }
   }
-}, Me = { "border-left": Ye }, Ke = `
-.${n}[data-state='selected'] {
+}, Ke = { "border-left": Ge }, Ze = `
+.${o}[data-state='selected'] {
     z-index: 5;
 }
-.${n} > .${I} {
+.${o} > .${v} {
     position: absolute;
     left: -${s}px;
     top: 0;
@@ -74,109 +74,122 @@ const F = 240, ee = `${F}px`, te = "116px", le = "var(--malachite-radius-xxl, 14
     overflow: visible;
     pointer-events: none;
 }
-.${n} > *:not(.${I}):not([data-selectable-card-actions]) {
+.${o} > *:not(.${v}):not([data-selectable-card-actions]) {
     position: relative;
     z-index: 1;
 }
-.${n} > [data-selectable-card-actions] {
+.${o} > [data-selectable-card-actions] {
     z-index: 2;
-}`, be = (l) => Object.entries(l).map(([t, a]) => `    ${t}: ${a};`).join(`
-`), Ze = (l, t) => t === "hover" ? `.${n}[data-variant='${l}'][data-state='resting'][data-hoverable]:hover` : `.${n}[data-variant='${l}'][data-state='${t}']`, Ve = (l, t, a) => `${Ze(l, t)} {
-${be(a)}
-}`, qe = Object.keys(k).flatMap(
-  (l) => Object.keys(k[l]).map(
-    (t) => Ve(l, t, k[l][t])
+}`, be = (t) => Object.entries(t).map(([a, l]) => `    ${a}: ${l};`).join(`
+`), Ve = (t, a) => a === "hover" ? `.${o}[data-variant='${t}'][data-state='resting'][data-hoverable]:hover` : `.${o}[data-variant='${t}'][data-state='${a}']`, qe = (t, a, l) => `${Ve(t, a)} {
+${be(l)}
+}`, Je = Object.keys(k).flatMap(
+  (t) => Object.keys(k[t]).map(
+    (a) => qe(t, a, k[t][a])
   )
 ).join(`
-`), Je = `.${n}[data-pinned='false'][data-state='resting'] {
+`), Qe = `.${o}[data-pinned='false'][data-state='resting'] {
 ${be(
-  Me
+  Ke
 )}
-}`, Qe = `${Je}
-${qe}
-${Ke}`, et = {
+}`, et = `${Qe}
+${Je}
+${Ze}`, tt = {
   display: "-webkit-box",
   WebkitLineClamp: 2,
   WebkitBoxOrient: "vertical",
   overflow: "hidden",
   color: b,
   lineHeight: 1.6
-}, tt = { color: b, letterSpacing: "0.11px" }, w = "var(--malachite-selectable-card-pending-foreground, #96580a)", lt = { color: w }, at = { color: w, opacity: 0.7 }, st = 36, rt = 38, oe = {
-  color: "var(--malachite-text-primary)"
-}, ot = "inline-flex items-center justify-center [&_svg]:size-[10px]!", nt = { color: b }, ne = "Default profile", it = 16, ct = {
+}, at = { color: b, letterSpacing: "0.11px" }, w = "var(--malachite-selectable-card-pending-foreground, #96580a)", lt = { color: w }, st = { color: w, opacity: 0.7 }, rt = 36, nt = 38, ne = {
+  color: "var(--malachite-text-primary)",
+  marginLeft: -2.25
+}, ot = { transform: "translateY(-1px)" }, it = "inline-flex items-center justify-center [&_svg]:size-[10px]!", ct = { color: b }, oe = "Default profile", dt = 16, Ee = {
   color: de,
-  display: "inline-flex"
-}, ie = () => /* @__PURE__ */ e(Ce, { text: ne, triggerAs: "span", describesTrigger: !1, children: /* @__PURE__ */ e("span", { role: "img", "aria-label": ne, style: ct, children: /* @__PURE__ */ e(Ne, { size: it }) }) }), ce = (l) => {
-  const t = l.filter((a) => a !== void 0);
-  return t.length > 0 ? t.join(" ") : void 0;
-}, gt = ({
-  value: l,
-  title: t,
-  titleIcon: a,
+  display: "inline-flex",
+  transform: "rotate(45deg)"
+}, pt = {
+  ...Ee,
+  marginLeft: -3
+}, ie = ({ leading: t }) => /* @__PURE__ */ e(Ce, { text: oe, triggerAs: "span", describesTrigger: !1, children: /* @__PURE__ */ e(
+  "span",
+  {
+    role: "img",
+    "aria-label": oe,
+    style: t ? pt : Ee,
+    children: /* @__PURE__ */ e(Ne, { size: dt })
+  }
+) }), ce = (t) => {
+  const a = t.filter((l) => l !== void 0);
+  return a.length > 0 ? a.join(" ") : void 0;
+}, vt = ({
+  value: t,
+  title: a,
+  titleIcon: l,
   isDefault: c = !1,
   variant: i = "profile",
   eyebrow: r,
   status: _,
-  description: v,
+  description: S,
   countLabel: y,
-  actions: S,
-  onDismiss: R,
-  dismissLabel: U = "Dismiss",
-  dismissDisabledReason: Y,
+  actions: R,
+  onDismiss: $,
+  dismissLabel: Y = "Dismiss",
+  dismissDisabledReason: U,
   selected: d = !1,
-  loading: Ee = !1,
-  loadingLabel: _e = "Loading…",
-  loadingHint: z,
-  disabled: $ = !1,
-  dimmed: G = !1,
-  onSelect: N,
-  tabIndex: Re,
+  loading: _e = !1,
+  loadingLabel: Re = "Loading…",
+  loadingHint: G,
+  disabled: T = !1,
+  dimmed: z = !1,
+  onSelect: A,
+  tabIndex: $e,
   "aria-label": W,
   className: H = "",
   style: j
 }) => {
-  const { pinned: $e } = Le(), ue = !d && !$, A = Ie(null);
-  De(A, Qe, je);
-  const h = `mal-selectable-card-${ve().replace(/[^a-zA-Z0-9_-]/g, "")}`, u = `${h}-outline`, X = `${h}-eyebrow`, M = `${h}-status`, C = `${h}-title`, K = `${h}-description`, Z = `${h}-count`, xe = W ? void 0 : ce([r ? X : void 0, C, _ ? M : void 0]), Te = ce([
-    v ? K : void 0,
+  const { pinned: Te } = Oe(), ue = !d && !T, N = ve(null);
+  Pe(N, et, Xe);
+  const h = `mal-selectable-card-${Se().replace(/[^a-zA-Z0-9_-]/g, "")}`, u = `${h}-outline`, X = `${h}-eyebrow`, M = `${h}-status`, L = `${h}-title`, K = `${h}-description`, Z = `${h}-count`, xe = W ? void 0 : ce([r ? X : void 0, L, _ ? M : void 0]), ge = ce([
+    S ? K : void 0,
     y ? Z : void 0
   ]);
-  if (Ee)
-    return /* @__PURE__ */ o(
+  if (_e)
+    return /* @__PURE__ */ n(
       "div",
       {
-        ref: A,
+        ref: N,
         role: "status",
         "aria-busy": "true",
         "aria-live": "polite",
         "data-variant": "editing",
         "data-state": "selected",
-        className: `${n} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${H}`.trim(),
+        className: `${o} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${H}`.trim(),
         style: {
           width: ee,
           height: te,
           borderRadius: O,
           boxSizing: "border-box",
-          paddingTop: `${st}px`,
-          paddingBottom: `${rt}px`,
+          paddingTop: `${rt}px`,
+          paddingBottom: `${nt}px`,
           justifyContent: "center",
-          [f]: w,
-          [m]: he,
+          [m]: w,
+          [f]: he,
           ...j
         },
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ n(
             "svg",
             {
-              className: I,
+              className: v,
               width: x,
-              height: T,
-              viewBox: `0 0 ${x} ${T}`,
+              height: g,
+              viewBox: `0 0 ${x} ${g}`,
               fill: "none",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o("linearGradient", { id: u, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                  /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${m})` } }),
+                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: u, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${f})` } }),
                   /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: se } })
                 ] }) }),
                 /* @__PURE__ */ e(
@@ -193,27 +206,27 @@ ${Ke}`, et = {
                     d: B,
                     "data-malachite-shape": "",
                     strokeWidth: E,
-                    style: { fill: "none", stroke: `var(${f})` }
+                    style: { fill: "none", stroke: `var(${m})` }
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e(p, { size: "small", fontWeight: "semi-bold", style: lt, children: _e }),
-          z ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: at, children: z }) : null
+          /* @__PURE__ */ e(p, { size: "small", fontWeight: "semi-bold", style: lt, children: Re }),
+          G ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: st, children: G }) : null
         ]
       }
     );
-  const L = i === "library", V = Xe[i][d ? "selected" : "resting"], q = !!S || !!R, J = Y !== void 0, ge = S && R ? "pr-[56px]" : q ? "pr-[26px]" : "pr-1";
-  return /* @__PURE__ */ o(
+  const C = i === "library", V = Me[i][d ? "selected" : "resting"], q = !!R || !!$, J = U !== void 0, Ie = R && $ ? "pr-[48px]" : q ? "pr-[18px]" : "pr-1";
+  return /* @__PURE__ */ n(
     "div",
     {
-      ref: A,
+      ref: N,
       "data-variant": i,
-      "data-pinned": $e ? "true" : "false",
+      "data-pinned": Te ? "true" : "false",
       "data-state": d ? "selected" : "resting",
       "data-hoverable": ue ? "" : void 0,
-      className: `${n} group relative grid shrink-0 grid-rows-[1fr_auto] ${Oe} ${H}`.trim(),
+      className: `${o} group relative grid shrink-0 grid-rows-[1fr_auto] ${De} ${H}`.trim(),
       style: {
         width: ee,
         height: te,
@@ -222,18 +235,18 @@ ${Ke}`, et = {
         ...j
       },
       children: [
-        d ? /* @__PURE__ */ o(
+        d ? /* @__PURE__ */ n(
           "svg",
           {
-            className: I,
+            className: v,
             width: x,
-            height: T,
-            viewBox: `0 0 ${x} ${T}`,
+            height: g,
+            viewBox: `0 0 ${x} ${g}`,
             fill: "none",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o("linearGradient", { id: u, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${m})` } }),
+              /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: u, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ e("stop", { offset: "0", style: { stopColor: `var(${f})` } }),
                 /* @__PURE__ */ e("stop", { offset: "1", style: { stopColor: se } })
               ] }) }),
               /* @__PURE__ */ e(
@@ -250,54 +263,54 @@ ${Ke}`, et = {
                   d: B,
                   "data-malachite-shape": "",
                   strokeWidth: E,
-                  style: { fill: "none", stroke: `var(${f})` }
+                  style: { fill: "none", stroke: `var(${m})` }
                 }
               )
             ]
           }
         ) : null,
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             role: "radio",
-            "data-value": l,
+            "data-value": t,
             "aria-checked": d,
             "aria-label": W,
             "aria-labelledby": xe,
-            "aria-describedby": Te,
-            "aria-disabled": $ || void 0,
-            tabIndex: Re ?? (d ? 0 : -1),
+            "aria-describedby": ge,
+            "aria-disabled": T || void 0,
+            tabIndex: $e ?? (d ? 0 : -1),
             onClick: () => {
-              $ || d || N == null || N(l);
+              T || d || A == null || A(t);
             },
-            className: `flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${$ ? "cursor-not-allowed" : "cursor-pointer"}`,
+            className: `flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${T ? "cursor-not-allowed" : "cursor-pointer"}`,
             style: { borderRadius: O },
             children: [
-              /* @__PURE__ */ e("div", { className: `flex h-[13px] shrink-0 items-center gap-2 ${ge}`, children: /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-                L ? /* @__PURE__ */ o("span", { id: C, className: "flex min-w-0 items-center gap-1.5", children: [
-                  a ? /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: `flex h-[13px] shrink-0 items-center gap-2 ${Ie}`, children: /* @__PURE__ */ n("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                C ? /* @__PURE__ */ n("span", { id: L, className: "flex min-w-0 items-center gap-1.5", children: [
+                  l ? /* @__PURE__ */ e(
                     "span",
                     {
                       className: "flex shrink-0 items-center",
-                      style: oe,
-                      children: a
+                      style: ne,
+                      children: l
                     }
                   ) : null,
-                  c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ie, {}) }) : null,
-                  /* @__PURE__ */ e(Q, { text: t, children: /* @__PURE__ */ e(
+                  c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ie, { leading: !l }) }) : null,
+                  /* @__PURE__ */ e(Q, { text: a, children: /* @__PURE__ */ e(
                     p,
                     {
                       size: "small",
                       fontWeight: "semi-bold",
-                      style: G ? { color: b } : void 0,
-                      children: t
+                      style: z ? { color: b } : void 0,
+                      children: a
                     }
                   ) })
                 ] }) : null,
                 r ? /* @__PURE__ */ e("span", { id: X, className: "flex min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: V, children: r }) }) : null,
                 _ ? /* @__PURE__ */ e("span", { id: M, className: "flex min-w-0", children: /* @__PURE__ */ e(
-                  Ae,
+                  Le,
                   {
                     value: _.label,
                     type: _.type ?? "default",
@@ -306,64 +319,64 @@ ${Ke}`, et = {
                   }
                 ) }) : null
               ] }) }),
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${L ? "justify-end" : "justify-between"}`,
+                  className: `mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${C ? "justify-end" : "justify-between"}`,
                   children: [
-                    L ? null : /* @__PURE__ */ o("div", { id: C, className: "flex min-w-0 items-center gap-1.5", children: [
-                      a ? /* @__PURE__ */ e(
+                    C ? null : /* @__PURE__ */ n("div", { id: L, className: "flex min-w-0 items-center gap-1.5", children: [
+                      l ? /* @__PURE__ */ e(
                         "span",
                         {
                           className: "flex shrink-0 items-center",
-                          style: oe,
-                          children: a
+                          style: ne,
+                          children: l
                         }
                       ) : null,
-                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ie, {}) }) : null,
-                      /* @__PURE__ */ e(Q, { text: t, children: /* @__PURE__ */ e(
+                      c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(ie, { leading: !l }) }) : null,
+                      /* @__PURE__ */ e(Q, { text: a, children: /* @__PURE__ */ e(
                         p,
                         {
                           size: "small",
                           fontWeight: "semi-bold",
-                          style: G ? { color: b } : void 0,
-                          children: t
+                          style: z ? { color: b } : void 0,
+                          children: a
                         }
                       ) })
                     ] }),
-                    v ? /* @__PURE__ */ e("span", { id: K, className: "block min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", style: et, children: v }) }) : null
+                    S ? /* @__PURE__ */ e("span", { id: K, className: "block min-w-0", children: /* @__PURE__ */ e(p, { size: "xsmall", style: tt, children: S }) }) : null
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e("span", { id: Z, className: "min-w-0 self-end truncate pr-4 pb-3 pl-4", children: y ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: tt, children: y }) : null }),
-        q ? /* @__PURE__ */ o(
+        /* @__PURE__ */ e("span", { id: Z, className: "min-w-0 self-end truncate pr-4 pb-3 pl-4", children: y ? /* @__PURE__ */ e(p, { size: "xsmall", fontWeight: "semi-bold", style: at, children: y }) : null }),
+        q ? /* @__PURE__ */ n(
           "div",
           {
             "data-selectable-card-actions": "",
-            className: "absolute top-3 right-4 flex h-[13px] shrink-0 items-center gap-2.5",
+            className: "absolute top-3 right-2 flex h-[13px] shrink-0 items-center gap-2.5",
             children: [
-              S,
-              R ? /* @__PURE__ */ e(
+              R ? /* @__PURE__ */ e("span", { className: "flex items-center gap-2.5", style: ot, children: R }) : null,
+              $ ? /* @__PURE__ */ e(
                 ye,
                 {
                   type: "button",
                   variant: "ghost",
                   size: "xsmall",
                   iconOnly: !0,
-                  "aria-label": U,
-                  tooltip: Y ?? U,
+                  "aria-label": Y,
+                  tooltip: U ?? Y,
                   disabled: J,
                   className: "shrink-0",
-                  onClick: R,
+                  onClick: $,
                   children: /* @__PURE__ */ e(
                     "span",
                     {
-                      className: ot,
-                      style: J ? nt : V,
-                      children: /* @__PURE__ */ e(Se, {})
+                      className: it,
+                      style: J ? ct : V,
+                      children: /* @__PURE__ */ e(Ae, {})
                     }
                   )
                 }
@@ -376,12 +389,12 @@ ${Ke}`, et = {
   );
 };
 export {
-  Ge as CARD_FLARE_PX,
-  Tt as CARD_FLARE_TIP_PX,
+  We as CARD_FLARE_PX,
+  It as CARD_FLARE_TIP_PX,
   F as CARD_WIDTH_PX,
-  I as FLARE_CLASS,
-  me as STRIP_RULE_PX,
-  gt as SelectableCard,
-  gt as default
+  v as FLARE_CLASS,
+  fe as STRIP_RULE_PX,
+  vt as SelectableCard,
+  vt as default
 };
 //# sourceMappingURL=SelectableCard.js.map