@eifi1/ui-kit 0.46.1 → 0.48.0

package/dist/components/disclosure.d.ts

@@ -203,7 +203,9 @@ export interface DisclosureProps extends Omit<ComponentPropsWithRef<"div">, "tit
      * ```
      */
     controls?: string;
-    /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */
+    /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}),
+     *  nor when there is none (0.48): no children, no empty box under the header.
+     *  `null`, `false`, `undefined` and an empty fragment (`<></>`) count as none. */
     children?: ReactNode;
 }
 /**

package/dist/components/disclosure.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
+import { Children, Fragment, isValidElement, useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
@@ -72,7 +72,8 @@ function Disclosure({
   const chevronAtEnd = chevronAt === "end";
   const chevronAfterTitle = chevronAt === "after-title";
   const triggerOnly = controls !== void 0;
-  const joined = open && !triggerOnly;
+  const hasBody = !triggerOnly && hasBodyContent(children);
+  const joined = open && hasBody;
   const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false;
   const trailingInside = hasTrailing && trailingInTrigger;
   const trailingBeside = hasTrailing && !trailingInTrigger;
@@ -88,7 +89,7 @@ function Disclosure({
       ...extraTriggerProps,
       type: "button",
       "aria-expanded": open,
-      "aria-controls": triggerOnly ? controls || void 0 : bodyId,
+      "aria-controls": triggerOnly ? controls || void 0 : hasBody ? bodyId : void 0,
       disabled,
       onClick: toggle,
       "data-disclosure-trigger": "",
@@ -159,7 +160,7 @@ function Disclosure({
             ]
           }
         ) : header,
-        !triggerOnly && /* @__PURE__ */ jsx(Collapse, { id: bodyId, open, keepMounted, children: /* @__PURE__ */ jsx("div", { className: cn(card ? "space-y-3 px-4 pb-4" : !menu && "space-y-2 pt-2", bodyClassName), children }) })
+        hasBody && /* @__PURE__ */ jsx(Collapse, { id: bodyId, open, keepMounted, children: /* @__PURE__ */ jsx("div", { className: cn(card ? "space-y-3 px-4 pb-4" : !menu && "space-y-2 pt-2", bodyClassName), children }) })
       ]
     }
   );
@@ -181,6 +182,11 @@ function Chevron({
     }
   );
 }
+function hasBodyContent(children) {
+  return Children.toArray(children).some(
+    (child) => isValidElement(child) && child.type === Fragment ? hasBodyContent(child.props.children) : child !== ""
+  );
+}
 export {
   Collapse,
   Disclosure

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, 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":";AAuFM,cA+RI,YA/RJ;AAvFN,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAG3B,SAAS,0BAA0B;AAInC,MAAM,cAAc;AA2Cb,SAAS,SAAS,EAAE,MAAM,cAAc,OAAO,UAAU,WAAW,OAAO,GAAG,KAAK,GAAkB;AAM1G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,MAAI,SAAS,UAAU;AACrB,gBAAY,IAAI;AAChB,iBAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC;AAAA,EAC7C;AACA,YAAU,MAAM;AACd,QAAI,CAAC,UAAW;AAChB,UAAM,QAAQ,WAAW,MAAM,aAAa,KAAK,GAAG,WAAW;AAC/D,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAU,QAAQ,aAAa;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,CAAC;AAAA,MACR,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA,OAAO,EAAE,GAAG,OAAO,kBAAkB,OAAO,QAAQ,OAAO,YAAY,OAAO,YAAY,SAAS;AAAA,MAEnG;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,OAAO,gBAAgB;AAAA,UACzB;AAAA,UAEC,qBAAW;AAAA;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAyLO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,WAAW;AAC1C,QAAM,OAAO,cAAc;AAC3B,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,YAAY;AACzB,QAAM,OAAO,YAAY;AAGzB,QAAM,YAAY,OAAO,QAAS,oBAAoB,OAAO,QAAQ;AACrE,QAAM,eAAe,cAAc;AACnC,QAAM,oBAAoB,cAAc;AACxC,QAAM,cAAc,aAAa;AAEjC,QAAM,SAAS,QAAQ,CAAC;AACxB,QAAM,cAAc,aAAa,UAAa,aAAa,QAAQ,aAAa;AAGhF,QAAM,iBAAiB,eAAe;AACtC,QAAM,iBAAiB,eAAe,CAAC;AAEvC,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,QAAI,eAAe,OAAW,QAAO,IAAI;AACzC,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,oBAAoB,OAAO,iBAAiB,aAAa,aAAa,IAAI,IAAI;AAEpF,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,iBAAe;AAAA,MAEf,iBAAe,cAAc,YAAY,SAAY;AAAA,MACrD;AAAA,MACA,SAAS;AAAA,MACT,2BAAwB;AAAA,MACxB,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,UAII;AAAA,YACE;AAAA,YACA;AAAA,YACA,OAAO,GAAG,oBAAoB,UAAU,sBAAsB,IAAI,CAAC,QAAQ;AAAA,UAC7E;AAAA,YACA;AAAA,QACJ,OACI;AAAA,UACE;AAAA,UACA,iBAAiB,SAAS;AAAA,UAC1B,UAAU;AAAA,QACZ,IACA;AAAA;AAAA;AAAA;AAAA,UAIE;AAAA,YACA;AAAA,QACN;AAAA,MACF;AAAA,MAEC;AAAA,sBAAc,WAAW,oBAAC,WAAQ,MAAY,SAAO,MAAC;AAAA,QAGvD,qBAAC,UAAK,WAAU,kBACb;AAAA;AAAA;AAAA;AAAA,YAGC,qBAAC,UAAK,WAAU,2BACd;AAAA,kCAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,cACjC,oBAAC,WAAQ,MAAY,OAAK,MAAC;AAAA,eAC7B;AAAA,cAEA,oBAAC,UAAK,WAAW,GAAG,SAAS,QAAQ,oCAAoC,GAAI,iBAAM;AAAA,UAEpF,SAAS,UACR,oBAAC,UAAK,WAAU,+CAA+C,gBAAK;AAAA,WAExE;AAAA,QAGC,kBAAkB;AAAA,QAClB,kBACC,oBAAC,UAAK,4BAAyB,IAAG,WAAU,oCACzC,oBACH;AAAA,QAED,gBAAgB,CAAC,kBAAkB,oBAAC,WAAQ,MAAY,OAAO,CAAC,MAAM;AAAA;AAAA;AAAA,EACzE;AAKF,QAAM,SAAS,UAAU,oBAAC,WAAQ,WAAW,iBAAiB,mBAAmB,QAAY,kBAAO,IAAa;AAEjH,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,QAAQ,wDAAwD,SAAS;AAAA,MAEtF;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,QACE;AAAA,gBACE;AAAA,gBACA,UAAU;AAAA,cACZ;AAAA,YACJ;AAAA,YAEC;AAAA;AAAA,cAGD,oBAAC,SAAI,WAAU,6CAA6C,oBAAS;AAAA,cACpE,gBAAgB,oBAAC,WAAQ,MAAY,OAAO,CAAC,MAAM;AAAA;AAAA;AAAA,QACtD,IAEA;AAAA,QAED,CAAC,eACA,oBAAC,YAAS,IAAI,QAAQ,MAAY,aAChC,8BAAC,SAAI,WAAW,GAAG,OAAO,wBAAwB,CAAC,QAAQ,kBAAkB,aAAa,GAAI,UAAS,GACzG;AAAA;AAAA;AAAA,EAEJ;AAEJ;AASA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AACV,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,aAAa;AAAA,QACrB,UAAU,CAAC,QAAQ,6BAA6B,QAAQ;AAAA,MAC1D;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { Children, Fragment, isValidElement, 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   *  nor when there is none (0.48): no children, no empty box under the header.\n   *  `null`, `false`, `undefined` and an empty fragment (`<></>`) count as none. */\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  // 0.48 (keksdose dev #603): no children, no body — an empty padded box under the\n  // header made an open disclosure 8px taller than a shut one, and its `aria-controls`\n  // named a region with nothing in it. `null`, `false` and `undefined` are nothing, and\n  // so is a fragment of nothing (`cond ? <X /> : <></>`, keksdose N1).\n  const hasBody = !triggerOnly && hasBodyContent(children);\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && hasBody;\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 : hasBody ? bodyId : undefined}\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      {hasBody && (\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\n/** Whether `children` holds anything to draw: `null`/`false`/`undefined`/`\"\"` are nothing,\n *  and a fragment counts by what is in it (an empty `<></>` is nothing). */\nfunction hasBodyContent(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) =>\n    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n      ? hasBodyContent(child.props.children)\n      : child !== \"\",\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/dropdown.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Search } from "lucide-react";
 import { anchoredInline, useAnchoredPanel } from "../hooks/use-anchored-panel.js";
-import { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss.js";
+import { pressInside, runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { cn } from "../lib/cn.js";
 import { FIELD_TOUCH_TEXT } from "./field-base.js";
@@ -144,6 +144,11 @@ function DropdownPanel({
     runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));
     takeEscape(e);
   };
+  const markInside = pressInside(panelRef);
+  const handlePointerDownCapture = (e) => {
+    rest.onPointerDownCapture?.(e);
+    markInside?.(e);
+  };
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     header,
     /* @__PURE__ */ jsxs("ul", { ...listProps, className: cn("overflow-y-auto py-1", listProps?.className), children: [
@@ -161,6 +166,7 @@ function DropdownPanel({
           style,
           ref: setPanel,
           onKeyDown: handleKeyDown,
+          onPointerDownCapture: handlePointerDownCapture,
           className: cn(
             "absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg",
             "[&>ul]:max-h-64",
@@ -183,6 +189,7 @@ function DropdownPanel({
         ref: setPanel,
         dir,
         onKeyDown: handleKeyDown,
+        onPointerDownCapture: handlePointerDownCapture,
         style: {
           ...style,
           position: "fixed",

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { anchoredInline, useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport type { DismissLayer } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { mergeRefs } from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/** Each list's Escape layer, filed under the refs {@link useDropdown} and\n *  {@link useDropdownSearch} hand out (`panelRef`, `inputRef`), for the panel and the\n *  search box those refs are passed to — see \"The caller's own handler\" on\n *  {@link useDropdown} (round 0.35 R2). Weak: a list's refs go with its component. */\nconst listLayers = new WeakMap<object, DismissLayer>();\n\n/**\n * Open state + close-on-outside-click for a custom dropdown — the two input-shaped\n * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and\n * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round\n * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. An open list is a layer on the kit's\n * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and\n * `useComboboxCore` are, so the package keeps one answer to \"what does Escape do\".\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to\n * whatever held focus when the list opened, which is the control that was pressed.\n *\n * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)\n *\n * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the\n * DIALOG, form and all, and leave the list open: the dialog took Escape in its own\n * `onKeyDown` before a document listener could. On the stack the list is above the\n * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and\n * {@link DropdownSearchHeader} take the key on their own elements, where focus is,\n * and stop it there — so a caller passes nothing new, AmountInput's currency chip\n * included.\n *\n * ## The caller's own handler (round 0.35 R2)\n *\n * A caller's `onKeyDown` on {@link DropdownPanel} or {@link DropdownSearchHeader} hears\n * Escape only while this list is the layer on top — the rule the dialogs got first. A\n * tooltip over a row takes that press first, and the next one is the handler's, whose\n * `preventDefault()` still keeps the list. The two find the list's layer through the\n * refs this hook hands out — the panel through `panelRef`, the search box through\n * {@link useDropdownSearch}'s `inputRef` — so a caller passes nothing new. One handed\n * neither (an un-anchored panel may leave `panelRef` off) hears every key, as before.\n *\n * `escapeLayer: false` is for a caller that registers its own layer: the editable\n * comboboxes, whose list can be \"open\" with nothing in it to show — an Escape there\n * belongs to the dialog.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n  escapeLayer = true,\n}: { backCloses?: boolean; panelIsSheet?: boolean; escapeLayer?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Where focus was as the list opened — the trigger focus goes back to when the\n  // caller attached none. Read in an effect, before `useDropdownSearch`'s frame moves\n  // focus into the search box.\n  const openerRef = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const el = document.activeElement;\n    openerRef.current = el instanceof HTMLElement && el !== document.body ? el : null;\n  }, [open]);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document, and inside a dialog the next Escape goes\n  // nowhere. Whoever closed the list with a key gets focus handed back to the trigger\n  // they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    const back = triggerRef.current ?? openerRef.current;\n    if (back?.isConnected) back.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  // See \"Escape inside a dialog\" above.\n  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);\n  // Filed under `panelRef` for the panel's own handler — \"The caller's own handler\" above.\n  useEffect(() => {\n    listLayers.set(panelRef, layer);\n  }, [panelRef, layer]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The list's layer again, under `inputRef` for the search box's handler (round 0.35\n  // R2). `useDropdown`'s effect, which runs first, has filed it under `panelRef`.\n  useEffect(() => {\n    const layer = listLayers.get(panelRef);\n    if (layer) listLayers.set(inputRef, layer);\n  }, [panelRef]);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.\n   *  Escape closes the list (the topmost layer on the kit's Escape stack); call\n   *  `preventDefault()` on it here to keep it. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-subtle px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-placeholder\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={(e) => {\n          // The caller's handler hears Escape only while the list is on top (round 0.35\n          // R2) — the layer filed under `inputRef`, when {@link useDropdownSearch} made it.\n          runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));\n          // Focus is in this box while the list is up, so this is where Escape lands\n          // first — see \"Escape inside a dialog\" on {@link useDropdown}.\n          takeEscape(e);\n        }}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape\n   *  anywhere in the panel, on a row as in the search box, closes the list rather than\n   *  a dialog around it. It is also how the panel finds the list's Escape layer, for\n   *  its `onKeyDown` (round 0.35 R2: see \"The caller's own handler\" there). */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting, by the\n   *  trigger's reading direction — `end` is the right edge in a left-to-right form and\n   *  the left one in a right-to-left form. Default `end`. The physical `left` / `right`\n   *  went in 0.35 (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a\n   *  left-to-right page, `left` is `start`. */\n  align?: \"start\" | \"end\";\n  children: ReactNode;\n  /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with `panelRef`, so the outside-click still sees it. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: DropdownPanelProps) {\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  // A row the keyboard reached by Tab holds focus too, and its Escape has to close the\n  // list as the search box's does (BUG-1). The caller's handler first, as everywhere.\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    // It hears Escape only while the list is on top, a tooltip over a row taking the\n    // press first (round 0.35 R2) — the layer filed under `panelRef`, when handed one.\n    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));\n    takeEscape(e);\n  };\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-muted\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n      <div\n        {...rest}\n        style={style}\n        ref={setPanel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped to the glass as `Popover` is (Wave 2, DUP-7): the panel may leave the\n  // trigger's edge to stay on screen, because a list half off the viewport is the bug\n  // this exists for. The portal leaves the subtree the trigger's `dir` came from, so it\n  // is read off the trigger — for the alignment here, and for the panel's own `dir`\n  // below, without which a right-to-left form got a left-to-right list.\n  const { left } = anchoredInline(rect, width, { dir, align });\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n    <div\n      {...rest}\n      ref={setPanel}\n      dir={dir}\n      onKeyDown={handleKeyDown}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so these values are the panel's own. Flipped above, it hangs from its\n      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose\n      // K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: anchored.above ? undefined : anchored.top,\n        bottom: anchored.above ? anchored.bottom : undefined,\n        left,\n        width,\n        maxHeight: anchored.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-subtle bg-surface shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { anchoredInline, useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { pressInside, runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport type { DismissLayer } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { mergeRefs } from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/** Each list's Escape layer, filed under the refs {@link useDropdown} and\n *  {@link useDropdownSearch} hand out (`panelRef`, `inputRef`), for the panel and the\n *  search box those refs are passed to — see \"The caller's own handler\" on\n *  {@link useDropdown} (round 0.35 R2). Weak: a list's refs go with its component. */\nconst listLayers = new WeakMap<object, DismissLayer>();\n\n/**\n * Open state + close-on-outside-click for a custom dropdown — the two input-shaped\n * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and\n * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round\n * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. An open list is a layer on the kit's\n * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and\n * `useComboboxCore` are, so the package keeps one answer to \"what does Escape do\".\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to\n * whatever held focus when the list opened, which is the control that was pressed.\n *\n * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)\n *\n * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the\n * DIALOG, form and all, and leave the list open: the dialog took Escape in its own\n * `onKeyDown` before a document listener could. On the stack the list is above the\n * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and\n * {@link DropdownSearchHeader} take the key on their own elements, where focus is,\n * and stop it there — so a caller passes nothing new, AmountInput's currency chip\n * included.\n *\n * ## The caller's own handler (round 0.35 R2)\n *\n * A caller's `onKeyDown` on {@link DropdownPanel} or {@link DropdownSearchHeader} hears\n * Escape only while this list is the layer on top — the rule the dialogs got first. A\n * tooltip over a row takes that press first, and the next one is the handler's, whose\n * `preventDefault()` still keeps the list. The two find the list's layer through the\n * refs this hook hands out — the panel through `panelRef`, the search box through\n * {@link useDropdownSearch}'s `inputRef` — so a caller passes nothing new. One handed\n * neither (an un-anchored panel may leave `panelRef` off) hears every key, as before.\n *\n * `escapeLayer: false` is for a caller that registers its own layer: the editable\n * comboboxes, whose list can be \"open\" with nothing in it to show — an Escape there\n * belongs to the dialog.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n  escapeLayer = true,\n}: { backCloses?: boolean; panelIsSheet?: boolean; escapeLayer?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Where focus was as the list opened — the trigger focus goes back to when the\n  // caller attached none. Read in an effect, before `useDropdownSearch`'s frame moves\n  // focus into the search box.\n  const openerRef = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const el = document.activeElement;\n    openerRef.current = el instanceof HTMLElement && el !== document.body ? el : null;\n  }, [open]);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document, and inside a dialog the next Escape goes\n  // nowhere. Whoever closed the list with a key gets focus handed back to the trigger\n  // they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    const back = triggerRef.current ?? openerRef.current;\n    if (back?.isConnected) back.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  // See \"Escape inside a dialog\" above.\n  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);\n  // Filed under `panelRef` for the panel's own handler — \"The caller's own handler\" above.\n  useEffect(() => {\n    listLayers.set(panelRef, layer);\n  }, [panelRef, layer]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The list's layer again, under `inputRef` for the search box's handler (round 0.35\n  // R2). `useDropdown`'s effect, which runs first, has filed it under `panelRef`.\n  useEffect(() => {\n    const layer = listLayers.get(panelRef);\n    if (layer) listLayers.set(inputRef, layer);\n  }, [panelRef]);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.\n   *  Escape closes the list (the topmost layer on the kit's Escape stack); call\n   *  `preventDefault()` on it here to keep it. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-subtle px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-placeholder\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={(e) => {\n          // The caller's handler hears Escape only while the list is on top (round 0.35\n          // R2) — the layer filed under `inputRef`, when {@link useDropdownSearch} made it.\n          runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));\n          // Focus is in this box while the list is up, so this is where Escape lands\n          // first — see \"Escape inside a dialog\" on {@link useDropdown}.\n          takeEscape(e);\n        }}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape\n   *  anywhere in the panel, on a row as in the search box, closes the list rather than\n   *  a dialog around it. It is also how the panel finds the list's Escape layer, for\n   *  its `onKeyDown` (round 0.35 R2: see \"The caller's own handler\" there). */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting, by the\n   *  trigger's reading direction — `end` is the right edge in a left-to-right form and\n   *  the left one in a right-to-left form. Default `end`. The physical `left` / `right`\n   *  went in 0.35 (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a\n   *  left-to-right page, `left` is `start`. */\n  align?: \"start\" | \"end\";\n  children: ReactNode;\n  /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with `panelRef`, so the outside-click still sees it. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: DropdownPanelProps) {\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  // A row the keyboard reached by Tab holds focus too, and its Escape has to close the\n  // list as the search box's does (BUG-1). The caller's handler first, as everywhere.\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    // It hears Escape only while the list is on top, a tooltip over a row taking the\n    // press first (round 0.35 R2) — the layer filed under `panelRef`, when handed one.\n    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));\n    takeEscape(e);\n  };\n  // A press in a panel opened from a row (a popover, its lists) is inside the list for\n  // `useDropdown`'s outside press, though portalled elsewhere (dev#623).\n  const markInside = pressInside(panelRef);\n  const handlePointerDownCapture = (e: ReactPointerEvent<HTMLDivElement>) => {\n    rest.onPointerDownCapture?.(e);\n    markInside?.(e);\n  };\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-muted\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n      <div\n        {...rest}\n        style={style}\n        ref={setPanel}\n        onKeyDown={handleKeyDown}\n        onPointerDownCapture={handlePointerDownCapture}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped to the glass as `Popover` is (Wave 2, DUP-7): the panel may leave the\n  // trigger's edge to stay on screen, because a list half off the viewport is the bug\n  // this exists for. The portal leaves the subtree the trigger's `dir` came from, so it\n  // is read off the trigger — for the alignment here, and for the panel's own `dir`\n  // below, without which a right-to-left form got a left-to-right list.\n  const { left } = anchoredInline(rect, width, { dir, align });\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n    <div\n      {...rest}\n      ref={setPanel}\n      dir={dir}\n      onKeyDown={handleKeyDown}\n      onPointerDownCapture={handlePointerDownCapture}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so these values are the panel's own. Flipped above, it hangs from its\n      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose\n      // K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: anchored.above ? undefined : anchored.top,\n        bottom: anchored.above ? anchored.bottom : undefined,\n        left,\n        width,\n        maxHeight: anchored.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-subtle bg-surface shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}

package/dist/components/floating-panel.d.ts

@@ -114,6 +114,11 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
  *
  * While mounted it reports its box (`lib/floating-stack.ts`), so `ServerWakeNotice`
  * stacks above it rather than over it.
+ *
+ * 0.48: while mounted, `hidden` or not, it also publishes the room it takes above the
+ * nav (`offset` + 3rem + a 0.5rem gap) as `--app-float-clearance` on `<html>` (the
+ * largest of several wins), and `AppShell` pads its `<main>` past it on a phone, so the
+ * page's last row no longer ends under the button (keksdose dev#612).
  */
 export declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, extended, live, variant, tooltip, tooltipSide, className, style, type, title, ref, ...rest }: FloatingActionButtonProps): import("react").JSX.Element;
 export interface FloatingPanelProps {
@@ -152,6 +157,14 @@ export interface FloatingPanelProps {
     className?: string;
     /** Extra classes for the scrolling body. */
     bodyClassName?: string;
+    /**
+     * 0.48: take the FAB and the panel off screen while keeping both mounted — the open
+     * state and the bottom room (`--app-float-clearance`) stay, and an open panel is back
+     * when this turns `false`. keksdose's assistant launcher steps aside while an editor
+     * or a modal covers its corner (dev#612); unmounting it instead would give the room
+     * back and shorten the page under the reader's thumb.
+     */
+    hidden?: boolean;
     children: ReactNode;
 }
 /**
@@ -186,7 +199,7 @@ export interface FloatingPanelProps {
  * panel unmounts when closed; an app that must keep a draft across a close keeps it in
  * its own state, where it also survives a reload.
  */
-export declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, fabTooltip, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): import("react").JSX.Element;
+export declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, fabTooltip, closeLabel, initialFocus, className, bodyClassName, hidden, children, }: FloatingPanelProps): import("react").JSX.Element;
 export interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
     /** Name the group ("Register actions"); a reader then introduces the members as one
      *  set. A group with no name is one more unlabelled wrapper. */

package/dist/components/floating-panel.js

@@ -7,6 +7,7 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { dirOf } from "../lib/direction.js";
 import { registerFloating } from "../lib/floating-stack.js";
+import { useFloatClearance } from "../lib/float-clearance.js";
 import { isComposing } from "../lib/ime.js";
 import { takeEscape } from "../hooks/use-dismiss.js";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels.js";
@@ -57,6 +58,7 @@ function FloatingActionButton({
   const wrapped = tip !== void 0 && tip !== null;
   const [fixed, setFixed] = useState(null);
   useEffect(() => fixed ? registerFloating(fixed) : void 0, [fixed]);
+  useFloatClearance(offset);
   const buttonRef = useCallback(
     (node) => {
       assignRef(ref, node);
@@ -135,6 +137,7 @@ function FloatingPanel({
   initialFocus,
   className,
   bodyClassName,
+  hidden = false,
   children
 }) {
   const labels = useKitLabels(
@@ -193,15 +196,16 @@ function FloatingPanel({
         offset,
         nativeTitle: fabNativeTitle,
         tooltip: fabTooltip,
+        hidden: hidden || void 0,
         "aria-expanded": open,
-        "aria-controls": open ? panelId : void 0,
+        "aria-controls": open && !hidden ? panelId : void 0,
         onClick: () => {
           focusInside.current = false;
           setOpen(!open);
         }
       }
     ),
-    open && typeof document !== "undefined" && createPortal(
+    open && !hidden && typeof document !== "undefined" && createPortal(
       // A container for Escape bubbling up from anything inside it, as a dialog is.
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       /* @__PURE__ */ jsxs(
@@ -271,6 +275,7 @@ function FloatingActionGroup({
   ...rest
 }) {
   const [marker, dir] = usePortalDir();
+  useFloatClearance(offset, "2px");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
     typeof document !== "undefined" && createPortal(