@stackone/malachite 2.24.2 → 2.25.1

package/COMPONENTS.md

@@ -76,7 +76,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Radio`** — Single radio control with hover state; parent manages the group. Pass `presentational` to render a visual-only, non-focusable indicator for use inside a clickable row/card. _Key props:_ `checked`, `onChange`, `disabled`, `size`, `presentational`.
 - **`SegmentedControl`** — A rounded track of mutually-exclusive options — the segmented “one of these” control. Owns the track background, the selected-thumb chrome and the `radiogroup` semantics, so consumers never hand-roll a track around `PillButton` (whose `default` variant tokens are tuned for standalone filter pills, not a sunken track). Single tab stop with arrow-key move-and-select; selection is conveyed via `aria-checked` and a foreground change, not background colour alone. Restyle via the `segmentedControl` theme tokens. _Key props:_ `options` (`value`, `label`, `icon`, `disabled`), `value`, `onChange`, `SegmentedControlSize` (`small` | `medium` | `large`), `fullWidth`, `disabled`, `aria-label`, `aria-labelledby`, `className`.
 - **`Toggle`** — On/off switch. Add `label` for a visible caption, and `variant` to give it standalone toolbar-filter chrome — pick the family it sits beside: `pill` matches the filter-bar inputs (`Search`, `MultiSelect`), `button` renders the whole control as an outline `Button` with the switch as its trailing icon. `bordered` is shorthand for `variant="pill"`. `tone="pending"` paints the checked track amber, for a switch whose change has not been written yet — pair it with a `SelectionBar` reporting the same diff. The unchecked track never changes: nothing is pending about a switch that is off. Forwards a ref to its root element, so it can anchor an `InlineConfirm`. _Key props:_ `checked`, `onChange`, `disabled`, `ToggleSize` (`small` | `medium`), `ToggleTone` (`default` | `pending`), `label`, `ToggleVariant` (`pill` | `button`), `bordered`, `aria-label`, `aria-labelledby`, `aria-describedby`, `id`.
-- **`Dropdown`** — Single-select dropdown. `DropdownSize` is `small` (28px) | `medium` (32px) | `large` (42px), matching Button; `fullWidth` fills the container instead of sizing to content, which is what a table cell or a toolbar slot needs — without it the field column sizes to its content, so a consumer has to compute a width; `width` fixes that width outright, the way `MultiSelect` does, for a toolbar lining the two up rather than letting each hug its own label — a narrower container still wins, since the width clamps to it; Until this release a `search` trigger could not go below the intrinsic width of its bare `input`, so a `width` under roughly 200px was ignored; it now shrinks with the rest. The open menu fills the trigger and left-aligns under it, as Figma draws every tier of `Dropdown Component - Standard`, so `width` sizes both — the menu is the width of the control that opened it and does not widen for a long option, which ellipsises instead, so a row of controls and their open menus stay on one set of edges; below 160px the menu keeps that floor rather than shrinking to a chip nobody can read, and `minWidth` raises that floor without widening the trigger — for a picker a column pins narrow whose options carry a subtitle the trigger never shows; near a viewport edge it anchors to the trigger's other side before falling back to the viewport, so the two share an edge wherever one fits; `small` is the chip that sits beside a page title and rounds tighter (10px) than the taller sizes. These names each moved up a tier in 0.71 — the old `xsmall`/`small`/`medium` are now `small`/`medium`/`large`. Pass `value` for a controlled selection whose source of truth lives elsewhere (URL or app state): the trigger follows it without the consumer remounting via `key`, which used to discard focus mid-interaction. `defaultValue` keeps the uncontrolled behaviour. `clearable` adds a clear control to the trigger once something is selected and reports it as `onItemSelected(undefined)` — without it a selection cannot be undone, so filter bars had to invent a sentinel "any" item to carry that meaning. `requiredIndicator` switches the label between the library default of naming the optional fields, an `asterisk` on the required ones for designs drawn that way, and `none` for a field whose value is supplied rather than asked for — a locked control is still required, but a marker only sends the reader looking for something to fill in. Visual only: `aria-required` is set from `required` whichever is chosen. `showSubtitleInTrigger` promotes the selected item's `subtitle` into the closed trigger, on one line under the value, so the consequence of a choice stays on screen once the menu shuts — the trigger trades its fixed height for a floor and grows by that line, and either line too long for it ellipsises, with a single tooltip carrying whichever lines are cut off, value first. It does not combine with `search`, whose trigger is a single-line text input with nowhere to put a second line, so the type rejects the pair rather than letting a consumer ask for a subtitle and get none. `subtitleLayout` decides how a subtitle sits in the open menu: the default `inline` keeps it on the label's row after a divider, which suits a short qualifier, while `stacked` gives it its own line beneath the label, clamped to two — inline, a sentence-length subtitle is ellipsised away to a few words. Passing `formControl` is enough to show validation on the same terms as `Input`, though only validation: the trigger still paints `value` or `defaultValue`, never the value the form holds. The resolver's message renders on its own line beneath the field in the destructive colour, politely announced, with `aria-invalid` and `aria-describedby` wired, while an explicit `helperText` keeps its own line above it and stays dimmed, and `error={false}` suppresses the resolver outright. _Key props:_ `DropdownItem[]`, `DropdownSize`, `fullWidth`, `width`, `value`, `defaultValue`, `label`, `search`, `showSubtitleInTrigger`, `subtitleLayout`, `clearable`, `required`, `requiredIndicator`, `error`, `helperText`, `loading`, `formControl`, `aria-label`, `aria-labelledby`, `id`.
+- **`Dropdown`** — Single-select dropdown. `DropdownSize` is `small` (28px) | `medium` (32px) | `large` (42px), matching Button; `fullWidth` fills the container instead of sizing to content, which is what a table cell or a toolbar slot needs — without it the field column sizes to its content, so a consumer has to compute a width; `width` fixes that width outright, the way `MultiSelect` does, for a toolbar lining the two up rather than letting each hug its own label — a narrower container still wins, since the width clamps to it; Until this release a `search` trigger could not go below the intrinsic width of its bare `input`, so a `width` under roughly 200px was ignored; it now shrinks with the rest. The open menu fills the trigger and left-aligns under it, as Figma draws every tier of `Dropdown Component - Standard`, so `width` sizes both — the menu is the width of the control that opened it and does not widen for a long option, which ellipsises instead, so a row of controls and their open menus stay on one set of edges; below 160px the menu keeps that floor rather than shrinking to a chip nobody can read, and `minWidth` raises that floor without widening the trigger — for a picker a column pins narrow whose options carry a subtitle the trigger never shows; near a viewport edge it anchors to the trigger's other side before falling back to the viewport, so the two share an edge wherever one fits; `small` is the chip that sits beside a page title and rounds tighter (10px) than the taller sizes. These names each moved up a tier in 0.71 — the old `xsmall`/`small`/`medium` are now `small`/`medium`/`large`. Pass `value` for a controlled selection whose source of truth lives elsewhere (URL or app state): the trigger follows it without the consumer remounting via `key`, which used to discard focus mid-interaction. `defaultValue` keeps the uncontrolled behaviour. `clearable` adds a clear control to the trigger once something is selected and reports it as `onItemSelected(undefined)` — without it a selection cannot be undone, so filter bars had to invent a sentinel "any" item to carry that meaning. `requiredIndicator` switches the label between the library default of naming the optional fields, an `asterisk` on the required ones for designs drawn that way, and `none` for a field whose value is supplied rather than asked for — a locked control is still required, but a marker only sends the reader looking for something to fill in. Visual only: `aria-required` is set from `required` whichever is chosen. `showSubtitleInTrigger` promotes the selected item's `subtitle` into the closed trigger, on one line under the value, so the consequence of a choice stays on screen once the menu shuts — the trigger trades its fixed height for a floor and grows by that line, and either line too long for it ellipsises, with a single tooltip carrying whichever lines are cut off, value first. It does not combine with `search`, whose trigger is a single-line text input with nowhere to put a second line, so the type rejects the pair rather than letting a consumer ask for a subtitle and get none. `subtitleLayout` decides how a subtitle sits in the open menu: the default `inline` keeps it on the label's row after a divider, which suits a short qualifier, while `stacked` gives it its own line beneath the label — one line either way, ellipsised rather than wrapped, so inline a sentence-length subtitle is cut back to a few words. Every option row carries a tooltip for whatever it had to cut, across all three of label, subtitle and `rightSideText`, so nothing the row hides is unreadable. Passing `formControl` is enough to show validation on the same terms as `Input`, though only validation: the trigger still paints `value` or `defaultValue`, never the value the form holds. The resolver's message renders on its own line beneath the field in the destructive colour, politely announced, with `aria-invalid` and `aria-describedby` wired, while an explicit `helperText` keeps its own line above it and stays dimmed, and `error={false}` suppresses the resolver outright. _Key props:_ `DropdownItem[]`, `DropdownSize`, `fullWidth`, `width`, `value`, `defaultValue`, `label`, `search`, `showSubtitleInTrigger`, `subtitleLayout`, `clearable`, `required`, `requiredIndicator`, `error`, `helperText`, `loading`, `formControl`, `aria-label`, `aria-labelledby`, `id`.
 - **`MultiSelect`** — Multi-select dropdown. `width` fixes the trigger, as `Dropdown` and `Search` take it, so a toolbar can put its controls on one width — and, as with those two, a container narrower than the value still wins; the menu fills the trigger and left-aligns under it, so that one prop sizes both; `minWidth` raises the 160px floor a narrow trigger falls back to. `requiredIndicator` follows the same three-way convention the single-select controls do, so a form choosing asterisks does not get "(Optional)" on one of its fields. _Key props:_ `MultiSelectOption[]`, `MultiSelectSize`, `width`, `minWidth`, `label`, `searchable`, `inlineSearch`, `chips`, `chipsRemovable`, `required`, `requiredIndicator`, `aria-label`, `aria-labelledby`, `id`.
 - **`QueryInput`** — A textbox with inline syntax colouring and a suggestion menu anchored to the caret. It carries no grammar of its own: the consumer parses the value, hands back `tokens` to colour and `suggestions` to offer, so the vocabulary lives in the consuming app rather than here. _Key props:_ `value`, `onChange`, `tokens`, `suggestions`, `activeRange`, `onAccept`, `onQueryContextChange`, `onSubmit`, `placeholder`, `size`, `disabled`, `loading`, `emptyMessage`, `className`, `style`, `aria-label`, `aria-labelledby`.
 - **`SettingRow`** — One setting: a labelled row with its control on the trailing edge, and the sentence that explains it underneath. `control` may be a render prop receiving the label’s id, so a control that no `<label htmlFor>` can reach — `Toggle` renders a `<button role="switch">` — still names itself via `aria-labelledby`. _Key props:_ `label`, `badge`, `description`, `control`, `className`.

package/dist/components/Accordion.js

@@ -1,56 +1,58 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useId as E, useState as b } from "react";
-import { DisclosureArrow as u } from "./DisclosureArrow.js";
+import { useId as $, useState as b } from "react";
+import { DisclosureArrow as E } from "./DisclosureArrow.js";
 import { FOCUS_RING as _, FOCUS_RING_INSET as A } from "./focusRing.js";
 import { isRenderableNode as F } from "./renderableNode.js";
 const K = ({
   title: x,
-  header: f,
-  className: v,
-  children: o,
+  header: u,
+  className: f,
+  children: a,
   trailing: c,
-  variant: h = "default",
-  defaultExpanded: g = !1,
+  variant: v = "default",
+  defaultExpanded: h = !1,
   isExpanded: n,
   onToggle: d,
   disabled: s = !1,
   stickyHeader: p = !1,
-  stickyTopOffset: w = 0,
+  stickyTopOffset: g = 0,
   animate: m = !0
 }) => {
-  const r = h === "sunken", l = `${E()}-body`, [N, y] = b(g), e = n !== void 0 ? n : N, k = m || e && !!o, [I, C] = b(!1), R = () => {
-    const a = !e;
-    n === void 0 && y(a), d == null || d(a);
-  }, S = [
+  const r = v === "sunken", l = `${$()}-body`, [w, N] = b(h), e = n !== void 0 ? n : w, k = m || e && !!a, [y, I] = b(!1), C = () => {
+    const o = !e;
+    n === void 0 && N(o), d == null || d(o);
+  }, R = [
     "flex flex-col w-full text-left",
     r ? "rounded-xl bg-[var(--malachite-card-dimmed-background)] p-[4px]" : "",
-    v
-  ].filter(Boolean).join(" "), B = [
+    f
+  ].filter(Boolean).join(" "), S = [
     // `group` only when enabled, so the arrow doesn't darken on hover while disabled.
     s ? "" : "group",
     "flex items-center w-full transition-colors",
     r ? "" : "border-0 border-b border-solid border-[var(--malachite-card-border)]",
     p ? "sticky z-10" : "",
     r ? "bg-transparent" : e ? "bg-[var(--malachite-buttonlist-hover-background)]" : s ? "bg-transparent" : "bg-transparent hover:bg-[var(--malachite-buttonlist-hover-background)]"
-  ].filter(Boolean).join(" "), j = [
+  ].filter(Boolean).join(" "), B = [
     "flex flex-1 items-center min-w-0 appearance-none border-0 bg-transparent text-left cursor-pointer select-none disabled:cursor-not-allowed",
     r ? `gap-[16px] px-[16px] py-[12px] rounded-lg ${_}` : `gap-[12px] p-[16px] ${A}`
-  ].join(" "), $ = p ? { top: `${w}px`, backgroundColor: "var(--malachite-card-background)" } : {};
-  return /* @__PURE__ */ i("div", { className: S, children: [
-    /* @__PURE__ */ i("div", { className: B, style: $, "data-accordion-header": "", children: [
+  ].join(" "), j = p ? {
+    top: `${g}px`,
+    backgroundColor: r ? "var(--malachite-card-dimmed-background)" : "var(--malachite-card-background)"
+  } : {};
+  return /* @__PURE__ */ i("div", { className: R, children: [
+    /* @__PURE__ */ i("div", { className: S, style: j, "data-accordion-header": "", children: [
       /* @__PURE__ */ i(
         "button",
         {
           type: "button",
-          className: j,
-          onClick: R,
+          className: B,
+          onClick: C,
           "aria-expanded": e,
           "aria-controls": k ? l : void 0,
           disabled: s,
           children: [
-            r ? null : /* @__PURE__ */ t(u, { expanded: e }),
-            f ?? /* @__PURE__ */ t("span", { className: "flex-1 min-w-0 truncate font-medium text-[13px] tracking-[0.13px] text-[var(--malachite-text-primary)]", children: x }),
-            r ? /* @__PURE__ */ t(u, { expanded: e }) : null
+            /* @__PURE__ */ t(E, { expanded: e }),
+            u ?? /* @__PURE__ */ t("span", { className: "flex-1 min-w-0 truncate font-medium text-[13px] tracking-[0.13px] text-[var(--malachite-text-primary)]", children: x })
           ]
         }
       ),
@@ -67,18 +69,18 @@ const K = ({
           id: l,
           className: "grid grid-cols-[minmax(0,1fr)] w-full transition-[grid-template-rows] duration-200 ease-in-out",
           style: { gridTemplateRows: e ? "1fr" : "0fr" },
-          onTransitionEnd: (a) => {
-            a.propertyName === "grid-template-rows" && C(e);
+          onTransitionEnd: (o) => {
+            o.propertyName === "grid-template-rows" && I(e);
           },
           children: /* @__PURE__ */ t(
             "div",
             {
-              className: I && e ? "overflow-visible" : "overflow-hidden",
-              children: o && /* @__PURE__ */ t(
+              className: y && e ? "overflow-visible" : "overflow-hidden",
+              children: a && /* @__PURE__ */ t(
                 "div",
                 {
                   className: r ? "pt-[4px]" : "border-b border-solid border-[var(--malachite-card-border)]",
-                  children: o
+                  children: a
                 }
               )
             }
@@ -87,12 +89,12 @@ const K = ({
       )
     ) : (
       /* Instant open — no clip, so a sticky child inside pins immediately. */
-      e && o && /* @__PURE__ */ t(
+      e && a && /* @__PURE__ */ t(
         "div",
         {
           id: l,
           className: r ? "pt-[4px]" : "border-b border-solid border-[var(--malachite-card-border)]",
-          children: o
+          children: a
         }
       )
     )

package/dist/components/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING, FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\n\ninterface AccordionBaseProps {\n    className?: string;\n    children?: React.ReactNode;\n    /**\n     * Visual style. `default` is the flat list row (arrow leading, row dividers,\n     * hover background). `sunken` draws the section as a sunken card (dimmed\n     * rounded container, arrow pinned right, no dividers/hover) — used for stacked\n     * detail sections in side panels and detail pages (see `CollapsibleSection`).\n     */\n    variant?: 'default' | 'sunken';\n    /**\n     * Content pinned to the right of the header, OUTSIDE the toggle button — so it may\n     * be interactive (e.g. a Checkbox) without nesting a button inside a button.\n     */\n    trailing?: React.ReactNode;\n    defaultExpanded?: boolean;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** Disables the toggle (and its hover). Trailing controls manage their own state. */\n    disabled?: boolean;\n    /**\n     * Pin the header row to the top of the nearest scroll container so it stays\n     * reachable while the body scrolls. Needs a scroll ancestor that clips without\n     * trapping sticky — e.g. a `<Surface overflow=\"clip\">` (`overflow: hidden` traps it).\n     */\n    stickyHeader?: boolean;\n    /** Offset (px) from the top of the scroll container when `stickyHeader` is set. */\n    stickyTopOffset?: number;\n    /**\n     * Animate the expand/collapse height (default `true`). Set `false` for an instant\n     * open — the body isn't clipped, so a `position: sticky` child pins immediately with\n     * no post-animation settle.\n     */\n    animate?: boolean;\n}\n\n/**\n * Requires at least one of `title` (simple text header) or `header` (rich ReactNode\n * content for the toggle area, e.g. avatar + badges) so the toggle is never empty.\n */\ntype AccordionProps = AccordionBaseProps &\n    ({ title: string; header?: React.ReactNode } | { title?: string; header: React.ReactNode });\n\nconst Accordion: React.FC<AccordionProps> = ({\n    title,\n    header,\n    className,\n    children,\n    trailing,\n    variant = 'default',\n    defaultExpanded = false,\n    isExpanded,\n    onToggle,\n    disabled = false,\n    stickyHeader = false,\n    stickyTopOffset = 0,\n    animate = true,\n}) => {\n    const sunken = variant === 'sunken';\n    const instanceId = useId();\n    const bodyId = `${instanceId}-body`;\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    // The instant path only renders the body while expanded; don't advertise\n    // aria-controls when the referenced element isn't in the DOM.\n    const bodyRendered = animate || (expanded && !!children);\n\n    // The body clips overflow so the expand/collapse height animation works. Once fully\n    // expanded we release the clip (after the transition) so a `position: sticky` child\n    // inside can pin — `overflow: hidden` would otherwise trap it.\n    //\n    // Owned entirely by the transition: the same `onTransitionEnd` that sets it on expand\n    // clears it on collapse, so no effect has to mirror `expanded` into it.\n    const [bodySettled, setBodySettled] = useState(false);\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            setInternalExpanded(newExpanded);\n        }\n        onToggle?.(newExpanded);\n    };\n\n    const containerClasses = [\n        'flex flex-col w-full text-left',\n        sunken ? 'rounded-xl bg-[var(--malachite-card-dimmed-background)] p-[4px]' : '',\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    // The whole header row is a `group` so the disclosure arrow darkens on hover; the\n    // hover background and arrow react to hovering anywhere on the row. The sunken\n    // variant carries its own card chrome instead of row dividers/hover.\n    const rowBackground = sunken\n        ? 'bg-transparent'\n        : expanded\n          ? 'bg-[var(--malachite-buttonlist-hover-background)]'\n          : disabled\n            ? 'bg-transparent'\n            : 'bg-transparent hover:bg-[var(--malachite-buttonlist-hover-background)]';\n    const headerRowClasses = [\n        // `group` only when enabled, so the arrow doesn't darken on hover while disabled.\n        disabled ? '' : 'group',\n        'flex items-center w-full transition-colors',\n        sunken ? '' : 'border-0 border-b border-solid border-[var(--malachite-card-border)]',\n        stickyHeader ? 'sticky z-10' : '',\n        rowBackground,\n    ]\n        .filter(Boolean)\n        .join(' ');\n    // Full-bleed default rows use an inset ring; the padded sunken toggle fits an outset one.\n    const toggleButtonClasses = [\n        'flex flex-1 items-center min-w-0 appearance-none border-0 bg-transparent text-left cursor-pointer select-none disabled:cursor-not-allowed',\n        sunken\n            ? `gap-[16px] px-[16px] py-[12px] rounded-lg ${FOCUS_RING}`\n            : `gap-[12px] p-[16px] ${FOCUS_RING_INSET}`,\n    ].join(' ');\n\n    // A pinned header needs an opaque background so the scrolling body doesn't bleed\n    // through. Inline (not a Tailwind arbitrary class) so the offset always applies.\n    const headerRowStyle: React.CSSProperties = stickyHeader\n        ? { top: `${stickyTopOffset}px`, backgroundColor: 'var(--malachite-card-background)' }\n        : {};\n\n    return (\n        <div className={containerClasses}>\n            <div className={headerRowClasses} style={headerRowStyle} data-accordion-header=\"\">\n                {/* Toggle area — arrow + header/title. Interactive trailing sits outside it. */}\n                <button\n                    type=\"button\"\n                    className={toggleButtonClasses}\n                    onClick={handleToggle}\n                    aria-expanded={expanded}\n                    aria-controls={bodyRendered ? bodyId : undefined}\n                    disabled={disabled}\n                >\n                    {sunken ? null : <DisclosureArrow expanded={expanded} />}\n                    {header ?? (\n                        <span className=\"flex-1 min-w-0 truncate font-medium text-[13px] tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n                            {title}\n                        </span>\n                    )}\n                    {sunken ? <DisclosureArrow expanded={expanded} /> : null}\n                </button>\n                {isRenderableNode(trailing) && (\n                    <div className=\"shrink-0 flex items-center pr-[16px] text-[var(--malachite-text-secondary)]\">\n                        {trailing}\n                    </div>\n                )}\n            </div>\n\n            {animate ? (\n                /* Height animates via grid-template-rows (0fr → 1fr); body clips during.\n                   grid-cols-[minmax(0,1fr)] pins the single column to the track width so\n                   wide, non-wrapping children (e.g. a table with long cell text) can't grow\n                   the implicit `auto` column to their max-content and overflow the container. */\n                <div\n                    id={bodyId}\n                    className=\"grid grid-cols-[minmax(0,1fr)] w-full transition-[grid-template-rows] duration-200 ease-in-out\"\n                    style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}\n                    onTransitionEnd={(event) => {\n                        if (event.propertyName === 'grid-template-rows') {\n                            setBodySettled(expanded);\n                        }\n                    }}\n                >\n                    <div\n                        className={bodySettled && expanded ? 'overflow-visible' : 'overflow-hidden'}\n                    >\n                        {children && (\n                            <div\n                                className={\n                                    sunken\n                                        ? 'pt-[4px]'\n                                        : 'border-b border-solid border-[var(--malachite-card-border)]'\n                                }\n                            >\n                                {children}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            ) : (\n                /* Instant open — no clip, so a sticky child inside pins immediately. */\n                expanded &&\n                children && (\n                    <div\n                        id={bodyId}\n                        className={\n                            sunken\n                                ? 'pt-[4px]'\n                                : 'border-b border-solid border-[var(--malachite-card-border)]'\n                        }\n                    >\n                        {children}\n                    </div>\n                )\n            )}\n        </div>\n    );\n};\n\nexport default Accordion;\nexport { Accordion };\nexport type { AccordionProps };\n"],"names":["Accordion","title","header","className","children","trailing","variant","defaultExpanded","isExpanded","onToggle","disabled","stickyHeader","stickyTopOffset","animate","sunken","bodyId","useId","internalExpanded","setInternalExpanded","useState","expanded","bodyRendered","bodySettled","setBodySettled","handleToggle","newExpanded","containerClasses","headerRowClasses","toggleButtonClasses","FOCUS_RING","FOCUS_RING_INSET","headerRowStyle","jsxs","jsx","DisclosureArrow","isRenderableNode","event"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING, FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\n\ninterface AccordionBaseProps {\n    className?: string;\n    children?: React.ReactNode;\n    /**\n     * Visual style. `default` is the flat list row (row dividers, hover background).\n     * `sunken` draws the section as a sunken card (dimmed rounded container, no\n     * dividers/hover) — used for stacked detail sections in side panels and detail\n     * pages (see `CollapsibleSection`). Both lead with the arrow: it is the affordance\n     * that says the section opens, and a reader scanning a stack of them finds it in\n     * one column rather than at whatever width each header happens to end.\n     */\n    variant?: 'default' | 'sunken';\n    /**\n     * Content pinned to the right of the header, OUTSIDE the toggle button — so it may\n     * be interactive (e.g. a Checkbox) without nesting a button inside a button.\n     */\n    trailing?: React.ReactNode;\n    defaultExpanded?: boolean;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** Disables the toggle (and its hover). Trailing controls manage their own state. */\n    disabled?: boolean;\n    /**\n     * Pin the header row to the top of the nearest scroll container so it stays\n     * reachable while the body scrolls. Needs a scroll ancestor that clips without\n     * trapping sticky — e.g. a `<Surface overflow=\"clip\">` (`overflow: hidden` traps it).\n     */\n    stickyHeader?: boolean;\n    /** Offset (px) from the top of the scroll container when `stickyHeader` is set. */\n    stickyTopOffset?: number;\n    /**\n     * Animate the expand/collapse height (default `true`). Set `false` for an instant\n     * open — the body isn't clipped, so a `position: sticky` child pins immediately with\n     * no post-animation settle.\n     */\n    animate?: boolean;\n}\n\n/**\n * Requires at least one of `title` (simple text header) or `header` (rich ReactNode\n * content for the toggle area, e.g. avatar + badges) so the toggle is never empty.\n */\ntype AccordionProps = AccordionBaseProps &\n    ({ title: string; header?: React.ReactNode } | { title?: string; header: React.ReactNode });\n\nconst Accordion: React.FC<AccordionProps> = ({\n    title,\n    header,\n    className,\n    children,\n    trailing,\n    variant = 'default',\n    defaultExpanded = false,\n    isExpanded,\n    onToggle,\n    disabled = false,\n    stickyHeader = false,\n    stickyTopOffset = 0,\n    animate = true,\n}) => {\n    const sunken = variant === 'sunken';\n    const instanceId = useId();\n    const bodyId = `${instanceId}-body`;\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    // The instant path only renders the body while expanded; don't advertise\n    // aria-controls when the referenced element isn't in the DOM.\n    const bodyRendered = animate || (expanded && !!children);\n\n    // The body clips overflow so the expand/collapse height animation works. Once fully\n    // expanded we release the clip (after the transition) so a `position: sticky` child\n    // inside can pin — `overflow: hidden` would otherwise trap it.\n    //\n    // Owned entirely by the transition: the same `onTransitionEnd` that sets it on expand\n    // clears it on collapse, so no effect has to mirror `expanded` into it.\n    const [bodySettled, setBodySettled] = useState(false);\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            setInternalExpanded(newExpanded);\n        }\n        onToggle?.(newExpanded);\n    };\n\n    const containerClasses = [\n        'flex flex-col w-full text-left',\n        sunken ? 'rounded-xl bg-[var(--malachite-card-dimmed-background)] p-[4px]' : '',\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    // The whole header row is a `group` so the disclosure arrow darkens on hover; the\n    // hover background and arrow react to hovering anywhere on the row. The sunken\n    // variant carries its own card chrome instead of row dividers/hover.\n    const rowBackground = sunken\n        ? 'bg-transparent'\n        : expanded\n          ? 'bg-[var(--malachite-buttonlist-hover-background)]'\n          : disabled\n            ? 'bg-transparent'\n            : 'bg-transparent hover:bg-[var(--malachite-buttonlist-hover-background)]';\n    const headerRowClasses = [\n        // `group` only when enabled, so the arrow doesn't darken on hover while disabled.\n        disabled ? '' : 'group',\n        'flex items-center w-full transition-colors',\n        sunken ? '' : 'border-0 border-b border-solid border-[var(--malachite-card-border)]',\n        stickyHeader ? 'sticky z-10' : '',\n        rowBackground,\n    ]\n        .filter(Boolean)\n        .join(' ');\n    // Full-bleed default rows use an inset ring; the padded sunken toggle fits an outset one.\n    const toggleButtonClasses = [\n        'flex flex-1 items-center min-w-0 appearance-none border-0 bg-transparent text-left cursor-pointer select-none disabled:cursor-not-allowed',\n        sunken\n            ? `gap-[16px] px-[16px] py-[12px] rounded-lg ${FOCUS_RING}`\n            : `gap-[12px] p-[16px] ${FOCUS_RING_INSET}`,\n    ].join(' ');\n\n    // A pinned header needs an opaque background so the scrolling body doesn't bleed\n    // through. Inline (not a Tailwind arbitrary class) so the offset always applies. It is\n    // the variant's own ground, not the card's: a sunken section pinned in card white is a\n    // white bar floating over the grey it belongs to.\n    const headerRowStyle: React.CSSProperties = stickyHeader\n        ? {\n              top: `${stickyTopOffset}px`,\n              backgroundColor: sunken\n                  ? 'var(--malachite-card-dimmed-background)'\n                  : 'var(--malachite-card-background)',\n          }\n        : {};\n\n    return (\n        <div className={containerClasses}>\n            <div className={headerRowClasses} style={headerRowStyle} data-accordion-header=\"\">\n                {/* Toggle area — arrow + header/title. Interactive trailing sits outside it. */}\n                <button\n                    type=\"button\"\n                    className={toggleButtonClasses}\n                    onClick={handleToggle}\n                    aria-expanded={expanded}\n                    aria-controls={bodyRendered ? bodyId : undefined}\n                    disabled={disabled}\n                >\n                    <DisclosureArrow expanded={expanded} />\n                    {header ?? (\n                        <span className=\"flex-1 min-w-0 truncate font-medium text-[13px] tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n                            {title}\n                        </span>\n                    )}\n                </button>\n                {isRenderableNode(trailing) && (\n                    <div className=\"shrink-0 flex items-center pr-[16px] text-[var(--malachite-text-secondary)]\">\n                        {trailing}\n                    </div>\n                )}\n            </div>\n\n            {animate ? (\n                /* Height animates via grid-template-rows (0fr → 1fr); body clips during.\n                   grid-cols-[minmax(0,1fr)] pins the single column to the track width so\n                   wide, non-wrapping children (e.g. a table with long cell text) can't grow\n                   the implicit `auto` column to their max-content and overflow the container. */\n                <div\n                    id={bodyId}\n                    className=\"grid grid-cols-[minmax(0,1fr)] w-full transition-[grid-template-rows] duration-200 ease-in-out\"\n                    style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}\n                    onTransitionEnd={(event) => {\n                        if (event.propertyName === 'grid-template-rows') {\n                            setBodySettled(expanded);\n                        }\n                    }}\n                >\n                    <div\n                        className={bodySettled && expanded ? 'overflow-visible' : 'overflow-hidden'}\n                    >\n                        {children && (\n                            <div\n                                className={\n                                    sunken\n                                        ? 'pt-[4px]'\n                                        : 'border-b border-solid border-[var(--malachite-card-border)]'\n                                }\n                            >\n                                {children}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            ) : (\n                /* Instant open — no clip, so a sticky child inside pins immediately. */\n                expanded &&\n                children && (\n                    <div\n                        id={bodyId}\n                        className={\n                            sunken\n                                ? 'pt-[4px]'\n                                : 'border-b border-solid border-[var(--malachite-card-border)]'\n                        }\n                    >\n                        {children}\n                    </div>\n                )\n            )}\n        </div>\n    );\n};\n\nexport default Accordion;\nexport { Accordion };\nexport type { AccordionProps };\n"],"names":["Accordion","title","header","className","children","trailing","variant","defaultExpanded","isExpanded","onToggle","disabled","stickyHeader","stickyTopOffset","animate","sunken","bodyId","useId","internalExpanded","setInternalExpanded","useState","expanded","bodyRendered","bodySettled","setBodySettled","handleToggle","newExpanded","containerClasses","headerRowClasses","toggleButtonClasses","FOCUS_RING","FOCUS_RING_INSET","headerRowStyle","jsxs","jsx","DisclosureArrow","isRenderableNode","event"],"mappings":"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"}