@eifi1/ui-kit 0.8.1 → 0.10.0

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

@@ -20,6 +20,30 @@ interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
      * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).
      */
     offset?: string;
+    /**
+     * Whether the button carries the browser's own tooltip (`title`, the `label` unless a
+     * `title` is passed). Default `true`, so an icon-only button keeps a hover hint for a
+     * mouse user with no other way to learn what it is. `false` renders no `title` at all:
+     * keksdose has ONE tooltip, the kit's `Tooltip` (dev#523), and its source scan fails a
+     * native `title=` anywhere — so a flag, not `title=""`, which the scan would still
+     * see. An empty `title` renders no attribute either, for the caller who has no scan.
+     *
+     * Not flipped to off by default: a FAB wrapped in nothing would lose the only hover
+     * hint it has, silently, in every app already on it. And the kit cannot wrap itself
+     * in its `Tooltip` — the bubble's anchor is a `relative inline-flex` span, and the
+     * button is `fixed` and portalled — so the one-tooltip caller wraps it.
+     */
+    nativeTitle?: boolean;
+    /**
+     * Make it a toggle. `true`/`false` set `aria-pressed` and swap the solid brand disc for
+     * a surface disc — the glyph in brand on the quiet brand fill when on, the secondary
+     * text colour when off — the "on" look of `IconButton`'s `pressed` and of a selected
+     * Chip. Left out, it is the ordinary action FAB. For keksdose's corner filter toggles
+     * (feedback-page's "awaiting only", the /transactions pending and upcoming toggles),
+     * which paint `text-[var(--brand)]` on a surface button by hand. Keep `label` the same
+     * in both states; `aria-pressed` already says which one it is in.
+     */
+    pressed?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 /**
@@ -39,7 +63,7 @@ interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
  * Portalled, because `position: fixed` inside any transformed ancestor (an animated
  * page transition) is fixed to that ancestor, not to the screen.
  */
-declare function FloatingActionButton({ label, icon, corner, offset, className, style, type, ...rest }: FloatingActionButtonProps): react.JSX.Element;
+declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, className, style, type, title, ...rest }: FloatingActionButtonProps): react.JSX.Element;
 interface FloatingPanelProps {
     /** The panel's heading, and its accessible name. */
     title: ReactNode;
@@ -57,6 +81,9 @@ interface FloatingPanelProps {
     /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.
      *  From `md` up the card sits above the FAB, so it moves with it. */
     offset?: string;
+    /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.
+     *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */
+    fabNativeTitle?: boolean;
     /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else "Close". */
     closeLabel?: string;
     /**
@@ -102,6 +129,6 @@ interface FloatingPanelProps {
  * panel unmounts when closed; an app that must keep a draft across a close keeps it in
  * its own state, where it also survives a reload.
  */
-declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
+declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
 
 export { DEFAULT_FLOATING_PANEL_LABELS, FloatingActionButton, type FloatingActionButtonProps, type FloatingCorner, FloatingPanel, type FloatingPanelLabels, type FloatingPanelProps };

package/dist/components/floating-panel.js

@@ -30,12 +30,17 @@ function FloatingActionButton({
   icon,
   corner = "bottom-end",
   offset = "1rem",
+  nativeTitle = true,
+  pressed,
   className,
   style,
   type = "button",
+  title,
   ...rest
 }) {
   const [marker, dir] = usePortalDir();
+  const toggle = pressed !== void 0;
+  const nativeTip = nativeTitle && title !== "" ? title ?? label : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
     typeof document !== "undefined" && createPortal(
@@ -46,11 +51,18 @@ function FloatingActionButton({
           type,
           dir,
           "aria-label": label,
-          title: rest.title ?? label,
+          "aria-pressed": pressed ?? rest["aria-pressed"],
+          title: nativeTip,
           style: { ...cornerStyle(corner, offset), ...style },
           className: cn(
             "fixed z-40 inline-flex size-12 items-center justify-center rounded-full",
-            "bg-[var(--brand)] text-[var(--brand-contrast)] shadow-lg transition-colors hover:bg-[var(--brand-hover)]",
+            "shadow-lg transition-colors",
+            !toggle && "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
+            // A toggle sits on the page's surface — a solid brand disc would read as
+            // "on" in both states — and says "on" in the brand family.
+            toggle && "border border-[var(--border)]",
+            pressed === false && "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+            pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
             "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
             "[&_svg]:size-6",
             className
@@ -71,6 +83,7 @@ function FloatingPanel({
   onOpenChange,
   corner = "bottom-end",
   offset = "1rem",
+  fabNativeTitle,
   closeLabel,
   initialFocus,
   className,
@@ -129,6 +142,7 @@ function FloatingPanel({
         icon: fabIcon,
         corner,
         offset,
+        nativeTitle: fabNativeTitle,
         "aria-expanded": open,
         "aria-controls": open ? panelId : void 0,
         onClick: () => {

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  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  className,\n  style,\n  type = \"button\",\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\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            title={rest.title ?? label}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex size-12 items-center justify-center rounded-full\",\n              \"bg-[var(--brand)] text-[var(--brand-contrast)] shadow-lg transition-colors hover:bg-[var(--brand-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  /** 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  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        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 { 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":[]}

package/dist/components/full-bleed-dialog.d.ts

@@ -11,12 +11,29 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going
  * to the panel inside it, which is what it has always meant here.
  */
-interface FullBleedDialogProps extends ComponentPropsWithoutRef<"div"> {
+interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
     open: boolean;
     /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —
      *  the platform Back gesture all call this. */
     onClose: () => void;
-    /** What the header strip shows beside the close button. */
+    /**
+     * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start
+     * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is
+     * announced by name rather than as just "dialog".
+     *
+     * Before this the strip was a styled `div`, and a caller that wanted its full-screen
+     * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —
+     * keksdose's budget-table phone editor says so in a comment at the call site. A
+     * caller's own `aria-label` / `aria-labelledby` still wins.
+     */
+    title?: ReactNode;
+    /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */
+    headingAs?: "h1" | "h2" | "h3" | "h4";
+    /**
+     * Free content for the header strip, beside the close button — after the
+     * {@link title} when there is one, or on its own (the row editor shows the row's
+     * own first cell here). It does not name the dialog; `title` does.
+     */
     header?: ReactNode;
     closeLabel: string;
     children: ReactNode;
@@ -71,9 +88,11 @@ interface FullBleedDialogProps extends ComponentPropsWithoutRef<"div"> {
  * ## What the caller still owns
  *
  * The HEADER's content, because the two callers name themselves differently: the row
- * editor shows the row's own first column, the create card a plain title. And `open`,
+ * editor shows the row's own first column, the create card a plain title. A plain
+ * title belongs in `title`, which is a real heading and the dialog's name; `header`
+ * stays the free slot beside it. And `open`,
  * because who decides is the caller's business — see {@link backCloses}.
  */
-declare function FullBleedDialog({ open, onClose, header, closeLabel, children, backCloses, className, footer, onMouseDown, onMouseUp, onKeyDown, ...rest }: FullBleedDialogProps): react.ReactPortal | null;
+declare function FullBleedDialog({ open, onClose, title, headingAs: Heading, header, closeLabel, children, backCloses, className, footer, onMouseDown, onMouseUp, onKeyDown, ...rest }: FullBleedDialogProps): react.ReactPortal | null;
 
 export { FullBleedDialog, type FullBleedDialogProps };

package/dist/components/full-bleed-dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useId, useRef } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
@@ -12,6 +12,8 @@ import { useFocusTrap } from "../hooks/use-focus-trap.js";
 function FullBleedDialog({
   open,
   onClose,
+  title,
+  headingAs: Heading = "h2",
   header,
   closeLabel,
   children,
@@ -28,6 +30,9 @@ function FullBleedDialog({
   useBodyScrollLock(open);
   useOverlayHistory(open && backCloses, requestClose);
   const dialogRef = useRef(null);
+  const titleId = useId();
+  const hasTitle = title !== void 0 && title !== null && title !== false;
+  const hasHeader = header !== void 0 && header !== null && header !== false;
   useFocusTrap(dialogRef, { active: open });
   const handleKeyDown = (e) => {
     const preventedBefore = e.defaultPrevented;
@@ -49,6 +54,7 @@ function FullBleedDialog({
         ),
         role: "dialog",
         "aria-modal": "true",
+        "aria-labelledby": rest["aria-labelledby"] ?? (hasTitle && !rest["aria-label"] ? titleId : void 0),
         tabIndex: -1,
         ref: dialogRef,
         onKeyDown: handleKeyDown,
@@ -70,7 +76,10 @@ function FullBleedDialog({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 font-medium", children: header }),
+                hasTitle ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Heading, { id: titleId, className: "min-w-0 break-words text-base font-semibold leading-snug text-[var(--text-primary)]", children: title }),
+                  hasHeader && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 font-medium", children: header })
+                ] }) : /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 font-medium", children: header }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {

package/dist/components/full-bleed-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /** What the header strip shows beside the close button. */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n  /**\n   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`\n   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of\n   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,\n   * and a button at the end of the body scrolls away with the calendar.\n   *\n   * Outside the scroller, so it stays put without `position: sticky` (which would\n   * need the body to be the scroll container of its own child and paint over the\n   * last field); padded for the home indicator, since it is the panel's bottom edge.\n   */\n  footer?: ReactNode;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  footer,\n  onMouseDown,\n  onMouseUp,\n  onKeyDown,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  useFocusTrap(dialogRef, { active: open });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler first (keksdose's transaction-search keeps its list keys on\n    // the dialog); a `preventDefault()` IN THAT HANDLER claims the key, Escape included.\n    // Only there: a descendant's preventDefault does not count. A SearchField in the\n    // header prevents Escape to stop Chromium clearing a type=search input, and in\n    // 0.8.0 that silently stopped Escape from closing the dialog (keksdose).\n    const preventedBefore = e.defaultPrevented;\n    onKeyDown?.(e);\n    const claimedByCaller = !preventedBefore && e.defaultPrevented;\n    if (claimedByCaller || e.key !== \"Escape\") return;\n    // On the panel, the way `Modal` does it, and NOT through `useEscapeKey`: this\n    // dialog is the thing a `PickerSheet` opens on top of, and a document-level\n    // listener cannot tell which of the two the user meant. One press would dismiss\n    // the sheet AND throw away the edit behind it — Keksdose live #309 (*\"Mouse Back\n    // does not only close the select but also the whole edit or create dialog\"*) on a\n    // different key. The sheet's own handler stops the event here, so the innermost\n    // overlay is the one that closes, which is only true because focus is now in it.\n    e.stopPropagation();\n    requestClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={dialogRef}\n      onKeyDown={handleKeyDown}\n      // COMPOSED with the backdrop's, not overridden by them. These two used to ride\n      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —\n      // and the one caller about to pass one is keksdose's RangeSheet, whose\n      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a\n      // portalled sheet must not reach a document-level \"outside click\" listener,\n      // which would unmount the day cell before its `click`. The caller's runs first;\n      // the backdrop's still runs after it, since it is the same element.\n      onMouseDown={(e) => {\n        onMouseDown?.(e);\n        backdropClose.onMouseDown(e);\n      }}\n      onMouseUp={(e) => {\n        onMouseUp?.(e);\n        backdropClose.onMouseUp(e);\n      }}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-[var(--bg-surface)] shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3\">\n          <div className=\"min-w-0 flex-1 font-medium\">{header}</div>\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-me-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* px-3, not px-4: every pixel of chrome here is width the form fields lose\n            on a phone (feedback #32). The body is the only thing that scrolls, so the\n            header stays put and the page underneath cannot move at all. */}\n        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that\n            is pushed off the bottom edge. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3\">{children}</div>\n        {footer !== undefined && footer !== null && footer !== false && (\n          <div\n            data-full-bleed-footer=\"\"\n            className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-[var(--border)] px-3 pt-3\"\n            style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AAoMQ,SACE,KADF;AApMR,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AA4EtB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AAIvB,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,OAAO;AAC5D,QAAM,gBAAgB,iBAAiB,YAAY;AAEnD,oBAAkB,IAAI;AACtB,oBAAkB,QAAQ,YAAY,YAAY;AAElD,QAAM,YAAY,OAAuB,IAAI;AAY7C,eAAa,WAAW,EAAE,QAAQ,KAAK,CAAC;AAExC,QAAM,gBAAgB,CAAC,MAAqC;AAM1D,UAAM,kBAAkB,EAAE;AAC1B,gBAAY,CAAC;AACb,UAAM,kBAAkB,CAAC,mBAAmB,EAAE;AAC9C,QAAI,mBAAmB,EAAE,QAAQ,SAAU;AAQ3C,MAAE,gBAAgB;AAClB,iBAAa;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AAErD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAcE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,UAAU,wBAAwB;AAAA,QACpC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAGX,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,QAQX,aAAa,CAAC,MAAM;AAClB,wBAAc,CAAC;AACf,wBAAc,YAAY,CAAC;AAAA,QAC7B;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,sBAAY,CAAC;AACb,wBAAc,UAAU,CAAC;AAAA,QAC3B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,sBAAsB;AAAA,cAChC;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,SAAI,WAAU,qFACb;AAAA,oCAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,gBACpD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,iBACF;AAAA,cAMA,oBAAC,SAAI,WAAU,+DAA+D,UAAS;AAAA,cACtF,WAAW,UAAa,WAAW,QAAQ,WAAW,SACrD;AAAA,gBAAC;AAAA;AAAA,kBACC,0BAAuB;AAAA,kBACvB,WAAU;AAAA,kBACV,OAAO,EAAE,eAAe,4CAA4C;AAAA,kBAEnE;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /**\n   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start\n   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is\n   * announced by name rather than as just \"dialog\".\n   *\n   * Before this the strip was a styled `div`, and a caller that wanted its full-screen\n   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —\n   * keksdose's budget-table phone editor says so in a comment at the call site. A\n   * caller's own `aria-label` / `aria-labelledby` still wins.\n   */\n  title?: ReactNode;\n  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * Free content for the header strip, beside the close button — after the\n   * {@link title} when there is one, or on its own (the row editor shows the row's\n   * own first cell here). It does not name the dialog; `title` does.\n   */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n  /**\n   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`\n   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of\n   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,\n   * and a button at the end of the body scrolls away with the calendar.\n   *\n   * Outside the scroller, so it stays put without `position: sticky` (which would\n   * need the body to be the scroll container of its own child and paint over the\n   * last field); padded for the home indicator, since it is the panel's bottom edge.\n   */\n  footer?: ReactNode;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. A plain\n * title belongs in `title`, which is a real heading and the dialog's name; `header`\n * stays the free slot beside it. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  title,\n  headingAs: Heading = \"h2\",\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  footer,\n  onMouseDown,\n  onMouseUp,\n  onKeyDown,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const hasTitle = title !== undefined && title !== null && title !== false;\n  const hasHeader = header !== undefined && header !== null && header !== false;\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  useFocusTrap(dialogRef, { active: open });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler first (keksdose's transaction-search keeps its list keys on\n    // the dialog); a `preventDefault()` IN THAT HANDLER claims the key, Escape included.\n    // Only there: a descendant's preventDefault does not count. A SearchField in the\n    // header prevents Escape to stop Chromium clearing a type=search input, and in\n    // 0.8.0 that silently stopped Escape from closing the dialog (keksdose).\n    const preventedBefore = e.defaultPrevented;\n    onKeyDown?.(e);\n    const claimedByCaller = !preventedBefore && e.defaultPrevented;\n    if (claimedByCaller || e.key !== \"Escape\") return;\n    // On the panel, the way `Modal` does it, and NOT through `useEscapeKey`: this\n    // dialog is the thing a `PickerSheet` opens on top of, and a document-level\n    // listener cannot tell which of the two the user meant. One press would dismiss\n    // the sheet AND throw away the edit behind it — Keksdose live #309 (*\"Mouse Back\n    // does not only close the select but also the whole edit or create dialog\"*) on a\n    // different key. The sheet's own handler stops the event here, so the innermost\n    // overlay is the one that closes, which is only true because focus is now in it.\n    e.stopPropagation();\n    requestClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // The heading names the dialog unless the caller named it some other way — an\n      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would\n      // silently outrank).\n      aria-labelledby={rest[\"aria-labelledby\"] ?? (hasTitle && !rest[\"aria-label\"] ? titleId : undefined)}\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={dialogRef}\n      onKeyDown={handleKeyDown}\n      // COMPOSED with the backdrop's, not overridden by them. These two used to ride\n      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —\n      // and the one caller about to pass one is keksdose's RangeSheet, whose\n      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a\n      // portalled sheet must not reach a document-level \"outside click\" listener,\n      // which would unmount the day cell before its `click`. The caller's runs first;\n      // the backdrop's still runs after it, since it is the same element.\n      onMouseDown={(e) => {\n        onMouseDown?.(e);\n        backdropClose.onMouseDown(e);\n      }}\n      onMouseUp={(e) => {\n        onMouseUp?.(e);\n        backdropClose.onMouseUp(e);\n      }}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-[var(--bg-surface)] shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3\">\n          {hasTitle ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Heading id={titleId} className=\"min-w-0 break-words text-base font-semibold leading-snug text-[var(--text-primary)]\">\n                {title}\n              </Heading>\n              {hasHeader && <div className=\"min-w-0 flex-1 font-medium\">{header}</div>}\n            </div>\n          ) : (\n            <div className=\"min-w-0 flex-1 font-medium\">{header}</div>\n          )}\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-me-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* px-3, not px-4: every pixel of chrome here is width the form fields lose\n            on a phone (feedback #32). The body is the only thing that scrolls, so the\n            header stays put and the page underneath cannot move at all. */}\n        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that\n            is pushed off the bottom edge. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3\">{children}</div>\n        {footer !== undefined && footer !== null && footer !== false && (\n          <div\n            data-full-bleed-footer=\"\"\n            className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-[var(--border)] px-3 pt-3\"\n            style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AAkOY,SACE,KADF;AAlOZ,SAAS,OAAO,cAAc;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AA+FtB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AAIvB,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,OAAO;AAC5D,QAAM,gBAAgB,iBAAiB,YAAY;AAEnD,oBAAkB,IAAI;AACtB,oBAAkB,QAAQ,YAAY,YAAY;AAElD,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU;AACpE,QAAM,YAAY,WAAW,UAAa,WAAW,QAAQ,WAAW;AAYxE,eAAa,WAAW,EAAE,QAAQ,KAAK,CAAC;AAExC,QAAM,gBAAgB,CAAC,MAAqC;AAM1D,UAAM,kBAAkB,EAAE;AAC1B,gBAAY,CAAC;AACb,UAAM,kBAAkB,CAAC,mBAAmB,EAAE;AAC9C,QAAI,mBAAmB,EAAE,QAAQ,SAAU;AAQ3C,MAAE,gBAAgB;AAClB,iBAAa;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AAErD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAcE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,UAAU,wBAAwB;AAAA,QACpC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAIX,mBAAiB,KAAK,iBAAiB,MAAM,YAAY,CAAC,KAAK,YAAY,IAAI,UAAU;AAAA,QAGzF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,QAQX,aAAa,CAAC,MAAM;AAClB,wBAAc,CAAC;AACf,wBAAc,YAAY,CAAC;AAAA,QAC7B;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,sBAAY,CAAC;AACb,wBAAc,UAAU,CAAC;AAAA,QAC3B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,sBAAsB;AAAA,cAChC;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,SAAI,WAAU,qFACZ;AAAA,2BACC,qBAAC,SAAI,WAAU,0CACb;AAAA,sCAAC,WAAQ,IAAI,SAAS,WAAU,uFAC7B,iBACH;AAAA,kBACC,aAAa,oBAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,mBACpE,IAEA,oBAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,gBAEtD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,iBACF;AAAA,cAMA,oBAAC,SAAI,WAAU,+DAA+D,UAAS;AAAA,cACtF,WAAW,UAAa,WAAW,QAAQ,WAAW,SACrD;AAAA,gBAAC;AAAA;AAAA,kBACC,0BAAuB;AAAA,kBACvB,WAAU;AAAA,kBACV,OAAO,EAAE,eAAe,4CAA4C;AAAA,kBAEnE;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/components/list.d.ts

@@ -0,0 +1,174 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, MouseEvent, Ref, ReactElement } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface ListLabels {
+    /** Read after an unread row's title — the dot alone says nothing to a screen reader. */
+    unread: string;
+    /** Read after an external row's title: the row leaves the app in a new tab. */
+    opensInNewTab: string;
+}
+declare const DEFAULT_LIST_LABELS: ListLabels;
+/**
+ * `compact` 36px-ish rows for a dense panel (an inbox in a menu), `default` the ~44px
+ * row every site draws with `py-2.5`, `comfortable` for a list that is the page.
+ */
+type ListDensity = "compact" | "default" | "comfortable";
+/** `divider`: a rule between rows (kastlan's `divide-y` lists); `gap`: a small space
+ *  between rows (lenkbank's `space-y-2`, kastlan's `space-y-1`); `none`: flush. */
+type ListSeparator = "divider" | "gap" | "none";
+interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role"> {
+    /** `ol` when the order means something (a ranked list, numbered segments). */
+    as?: "ul" | "ol";
+    /** Every row's density, unless a row says otherwise. Default `default`. */
+    density?: ListDensity;
+    /** Default `gap`. */
+    separator?: ListSeparator;
+}
+/**
+ * The list of {@link ListItem}s.
+ *
+ * A `<ul>` with an explicit `role="list"`: Safari drops a list's semantics once its
+ * bullets are styled away, and "list, 7 items" is exactly what a screen-reader user
+ * wants to hear before the first row.
+ */
+declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLUListElement>>;
+/** What {@link ListItemProps.renderLink} is handed. Spread it onto your router's link,
+ *  mapping `href` to what it calls it — `({ href, ...p }) => <Link to={href} {...p} />`. */
+interface ListItemLinkProps {
+    href: string;
+    /** The row's target look — keep it, or the row's padding and focus ring go. */
+    className: string;
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    "aria-current"?: "true";
+    "aria-busy"?: true;
+    id?: string;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+interface ListItemBaseProps {
+    /** The row's name: one line, truncated. */
+    title: ReactNode;
+    /** The line under it: one line, truncated — or two, with `subtitleLines={2}`. */
+    subtitle?: ReactNode;
+    /** `2` for a line that is a body rather than a label (keksdose's notification text). */
+    subtitleLines?: 1 | 2;
+    /** A third line in the caption type: a timestamp, "Updated …" (lenkbank's projects). */
+    meta?: ReactNode;
+    /** A Lucide icon before the text, muted, at 16px. */
+    icon?: LucideIcon;
+    /** Anything else before the text — an avatar, a file-type badge, a drag handle. */
+    leading?: ReactNode;
+    /**
+     * Inside the main target, at its end: a status chip, a file size, a count. It is part
+     * of what the row's click does and part of its accessible name — so never a control.
+     * Controls go in {@link actions}.
+     */
+    trailing?: ReactNode;
+    /**
+     * Controls BESIDE the main target, never inside it: copy, delete, "Open".
+     *
+     * A button inside a button (or a link) is invalid HTML, and a screen reader folds the
+     * inner one into the outer one's name where it cannot be reached. lenkbank found this
+     * three times (profile-bar.tsx:110, projects-page.tsx:61, segment-list.tsx:165) and
+     * solved it the same way each time: the row's target and its actions are siblings in
+     * one bordered box. That is this slot — and being siblings is also what stops a click
+     * on "Copy" from selecting the row.
+     */
+    actions?: ReactNode;
+    /**
+     * The unread mark: a brand dot at the row's end, the title in semibold, and "Unread"
+     * read after the title (keksdose notification-inbox.tsx:215). For another status,
+     * pass your own mark in {@link status}.
+     */
+    unread?: boolean;
+    /** A mark in the unread dot's place — a `StatusDot` of another tone, a count. */
+    status?: ReactNode;
+    /**
+     * The row is the chosen one — a brand border on the raised surface (lenkbank's
+     * profile bar and segment list). `aria-current="true"` on the target: the row is the
+     * current one of a set, which is what those lists mean, not a pressed toggle.
+     */
+    selected?: boolean;
+    disabled?: boolean;
+    /**
+     * Work under way on the row — keksdose's attachment download (support-attachments
+     * .tsx:91). A spinner takes the trailing edge, the target is `aria-busy`, and a
+     * second click is ignored. The row keeps focus: `aria-disabled`, not `disabled`, so
+     * a keyboard user is not dropped back to the top of the page mid-download.
+     */
+    loading?: boolean;
+    /** Overrides the {@link List}'s density for this row. */
+    density?: ListDensity;
+    /** `start` for rows whose text runs to two or three lines, so the icon sits by the
+     *  title rather than the middle of the paragraph. Default `center`. */
+    align?: "center" | "start";
+    /** Classes on the visible row (the bordered box). */
+    className?: string;
+    /** Classes on the main target (the button, link or static block). */
+    targetClassName?: string;
+    /** `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. */
+    id?: string;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+/**
+ * The row is ONE thing to activate, so the types allow one: a button, an in-app link,
+ * an external link, or nothing (a static row, like kastlan's passkey and user lists).
+ */
+type ListItemProps = ListItemBaseProps & ({
+    /** Makes the row a button — select, open, mark read. */
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    href?: never;
+    renderLink?: never;
+    external?: never;
+    onAuxClick?: never;
+} | {
+    /**
+     * Makes the row a link. A real `<a href>`, so a middle click opens it in a
+     * background tab (keksdose feedback #451) — which a button calling `navigate`
+     * cannot do.
+     */
+    href: string;
+    /** Your router's link for an in-app `href`. Default `<a>`. The API `Chip`,
+     *  `StatTile` and `MenuItem` share. Ignored for an `external` row. */
+    renderLink?: (props: ListItemLinkProps) => ReactElement;
+    /**
+     * The link leaves the app: a plain `<a target="_blank" rel="noopener
+     * noreferrer">` with an external-link mark, and "opens in a new tab" read
+     * after the title. keksdose's inbox rows whose URL is absolute.
+     */
+    external?: boolean;
+    /** Runs on a click, before the navigation (mark the row read). */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Runs on a middle click, which fires no `click` — keksdose marks a
+     *  notification read here too, so a row opened into a background tab does not
+     *  stay unread. */
+    onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+} | {
+    onClick?: never;
+    href?: never;
+    renderLink?: never;
+    external?: never;
+    onAuxClick?: never;
+});
+/**
+ * One row of a {@link List}: leading icon or avatar, title and subtitle (both
+ * truncating), a trailing slot, and — beside the row, not inside it — its actions.
+ *
+ * All three apps draw this row by hand, a dozen times: kastlan's units
+ * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity
+ * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)
+ * and passkeys (passkeys-card.tsx:75); keksdose's notification inbox and attachment
+ * downloads; lenkbank's profiles, projects and segments. The copies differ in the
+ * details that are easy to get wrong — which of them truncate, whether the actions
+ * are nested in the button, whether a link row is a link at all.
+ */
+declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLElement>>;
+
+export { DEFAULT_LIST_LABELS, List, type ListDensity, ListItem, type ListItemLinkProps, type ListItemProps, type ListLabels, type ListProps, type ListSeparator };