@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/dialog-frame.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { Modal, ModalCloseContext } from "./modal.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-const DEFAULT_DIALOG_FRAME_LABELS = { close: "Close" };
+import { DEFAULT_DIALOG_FRAME_LABELS } from "./dialog-frame-labels.js";
 function DialogFrame({
   title,
   description,
@@ -41,14 +41,14 @@ function DialogFrame({
             className: cn(
               // `last:pb-4`: a frame with neither body nor actions closes on its header.
               "flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4",
-              headerDivider && "border-b border-[var(--border)]",
+              headerDivider && "border-b border-subtle",
               headerClassName
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 grow basis-48", children: [
-                  /* @__PURE__ */ jsx(Heading, { id: titleId, className: "text-lg font-semibold leading-snug text-[var(--text-primary)]", children: title }),
-                  hasDescription && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-sm text-[var(--text-muted)]", children: description })
+                  /* @__PURE__ */ jsx(Heading, { id: titleId, className: "text-lg font-semibold leading-snug text-primary", children: title }),
+                  hasDescription && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-sm text-muted", children: description })
                 ] }),
                 headerActions !== void 0 && headerActions !== null && headerActions !== false && /* @__PURE__ */ jsx(FrameHeaderActions, { actions: headerActions, onClose: modal.onClose })
               ] }),
@@ -83,7 +83,7 @@ function FrameClose({ label, onClose }) {
       type: "button",
       onClick: close,
       "aria-label": labels.close,
-      className: cn("-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]", FOCUS_RING),
+      className: cn("-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary", FOCUS_RING),
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })
     }
   );
@@ -109,7 +109,7 @@ function FrameActions({
       {
         className: cn(
           "flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3",
-          divider && "border-t border-[var(--border)]"
+          divider && "border-t border-subtle"
         ),
         children: typeof actions === "function" ? actions(close) : actions
       }

package/dist/components/dialog-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\nexport const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels = { close: \"Close\" };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal`.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={[hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined}\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-[var(--border)]\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-[var(--text-primary)]\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-[var(--text-muted)]\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */\nfunction FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\"dialogFrame\", DEFAULT_DIALOG_FRAME_LABELS, label === undefined ? undefined : { close: label });\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      aria-label={labels.close}\n      className={cn(\"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\", FOCUS_RING)}\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-[var(--border)]\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_DIALOG_FRAME_LABELS } from \"./dialog-frame-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\n// Defined in ./dialog-frame-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DIALOG_FRAME_LABELS };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal`.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={[hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined}\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-subtle\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-primary\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */\nfunction FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\"dialogFrame\", DEFAULT_DIALOG_FRAME_LABELS, label === undefined ? undefined : { close: label });\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      aria-label={labels.close}\n      className={cn(\"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary\", FOCUS_RING)}\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-subtle\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/disclosure.d.ts

@@ -1,11 +1,9 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
 /**
  * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a
  * `data-tour` anchor or a test id reaches the element that folds.
  */
-interface CollapseProps extends ComponentPropsWithoutRef<"div"> {
+export interface CollapseProps extends ComponentPropsWithRef<"div"> {
     open: boolean;
     /**
      * Keep the children mounted while shut (hidden and `inert`) instead of unmounting
@@ -41,14 +39,14 @@ interface CollapseProps extends ComponentPropsWithoutRef<"div"> {
  * Padding and margins belong on a child: on this element, or the clipping one inside
  * it, they would hold the row open by that much.
  */
-declare function Collapse({ open, keepMounted, children, className, style, ...rest }: CollapseProps): react.JSX.Element;
+export declare function Collapse({ open, keepMounted, children, className, style, ...rest }: CollapseProps): import("react").JSX.Element;
 /**
  * What {@link DisclosureProps.triggerProps} may put on the header button: its own
  * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —
  * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor
  * `className`, which is {@link DisclosureProps.headerClassName}.
  */
-type DisclosureTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "type" | "aria-expanded" | "aria-controls" | "disabled" | "onClick" | "children" | "className"> & {
+export type DisclosureTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "type" | "aria-expanded" | "aria-controls" | "disabled" | "onClick" | "children" | "className"> & {
     [data: `data-${string}`]: string | number | boolean | undefined;
 };
 /**
@@ -56,7 +54,7 @@ type DisclosureTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "type" |
  * name: here it is the header's content (and a ReactNode), not the browser's tooltip.
  * Everything else reaches the outer element.
  */
-interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+export interface DisclosureProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     /** What the header says. A node, so a status chip or a count can sit in it. */
     title: ReactNode;
     /** The smaller line under the title — what is inside, for a reader deciding whether
@@ -222,6 +220,4 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
  * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that
  * is the default and when to opt out.
  */
-declare function Disclosure({ title, hint, open: controlled, defaultOpen, onOpenChange, variant, chevronPosition, headingAs: Heading, keepMounted, disabled, headerClassName, triggerProps, bodyClassName, trailing, trailingInTrigger, controls, className, children, ...rest }: DisclosureProps): react.JSX.Element;
-
-export { Collapse, type CollapseProps, Disclosure, type DisclosureProps, type DisclosureTriggerProps };
+export declare function Disclosure({ title, hint, open: controlled, defaultOpen, onOpenChange, variant, chevronPosition, headingAs: Heading, keepMounted, disabled, headerClassName, triggerProps, bodyClassName, trailing, trailingInTrigger, controls, className, children, ...rest }: DisclosureProps): import("react").JSX.Element;

package/dist/components/disclosure.js

@@ -4,14 +4,14 @@ import { useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
-import { prefersReducedMotion } from "../hooks/use-close-transition.js";
+import { skipsExitAnimation } from "../hooks/use-close-transition.js";
 const COLLAPSE_MS = 200;
 function Collapse({ open, keepMounted = false, children, className, style, ...rest }) {
   const [lingering, setLingering] = useState(false);
   const [prevOpen, setPrevOpen] = useState(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
-    setLingering(!open && !prefersReducedMotion());
+    setLingering(!open && !skipsExitAnimation());
   }
   useEffect(() => {
     if (!lingering) return;
@@ -100,20 +100,20 @@ function Disclosure({
           // card's hover paint on the stretched area / the row, not the text box.
           cn(
             "min-w-0 flex-1 after:absolute after:inset-0 after:content-['']",
-            "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
+            "focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand",
             card ? cn("after:rounded-lg", joined && "after:rounded-b-none") : !menu && "after:rounded-sm"
           )
         ) : FOCUS_RING,
         card ? cn(
           "items-center justify-between rounded-lg p-4",
-          trailingBeside ? "pe-0" : "hover:bg-[var(--bg-hover)] focus-visible:ring-inset",
+          trailingBeside ? "pe-0" : "hover:bg-hover focus-visible:ring-inset",
           joined && "rounded-b-none"
         ) : menu ? (
           // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a
           // component does not reach up into the shell. A test holds the two to
           // the same classes.
-          "items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] focus-visible:ring-inset"
-        ) : "items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
+          "items-center justify-between gap-3 px-3 py-2 text-sm text-secondary hover:bg-hover focus-visible:ring-inset"
+        ) : "items-center rounded-sm text-sm font-medium text-secondary hover:text-primary",
         headerClassName
       ),
       children: [
@@ -126,8 +126,8 @@ function Disclosure({
               /* @__PURE__ */ jsx("span", { className: "min-w-0", children: title }),
               /* @__PURE__ */ jsx(Chevron, { open, small: true })
             ] })
-          ) : /* @__PURE__ */ jsx("span", { className: cn("block", card && "text-sm font-semibold text-[var(--text-primary)]"), children: title }),
-          hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs font-normal text-[var(--text-muted)]", children: hint })
+          ) : /* @__PURE__ */ jsx("span", { className: cn("block", card && "text-sm font-semibold text-primary"), children: title }),
+          hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs font-normal text-muted", children: hint })
         ] }),
         trailingInside && " ",
         trailingInside && /* @__PURE__ */ jsx("span", { "data-disclosure-trailing": "", className: "flex shrink-0 items-center gap-2", children: trailing }),
@@ -140,7 +140,7 @@ function Disclosure({
     "div",
     {
       ...rest,
-      className: cn(card && "rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm", className),
+      className: cn(card && "rounded-lg border border-subtle bg-surface shadow-sm", className),
       children: [
         trailingBeside ? /* @__PURE__ */ jsxs(
           "div",
@@ -148,7 +148,7 @@ function Disclosure({
             className: cn(
               "relative flex items-center gap-2",
               card && cn(
-                "rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]",
+                "rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-hover",
                 joined && "rounded-b-none"
               )
             ),
@@ -174,7 +174,7 @@ function Chevron({
     {
       "aria-hidden": true,
       className: cn(
-        "shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none",
+        "shrink-0 text-muted transition-transform duration-200 ease-out motion-reduce:transition-none",
         small ? "size-3.5" : "size-4",
         leading ? !open && "-rotate-90 rtl:rotate-90" : open && "rotate-180"
       )

package/dist/components/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\n// Read at the moment of closing, as `useCloseTransition` does: the setting can change\n// under a long-lived page.\nimport { prefersReducedMotion } from \"../hooks/use-close-transition\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   *\n   * `menu` is a row of a `HoverMenu`: the top bar's menu-item look\n   * (`TOPBAR_MENU_ITEM_CLASS` — full-width, `px-3 py-2`, regular weight, square, the\n   * hover wash with the text colour left alone), an INSET focus ring so the menu's\n   * clipping edge cannot cut it off, the chevron at the end (`chevronPosition`\n   * defaults to `end` here) and a body with no padding of its own, so the sub-list's\n   * rows sit flush like the rows around them. keksdose's account menu opens its\n   * language sub-list this way, and on `bare` it took four header overrides and a\n   * body one to get there (account-menu.tsx).\n   */\n  variant?: \"card\" | \"bare\" | \"menu\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there. A `menu` defaults to `end`, like the menu rows around it.\n   *\n   * `after-title` sits it right after the title's text, pointing down and turning up —\n   * \"Net profit ⌄ ······ 1,234.50\", Lenkbank's result rows, where the far end of the\n   * row belongs to a figure (see {@link trailingInTrigger}) and a leading chevron\n   * would push every label off the column the non-expandable rows' labels start on.\n   * Not a card's: its chevron keeps the end.\n   */\n  chevronPosition?: \"start\" | \"end\" | \"after-title\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   *\n   * Unless {@link trailingInTrigger} is set, which moves it INTO the button.\n   */\n  trailing?: ReactNode;\n  /**\n   * Render {@link trailing} inside the header button instead of beside it, so the\n   * whole row — figure included — is one click target and the figure is part of the\n   * button's accessible name: \"Net profit 1,234.50, collapsed\" rather than a button\n   * called \"Net profit\" next to an unexplained number.\n   *\n   * Lenkbank's result rows (features/steering/results-panel.tsx) are the case: label,\n   * chevron, and the value at the far end, all one `<button>`, because a result row\n   * has nothing else it could mean.\n   *\n   * ⚠️ Only for NON-interactive content — a count, a figure, a status chip. A button\n   * may not contain another interactive element; an action belongs in the default,\n   * sibling `trailing`. The content is rendered in a `<span>`, so keep it phrasing\n   * content too (no `div`s).\n   */\n  trailingInTrigger?: boolean;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   *\n   * It is an IDREF LIST, as `aria-controls` is: several space-separated ids when what\n   * folds is several elements — a budget group's category rows, each its own `<li>`,\n   * siblings of this header (keksdose's budget-mobile-list joins their ids with\n   * `\" \"`). It may be the EMPTY string: trigger-only mode with nothing to point at yet\n   * (a group whose rows are all filtered away, rows that are not rendered while shut).\n   * The header then carries no `aria-controls` at all rather than an empty one, and\n   * still toggles.\n   *\n   * A table's leading row — keksdose's \"Upcoming\" toggle over the scheduled rows of\n   * its transactions table — is this mode too: the rows it folds are the TABLE's, so\n   * the disclosure is only the header, and the table renders or drops them from the\n   * same state.\n   *\n   * ```tsx\n   * <DataTable\n   *   rows={showFuture ? [...scheduled, ...posted] : posted}\n   *   leadingRow={\n   *     <Disclosure\n   *       variant=\"bare\"\n   *       title={upcomingLabel}\n   *       open={showFuture}\n   *       onOpenChange={setShowFuture}\n   *       // The scheduled rows' ids while they are rendered; \"\" while they are not.\n   *       controls={showFuture ? scheduled.map((tx) => `row-s${tx.id}`).join(\" \") : \"\"}\n   *       headerClassName=\"px-3 py-2\"\n   *     />\n   *   }\n   *   …\n   * />\n   * ```\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition,\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  trailingInTrigger = false,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const menu = variant === \"menu\";\n  // The card's chevron trails always; a menu row's unless asked otherwise; a bare\n  // one only when asked to.\n  const chevronAt = card ? \"end\" : (chevronPosition ?? (menu ? \"end\" : \"start\"));\n  const chevronAtEnd = chevronAt === \"end\";\n  const chevronAfterTitle = chevronAt === \"after-title\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n  // `trailing` beside the button, which then stretches under it; inside the button,\n  // the row is simply the button.\n  const trailingInside = hasTrailing && trailingInTrigger;\n  const trailingBeside = hasTrailing && !trailingInTrigger;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=\"\"`.\n      aria-controls={triggerOnly ? controls || undefined : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        trailingBeside\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : !menu && \"after:rounded-sm\",\n            )\n          : FOCUS_RING,\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              trailingBeside ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : menu\n            ? // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a\n              // component does not reach up into the shell. A test holds the two to\n              // the same classes.\n              \"items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] focus-visible:ring-inset\"\n            : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {chevronAt === \"start\" && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        {chevronAfterTitle ? (\n          // The chevron hugs the text, however long the translation: the text wraps\n          // before the chevron is pushed away from it.\n          <span className=\"flex items-center gap-1\">\n            <span className=\"min-w-0\">{title}</span>\n            <Chevron open={open} small />\n          </span>\n        ) : (\n          <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        )}\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {/* The space is for the accessible name — \"Net profit 1,234.50\", not\n          \"Net profit1,234.50\"; between flex items it renders as nothing. */}\n      {trailingInside && \" \"}\n      {trailingInside && (\n        <span data-disclosure-trailing=\"\" className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n        </span>\n      )}\n      {chevronAtEnd && !trailingBeside && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={trailingBeside ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {trailingBeside ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : !menu && \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\n// Read at the moment of closing, as `useCloseTransition` does: the setting can change\n// under a long-lived page.\nimport { skipsExitAnimation } from \"../hooks/use-close-transition\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !skipsExitAnimation());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   *\n   * `menu` is a row of a `HoverMenu`: the top bar's menu-item look\n   * (`TOPBAR_MENU_ITEM_CLASS` — full-width, `px-3 py-2`, regular weight, square, the\n   * hover wash with the text colour left alone), an INSET focus ring so the menu's\n   * clipping edge cannot cut it off, the chevron at the end (`chevronPosition`\n   * defaults to `end` here) and a body with no padding of its own, so the sub-list's\n   * rows sit flush like the rows around them. keksdose's account menu opens its\n   * language sub-list this way, and on `bare` it took four header overrides and a\n   * body one to get there (account-menu.tsx).\n   */\n  variant?: \"card\" | \"bare\" | \"menu\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there. A `menu` defaults to `end`, like the menu rows around it.\n   *\n   * `after-title` sits it right after the title's text, pointing down and turning up —\n   * \"Net profit ⌄ ······ 1,234.50\", Lenkbank's result rows, where the far end of the\n   * row belongs to a figure (see {@link trailingInTrigger}) and a leading chevron\n   * would push every label off the column the non-expandable rows' labels start on.\n   * Not a card's: its chevron keeps the end.\n   */\n  chevronPosition?: \"start\" | \"end\" | \"after-title\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   *\n   * Unless {@link trailingInTrigger} is set, which moves it INTO the button.\n   */\n  trailing?: ReactNode;\n  /**\n   * Render {@link trailing} inside the header button instead of beside it, so the\n   * whole row — figure included — is one click target and the figure is part of the\n   * button's accessible name: \"Net profit 1,234.50, collapsed\" rather than a button\n   * called \"Net profit\" next to an unexplained number.\n   *\n   * Lenkbank's result rows (features/steering/results-panel.tsx) are the case: label,\n   * chevron, and the value at the far end, all one `<button>`, because a result row\n   * has nothing else it could mean.\n   *\n   * ⚠️ Only for NON-interactive content — a count, a figure, a status chip. A button\n   * may not contain another interactive element; an action belongs in the default,\n   * sibling `trailing`. The content is rendered in a `<span>`, so keep it phrasing\n   * content too (no `div`s).\n   */\n  trailingInTrigger?: boolean;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   *\n   * It is an IDREF LIST, as `aria-controls` is: several space-separated ids when what\n   * folds is several elements — a budget group's category rows, each its own `<li>`,\n   * siblings of this header (keksdose's budget-mobile-list joins their ids with\n   * `\" \"`). It may be the EMPTY string: trigger-only mode with nothing to point at yet\n   * (a group whose rows are all filtered away, rows that are not rendered while shut).\n   * The header then carries no `aria-controls` at all rather than an empty one, and\n   * still toggles.\n   *\n   * A table's leading row — keksdose's \"Upcoming\" toggle over the scheduled rows of\n   * its transactions table — is this mode too: the rows it folds are the TABLE's, so\n   * the disclosure is only the header, and the table renders or drops them from the\n   * same state.\n   *\n   * ```tsx\n   * <DataTable\n   *   rows={showFuture ? [...scheduled, ...posted] : posted}\n   *   leadingRow={\n   *     <Disclosure\n   *       variant=\"bare\"\n   *       title={upcomingLabel}\n   *       open={showFuture}\n   *       onOpenChange={setShowFuture}\n   *       // The scheduled rows' ids while they are rendered; \"\" while they are not.\n   *       controls={showFuture ? scheduled.map((tx) => `row-s${tx.id}`).join(\" \") : \"\"}\n   *       headerClassName=\"px-3 py-2\"\n   *     />\n   *   }\n   *   …\n   * />\n   * ```\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition,\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  trailingInTrigger = false,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const menu = variant === \"menu\";\n  // The card's chevron trails always; a menu row's unless asked otherwise; a bare\n  // one only when asked to.\n  const chevronAt = card ? \"end\" : (chevronPosition ?? (menu ? \"end\" : \"start\"));\n  const chevronAtEnd = chevronAt === \"end\";\n  const chevronAfterTitle = chevronAt === \"after-title\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n  // `trailing` beside the button, which then stretches under it; inside the button,\n  // the row is simply the button.\n  const trailingInside = hasTrailing && trailingInTrigger;\n  const trailingBeside = hasTrailing && !trailingInTrigger;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=\"\"`.\n      aria-controls={triggerOnly ? controls || undefined : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        trailingBeside\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : !menu && \"after:rounded-sm\",\n            )\n          : FOCUS_RING,\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              trailingBeside ? \"pe-0\" : \"hover:bg-hover focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : menu\n            ? // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a\n              // component does not reach up into the shell. A test holds the two to\n              // the same classes.\n              \"items-center justify-between gap-3 px-3 py-2 text-sm text-secondary hover:bg-hover focus-visible:ring-inset\"\n            : \"items-center rounded-sm text-sm font-medium text-secondary hover:text-primary\",\n        headerClassName,\n      )}\n    >\n      {chevronAt === \"start\" && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        {chevronAfterTitle ? (\n          // The chevron hugs the text, however long the translation: the text wraps\n          // before the chevron is pushed away from it.\n          <span className=\"flex items-center gap-1\">\n            <span className=\"min-w-0\">{title}</span>\n            <Chevron open={open} small />\n          </span>\n        ) : (\n          <span className={cn(\"block\", card && \"text-sm font-semibold text-primary\")}>{title}</span>\n        )}\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-muted\">{hint}</span>\n        )}\n      </span>\n      {/* The space is for the accessible name — \"Net profit 1,234.50\", not\n          \"Net profit1,234.50\"; between flex items it renders as nothing. */}\n      {trailingInside && \" \"}\n      {trailingInside && (\n        <span data-disclosure-trailing=\"\" className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n        </span>\n      )}\n      {chevronAtEnd && !trailingBeside && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={trailingBeside ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-subtle bg-surface shadow-sm\", className)}\n    >\n      {trailingBeside ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-hover\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : !menu && \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-muted transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/dropdown.d.ts

@@ -1,9 +1,9 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, RefObject, KeyboardEvent } from 'react';
-
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, KeyboardEvent as ReactKeyboardEvent, ReactNode, Ref, RefObject } from "react";
 /**
- * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,
- * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`
+ * Open state + close-on-outside-click for a custom dropdown — the two input-shaped
+ * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and
+ * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round
+ * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`
  * to the relatively-positioned container; the popover lives inside it so a click
  * anywhere else closes it.
  *
@@ -49,22 +49,37 @@ import { ComponentPropsWithoutRef, ReactNode, RefObject, KeyboardEvent } from 'r
  * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an
  * outside press closed them, and the one key every other dismissible surface in the
  * package answers to did nothing — so a keyboard user who opened a list had no way
- * out of it that did not also choose something. {@link useEscapeKey} is the listener
- * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package
- * keeps one answer to "what does Escape do" rather than growing a fifth.
+ * out of it that did not also choose something. An open list is a layer on the kit's
+ * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and
+ * `useComboboxCore` are, so the package keeps one answer to "what does Escape do".
  *
  * Escape RESTORES FOCUS; an outside press does not. A press has already put focus
  * where the user pointed, and dragging it back from there would be the bug. Attach
  * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,
- * Tab, a commit — hand focus back to it; leave it unattached and they simply close,
- * which is what the callers written before this get.
+ * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to
+ * whatever held focus when the list opened, which is the control that was pressed.
+ *
+ * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)
+ *
+ * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the
+ * DIALOG, form and all, and leave the list open: the dialog took Escape in its own
+ * `onKeyDown` before a document listener could. On the stack the list is above the
+ * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and
+ * {@link DropdownSearchHeader} take the key on their own elements, where focus is,
+ * and stop it there — so a caller passes nothing new, AmountInput's currency chip
+ * included.
+ *
+ * `escapeLayer: false` is for a caller that registers its own layer: the editable
+ * comboboxes, whose list can be "open" with nothing in it to show — an Escape there
+ * belongs to the dialog.
  */
-declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, panelIsSheet, }?: {
+export declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, panelIsSheet, escapeLayer, }?: {
     backCloses?: boolean;
     panelIsSheet?: boolean;
+    escapeLayer?: boolean;
 }): {
     open: boolean;
-    setOpen: react.Dispatch<react.SetStateAction<boolean>>;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     wrapperRef: RefObject<T | null>;
     panelRef: RefObject<HTMLDivElement | null>;
     triggerRef: RefObject<HTMLButtonElement | null>;
@@ -74,21 +89,21 @@ declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backClose
  * {@link useDropdown} plus a search box: clears the query and focuses the search
  * input each time the panel opens, so typing filters immediately.
  */
-declare function useDropdownSearch<T extends HTMLElement = HTMLDivElement>(): {
+export declare function useDropdownSearch<T extends HTMLElement = HTMLDivElement>(): {
     open: boolean;
-    setOpen: react.Dispatch<react.SetStateAction<boolean>>;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     wrapperRef: RefObject<T | null>;
     panelRef: RefObject<HTMLDivElement | null>;
     triggerRef: RefObject<HTMLButtonElement | null>;
     closeToTrigger: () => void;
     query: string;
-    setQuery: react.Dispatch<react.SetStateAction<string>>;
+    setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
     inputRef: RefObject<HTMLInputElement | null>;
 };
 /** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled
  *  where the focus is (see the note above), so the div's own handler signature is
  *  omitted in favour of it. */
-interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "onKeyDown"> {
+export interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithRef<"div">, "onKeyDown"> {
     query: string;
     onQueryChange: (v: string) => void;
     inputRef: RefObject<HTMLInputElement | null>;
@@ -97,8 +112,10 @@ interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithoutRef<"div">
     listboxId?: string;
     /** The id of the option the arrow keys are currently on, if any. */
     activeId?: string;
-    /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is. */
-    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.
+     *  Escape closes the list (the topmost layer on the kit's Escape stack); call
+     *  `preventDefault()` on it here to keep it. */
+    onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;
 }
 /** The search row (magnifier + text input) shared by the searchable dropdowns.
  *
@@ -122,8 +139,8 @@ interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithoutRef<"div">
  *
  *  Pass `listboxId` and the wiring appears; omit it and the box is what it always
  *  was, for the callers that have no listbox to point at. */
-declare function DropdownSearchHeader({ query, onQueryChange, inputRef, placeholder, listboxId, activeId, onKeyDown, "aria-label": ariaLabel, className, ...rest }: DropdownSearchHeaderProps): react.JSX.Element;
-interface DropdownPanelProps extends ComponentPropsWithoutRef<"div"> {
+export declare function DropdownSearchHeader({ query, onQueryChange, inputRef, placeholder, listboxId, activeId, onKeyDown, "aria-label": ariaLabel, className, ...rest }: DropdownSearchHeaderProps): import("react").JSX.Element;
+export interface DropdownPanelProps extends ComponentPropsWithoutRef<"div"> {
     header?: ReactNode;
     empty?: boolean;
     /** Attributes for the `<ul>` itself — how a caller whose children are options
@@ -133,18 +150,30 @@ interface DropdownPanelProps extends ComponentPropsWithoutRef<"div"> {
     listProps?: ComponentPropsWithoutRef<"ul">;
     /** The trigger to hang off. Given, the panel portals and goes `fixed`. */
     anchorRef?: RefObject<HTMLElement | null>;
-    /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */
+    /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape
+     *  anywhere in the panel, on a row as in the search box, closes the list rather than
+     *  a dialog around it. */
     panelRef?: RefObject<HTMLDivElement | null>;
     /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */
     width?: number;
     /** Which of the panel's edges lines up with the trigger's, room permitting.
      *  `start`/`end` follow the trigger's reading direction — `end` is the right edge
      *  in a left-to-right form and the left one in a right-to-left form — and are what
-     *  the kit's own pickers pass; `left`/`right` stay physical. Default `end`, which
-     *  is the old `right` in a left-to-right page. */
-    align?: "left" | "right" | "start" | "end";
+     *  the kit's own pickers pass; `left`/`right` are physical and deprecated
+     *  ({@link PhysicalAlign}). Default `end`, which is the old `right` in a
+     *  left-to-right page. */
+    align?: "start" | "end" | PhysicalAlign;
     children: ReactNode;
+    /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
+     *  merged with `panelRef`, so the outside-click still sees it. */
+    ref?: Ref<HTMLDivElement>;
 }
+/**
+ * @deprecated 0.34 — `"start"` / `"end"`, which follow the reading direction: `"right"`
+ * is `"end"` in a left-to-right page, the default; removed in 0.35 (refactor audit
+ * 2026-10, API-6e). The physical edges DropdownPanel's `align` still takes.
+ */
+type PhysicalAlign = "left" | "right";
 /**
  * The floating popover surface for the searchable dropdowns: bordered/shadowed
  * panel, an optional `header` slot (search box, plus any actions), and a
@@ -173,6 +202,5 @@ interface DropdownPanelProps extends ComponentPropsWithoutRef<"div"> {
  * no longer inside the wrapper, so the outside-click handler has to be told about it
  * or the first click on an option closes the list instead of choosing from it.
  */
-declare function DropdownPanel({ header, empty, className, listProps, anchorRef, panelRef, width, align, children, style, ...rest }: DropdownPanelProps): react.JSX.Element | null;
-
-export { DropdownPanel, type DropdownPanelProps, DropdownSearchHeader, type DropdownSearchHeaderProps, useDropdown, useDropdownSearch };
+export declare function DropdownPanel({ header, empty, className, listProps, anchorRef, panelRef, width, align, children, style, onKeyDown, ref, ...rest }: DropdownPanelProps): import("react").JSX.Element | null;
+export {};