@eifi1/ui-kit 0.10.0 → 0.11.0

package/dist/components/floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/floating-panel.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ButtonHTMLAttributes, CSSProperties, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface FloatingPanelLabels {\n  /** Accessible name of the panel header's X. */\n  close: string;\n}\n\nexport const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = { close: \"Close\" };\n\n/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */\nexport type FloatingCorner = \"bottom-end\" | \"bottom-start\";\n\n/**\n * How far off the bottom edge anything floating here sits: clear of `AppShell`'s phone\n * nav (`--app-nav-h`, `0px` above `md` where the nav is not rendered) and of the home\n * indicator, whichever reaches higher — the nav does not pad itself for the inset, so\n * with no nav on screen the inset is all there is to clear. `max`, not a sum: where the\n * nav does cover the inset, adding both would float the button a nav-height too high.\n */\nconst BOTTOM_CLEARANCE = \"max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))\";\n/** The side gutter, widened for a landscape notch. Both insets, because a logical\n *  side has no one physical inset to name. */\nconst SIDE_GUTTER = \"max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\";\n\nfunction cornerStyle(corner: FloatingCorner, lift: string): CSSProperties {\n  return {\n    bottom: `calc(${BOTTOM_CLEARANCE} + ${lift})`,\n    // Logical properties, so the corner follows the reading direction with no JS. The\n    // portal carries the `dir` across (see `usePortalDir`).\n    [corner === \"bottom-start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: SIDE_GUTTER,\n  };\n}\n\n/**\n * The reading direction where the component was RENDERED, for its portalled root: a\n * portal to `<body>` leaves the subtree whose `dir` it inherited, and a logical\n * `inset-inline-end` resolves against the portal's own direction. Read off a hidden\n * inline marker in a layout effect, so the first painted frame already has it.\n */\nfunction usePortalDir(): [Ref<HTMLSpanElement>, Direction | undefined] {\n  const marker = useRef<HTMLSpanElement>(null);\n  const [dir, setDir] = useState<Direction | undefined>(undefined);\n  useLayoutEffect(() => {\n    setDir(dirOf(marker.current));\n  }, []);\n  return [marker, dir];\n}\n\nexport interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** The accessible name — the button shows only its icon. */\n  label: string;\n  icon: ReactNode;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /**\n   * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it\n   * to stack above another floating control in the same corner — keksdose's assistant\n   * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).\n   */\n  offset?: string;\n  /**\n   * Whether the button carries the browser's own tooltip (`title`, the `label` unless a\n   * `title` is passed). Default `true`, so an icon-only button keeps a hover hint for a\n   * mouse user with no other way to learn what it is. `false` renders no `title` at all:\n   * keksdose has ONE tooltip, the kit's `Tooltip` (dev#523), and its source scan fails a\n   * native `title=` anywhere — so a flag, not `title=\"\"`, which the scan would still\n   * see. An empty `title` renders no attribute either, for the caller who has no scan.\n   *\n   * Not flipped to off by default: a FAB wrapped in nothing would lose the only hover\n   * hint it has, silently, in every app already on it. And the kit cannot wrap itself\n   * in its `Tooltip` — the bubble's anchor is a `relative inline-flex` span, and the\n   * button is `fixed` and portalled — so the one-tooltip caller wraps it.\n   */\n  nativeTitle?: boolean;\n  /**\n   * Make it a toggle. `true`/`false` set `aria-pressed` and swap the solid brand disc for\n   * a surface disc — the glyph in brand on the quiet brand fill when on, the secondary\n   * text colour when off — the \"on\" look of `IconButton`'s `pressed` and of a selected\n   * Chip. Left out, it is the ordinary action FAB. For keksdose's corner filter toggles\n   * (feedback-page's \"awaiting only\", the /transactions pending and upcoming toggles),\n   * which paint `text-[var(--brand)]` on a surface button by hand. Keep `label` the same\n   * in both states; `aria-pressed` already says which one it is in.\n   */\n  pressed?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A round, icon-only button pinned to a corner of the viewport — the trigger of a\n * {@link FloatingPanel}, and usable alone for a page's one primary action.\n *\n * keksdose hand-placed each of its floating controls: the assistant launcher at\n * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions\n * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess\n * at the phone nav's height plus whatever else floats there (Keksdose live #314 found\n * out what such a guess is worth for a footer), `right` rather than `end` puts it over\n * the page's leading edge in RTL, and none allows for the home indicator. Here the\n * base is `--app-nav-h` and the safe-area inset, the corner is logical, and\n * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the\n * height of whatever else it has to clear, not the nav's.\n *\n * Portalled, because `position: fixed` inside any transformed ancestor (an animated\n * page transition) is fixed to that ancestor, not to the screen.\n */\nexport function FloatingActionButton({\n  label,\n  icon,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  nativeTitle = true,\n  pressed,\n  className,\n  style,\n  type = \"button\",\n  title,\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\n  const toggle = pressed !== undefined;\n  // An empty title is \"no tooltip\", not an attribute with nothing in it.\n  const nativeTip = nativeTitle && title !== \"\" ? (title ?? label) : undefined;\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <button\n            {...rest}\n            type={type}\n            dir={dir}\n            aria-label={label}\n            aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n            title={nativeTip}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex size-12 items-center justify-center rounded-full\",\n              \"shadow-lg transition-colors\",\n              !toggle && \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\",\n              // A toggle sits on the page's surface — a solid brand disc would read as\n              // \"on\" in both states — and says \"on\" in the brand family.\n              toggle && \"border border-[var(--border)]\",\n              pressed === false &&\n                \"bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n              pressed === true &&\n                \"border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2\",\n              \"[&_svg]:size-6\",\n              className,\n            )}\n          >\n            {icon}\n          </button>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingPanelProps {\n  /** The panel's heading, and its accessible name. */\n  title: ReactNode;\n  /** The trigger's accessible name (\"Assistant\", \"Send feedback\"). */\n  fabLabel: string;\n  fabIcon: ReactNode;\n  /** Controlled open state. Leave it out to let the panel own it. */\n  open?: boolean;\n  /** Uncontrolled initial state. Default closed. */\n  defaultOpen?: boolean;\n  /** Every request to open or close — the FAB, the X, Escape. */\n  onOpenChange?: (open: boolean) => void;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.\n   *  From `md` up the card sits above the FAB, so it moves with it. */\n  offset?: string;\n  /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.\n   *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */\n  fabNativeTitle?: boolean;\n  /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * Where focus goes on open. Default the panel itself, so a phone's keyboard does not\n   * rise over the sheet before the user has asked to type; pass the chat field for a\n   * panel whose one job is typing.\n   */\n  initialFocus?: () => HTMLElement | null;\n  /** Extra classes for the panel. */\n  className?: string;\n  /** Extra classes for the scrolling body. */\n  bodyClassName?: string;\n  children: ReactNode;\n}\n\n/**\n * A docked, NON-MODAL panel in a corner of the screen, opened by a\n * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,\n * which each built one.\n *\n * ## Not a Modal\n *\n * The page stays usable while it is open: that is the point of an assistant beside the\n * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and\n * no focus trap — Tab walks out of the panel into the page and back, and a click on the\n * page does not close it. It is `role=\"dialog\"` without `aria-modal`, which is what\n * ARIA calls a non-modal dialog, named by its heading.\n *\n * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a\n * keyboard user who pressed the FAB should not have to hunt for what appeared), and\n * closing gives it back to the FAB — but only when focus was in the panel, so a panel\n * closed from the page (a controlled owner) never pulls focus out of the field the\n * user is typing in. Escape closes it while focus is inside, and only then: on the\n * panel element, not the document, so Escape in the page keeps meaning whatever the\n * page means by it.\n *\n * ## Layout\n *\n * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet\n * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and\n * clear of the home indicator. Pure CSS — no width is measured in JavaScript.\n *\n * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The\n * panel unmounts when closed; an app that must keep a draft across a close keeps it in\n * its own state, where it also survives a reload.\n */\nexport function FloatingPanel({\n  title,\n  fabLabel,\n  fabIcon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  fabNativeTitle,\n  closeLabel,\n  initialFocus,\n  className,\n  bodyClassName,\n  children,\n}: FloatingPanelProps) {\n  const labels = useKitLabels(\n    \"floatingPanel\",\n    DEFAULT_FLOATING_PANEL_LABELS,\n    closeLabel === undefined ? undefined : { close: closeLabel },\n  );\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const uid = useId();\n  const panelId = `${uid}-panel`;\n  const titleId = `${uid}-title`;\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [marker, dir] = usePortalDir();\n\n  const initialFocusRef = useRef(initialFocus);\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  // Focus follows the open/closed TRANSITION, never the mount: a panel that renders\n  // open (`defaultOpen`, a restored route) does not take the page's focus by existing.\n  const wasOpen = useRef(open);\n  // Whether focus was inside the panel when it last changed — read at close time, when\n  // the panel (and whatever had focus in it) is already gone.\n  const focusInside = useRef(false);\n  useEffect(() => {\n    const changed = wasOpen.current !== open;\n    wasOpen.current = open;\n    if (!changed) return;\n    if (open) {\n      (initialFocusRef.current?.() ?? panelRef.current)?.focus();\n      return;\n    }\n    const active = document.activeElement;\n    const lost = active === null || active === document.body;\n    if (focusInside.current || lost) fabRef.current?.focus();\n    focusInside.current = false;\n  }, [open]);\n\n  const onPanelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented) return;\n    // Stopped here, so an overlay underneath with a document-level Escape listener does\n    // not close too — the innermost thing that has focus is the one that closes.\n    e.stopPropagation();\n    focusInside.current = true;\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <span ref={marker} hidden />\n      <FloatingActionButton\n        ref={fabRef}\n        label={fabLabel}\n        icon={fabIcon}\n        corner={corner}\n        offset={offset}\n        nativeTitle={fabNativeTitle}\n        aria-expanded={open}\n        aria-controls={open ? panelId : undefined}\n        onClick={() => {\n          // A press ON the FAB closing the panel: the FAB keeps focus by being clicked,\n          // nothing to hand back.\n          focusInside.current = false;\n          setOpen(!open);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // A container for Escape bubbling up from anything inside it, as a dialog is.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            ref={panelRef}\n            id={panelId}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            tabIndex={-1}\n            dir={dir}\n            data-corner={corner}\n            onKeyDown={onPanelKeyDown}\n            onFocus={() => {\n              focusInside.current = true;\n            }}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusInside.current = false;\n            }}\n            // The phone's sheet sits on the nav; from `md` up the card floats above the\n            // FAB (its offset + the 3rem button + a 0.75rem gap).\n            style={\n              {\n                \"--fp-bottom\": `calc(${BOTTOM_CLEARANCE})`,\n                \"--fp-bottom-md\": `calc(${BOTTOM_CLEARANCE} + ${offset} + 3.75rem)`,\n                \"--fp-side\": SIDE_GUTTER,\n              } as CSSProperties\n            }\n            className={cn(\n              \"animate-sheet fixed z-40 flex flex-col overflow-hidden outline-none\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl\",\n              // Phone: full width, docked, rounded only where it meets the page.\n              \"inset-x-0 bottom-[var(--fp-bottom)] max-h-[min(85dvh,calc(100dvh_-_var(--fp-bottom)_-_1rem))] rounded-t-xl border-x-0 border-b-0\",\n              \"pb-[env(safe-area-inset-bottom,0px)] md:pb-0\",\n              // md+: a card in the corner, above the FAB.\n              \"md:inset-x-auto md:bottom-[var(--fp-bottom-md)] md:w-[24rem] md:max-h-[min(36rem,calc(100dvh_-_var(--fp-bottom-md)_-_1rem))] md:rounded-xl md:border\",\n              corner === \"bottom-start\" ? \"md:start-[var(--fp-side)]\" : \"md:end-[var(--fp-side)]\",\n              className,\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3\">\n              <h2 id={titleId} className=\"min-w-0 truncate text-base font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  focusInside.current = true;\n                  setOpen(false);\n                }}\n                aria-label={labels.close}\n                className=\"-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n              >\n                <X aria-hidden className=\"size-5\" />\n              </button>\n            </div>\n            <div className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4\", bodyClassName)}>\n              {children}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/floating-panel.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\n\nexport interface FloatingPanelLabels {\n  /** Accessible name of the panel header's X. */\n  close: string;\n  /**\n   * What a {@link FloatingAction}'s count badge adds to its accessible name (\"3 new\"),\n   * read after the label: \"Invoices, 3 new\". The dot itself is hidden from a reader —\n   * a bare \"3\" read out of context says nothing about what is counted.\n   */\n  badge: (count: number) => string;\n}\n\nexport const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = {\n  close: \"Close\",\n  badge: (count) => `${count} new`,\n};\n\n/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */\nexport type FloatingCorner = \"bottom-end\" | \"bottom-start\";\n\n/**\n * How far off the bottom edge anything floating here sits: clear of `AppShell`'s phone\n * nav (`--app-nav-h`, `0px` above `md` where the nav is not rendered) and of the home\n * indicator, whichever reaches higher — the nav does not pad itself for the inset, so\n * with no nav on screen the inset is all there is to clear. `max`, not a sum: where the\n * nav does cover the inset, adding both would float the button a nav-height too high.\n */\nconst BOTTOM_CLEARANCE = \"max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))\";\n/** The side gutter, widened for a landscape notch. Both insets, because a logical\n *  side has no one physical inset to name. */\nconst SIDE_GUTTER = \"max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\";\n\nfunction cornerStyle(corner: FloatingCorner, lift: string): CSSProperties {\n  return {\n    bottom: `calc(${BOTTOM_CLEARANCE} + ${lift})`,\n    // Logical properties, so the corner follows the reading direction with no JS. The\n    // portal carries the `dir` across (see `usePortalDir`).\n    [corner === \"bottom-start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: SIDE_GUTTER,\n  };\n}\n\n/**\n * The reading direction where the component was RENDERED, for its portalled root: a\n * portal to `<body>` leaves the subtree whose `dir` it inherited, and a logical\n * `inset-inline-end` resolves against the portal's own direction. Read off a hidden\n * inline marker in a layout effect, so the first painted frame already has it.\n */\nfunction usePortalDir(): [Ref<HTMLSpanElement>, Direction | undefined] {\n  const marker = useRef<HTMLSpanElement>(null);\n  const [dir, setDir] = useState<Direction | undefined>(undefined);\n  useLayoutEffect(() => {\n    setDir(dirOf(marker.current));\n  }, []);\n  return [marker, dir];\n}\n\nexport interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** The accessible name — the button shows only its icon. */\n  label: string;\n  icon: ReactNode;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /**\n   * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it\n   * to stack above another floating control in the same corner — keksdose's assistant\n   * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).\n   */\n  offset?: string;\n  /**\n   * Whether the button carries the browser's own tooltip (`title`, the `label` unless a\n   * `title` is passed). Default `true`, so an icon-only button keeps a hover hint for a\n   * mouse user with no other way to learn what it is. `false` renders no `title` at all:\n   * keksdose has ONE tooltip, the kit's `Tooltip` (dev#523), and its source scan fails a\n   * native `title=` anywhere — so a flag, not `title=\"\"`, which the scan would still\n   * see. An empty `title` renders no attribute either, for the caller who has no scan.\n   *\n   * Not flipped to off by default: a FAB wrapped in nothing would lose the only hover\n   * hint it has, silently, in every app already on it. And the kit cannot wrap itself\n   * in its `Tooltip` — the bubble's anchor is a `relative inline-flex` span, and the\n   * button is `fixed` and portalled — so the one-tooltip caller wraps it.\n   */\n  nativeTitle?: boolean;\n  /**\n   * Make it a toggle. `true`/`false` set `aria-pressed` and swap the solid brand disc for\n   * a surface disc — the glyph in brand on the quiet brand fill when on, the secondary\n   * text colour when off — the \"on\" look of `IconButton`'s `pressed` and of a selected\n   * Chip. Left out, it is the ordinary action FAB. For keksdose's corner filter toggles\n   * (feedback-page's \"awaiting only\", the /transactions pending and upcoming toggles),\n   * which paint `text-[var(--brand)]` on a surface button by hand. Keep `label` the same\n   * in both states; `aria-pressed` already says which one it is in.\n   */\n  pressed?: boolean;\n  /**\n   * Show `label` beside the icon: the EXTENDED FAB, a pill rather than a disc. For a\n   * corner control whose words are the point — kastlan's offline indicator\n   * (shared/offline/offline-indicator.tsx:39) is a pill saying \"Offline — 2 photo(s)\n   * queued\" / \"Syncing…\", hand-placed at `fixed bottom-4 left-4`, i.e. over the\n   * bottom nav and on the wrong side in RTL. Same height as the disc (3rem), so a\n   * {@link FloatingPanel} card above it still clears it.\n   */\n  extended?: boolean;\n  /**\n   * Announce `label` whenever it changes, through a polite `role=\"status\"` region — for\n   * an extended FAB that REPORTS something (kastlan's offline/sync state), where a\n   * sighted user sees the words change and a screen reader user otherwise hears\n   * nothing until they happen to land on the button.\n   *\n   * ⚠️ A live region announces changes, not its own arrival: a FAB that mounts already\n   * saying \"Offline\" says it to nobody. Keep it mounted and pass `hidden` while there\n   * is nothing to report (kastlan returns `null` when online and idle); the region\n   * stays in the page, and the first real status is heard.\n   */\n  live?: boolean;\n  /**\n   * `primary` (default): the solid brand disc of a page's main action. `surface`: the\n   * page's surface with a hairline border — for a FAB that is a status rather than a\n   * call to action, as kastlan's offline pill is (a brand pill would shout \"press me\"\n   * at a user who is merely offline). Ignored while `pressed` is set; a toggle has its\n   * own two looks.\n   */\n  variant?: \"primary\" | \"surface\";\n  /**\n   * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —\n   * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,\n   * which cannot work: the tooltip's anchor is a `relative inline-flex` span, and this\n   * button is `fixed` and portalled. With `tooltip` the FAB positions a fixed wrapper\n   * instead and the button sits in the tooltip inside it. `true` shows the `label`;\n   * any other content shows that. Implies no native `title` (whatever `nativeTitle`\n   * says): one hover hint, not two. `style` stays on the button; the corner and\n   * `offset` move to the wrapper.\n   */\n  tooltip?: ReactNode;\n  /** Where the {@link tooltip} opens. Default `top`; the bubble is portalled and kept on\n   *  screen, so a corner button's label is not pushed off the edge. */\n  tooltipSide?: TooltipSide;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A round, icon-only button pinned to a corner of the viewport — the trigger of a\n * {@link FloatingPanel}, and usable alone for a page's one primary action.\n *\n * keksdose hand-placed each of its floating controls: the assistant launcher at\n * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions\n * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess\n * at the phone nav's height plus whatever else floats there (Keksdose live #314 found\n * out what such a guess is worth for a footer), `right` rather than `end` puts it over\n * the page's leading edge in RTL, and none allows for the home indicator. Here the\n * base is `--app-nav-h` and the safe-area inset, the corner is logical, and\n * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the\n * height of whatever else it has to clear, not the nav's.\n *\n * Portalled, because `position: fixed` inside any transformed ancestor (an animated\n * page transition) is fixed to that ancestor, not to the screen.\n */\nexport function FloatingActionButton({\n  label,\n  icon,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  nativeTitle = true,\n  pressed,\n  extended = false,\n  live = false,\n  variant = \"primary\",\n  tooltip,\n  tooltipSide = \"top\",\n  className,\n  style,\n  type = \"button\",\n  title,\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\n  const toggle = pressed !== undefined;\n  const tip = tooltip === true ? label : tooltip === false || tooltip === \"\" ? undefined : tooltip;\n  const wrapped = tip !== undefined && tip !== null;\n  // An empty title is \"no tooltip\", not an attribute with nothing in it. The kit\n  // tooltip replaces it outright.\n  const nativeTip = !wrapped && nativeTitle && title !== \"\" ? (title ?? label) : undefined;\n  const button = (\n          <button\n            {...rest}\n            type={type}\n            dir={dir}\n            aria-label={label}\n            aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n            title={nativeTip}\n            style={wrapped ? style : { ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              // Wrapped, the wrapper is the fixed thing and the button sits in it.\n              !wrapped && \"fixed z-40\",\n              \"inline-flex items-center justify-center rounded-full\",\n              extended ? \"h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5\" : \"size-12 [&_svg]:size-6\",\n              \"shadow-lg transition-colors disabled:cursor-default\",\n              !toggle &&\n                variant === \"primary\" &&\n                \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\",\n              !toggle &&\n                variant === \"surface\" &&\n                \"border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:hover:bg-[var(--bg-surface)]\",\n              // A toggle sits on the page's surface — a solid brand disc would read as\n              // \"on\" in both states — and says \"on\" in the brand family.\n              toggle && \"border border-[var(--border)]\",\n              pressed === false &&\n                \"bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n              pressed === true &&\n                \"border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2\",\n              className,\n            )}\n          >\n            {icon}\n            {/* Visible words, not the name: `aria-label` already is the name, and the\n                span would only repeat it. */}\n            {extended && (\n              <span aria-hidden className=\"whitespace-nowrap\">\n                {label}\n              </span>\n            )}\n          </button>\n  );\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <>\n            {wrapped ? (\n              <div\n                dir={dir}\n                hidden={rest.hidden}\n                style={cornerStyle(corner, offset)}\n                className=\"fixed z-40 inline-flex\"\n              >\n                <Tooltip label={tip} side={tooltipSide} portal>\n                  {/* A fragment when the bubble says the name again, so the tooltip\n                      does not describe the button with its own label — a reader would\n                      hear it twice. Other text is a real description. */}\n                  {tip === label ? <>{button}</> : button}\n                </Tooltip>\n              </div>\n            ) : (\n              button\n            )}\n            {live && (\n              <span role=\"status\" className=\"sr-only\">\n                {label}\n              </span>\n            )}\n          </>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingPanelProps {\n  /** The panel's heading, and its accessible name. */\n  title: ReactNode;\n  /** The trigger's accessible name (\"Assistant\", \"Send feedback\"). */\n  fabLabel: string;\n  fabIcon: ReactNode;\n  /** Controlled open state. Leave it out to let the panel own it. */\n  open?: boolean;\n  /** Uncontrolled initial state. Default closed. */\n  defaultOpen?: boolean;\n  /** Every request to open or close — the FAB, the X, Escape. */\n  onOpenChange?: (open: boolean) => void;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.\n   *  From `md` up the card sits above the FAB, so it moves with it. */\n  offset?: string;\n  /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.\n   *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */\n  fabNativeTitle?: boolean;\n  /** The FAB's kit tooltip — see {@link FloatingActionButtonProps.tooltip}. `true` for\n   *  keksdose's assistant launcher, which wanted the kit bubble and had no way to\n   *  put one on a fixed, portalled button (dev#523). */\n  fabTooltip?: ReactNode;\n  /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * Where focus goes on open. Default the panel itself, so a phone's keyboard does not\n   * rise over the sheet before the user has asked to type; pass the chat field for a\n   * panel whose one job is typing.\n   */\n  initialFocus?: () => HTMLElement | null;\n  /** Extra classes for the panel. */\n  className?: string;\n  /** Extra classes for the scrolling body. */\n  bodyClassName?: string;\n  children: ReactNode;\n}\n\n/**\n * A docked, NON-MODAL panel in a corner of the screen, opened by a\n * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,\n * which each built one.\n *\n * ## Not a Modal\n *\n * The page stays usable while it is open: that is the point of an assistant beside the\n * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and\n * no focus trap — Tab walks out of the panel into the page and back, and a click on the\n * page does not close it. It is `role=\"dialog\"` without `aria-modal`, which is what\n * ARIA calls a non-modal dialog, named by its heading.\n *\n * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a\n * keyboard user who pressed the FAB should not have to hunt for what appeared), and\n * closing gives it back to the FAB — but only when focus was in the panel, so a panel\n * closed from the page (a controlled owner) never pulls focus out of the field the\n * user is typing in. Escape closes it while focus is inside, and only then: on the\n * panel element, not the document, so Escape in the page keeps meaning whatever the\n * page means by it.\n *\n * ## Layout\n *\n * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet\n * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and\n * clear of the home indicator. Pure CSS — no width is measured in JavaScript.\n *\n * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The\n * panel unmounts when closed; an app that must keep a draft across a close keeps it in\n * its own state, where it also survives a reload.\n */\nexport function FloatingPanel({\n  title,\n  fabLabel,\n  fabIcon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  fabNativeTitle,\n  fabTooltip,\n  closeLabel,\n  initialFocus,\n  className,\n  bodyClassName,\n  children,\n}: FloatingPanelProps) {\n  const labels = useKitLabels(\n    \"floatingPanel\",\n    DEFAULT_FLOATING_PANEL_LABELS,\n    closeLabel === undefined ? undefined : { close: closeLabel },\n  );\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const uid = useId();\n  const panelId = `${uid}-panel`;\n  const titleId = `${uid}-title`;\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [marker, dir] = usePortalDir();\n\n  const initialFocusRef = useRef(initialFocus);\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  // Focus follows the open/closed TRANSITION, never the mount: a panel that renders\n  // open (`defaultOpen`, a restored route) does not take the page's focus by existing.\n  const wasOpen = useRef(open);\n  // Whether focus was inside the panel when it last changed — read at close time, when\n  // the panel (and whatever had focus in it) is already gone.\n  const focusInside = useRef(false);\n  useEffect(() => {\n    const changed = wasOpen.current !== open;\n    wasOpen.current = open;\n    if (!changed) return;\n    if (open) {\n      (initialFocusRef.current?.() ?? panelRef.current)?.focus();\n      return;\n    }\n    const active = document.activeElement;\n    const lost = active === null || active === document.body;\n    if (focusInside.current || lost) fabRef.current?.focus();\n    focusInside.current = false;\n  }, [open]);\n\n  const onPanelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented) return;\n    // Stopped here, so an overlay underneath with a document-level Escape listener does\n    // not close too — the innermost thing that has focus is the one that closes.\n    e.stopPropagation();\n    focusInside.current = true;\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <span ref={marker} hidden />\n      <FloatingActionButton\n        ref={fabRef}\n        label={fabLabel}\n        icon={fabIcon}\n        corner={corner}\n        offset={offset}\n        nativeTitle={fabNativeTitle}\n        tooltip={fabTooltip}\n        aria-expanded={open}\n        aria-controls={open ? panelId : undefined}\n        onClick={() => {\n          // A press ON the FAB closing the panel: the FAB keeps focus by being clicked,\n          // nothing to hand back.\n          focusInside.current = false;\n          setOpen(!open);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // A container for Escape bubbling up from anything inside it, as a dialog is.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            ref={panelRef}\n            id={panelId}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            tabIndex={-1}\n            dir={dir}\n            data-corner={corner}\n            onKeyDown={onPanelKeyDown}\n            onFocus={() => {\n              focusInside.current = true;\n            }}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusInside.current = false;\n            }}\n            // The phone's sheet sits on the nav; from `md` up the card floats above the\n            // FAB (its offset + the 3rem button + a 0.75rem gap).\n            style={\n              {\n                \"--fp-bottom\": `calc(${BOTTOM_CLEARANCE})`,\n                \"--fp-bottom-md\": `calc(${BOTTOM_CLEARANCE} + ${offset} + 3.75rem)`,\n                \"--fp-side\": SIDE_GUTTER,\n              } as CSSProperties\n            }\n            className={cn(\n              \"animate-sheet fixed z-40 flex flex-col overflow-hidden outline-none\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl\",\n              // Phone: full width, docked, rounded only where it meets the page.\n              \"inset-x-0 bottom-[var(--fp-bottom)] max-h-[min(85dvh,calc(100dvh_-_var(--fp-bottom)_-_1rem))] rounded-t-xl border-x-0 border-b-0\",\n              \"pb-[env(safe-area-inset-bottom,0px)] md:pb-0\",\n              // md+: a card in the corner, above the FAB.\n              \"md:inset-x-auto md:bottom-[var(--fp-bottom-md)] md:w-[24rem] md:max-h-[min(36rem,calc(100dvh_-_var(--fp-bottom-md)_-_1rem))] md:rounded-xl md:border\",\n              corner === \"bottom-start\" ? \"md:start-[var(--fp-side)]\" : \"md:end-[var(--fp-side)]\",\n              className,\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3\">\n              <h2 id={titleId} className=\"min-w-0 truncate text-base font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  focusInside.current = true;\n                  setOpen(false);\n                }}\n                aria-label={labels.close}\n                className=\"-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n              >\n                <X aria-hidden className=\"size-5\" />\n              </button>\n            </div>\n            <div className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4\", bodyClassName)}>\n              {children}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** Name the group (\"Register actions\"); a reader then introduces the members as one\n   *  set. A group with no name is one more unlabelled wrapper. */\n  \"aria-label\"?: string;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** Distance above the nav / home indicator — see {@link FloatingActionButtonProps.offset}. */\n  offset?: string;\n  /** {@link FloatingAction}s, in reading order. */\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A floating pill of {@link FloatingAction}s — one to four `size-12` toggles, actions\n * or links with hairline dividers — pinned to a corner exactly as the\n * {@link FloatingActionButton} is: `--app-nav-h` and the home indicator cleared, a\n * logical corner, portalled.\n *\n * keksdose built it twice by hand: the /transactions phone toolbar\n * (transactions-page.tsx:644 — upcoming and pending toggles, an invoices link with a\n * pending count, and the brand \"+\") and the feedback page's \"awaiting only\" toggle\n * (feedback-page.tsx:854, one button in the group anyway, so the two pages look\n * alike). Both at `right-4 bottom-20` — `right`, not `end`, so over the page's leading\n * edge in RTL — with `divide-x`, slate hovers, and each member's `Tooltip` spelled out.\n *\n * `role=\"group\"`, NOT a toolbar: every member keeps its own tab stop, as the\n * hand-built ones did, and there is no arrow-key roving to learn. Hide it where it\n * does not belong with a class (`md:hidden`, as both keksdose pages do).\n */\nexport function FloatingActionGroup({\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  className,\n  style,\n  children,\n  ...rest\n}: FloatingActionGroupProps) {\n  const [marker, dir] = usePortalDir();\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            {...rest}\n            role=\"group\"\n            dir={dir}\n            data-corner={corner}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex flex-row overflow-hidden rounded-2xl\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              // Dividers on the logical start edge of every member but the first, so\n              // they sit between the same two members in RTL. The member is the\n              // tooltip's wrapper span, which is the direct child.\n              \"[&>*:not(:first-child)]:border-s [&>*]:border-[var(--border)]\",\n              className,\n            )}\n          >\n            {children}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\n/** What {@link FloatingActionProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface FloatingActionLinkProps {\n  href: string;\n  /** The member's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  \"aria-label\": string;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"onClick\"> {\n  /** The accessible name, and the tooltip's text. Keep it the same in both states of a\n   *  toggle; `aria-pressed` says which one it is in. */\n  label: string;\n  icon: ReactNode;\n  /** Make it a toggle: `aria-pressed` and the brand \"on\" look (the brand glyph on the\n   *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link. */\n  pressed?: boolean;\n  /**\n   * `primary`: the brand-filled member, for the group's main action (the /transactions\n   * \"+\"). Default: the quiet one.\n   */\n  variant?: \"default\" | \"primary\";\n  /**\n   * A count in a dot at the member's top end corner — the /transactions invoices link's\n   * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count\n   * joins the accessible name through `floatingPanel.badge` (\"Invoices, 3 new\"), or\n   * `badgeLabel` when passed.\n   */\n  badge?: number;\n  /** The badge's words for a reader, replacing `floatingPanel.badge` — \"3 to review\". */\n  badgeLabel?: string;\n  /** The dot's colour. Default `warning`, the pending count's. */\n  badgeTone?: \"warning\" | \"danger\" | \"brand\";\n  /** Show `label` in the kit {@link Tooltip} on hover and focus. Default `true`: the\n   *  members are icon-only and this is their only visible label. */\n  tooltip?: boolean;\n  /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */\n  tooltipSide?: TooltipSide;\n  /** Make it a link — the /transactions invoices member. A plain `<a>` unless\n   *  `renderLink` hands it to your router. */\n  href?: string;\n  /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */\n  renderLink?: (props: FloatingActionLinkProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst BADGE_TONE: Record<NonNullable<FloatingActionProps[\"badgeTone\"]>, string> = {\n  warning: \"bg-[var(--warning)] text-[var(--text-inverse)]\",\n  danger: \"bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  brand: \"bg-[var(--brand)] text-[var(--brand-contrast)]\",\n};\n\n/**\n * One member of a {@link FloatingActionGroup}: a `size-12` icon button, toggle or link\n * with its label in a styled tooltip — what each keksdose member wrapped by hand in\n * `<Tooltip portal>`. The tooltip is portalled because the group clips (`overflow-hidden`\n * keeps the brand member's fill inside the pill's corners), and the focus ring is inset\n * for the same reason.\n */\nexport function FloatingAction({\n  label,\n  icon,\n  pressed,\n  variant = \"default\",\n  badge,\n  badgeLabel,\n  badgeTone = \"warning\",\n  tooltip = true,\n  tooltipSide = \"top\",\n  href,\n  renderLink,\n  className,\n  type = \"button\",\n  onClick,\n  ref,\n  ...rest\n}: FloatingActionProps) {\n  const labels = useKitLabels(\"floatingPanel\", DEFAULT_FLOATING_PANEL_LABELS);\n  const counted = badge !== undefined && badge > 0;\n  const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;\n  const isLink = href !== undefined;\n  const look = cn(\n    \"relative flex size-12 items-center justify-center transition-colors\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\",\n    \"disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5\",\n    variant === \"primary\"\n      ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n      : pressed && !isLink\n        ? \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\"\n        : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n    className,\n  );\n  const body = (\n    <>\n      {icon}\n      {counted && (\n        <span\n          aria-hidden\n          data-badge=\"\"\n          className={cn(\n            \"pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-[10px] leading-4 font-semibold\",\n            BADGE_TONE[badgeTone],\n          )}\n        >\n          {badge > 99 ? \"99+\" : badge}\n        </span>\n      )}\n    </>\n  );\n\n  let member: ReactElement;\n  if (isLink) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and the like ride along.\n    const { disabled: _disabled, form: _form, value: _value, name: _name, ...anchorRest } = rest;\n    const linkProps: FloatingActionLinkProps = {\n      ...(anchorRest as AnchorHTMLAttributes<HTMLAnchorElement>),\n      href,\n      \"aria-label\": name,\n      onClick,\n      className: look,\n      children: body,\n    };\n    const { children: content, ...anchor } = linkProps;\n    member = renderLink ? (\n      <RenderedFloatingLink render={renderLink} {...linkProps} />\n    ) : (\n      <a {...anchor}>{content}</a>\n    );\n  } else {\n    member = (\n      <button\n        {...rest}\n        ref={ref}\n        type={type}\n        aria-label={name}\n        aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n        onClick={onClick}\n        className={look}\n      >\n        {body}\n      </button>\n    );\n  }\n  if (!tooltip) return member;\n  return (\n    // A fragment: the bubble says the member's name, and a description that repeats\n    // the name is read twice.\n    <Tooltip label={label} side={tooltipSide} portal>\n      <>{member}</>\n    </Tooltip>\n  );\n}\n\n/** Calls `renderLink` as a component, so its hooks belong to the link, not to us. */\nfunction RenderedFloatingLink({\n  render,\n  ...props\n}: FloatingActionLinkProps & { render: (props: FloatingActionLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}

package/dist/components/list.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, MouseEvent, Ref, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, MouseEvent, Ref, ReactElement } from 'react';
 import { LucideIcon } from 'lucide-react';
 
 interface ListLabels {
@@ -110,6 +110,19 @@ interface ListItemBaseProps {
     className?: string;
     /** Classes on the main target (the button, link or static block). */
     targetClassName?: string;
+    /**
+     * Extra attributes and handlers for the main target — e.g. HTML5 drag-and-drop
+     * (`draggable`, `onDragStart`, `onDragEnd`): lenkbank's segment list drags the WHOLE
+     * 44px row, and a grip inside the button cannot start a drag in Firefox. Spread first,
+     * so the row's own role, name, state and click handling always win.
+     */
+    targetProps?: HTMLAttributes<HTMLElement>;
+    /**
+     * A visible border while unselected, instead of the transparent one. For rows laid out
+     * as a wrapping strip (lenkbank's profile bar), where borderless rows read as loose
+     * text. The selected row's brand border is unchanged.
+     */
+    bordered?: boolean;
     /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */
     as?: "li" | "div";
     /** Reaches the main target — the element with the row's name and action. */

package/dist/components/list.js

@@ -55,6 +55,8 @@ const ListItem = forwardRef(function ListItem2({
   align = "center",
   className,
   targetClassName,
+  targetProps,
+  bordered = false,
   as = "li",
   href,
   renderLink,
@@ -130,9 +132,11 @@ const ListItem = forwardRef(function ListItem2({
     loading && "cursor-progress",
     targetClassName
   );
+  const { role: _ignoredRole, ...targetExtras } = targetProps ?? {};
   let main;
   if (isLink) {
     const linkProps = {
+      ...targetExtras,
       ...rest,
       ref,
       href,
@@ -149,6 +153,7 @@ const ListItem = forwardRef(function ListItem2({
     main = /* @__PURE__ */ jsx(
       "button",
       {
+        ...targetExtras,
         ...rest,
         ref,
         type: "button",
@@ -165,6 +170,7 @@ const ListItem = forwardRef(function ListItem2({
     main = /* @__PURE__ */ jsx(
       "div",
       {
+        ...targetExtras,
         ...rest,
         ref,
         "aria-disabled": disabled || void 0,
@@ -187,7 +193,7 @@ const ListItem = forwardRef(function ListItem2({
         {
           className: cn(
             "flex min-w-0 items-center rounded-md border transition-colors",
-            selected ? "border-[var(--brand)] bg-[var(--bg-surface-2)]" : "border-transparent",
+            selected ? "border-[var(--brand)] bg-[var(--bg-surface-2)]" : bordered ? "border-[var(--border)]" : "border-transparent",
             interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
             disabled && "opacity-50",
             className

package/dist/components/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/list.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Spinner } from \"./ui\";\nimport { StatusDot } from \"./status-dot\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\nexport interface ListLabels {\n  /** Read after an unread row's title — the dot alone says nothing to a screen reader. */\n  unread: string;\n  /** Read after an external row's title: the row leaves the app in a new tab. */\n  opensInNewTab: string;\n}\n\nexport const DEFAULT_LIST_LABELS: ListLabels = {\n  unread: \"Unread\",\n  opensInNewTab: \"opens in a new tab\",\n};\n\n/* ── List ─────────────────────────────────────────────────────────────────── */\n\n/**\n * `compact` 36px-ish rows for a dense panel (an inbox in a menu), `default` the ~44px\n * row every site draws with `py-2.5`, `comfortable` for a list that is the page.\n */\nexport type ListDensity = \"compact\" | \"default\" | \"comfortable\";\n/** `divider`: a rule between rows (kastlan's `divide-y` lists); `gap`: a small space\n *  between rows (lenkbank's `space-y-2`, kastlan's `space-y-1`); `none`: flush. */\nexport type ListSeparator = \"divider\" | \"gap\" | \"none\";\n\nconst ListContext = createContext<{ density: ListDensity; separator: ListSeparator }>({\n  density: \"default\",\n  separator: \"gap\",\n});\n\nexport interface ListProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"role\"> {\n  /** `ol` when the order means something (a ranked list, numbered segments). */\n  as?: \"ul\" | \"ol\";\n  /** Every row's density, unless a row says otherwise. Default `default`. */\n  density?: ListDensity;\n  /** Default `gap`. */\n  separator?: ListSeparator;\n}\n\n/**\n * The list of {@link ListItem}s.\n *\n * A `<ul>` with an explicit `role=\"list\"`: Safari drops a list's semantics once its\n * bullets are styled away, and \"list, 7 items\" is exactly what a screen-reader user\n * wants to hear before the first row.\n */\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  { as = \"ul\", density = \"default\", separator = \"gap\", className, children, ...rest },\n  ref,\n) {\n  const Tag = as;\n  return (\n    <ListContext.Provider value={{ density, separator }}>\n      <Tag\n        {...rest}\n        ref={ref as Ref<HTMLUListElement & HTMLOListElement>}\n        role=\"list\"\n        className={cn(\n          \"m-0 flex list-none flex-col p-0\",\n          separator === \"gap\" && (density === \"compact\" ? \"gap-0.5\" : \"gap-1\"),\n          className,\n        )}\n      >\n        {children}\n      </Tag>\n    </ListContext.Provider>\n  );\n});\n\n/* ── ListItem ─────────────────────────────────────────────────────────────── */\n\n/** What {@link ListItemProps.renderLink} is handed. Spread it onto your router's link,\n *  mapping `href` to what it calls it — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ListItemLinkProps {\n  href: string;\n  /** The row's target look — keep it, or the row's padding and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: \"true\";\n  \"aria-busy\"?: true;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nconst PAD: Record<ListDensity, { target: string; actions: string; gap: string }> = {\n  compact: { target: \"gap-2 px-2 py-1.5\", actions: \"pe-1.5\", gap: \"gap-0.5\" },\n  default: { target: \"gap-3 px-3 py-2.5\", actions: \"pe-2\", gap: \"gap-1\" },\n  comfortable: { target: \"gap-3 px-4 py-3\", actions: \"pe-3\", gap: \"gap-1\" },\n};\n\nconst TARGET_RING =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\";\n\ninterface ListItemBaseProps {\n  /** The row's name: one line, truncated. */\n  title: ReactNode;\n  /** The line under it: one line, truncated — or two, with `subtitleLines={2}`. */\n  subtitle?: ReactNode;\n  /** `2` for a line that is a body rather than a label (keksdose's notification text). */\n  subtitleLines?: 1 | 2;\n  /** A third line in the caption type: a timestamp, \"Updated …\" (lenkbank's projects). */\n  meta?: ReactNode;\n  /** A Lucide icon before the text, muted, at 16px. */\n  icon?: LucideIcon;\n  /** Anything else before the text — an avatar, a file-type badge, a drag handle. */\n  leading?: ReactNode;\n  /**\n   * Inside the main target, at its end: a status chip, a file size, a count. It is part\n   * of what the row's click does and part of its accessible name — so never a control.\n   * Controls go in {@link actions}.\n   */\n  trailing?: ReactNode;\n  /**\n   * Controls BESIDE the main target, never inside it: copy, delete, \"Open\".\n   *\n   * A button inside a button (or a link) is invalid HTML, and a screen reader folds the\n   * inner one into the outer one's name where it cannot be reached. lenkbank found this\n   * three times (profile-bar.tsx:110, projects-page.tsx:61, segment-list.tsx:165) and\n   * solved it the same way each time: the row's target and its actions are siblings in\n   * one bordered box. That is this slot — and being siblings is also what stops a click\n   * on \"Copy\" from selecting the row.\n   */\n  actions?: ReactNode;\n  /**\n   * The unread mark: a brand dot at the row's end, the title in semibold, and \"Unread\"\n   * read after the title (keksdose notification-inbox.tsx:215). For another status,\n   * pass your own mark in {@link status}.\n   */\n  unread?: boolean;\n  /** A mark in the unread dot's place — a `StatusDot` of another tone, a count. */\n  status?: ReactNode;\n  /**\n   * The row is the chosen one — a brand border on the raised surface (lenkbank's\n   * profile bar and segment list). `aria-current=\"true\"` on the target: the row is the\n   * current one of a set, which is what those lists mean, not a pressed toggle.\n   */\n  selected?: boolean;\n  disabled?: boolean;\n  /**\n   * Work under way on the row — keksdose's attachment download (support-attachments\n   * .tsx:91). A spinner takes the trailing edge, the target is `aria-busy`, and a\n   * second click is ignored. The row keeps focus: `aria-disabled`, not `disabled`, so\n   * a keyboard user is not dropped back to the top of the page mid-download.\n   */\n  loading?: boolean;\n  /** Overrides the {@link List}'s density for this row. */\n  density?: ListDensity;\n  /** `start` for rows whose text runs to two or three lines, so the icon sits by the\n   *  title rather than the middle of the paragraph. Default `center`. */\n  align?: \"center\" | \"start\";\n  /** Classes on the visible row (the bordered box). */\n  className?: string;\n  /** Classes on the main target (the button, link or static block). */\n  targetClassName?: string;\n  /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */\n  as?: \"li\" | \"div\";\n  /** Reaches the main target — the element with the row's name and action. */\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * The row is ONE thing to activate, so the types allow one: a button, an in-app link,\n * an external link, or nothing (a static row, like kastlan's passkey and user lists).\n */\nexport type ListItemProps = ListItemBaseProps &\n  (\n    | {\n        /** Makes the row a button — select, open, mark read. */\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n      }\n    | {\n        /**\n         * Makes the row a link. A real `<a href>`, so a middle click opens it in a\n         * background tab (keksdose feedback #451) — which a button calling `navigate`\n         * cannot do.\n         */\n        href: string;\n        /** Your router's link for an in-app `href`. Default `<a>`. The API `Chip`,\n         *  `StatTile` and `MenuItem` share. Ignored for an `external` row. */\n        renderLink?: (props: ListItemLinkProps) => ReactElement;\n        /**\n         * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener\n         * noreferrer\">` with an external-link mark, and \"opens in a new tab\" read\n         * after the title. keksdose's inbox rows whose URL is absolute.\n         */\n        external?: boolean;\n        /** Runs on a click, before the navigation (mark the row read). */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** Runs on a middle click, which fires no `click` — keksdose marks a\n         *  notification read here too, so a row opened into a background tab does not\n         *  stay unread. */\n        onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n      }\n    | {\n        onClick?: never;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n      }\n  );\n\n/**\n * One row of a {@link List}: leading icon or avatar, title and subtitle (both\n * truncating), a trailing slot, and — beside the row, not inside it — its actions.\n *\n * All three apps draw this row by hand, a dozen times: kastlan's units\n * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity\n * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)\n * and passkeys (passkeys-card.tsx:75); keksdose's notification inbox and attachment\n * downloads; lenkbank's profiles, projects and segments. The copies differ in the\n * details that are easy to get wrong — which of them truncate, whether the actions\n * are nested in the button, whether a link row is a link at all.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    title,\n    subtitle,\n    subtitleLines = 1,\n    meta,\n    icon: Icon,\n    leading,\n    trailing,\n    actions,\n    unread = false,\n    status,\n    selected = false,\n    disabled = false,\n    loading = false,\n    density: densityProp,\n    align = \"center\",\n    className,\n    targetClassName,\n    as = \"li\",\n    href,\n    renderLink,\n    external = false,\n    onClick,\n    onAuxClick,\n    ...rest\n  },\n  ref,\n) {\n  const list = useContext(ListContext);\n  const labels = useKitLabels(\"list\", DEFAULT_LIST_LABELS);\n  const density = densityProp ?? list.density;\n  const pad = PAD[density];\n  const isLink = href !== undefined && !disabled;\n  const isButton = !isLink && onClick !== undefined && href === undefined;\n  const interactive = isLink || isButton;\n  const inert = disabled || loading;\n\n  const mark =\n    status ??\n    (unread ? <StatusDot tone=\"brand\" size=\"sm\" className={align === \"start\" ? \"mt-1.5\" : undefined} /> : null);\n\n  const body = (\n    <>\n      {Icon && (\n        <Icon\n          className={cn(\"size-4 shrink-0 text-[var(--text-muted)]\", align === \"start\" && \"mt-0.5\")}\n          aria-hidden\n        />\n      )}\n      {leading}\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span\n          className={cn(\n            \"block truncate text-sm text-[var(--text-primary)]\",\n            unread ? \"font-semibold\" : \"font-medium\",\n          )}\n        >\n          {title}\n          {unread && <span className=\"sr-only\"> ({labels.unread})</span>}\n          {external && href !== undefined && <span className=\"sr-only\"> ({labels.opensInNewTab})</span>}\n        </span>\n        {subtitle != null && (\n          <span\n            className={cn(\n              \"block text-xs text-[var(--text-muted)]\",\n              subtitleLines === 2 ? \"line-clamp-2\" : \"truncate\",\n            )}\n          >\n            {subtitle}\n          </span>\n        )}\n        {meta != null && <span className=\"mt-0.5 block truncate text-[11px] leading-snug text-[var(--text-muted)]\">{meta}</span>}\n      </span>\n      {trailing != null && <span className=\"flex shrink-0 items-center gap-2 text-xs text-[var(--text-muted)]\">{trailing}</span>}\n      {loading ? (\n        <Spinner label={null} className=\"size-3.5 shrink-0\" />\n      ) : (\n        external && href !== undefined && (\n          <ExternalLink className=\"size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100\" aria-hidden />\n        )\n      )}\n      {mark}\n    </>\n  );\n\n  const target = cn(\n    \"flex min-w-0 flex-1 text-start\",\n    align === \"start\" ? \"items-start\" : \"items-center\",\n    pad.target,\n    \"rounded-[inherit]\",\n    interactive && TARGET_RING,\n    interactive && !inert && \"cursor-pointer\",\n    loading && \"cursor-progress\",\n    targetClassName,\n  );\n\n  let main: ReactNode;\n  if (isLink) {\n    const linkProps: ListItemLinkProps = {\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      className: target,\n      \"aria-current\": selected ? \"true\" : undefined,\n      \"aria-busy\": loading || undefined,\n      onClick: loading\n        ? (e) => e.preventDefault()\n        : (onClick as ListItemLinkProps[\"onClick\"]),\n      onAuxClick,\n      children: body,\n    };\n    const { children: linkBody, ...anchorProps } = linkProps;\n    main = renderLink && !external ? (\n      <RenderedLink render={renderLink} {...linkProps} />\n    ) : (\n      <a {...anchorProps} {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}>\n        {linkBody}\n      </a>\n    );\n  } else if (isButton) {\n    main = (\n      <button\n        {...rest}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        // A disabled row is `disabled`: nothing to do there, and nothing to reach. A\n        // loading row is only `aria-disabled` — see `loading`.\n        disabled={disabled}\n        aria-disabled={loading || undefined}\n        aria-busy={loading || undefined}\n        aria-current={selected ? \"true\" : undefined}\n        onClick={loading ? undefined : (onClick as (event: MouseEvent<HTMLButtonElement>) => void)}\n        className={target}\n      >\n        {body}\n      </button>\n    );\n  } else {\n    main = (\n      <div\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        className={target}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const Tag = as;\n  return (\n    <Tag\n      className={cn(\n        list.separator === \"divider\" && \"border-b border-[var(--border)] last:border-b-0\",\n        list.separator === \"divider\" && as === \"li\" && \"py-0.5\",\n      )}\n    >\n      <div\n        className={cn(\n          \"flex min-w-0 items-center rounded-md border transition-colors\",\n          selected ? \"border-[var(--brand)] bg-[var(--bg-surface-2)]\" : \"border-transparent\",\n          interactive && !inert && !selected && \"hover:bg-[var(--bg-hover)]\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        {main}\n        {actions != null && (\n          <div className={cn(\"flex shrink-0 items-center\", pad.gap, pad.actions)}>{actions}</div>\n        )}\n      </div>\n    </Tag>\n  );\n});\n\nfunction RenderedLink({\n  render,\n  ...props\n}: ListItemLinkProps & { render: (props: ListItemLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":["List","ListItem"]}
+{"version":3,"sources":["../../src/components/list.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Spinner } from \"./ui\";\nimport { StatusDot } from \"./status-dot\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\nexport interface ListLabels {\n  /** Read after an unread row's title — the dot alone says nothing to a screen reader. */\n  unread: string;\n  /** Read after an external row's title: the row leaves the app in a new tab. */\n  opensInNewTab: string;\n}\n\nexport const DEFAULT_LIST_LABELS: ListLabels = {\n  unread: \"Unread\",\n  opensInNewTab: \"opens in a new tab\",\n};\n\n/* ── List ─────────────────────────────────────────────────────────────────── */\n\n/**\n * `compact` 36px-ish rows for a dense panel (an inbox in a menu), `default` the ~44px\n * row every site draws with `py-2.5`, `comfortable` for a list that is the page.\n */\nexport type ListDensity = \"compact\" | \"default\" | \"comfortable\";\n/** `divider`: a rule between rows (kastlan's `divide-y` lists); `gap`: a small space\n *  between rows (lenkbank's `space-y-2`, kastlan's `space-y-1`); `none`: flush. */\nexport type ListSeparator = \"divider\" | \"gap\" | \"none\";\n\nconst ListContext = createContext<{ density: ListDensity; separator: ListSeparator }>({\n  density: \"default\",\n  separator: \"gap\",\n});\n\nexport interface ListProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"role\"> {\n  /** `ol` when the order means something (a ranked list, numbered segments). */\n  as?: \"ul\" | \"ol\";\n  /** Every row's density, unless a row says otherwise. Default `default`. */\n  density?: ListDensity;\n  /** Default `gap`. */\n  separator?: ListSeparator;\n}\n\n/**\n * The list of {@link ListItem}s.\n *\n * A `<ul>` with an explicit `role=\"list\"`: Safari drops a list's semantics once its\n * bullets are styled away, and \"list, 7 items\" is exactly what a screen-reader user\n * wants to hear before the first row.\n */\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  { as = \"ul\", density = \"default\", separator = \"gap\", className, children, ...rest },\n  ref,\n) {\n  const Tag = as;\n  return (\n    <ListContext.Provider value={{ density, separator }}>\n      <Tag\n        {...rest}\n        ref={ref as Ref<HTMLUListElement & HTMLOListElement>}\n        role=\"list\"\n        className={cn(\n          \"m-0 flex list-none flex-col p-0\",\n          separator === \"gap\" && (density === \"compact\" ? \"gap-0.5\" : \"gap-1\"),\n          className,\n        )}\n      >\n        {children}\n      </Tag>\n    </ListContext.Provider>\n  );\n});\n\n/* ── ListItem ─────────────────────────────────────────────────────────────── */\n\n/** What {@link ListItemProps.renderLink} is handed. Spread it onto your router's link,\n *  mapping `href` to what it calls it — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ListItemLinkProps {\n  href: string;\n  /** The row's target look — keep it, or the row's padding and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: \"true\";\n  \"aria-busy\"?: true;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nconst PAD: Record<ListDensity, { target: string; actions: string; gap: string }> = {\n  compact: { target: \"gap-2 px-2 py-1.5\", actions: \"pe-1.5\", gap: \"gap-0.5\" },\n  default: { target: \"gap-3 px-3 py-2.5\", actions: \"pe-2\", gap: \"gap-1\" },\n  comfortable: { target: \"gap-3 px-4 py-3\", actions: \"pe-3\", gap: \"gap-1\" },\n};\n\nconst TARGET_RING =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\";\n\ninterface ListItemBaseProps {\n  /** The row's name: one line, truncated. */\n  title: ReactNode;\n  /** The line under it: one line, truncated — or two, with `subtitleLines={2}`. */\n  subtitle?: ReactNode;\n  /** `2` for a line that is a body rather than a label (keksdose's notification text). */\n  subtitleLines?: 1 | 2;\n  /** A third line in the caption type: a timestamp, \"Updated …\" (lenkbank's projects). */\n  meta?: ReactNode;\n  /** A Lucide icon before the text, muted, at 16px. */\n  icon?: LucideIcon;\n  /** Anything else before the text — an avatar, a file-type badge, a drag handle. */\n  leading?: ReactNode;\n  /**\n   * Inside the main target, at its end: a status chip, a file size, a count. It is part\n   * of what the row's click does and part of its accessible name — so never a control.\n   * Controls go in {@link actions}.\n   */\n  trailing?: ReactNode;\n  /**\n   * Controls BESIDE the main target, never inside it: copy, delete, \"Open\".\n   *\n   * A button inside a button (or a link) is invalid HTML, and a screen reader folds the\n   * inner one into the outer one's name where it cannot be reached. lenkbank found this\n   * three times (profile-bar.tsx:110, projects-page.tsx:61, segment-list.tsx:165) and\n   * solved it the same way each time: the row's target and its actions are siblings in\n   * one bordered box. That is this slot — and being siblings is also what stops a click\n   * on \"Copy\" from selecting the row.\n   */\n  actions?: ReactNode;\n  /**\n   * The unread mark: a brand dot at the row's end, the title in semibold, and \"Unread\"\n   * read after the title (keksdose notification-inbox.tsx:215). For another status,\n   * pass your own mark in {@link status}.\n   */\n  unread?: boolean;\n  /** A mark in the unread dot's place — a `StatusDot` of another tone, a count. */\n  status?: ReactNode;\n  /**\n   * The row is the chosen one — a brand border on the raised surface (lenkbank's\n   * profile bar and segment list). `aria-current=\"true\"` on the target: the row is the\n   * current one of a set, which is what those lists mean, not a pressed toggle.\n   */\n  selected?: boolean;\n  disabled?: boolean;\n  /**\n   * Work under way on the row — keksdose's attachment download (support-attachments\n   * .tsx:91). A spinner takes the trailing edge, the target is `aria-busy`, and a\n   * second click is ignored. The row keeps focus: `aria-disabled`, not `disabled`, so\n   * a keyboard user is not dropped back to the top of the page mid-download.\n   */\n  loading?: boolean;\n  /** Overrides the {@link List}'s density for this row. */\n  density?: ListDensity;\n  /** `start` for rows whose text runs to two or three lines, so the icon sits by the\n   *  title rather than the middle of the paragraph. Default `center`. */\n  align?: \"center\" | \"start\";\n  /** Classes on the visible row (the bordered box). */\n  className?: string;\n  /** Classes on the main target (the button, link or static block). */\n  targetClassName?: string;\n  /**\n   * Extra attributes and handlers for the main target — e.g. HTML5 drag-and-drop\n   * (`draggable`, `onDragStart`, `onDragEnd`): lenkbank's segment list drags the WHOLE\n   * 44px row, and a grip inside the button cannot start a drag in Firefox. Spread first,\n   * so the row's own role, name, state and click handling always win.\n   */\n  targetProps?: HTMLAttributes<HTMLElement>;\n  /**\n   * A visible border while unselected, instead of the transparent one. For rows laid out\n   * as a wrapping strip (lenkbank's profile bar), where borderless rows read as loose\n   * text. The selected row's brand border is unchanged.\n   */\n  bordered?: boolean;\n  /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */\n  as?: \"li\" | \"div\";\n  /** Reaches the main target — the element with the row's name and action. */\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * The row is ONE thing to activate, so the types allow one: a button, an in-app link,\n * an external link, or nothing (a static row, like kastlan's passkey and user lists).\n */\nexport type ListItemProps = ListItemBaseProps &\n  (\n    | {\n        /** Makes the row a button — select, open, mark read. */\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n      }\n    | {\n        /**\n         * Makes the row a link. A real `<a href>`, so a middle click opens it in a\n         * background tab (keksdose feedback #451) — which a button calling `navigate`\n         * cannot do.\n         */\n        href: string;\n        /** Your router's link for an in-app `href`. Default `<a>`. The API `Chip`,\n         *  `StatTile` and `MenuItem` share. Ignored for an `external` row. */\n        renderLink?: (props: ListItemLinkProps) => ReactElement;\n        /**\n         * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener\n         * noreferrer\">` with an external-link mark, and \"opens in a new tab\" read\n         * after the title. keksdose's inbox rows whose URL is absolute.\n         */\n        external?: boolean;\n        /** Runs on a click, before the navigation (mark the row read). */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** Runs on a middle click, which fires no `click` — keksdose marks a\n         *  notification read here too, so a row opened into a background tab does not\n         *  stay unread. */\n        onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n      }\n    | {\n        onClick?: never;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n      }\n  );\n\n/**\n * One row of a {@link List}: leading icon or avatar, title and subtitle (both\n * truncating), a trailing slot, and — beside the row, not inside it — its actions.\n *\n * All three apps draw this row by hand, a dozen times: kastlan's units\n * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity\n * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)\n * and passkeys (passkeys-card.tsx:75); keksdose's notification inbox and attachment\n * downloads; lenkbank's profiles, projects and segments. The copies differ in the\n * details that are easy to get wrong — which of them truncate, whether the actions\n * are nested in the button, whether a link row is a link at all.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    title,\n    subtitle,\n    subtitleLines = 1,\n    meta,\n    icon: Icon,\n    leading,\n    trailing,\n    actions,\n    unread = false,\n    status,\n    selected = false,\n    disabled = false,\n    loading = false,\n    density: densityProp,\n    align = \"center\",\n    className,\n    targetClassName,\n    targetProps,\n    bordered = false,\n    as = \"li\",\n    href,\n    renderLink,\n    external = false,\n    onClick,\n    onAuxClick,\n    ...rest\n  },\n  ref,\n) {\n  const list = useContext(ListContext);\n  const labels = useKitLabels(\"list\", DEFAULT_LIST_LABELS);\n  const density = densityProp ?? list.density;\n  const pad = PAD[density];\n  const isLink = href !== undefined && !disabled;\n  const isButton = !isLink && onClick !== undefined && href === undefined;\n  const interactive = isLink || isButton;\n  const inert = disabled || loading;\n\n  const mark =\n    status ??\n    (unread ? <StatusDot tone=\"brand\" size=\"sm\" className={align === \"start\" ? \"mt-1.5\" : undefined} /> : null);\n\n  const body = (\n    <>\n      {Icon && (\n        <Icon\n          className={cn(\"size-4 shrink-0 text-[var(--text-muted)]\", align === \"start\" && \"mt-0.5\")}\n          aria-hidden\n        />\n      )}\n      {leading}\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span\n          className={cn(\n            \"block truncate text-sm text-[var(--text-primary)]\",\n            unread ? \"font-semibold\" : \"font-medium\",\n          )}\n        >\n          {title}\n          {unread && <span className=\"sr-only\"> ({labels.unread})</span>}\n          {external && href !== undefined && <span className=\"sr-only\"> ({labels.opensInNewTab})</span>}\n        </span>\n        {subtitle != null && (\n          <span\n            className={cn(\n              \"block text-xs text-[var(--text-muted)]\",\n              subtitleLines === 2 ? \"line-clamp-2\" : \"truncate\",\n            )}\n          >\n            {subtitle}\n          </span>\n        )}\n        {meta != null && <span className=\"mt-0.5 block truncate text-[11px] leading-snug text-[var(--text-muted)]\">{meta}</span>}\n      </span>\n      {trailing != null && <span className=\"flex shrink-0 items-center gap-2 text-xs text-[var(--text-muted)]\">{trailing}</span>}\n      {loading ? (\n        <Spinner label={null} className=\"size-3.5 shrink-0\" />\n      ) : (\n        external && href !== undefined && (\n          <ExternalLink className=\"size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100\" aria-hidden />\n        )\n      )}\n      {mark}\n    </>\n  );\n\n  const target = cn(\n    \"flex min-w-0 flex-1 text-start\",\n    align === \"start\" ? \"items-start\" : \"items-center\",\n    pad.target,\n    \"rounded-[inherit]\",\n    interactive && TARGET_RING,\n    interactive && !inert && \"cursor-pointer\",\n    loading && \"cursor-progress\",\n    targetClassName,\n  );\n\n  // `role` is the row's own (a button, a link, or nothing on a static block): a\n  // targetProps role would silently turn the row into something else.\n  const { role: _ignoredRole, ...targetExtras } = targetProps ?? {};\n\n  let main: ReactNode;\n  if (isLink) {\n    const linkProps: ListItemLinkProps = {\n      ...(targetExtras as Partial<ListItemLinkProps>),\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      className: target,\n      \"aria-current\": selected ? \"true\" : undefined,\n      \"aria-busy\": loading || undefined,\n      onClick: loading\n        ? (e) => e.preventDefault()\n        : (onClick as ListItemLinkProps[\"onClick\"]),\n      onAuxClick,\n      children: body,\n    };\n    const { children: linkBody, ...anchorProps } = linkProps;\n    main = renderLink && !external ? (\n      <RenderedLink render={renderLink} {...linkProps} />\n    ) : (\n      <a {...anchorProps} {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}>\n        {linkBody}\n      </a>\n    );\n  } else if (isButton) {\n    main = (\n      <button\n        {...(targetExtras as HTMLAttributes<HTMLButtonElement>)}\n        {...rest}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        // A disabled row is `disabled`: nothing to do there, and nothing to reach. A\n        // loading row is only `aria-disabled` — see `loading`.\n        disabled={disabled}\n        aria-disabled={loading || undefined}\n        aria-busy={loading || undefined}\n        aria-current={selected ? \"true\" : undefined}\n        onClick={loading ? undefined : (onClick as (event: MouseEvent<HTMLButtonElement>) => void)}\n        className={target}\n      >\n        {body}\n      </button>\n    );\n  } else {\n    main = (\n      <div\n        {...(targetExtras as HTMLAttributes<HTMLDivElement>)}\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        className={target}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const Tag = as;\n  return (\n    <Tag\n      className={cn(\n        list.separator === \"divider\" && \"border-b border-[var(--border)] last:border-b-0\",\n        list.separator === \"divider\" && as === \"li\" && \"py-0.5\",\n      )}\n    >\n      <div\n        className={cn(\n          \"flex min-w-0 items-center rounded-md border transition-colors\",\n          selected\n            ? \"border-[var(--brand)] bg-[var(--bg-surface-2)]\"\n            : bordered\n              ? \"border-[var(--border)]\"\n              : \"border-transparent\",\n          interactive && !inert && !selected && \"hover:bg-[var(--bg-hover)]\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        {main}\n        {actions != null && (\n          <div className={cn(\"flex shrink-0 items-center\", pad.gap, pad.actions)}>{actions}</div>\n        )}\n      </div>\n    </Tag>\n  );\n});\n\nfunction RenderedLink({\n  render,\n  ...props\n}: ListItemLinkProps & { render: (props: ListItemLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AA8DM,SAqOF,UArOE,KAqPe,YArPf;AA9DN,SAAS,eAAe,YAAY,kBAAkB;AAEtD,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAWtB,MAAM,sBAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,eAAe;AACjB;AAaA,MAAM,cAAc,cAAkE;AAAA,EACpF,SAAS;AAAA,EACT,WAAW;AACb,CAAC;AAkBM,MAAM,OAAO,WAAwC,SAASA,MACnE,EAAE,KAAK,MAAM,UAAU,WAAW,YAAY,OAAO,WAAW,UAAU,GAAG,KAAK,GAClF,KACA;AACA,QAAM,MAAM;AACZ,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,SAAS,UAAU,GAChD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,cAAc,UAAU,YAAY,YAAY,YAAY;AAAA,QAC5D;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAqBD,MAAM,MAA6E;AAAA,EACjF,SAAS,EAAE,QAAQ,qBAAqB,SAAS,UAAU,KAAK,UAAU;AAAA,EAC1E,SAAS,EAAE,QAAQ,qBAAqB,SAAS,QAAQ,KAAK,QAAQ;AAAA,EACtE,aAAa,EAAE,QAAQ,mBAAmB,SAAS,QAAQ,KAAK,QAAQ;AAC1E;AAEA,MAAM,cACJ;AA8IK,MAAM,WAAW,WAAuC,SAASC,UACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,OAAO,WAAW,WAAW;AACnC,QAAM,SAAS,aAAa,QAAQ,mBAAmB;AACvD,QAAM,UAAU,eAAe,KAAK;AACpC,QAAM,MAAM,IAAI,OAAO;AACvB,QAAM,SAAS,SAAS,UAAa,CAAC;AACtC,QAAM,WAAW,CAAC,UAAU,YAAY,UAAa,SAAS;AAC9D,QAAM,cAAc,UAAU;AAC9B,QAAM,QAAQ,YAAY;AAE1B,QAAM,OACJ,WACC,SAAS,oBAAC,aAAU,MAAK,SAAQ,MAAK,MAAK,WAAW,UAAU,UAAU,WAAW,QAAW,IAAK;AAExG,QAAM,OACJ,iCACG;AAAA,YACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,4CAA4C,UAAU,WAAW,QAAQ;AAAA,QACvF,eAAW;AAAA;AAAA,IACb;AAAA,IAED;AAAA,IACD,qBAAC,UAAK,WAAU,gCACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,SAAS,kBAAkB;AAAA,UAC7B;AAAA,UAEC;AAAA;AAAA,YACA,UAAU,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,cAAG,OAAO;AAAA,cAAO;AAAA,eAAC;AAAA,YACtD,YAAY,SAAS,UAAa,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,cAAG,OAAO;AAAA,cAAc;AAAA,eAAC;AAAA;AAAA;AAAA,MACxF;AAAA,MACC,YAAY,QACX;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,IAAI,iBAAiB;AAAA,UACzC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAED,QAAQ,QAAQ,oBAAC,UAAK,WAAU,2EAA2E,gBAAK;AAAA,OACnH;AAAA,IACC,YAAY,QAAQ,oBAAC,UAAK,WAAU,qEAAqE,oBAAS;AAAA,IAClH,UACC,oBAAC,WAAQ,OAAO,MAAM,WAAU,qBAAoB,IAEpD,YAAY,SAAS,UACnB,oBAAC,gBAAa,WAAU,+DAA8D,eAAW,MAAC;AAAA,IAGrG;AAAA,KACH;AAGF,QAAM,SAAS;AAAA,IACb;AAAA,IACA,UAAU,UAAU,gBAAgB;AAAA,IACpC,IAAI;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,eAAe,CAAC,SAAS;AAAA,IACzB,WAAW;AAAA,IACX;AAAA,EACF;AAIA,QAAM,EAAE,MAAM,cAAc,GAAG,aAAa,IAAI,eAAe,CAAC;AAEhE,MAAI;AACJ,MAAI,QAAQ;AACV,UAAM,YAA+B;AAAA,MACnC,GAAI;AAAA,MACJ,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,gBAAgB,WAAW,SAAS;AAAA,MACpC,aAAa,WAAW;AAAA,MACxB,SAAS,UACL,CAAC,MAAM,EAAE,eAAe,IACvB;AAAA,MACL;AAAA,MACA,UAAU;AAAA,IACZ;AACA,UAAM,EAAE,UAAU,UAAU,GAAG,YAAY,IAAI;AAC/C,WAAO,cAAc,CAAC,WACpB,oBAAC,gBAAa,QAAQ,YAAa,GAAG,WAAW,IAEjD,oBAAC,OAAG,GAAG,aAAc,GAAI,WAAW,EAAE,QAAQ,UAAU,KAAK,sBAAsB,IAAI,MACpF,oBACH;AAAA,EAEJ,WAAW,UAAU;AACnB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,MAAK;AAAA,QAGL;AAAA,QACA,iBAAe,WAAW;AAAA,QAC1B,aAAW,WAAW;AAAA,QACtB,gBAAc,WAAW,SAAS;AAAA,QAClC,SAAS,UAAU,SAAa;AAAA,QAChC,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,iBAAe,YAAY;AAAA,QAC3B,aAAW,WAAW;AAAA,QACtB,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,MAAM;AACZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,KAAK,cAAc,aAAa;AAAA,QAChC,KAAK,cAAc,aAAa,OAAO,QAAQ;AAAA,MACjD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,WACI,mDACA,WACE,2BACA;AAAA,YACN,eAAe,CAAC,SAAS,CAAC,YAAY;AAAA,YACtC,YAAY;AAAA,YACZ;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,YACA,WAAW,QACV,oBAAC,SAAI,WAAW,GAAG,8BAA8B,IAAI,KAAK,IAAI,OAAO,GAAI,mBAAQ;AAAA;AAAA;AAAA,MAErF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,OAAO,KAAK;AACrB;","names":["List","ListItem"]}

package/dist/components/menu-item.d.ts

@@ -25,7 +25,17 @@ interface MenuItemBaseProps {
     icon?: LucideIcon;
     /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */
     leading?: ReactNode;
-    /** After the label, at the row's end: a shortcut, a count, a badge. */
+    /**
+     * Right after the label text, before the gap that pushes {@link trailing} to the
+     * row's end: keksdose's budget switcher tags a budget "Guest" or "Shared" with a
+     * `Chip` that belongs to the NAME (budget-switcher.tsx:55/59), not to the row's end
+     * where a count or a check mark sits. Hand-placed inside `children` it was truncated
+     * with the name — a long budget name ate the chip first. Here the label truncates
+     * and the badge never shrinks, so it stays visible beside what is left of the name.
+     * It is part of the row's accessible name ("Household Shared"), so keep it text.
+     */
+    badge?: ReactNode;
+    /** After the label, at the row's end: a shortcut, a count. (A tag that belongs to the name is {@link badge}.) */
     trailing?: ReactNode;
     /** `danger` for the row that destroys or signs out. Colour is not the whole message:
      *  the label must still say what the row does. */

package/dist/components/menu-item.js

@@ -9,6 +9,7 @@ const MenuItem = forwardRef(function MenuItem2({
   children,
   icon: Icon,
   leading,
+  badge,
   trailing,
   tone = "default",
   disabled = false,
@@ -33,7 +34,11 @@ const MenuItem = forwardRef(function MenuItem2({
     /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
       Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
       leading,
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+      badge != null && badge !== false && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx("span", { "data-menu-item-badge": "", className: "flex shrink-0 items-center", children: badge })
+      ] })
     ] }),
     (trailing != null || on) && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
       trailing,

package/dist/components/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/menu-item.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * `TOPBAR_MENU_ITEM_CLASS`'s row, spelled out rather than imported: a component does\n * not reach up into the shell (the same call `Disclosure`'s menu variant made). A test\n * holds the two to the same classes, so a menu mixing `MenuItem`s with the shell's own\n * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.\n */\nconst MENU_ITEM_ROW =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the\n *  ring, a keyboard user always does. Inset, because the panel clips its children. */\nconst MENU_ITEM_FOCUS =\n  \"focus-visible:outline-none focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\";\n\nexport type MenuItemTone = \"default\" | \"danger\";\n\n/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,\n *  mapping `href` to what the link calls it —\n *  `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface MenuItemLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  role: \"menuitem\";\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: \"page\";\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\ninterface MenuItemBaseProps {\n  /** The row's text. */\n  children: ReactNode;\n  /** An icon before the label, drawn at the menu's 16px. */\n  icon?: LucideIcon;\n  /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */\n  leading?: ReactNode;\n  /** After the label, at the row's end: a shortcut, a count, a badge. */\n  trailing?: ReactNode;\n  /** `danger` for the row that destroys or signs out. Colour is not the whole message:\n   *  the label must still say what the row does. */\n  tone?: MenuItemTone;\n  disabled?: boolean;\n  className?: string;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * A menu row is a button OR a link, and only the button can be CHECKED: a checked link\n * is a link to where you already are, which is `current`, not a selection.\n */\nexport type MenuItemProps = MenuItemBaseProps &\n  (\n    | {\n        href?: never;\n        renderLink?: never;\n        current?: never;\n        /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to\n         *  the render prop that draws the rows. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n        /**\n         * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a\n         * plain command; `false` is a choice that is not chosen, which is different.\n         * A check mark is drawn at the end when it is on.\n         */\n        checked?: boolean;\n        /**\n         * What kind of choice, when `checked` is given:\n         *\n         * - `radio` (default): one of a set — keksdose's budget switcher\n         *   (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.\n         * - `checkbox`: an independent on/off — \"Show archived\". `menuitemcheckbox`.\n         *\n         * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a\n         * `role=\"menu\"` a screen reader expects the menu roles and reads \"checked\"\n         * only from them. A button with `aria-pressed` in a menu is announced as a\n         * button in a menu, which is two widgets in one.\n         */\n        checkable?: \"radio\" | \"checkbox\";\n      }\n    | {\n        /** Makes the row a link — keksdose's \"Manage budgets\" and account-menu rows. */\n        href: string;\n        /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads\n         *  a single-page app. Default `<a>`. The same API as `Chip` and `StatTile`. */\n        renderLink?: (props: MenuItemLinkProps) => ReactElement;\n        /** Runs on the way (close the menu). */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n        current?: boolean;\n        checked?: never;\n        checkable?: never;\n      }\n  );\n\n/**\n * One row of a `HoverMenu` / `TopBarActionMenu` panel.\n *\n * keksdose's account menu and budget switcher each rebuild this row by hand — the\n * shell's class, an icon, a label, a badge, a check mark on the active budget — and the\n * check mark was the only thing saying which budget was active, so a screen reader\n * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).\n *\n * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less\n * buttons and links to `menuitem`: a checked row must be `menuitemradio` or\n * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that\n * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up\n * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`\n * turns the list markup into `role=\"none\"`.\n */\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n  {\n    children,\n    icon: Icon,\n    leading,\n    trailing,\n    tone = \"default\",\n    disabled = false,\n    className,\n    href,\n    renderLink,\n    onClick,\n    checked,\n    checkable,\n    current,\n    ...rest\n  },\n  ref,\n) {\n  const on = href !== undefined ? !!current : !!checked;\n  const look = cn(\n    MENU_ITEM_ROW,\n    MENU_ITEM_FOCUS,\n    tone === \"danger\" && \"text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]\",\n    disabled && \"cursor-default opacity-50 hover:bg-transparent\",\n    className,\n  );\n  const body = (\n    <>\n      <span className=\"flex min-w-0 items-center gap-2\">\n        {Icon && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n        {leading}\n        <span className=\"min-w-0 truncate\">{children}</span>\n      </span>\n      {(trailing != null || on) && (\n        <span className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n          {on && <Check className=\"size-4 text-[var(--text-secondary)]\" aria-hidden />}\n        </span>\n      )}\n    </>\n  );\n\n  if (href !== undefined && !disabled) {\n    const linkProps: MenuItemLinkProps = {\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      role: \"menuitem\",\n      className: look,\n      onClick: onClick as MenuItemLinkProps[\"onClick\"],\n      \"aria-current\": current ? \"page\" : undefined,\n      children: body,\n    };\n    if (renderLink) return <RenderedLink render={renderLink} {...linkProps} />;\n    const { children: linkBody, ...anchorProps } = linkProps;\n    return <a {...anchorProps}>{linkBody}</a>;\n  }\n\n  const role =\n    href === undefined && checked !== undefined\n      ? checkable === \"checkbox\"\n        ? \"menuitemcheckbox\"\n        : \"menuitemradio\"\n      : \"menuitem\";\n  return (\n    <button\n      {...rest}\n      ref={ref as Ref<HTMLButtonElement>}\n      type=\"button\"\n      role={role}\n      aria-checked={role === \"menuitem\" ? undefined : !!checked}\n      // `aria-disabled` rather than `disabled`: HoverMenu's roving focus skips either,\n      // and the ARIA menu pattern keeps an unavailable item perceivable (\"Delete,\n      // dimmed\") rather than greyed to the point some browsers stop exposing it.\n      aria-disabled={disabled || undefined}\n      onClick={\n        disabled\n          ? (e) => e.preventDefault()\n          : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)\n      }\n      className={look}\n    >\n      {body}\n    </button>\n  );\n});\n\nfunction RenderedLink({\n  render,\n  ...props\n}: MenuItemLinkProps & { render: (props: MenuItemLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAoJI,mBAEa,KADX,YADF;AApJJ,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,SAAS,UAAU;AAQnB,MAAM,gBACJ;AAIF,MAAM,kBACJ;AAsGK,MAAM,WAAW,WAAuC,SAASA,UACtE;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,KAAK,SAAS,SAAY,CAAC,CAAC,UAAU,CAAC,CAAC;AAC9C,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA,SAAS,YAAY;AAAA,IACrB,YAAY;AAAA,IACZ;AAAA,EACF;AACA,QAAM,OACJ,iCACE;AAAA,yBAAC,UAAK,WAAU,mCACb;AAAA,cAAQ,oBAAC,QAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,MACtD;AAAA,MACD,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,OAC/C;AAAA,KACE,YAAY,QAAQ,OACpB,qBAAC,UAAK,WAAU,oCACb;AAAA;AAAA,MACA,MAAM,oBAAC,SAAM,WAAU,uCAAsC,eAAW,MAAC;AAAA,OAC5E;AAAA,KAEJ;AAGF,MAAI,SAAS,UAAa,CAAC,UAAU;AACnC,UAAM,YAA+B;AAAA,MACnC,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,UAAU,SAAS;AAAA,MACnC,UAAU;AAAA,IACZ;AACA,QAAI,WAAY,QAAO,oBAAC,gBAAa,QAAQ,YAAa,GAAG,WAAW;AACxE,UAAM,EAAE,UAAU,UAAU,GAAG,YAAY,IAAI;AAC/C,WAAO,oBAAC,OAAG,GAAG,aAAc,oBAAS;AAAA,EACvC;AAEA,QAAM,OACJ,SAAS,UAAa,YAAY,SAC9B,cAAc,aACZ,qBACA,kBACF;AACN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,gBAAc,SAAS,aAAa,SAAY,CAAC,CAAC;AAAA,MAIlD,iBAAe,YAAY;AAAA,MAC3B,SACE,WACI,CAAC,MAAM,EAAE,eAAe,IACvB;AAAA,MAEP,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,OAAO,KAAK;AACrB;","names":["MenuItem"]}
+{"version":3,"sources":["../../src/components/menu-item.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * `TOPBAR_MENU_ITEM_CLASS`'s row, spelled out rather than imported: a component does\n * not reach up into the shell (the same call `Disclosure`'s menu variant made). A test\n * holds the two to the same classes, so a menu mixing `MenuItem`s with the shell's own\n * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.\n */\nconst MENU_ITEM_ROW =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the\n *  ring, a keyboard user always does. Inset, because the panel clips its children. */\nconst MENU_ITEM_FOCUS =\n  \"focus-visible:outline-none focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\";\n\nexport type MenuItemTone = \"default\" | \"danger\";\n\n/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,\n *  mapping `href` to what the link calls it —\n *  `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface MenuItemLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  role: \"menuitem\";\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: \"page\";\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\ninterface MenuItemBaseProps {\n  /** The row's text. */\n  children: ReactNode;\n  /** An icon before the label, drawn at the menu's 16px. */\n  icon?: LucideIcon;\n  /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */\n  leading?: ReactNode;\n  /**\n   * Right after the label text, before the gap that pushes {@link trailing} to the\n   * row's end: keksdose's budget switcher tags a budget \"Guest\" or \"Shared\" with a\n   * `Chip` that belongs to the NAME (budget-switcher.tsx:55/59), not to the row's end\n   * where a count or a check mark sits. Hand-placed inside `children` it was truncated\n   * with the name — a long budget name ate the chip first. Here the label truncates\n   * and the badge never shrinks, so it stays visible beside what is left of the name.\n   * It is part of the row's accessible name (\"Household Shared\"), so keep it text.\n   */\n  badge?: ReactNode;\n  /** After the label, at the row's end: a shortcut, a count. (A tag that belongs to the name is {@link badge}.) */\n  trailing?: ReactNode;\n  /** `danger` for the row that destroys or signs out. Colour is not the whole message:\n   *  the label must still say what the row does. */\n  tone?: MenuItemTone;\n  disabled?: boolean;\n  className?: string;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * A menu row is a button OR a link, and only the button can be CHECKED: a checked link\n * is a link to where you already are, which is `current`, not a selection.\n */\nexport type MenuItemProps = MenuItemBaseProps &\n  (\n    | {\n        href?: never;\n        renderLink?: never;\n        current?: never;\n        /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to\n         *  the render prop that draws the rows. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n        /**\n         * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a\n         * plain command; `false` is a choice that is not chosen, which is different.\n         * A check mark is drawn at the end when it is on.\n         */\n        checked?: boolean;\n        /**\n         * What kind of choice, when `checked` is given:\n         *\n         * - `radio` (default): one of a set — keksdose's budget switcher\n         *   (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.\n         * - `checkbox`: an independent on/off — \"Show archived\". `menuitemcheckbox`.\n         *\n         * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a\n         * `role=\"menu\"` a screen reader expects the menu roles and reads \"checked\"\n         * only from them. A button with `aria-pressed` in a menu is announced as a\n         * button in a menu, which is two widgets in one.\n         */\n        checkable?: \"radio\" | \"checkbox\";\n      }\n    | {\n        /** Makes the row a link — keksdose's \"Manage budgets\" and account-menu rows. */\n        href: string;\n        /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads\n         *  a single-page app. Default `<a>`. The same API as `Chip` and `StatTile`. */\n        renderLink?: (props: MenuItemLinkProps) => ReactElement;\n        /** Runs on the way (close the menu). */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n        current?: boolean;\n        checked?: never;\n        checkable?: never;\n      }\n  );\n\n/**\n * One row of a `HoverMenu` / `TopBarActionMenu` panel.\n *\n * keksdose's account menu and budget switcher each rebuild this row by hand — the\n * shell's class, an icon, a label, a badge, a check mark on the active budget — and the\n * check mark was the only thing saying which budget was active, so a screen reader\n * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).\n *\n * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less\n * buttons and links to `menuitem`: a checked row must be `menuitemradio` or\n * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that\n * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up\n * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`\n * turns the list markup into `role=\"none\"`.\n */\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n  {\n    children,\n    icon: Icon,\n    leading,\n    badge,\n    trailing,\n    tone = \"default\",\n    disabled = false,\n    className,\n    href,\n    renderLink,\n    onClick,\n    checked,\n    checkable,\n    current,\n    ...rest\n  },\n  ref,\n) {\n  const on = href !== undefined ? !!current : !!checked;\n  const look = cn(\n    MENU_ITEM_ROW,\n    MENU_ITEM_FOCUS,\n    tone === \"danger\" && \"text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]\",\n    disabled && \"cursor-default opacity-50 hover:bg-transparent\",\n    className,\n  );\n  const body = (\n    <>\n      <span className=\"flex min-w-0 items-center gap-2\">\n        {Icon && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n        {leading}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {badge != null && badge !== false && (\n          <>\n            {/* A space between the name and the badge in the accessible name (\"Household\n                Shared\", not \"HouseholdShared\"); whitespace between flex items is not\n                laid out, so it costs nothing on screen. */}{\" \"}\n            <span data-menu-item-badge=\"\" className=\"flex shrink-0 items-center\">\n              {badge}\n            </span>\n          </>\n        )}\n      </span>\n      {(trailing != null || on) && (\n        <span className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n          {on && <Check className=\"size-4 text-[var(--text-secondary)]\" aria-hidden />}\n        </span>\n      )}\n    </>\n  );\n\n  if (href !== undefined && !disabled) {\n    const linkProps: MenuItemLinkProps = {\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      role: \"menuitem\",\n      className: look,\n      onClick: onClick as MenuItemLinkProps[\"onClick\"],\n      \"aria-current\": current ? \"page\" : undefined,\n      children: body,\n    };\n    if (renderLink) return <RenderedLink render={renderLink} {...linkProps} />;\n    const { children: linkBody, ...anchorProps } = linkProps;\n    return <a {...anchorProps}>{linkBody}</a>;\n  }\n\n  const role =\n    href === undefined && checked !== undefined\n      ? checkable === \"checkbox\"\n        ? \"menuitemcheckbox\"\n        : \"menuitemradio\"\n      : \"menuitem\";\n  return (\n    <button\n      {...rest}\n      ref={ref as Ref<HTMLButtonElement>}\n      type=\"button\"\n      role={role}\n      aria-checked={role === \"menuitem\" ? undefined : !!checked}\n      // `aria-disabled` rather than `disabled`: HoverMenu's roving focus skips either,\n      // and the ARIA menu pattern keeps an unavailable item perceivable (\"Delete,\n      // dimmed\") rather than greyed to the point some browsers stop exposing it.\n      aria-disabled={disabled || undefined}\n      onClick={\n        disabled\n          ? (e) => e.preventDefault()\n          : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)\n      }\n      className={look}\n    >\n      {body}\n    </button>\n  );\n});\n\nfunction RenderedLink({\n  render,\n  ...props\n}: MenuItemLinkProps & { render: (props: MenuItemLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAiKiB,SAIP,UAJO,KAIP,YAJO;AAjKjB,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,SAAS,UAAU;AAQnB,MAAM,gBACJ;AAIF,MAAM,kBACJ;AAgHK,MAAM,WAAW,WAAuC,SAASA,UACtE;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,KAAK,SAAS,SAAY,CAAC,CAAC,UAAU,CAAC,CAAC;AAC9C,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA,SAAS,YAAY;AAAA,IACrB,YAAY;AAAA,IACZ;AAAA,EACF;AACA,QAAM,OACJ,iCACE;AAAA,yBAAC,UAAK,WAAU,mCACb;AAAA,cAAQ,oBAAC,QAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,MACtD;AAAA,MACD,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,MAC5C,SAAS,QAAQ,UAAU,SAC1B,iCAGmD;AAAA;AAAA,QACjD,oBAAC,UAAK,wBAAqB,IAAG,WAAU,8BACrC,iBACH;AAAA,SACF;AAAA,OAEJ;AAAA,KACE,YAAY,QAAQ,OACpB,qBAAC,UAAK,WAAU,oCACb;AAAA;AAAA,MACA,MAAM,oBAAC,SAAM,WAAU,uCAAsC,eAAW,MAAC;AAAA,OAC5E;AAAA,KAEJ;AAGF,MAAI,SAAS,UAAa,CAAC,UAAU;AACnC,UAAM,YAA+B;AAAA,MACnC,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,UAAU,SAAS;AAAA,MACnC,UAAU;AAAA,IACZ;AACA,QAAI,WAAY,QAAO,oBAAC,gBAAa,QAAQ,YAAa,GAAG,WAAW;AACxE,UAAM,EAAE,UAAU,UAAU,GAAG,YAAY,IAAI;AAC/C,WAAO,oBAAC,OAAG,GAAG,aAAc,oBAAS;AAAA,EACvC;AAEA,QAAM,OACJ,SAAS,UAAa,YAAY,SAC9B,cAAc,aACZ,qBACA,kBACF;AACN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,gBAAc,SAAS,aAAa,SAAY,CAAC,CAAC;AAAA,MAIlD,iBAAe,YAAY;AAAA,MAC3B,SACE,WACI,CAAC,MAAM,EAAE,eAAe,IACvB;AAAA,MAEP,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,OAAO,KAAK;AACrB;","names":["MenuItem"]}

package/dist/components/mini-calendar.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 /**
  * Every string this calendar can speak — the `miniCalendar` namespace of
@@ -52,8 +52,10 @@ declare const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels;
  * before this, a closed prop list dropped both (audit §api-design).
  */
 interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
-    from: string;
-    to: string;
+    /** The selection's start as "YYYY-MM-DD"; `""` (the default) for none. */
+    from?: string;
+    /** The selection's end; `""` (the default) for none. */
+    to?: string;
     /**
      * BCP 47 tag for the month caption, the weekday heads, the day numbers and the
      * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar
@@ -94,9 +96,72 @@ interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<"div">, "onSel
      * merely by existing.
      */
     focusOnOpen?: boolean;
+    /**
+     * `"sm"` (default) is the compact picker: 32px round days, the size the date
+     * pickers and the data-table filter draw. `"lg"` is a MONTH VIEW for a page — tall
+     * cells in a ruled grid, the day number in the top corner and {@link renderDay}'s
+     * content under it — the calendar a planner page hand-built before this existed.
+     * Both are the same grid underneath: the same roles, roving tabindex, keys, RTL
+     * mirroring and week start.
+     */
+    size?: "sm" | "lg";
+    /**
+     * Custom content for one day: events, an amount, a dot. Called for every day of the
+     * month on show; return `null` for none.
+     *
+     * ⚠️ **It renders INSIDE the day's button** — a dot under the number at `"sm"`, a
+     * column under it at `"lg"` — so it must not be interactive: no links, no buttons,
+     * no inputs. A control inside a control is invalid HTML, and a screen reader lands
+     * on the day and never reaches what is inside it. Events that are themselves
+     * clickable are shown here as plain text, and the DAY is what is clicked: pass
+     * `mode="single"` and let `onSelect` open a day panel (a drawer, a popover) that
+     * lists that day's events as real links.
+     *
+     * The day's accessible name stays the full date; this content is attached to it as
+     * its DESCRIPTION (`aria-describedby`), so "Monday, 14 September 2026" is read
+     * first and "Rent due · Plumber" after it. Anything decorative (a coloured dot)
+     * should be `aria-hidden` or carry an `sr-only` word for what it means.
+     */
+    renderDay?: (day: Date, state: MiniCalendarDayState) => ReactNode;
+    /**
+     * The month on show, as "YYYY-MM". FOLLOWED rather than controlled, exactly like
+     * `from`/`to`: when it changes the grid moves there, and in between the user pages
+     * freely — every move to another month is reported through {@link onMonthChange}.
+     * For a month page whose own header (a month picker, a Today button) drives the
+     * calendar. Left out, the grid opens on the selection or today.
+     */
+    month?: string;
+    /** Called with "YYYY-MM" whenever the USER moves the grid to another month (the
+     *  arrows, PageUp/PageDown, arrowing off the edge). */
+    onMonthChange?: (month: string) => void;
+    /**
+     * Hide the built-in previous/next arrows and month caption, for a page that draws
+     * its own. The caption is kept for assistive technology (visually hidden), because
+     * it is what names the grid.
+     */
+    hideNavigation?: boolean;
     /** Extra classes for the calendar's root. */
     className?: string;
 }
+/** What {@link MiniCalendarProps.renderDay} is told about the day it draws. */
+interface MiniCalendarDayState {
+    /** The day as "YYYY-MM-DD". */
+    iso: string;
+    /** The day number as drawn, in the calendar's locale. */
+    label: string;
+    today: boolean;
+    /** Outside `min`/`max`. */
+    disabled: boolean;
+    /** Part of the selection — an end or a day between. */
+    selected: boolean;
+    rangeStart: boolean;
+    rangeEnd: boolean;
+    /** Strictly between the two ends of a range. */
+    inRange: boolean;
+    /** The day that holds the tab stop. */
+    active: boolean;
+    size: "sm" | "lg";
+}
 type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 /**
  * Month-grid range picker used by the data-table date filter. Click once to set
@@ -119,6 +184,6 @@ type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
  * month would have holes that the roving tabindex falls into. They stay reachable and
  * readable, and the click handler is what refuses them.
  */
-declare function MiniCalendar({ from, to, locale: localeProp, weekStartsOn, onSelect, mode, min, max, labels: labelsProp, focusOnOpen, className, ...rest }: MiniCalendarProps): react.JSX.Element;
+declare function MiniCalendar({ from, to, locale: localeProp, weekStartsOn, onSelect, mode, min, max, labels: labelsProp, focusOnOpen, size, renderDay, month, onMonthChange, hideNavigation, className, ...rest }: MiniCalendarProps): react.JSX.Element;
 
-export { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarLabels, type MiniCalendarProps, type WeekDay };
+export { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarDayState, type MiniCalendarLabels, type MiniCalendarProps, type WeekDay };