@eifi1/ui-kit 0.9.0 → 0.10.0

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 };

package/dist/components/list.js

@@ -0,0 +1,215 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Spinner } from "./ui.js";
+import { StatusDot } from "./status-dot.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_LIST_LABELS = {
+  unread: "Unread",
+  opensInNewTab: "opens in a new tab"
+};
+const ListContext = createContext({
+  density: "default",
+  separator: "gap"
+});
+const List = forwardRef(function List2({ as = "ul", density = "default", separator = "gap", className, children, ...rest }, ref) {
+  const Tag = as;
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { density, separator }, children: /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      ref,
+      role: "list",
+      className: cn(
+        "m-0 flex list-none flex-col p-0",
+        separator === "gap" && (density === "compact" ? "gap-0.5" : "gap-1"),
+        className
+      ),
+      children
+    }
+  ) });
+});
+const PAD = {
+  compact: { target: "gap-2 px-2 py-1.5", actions: "pe-1.5", gap: "gap-0.5" },
+  default: { target: "gap-3 px-3 py-2.5", actions: "pe-2", gap: "gap-1" },
+  comfortable: { target: "gap-3 px-4 py-3", actions: "pe-3", gap: "gap-1" }
+};
+const TARGET_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
+const ListItem = forwardRef(function ListItem2({
+  title,
+  subtitle,
+  subtitleLines = 1,
+  meta,
+  icon: Icon,
+  leading,
+  trailing,
+  actions,
+  unread = false,
+  status,
+  selected = false,
+  disabled = false,
+  loading = false,
+  density: densityProp,
+  align = "center",
+  className,
+  targetClassName,
+  as = "li",
+  href,
+  renderLink,
+  external = false,
+  onClick,
+  onAuxClick,
+  ...rest
+}, ref) {
+  const list = useContext(ListContext);
+  const labels = useKitLabels("list", DEFAULT_LIST_LABELS);
+  const density = densityProp ?? list.density;
+  const pad = PAD[density];
+  const isLink = href !== void 0 && !disabled;
+  const isButton = !isLink && onClick !== void 0 && href === void 0;
+  const interactive = isLink || isButton;
+  const inert = disabled || loading;
+  const mark = status ?? (unread ? /* @__PURE__ */ jsx(StatusDot, { tone: "brand", size: "sm", className: align === "start" ? "mt-1.5" : void 0 }) : null);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: cn("size-4 shrink-0 text-[var(--text-muted)]", align === "start" && "mt-0.5"),
+        "aria-hidden": true
+      }
+    ),
+    leading,
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "block truncate text-sm text-[var(--text-primary)]",
+            unread ? "font-semibold" : "font-medium"
+          ),
+          children: [
+            title,
+            unread && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              " (",
+              labels.unread,
+              ")"
+            ] }),
+            external && href !== void 0 && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              " (",
+              labels.opensInNewTab,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      subtitle != null && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "block text-xs text-[var(--text-muted)]",
+            subtitleLines === 2 ? "line-clamp-2" : "truncate"
+          ),
+          children: subtitle
+        }
+      ),
+      meta != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-[11px] leading-snug text-[var(--text-muted)]", children: meta })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-2 text-xs text-[var(--text-muted)]", children: trailing }),
+    loading ? /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-3.5 shrink-0" }) : external && href !== void 0 && /* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100", "aria-hidden": true }),
+    mark
+  ] });
+  const target = cn(
+    "flex min-w-0 flex-1 text-start",
+    align === "start" ? "items-start" : "items-center",
+    pad.target,
+    "rounded-[inherit]",
+    interactive && TARGET_RING,
+    interactive && !inert && "cursor-pointer",
+    loading && "cursor-progress",
+    targetClassName
+  );
+  let main;
+  if (isLink) {
+    const linkProps = {
+      ...rest,
+      ref,
+      href,
+      className: target,
+      "aria-current": selected ? "true" : void 0,
+      "aria-busy": loading || void 0,
+      onClick: loading ? (e) => e.preventDefault() : onClick,
+      onAuxClick,
+      children: body
+    };
+    const { children: linkBody, ...anchorProps } = linkProps;
+    main = renderLink && !external ? /* @__PURE__ */ jsx(RenderedLink, { render: renderLink, ...linkProps }) : /* @__PURE__ */ jsx("a", { ...anchorProps, ...external ? { target: "_blank", rel: "noopener noreferrer" } : null, children: linkBody });
+  } else if (isButton) {
+    main = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        disabled,
+        "aria-disabled": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-current": selected ? "true" : void 0,
+        onClick: loading ? void 0 : onClick,
+        className: target,
+        children: body
+      }
+    );
+  } else {
+    main = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        "aria-disabled": disabled || void 0,
+        "aria-busy": loading || void 0,
+        className: target,
+        children: body
+      }
+    );
+  }
+  const Tag = as;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(
+        list.separator === "divider" && "border-b border-[var(--border)] last:border-b-0",
+        list.separator === "divider" && as === "li" && "py-0.5"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 items-center rounded-md border transition-colors",
+            selected ? "border-[var(--brand)] bg-[var(--bg-surface-2)]" : "border-transparent",
+            interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
+            disabled && "opacity-50",
+            className
+          ),
+          children: [
+            main,
+            actions != null && /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center", pad.gap, pad.actions), children: actions })
+          ]
+        }
+      )
+    }
+  );
+});
+function RenderedLink({
+  render,
+  ...props
+}) {
+  return render(props);
+}
+export {
+  DEFAULT_LIST_LABELS,
+  List,
+  ListItem
+};
+//# sourceMappingURL=list.js.map

package/dist/components/list.js.map

@@ -0,0 +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"]}

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

@@ -0,0 +1,99 @@
+import * as react from 'react';
+import { ReactNode, MouseEvent, Ref, ReactElement } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+type MenuItemTone = "default" | "danger";
+/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,
+ *  mapping `href` to what the link calls it —
+ *  `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+interface MenuItemLinkProps {
+    href: string;
+    className: string;
+    children: ReactNode;
+    role: "menuitem";
+    ref?: Ref<HTMLAnchorElement>;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    "aria-current"?: "page";
+    id?: string;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+interface MenuItemBaseProps {
+    /** The row's text. */
+    children: ReactNode;
+    /** An icon before the label, drawn at the menu's 16px. */
+    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. */
+    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. */
+    tone?: MenuItemTone;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+/**
+ * A menu row is a button OR a link, and only the button can be CHECKED: a checked link
+ * is a link to where you already are, which is `current`, not a selection.
+ */
+type MenuItemProps = MenuItemBaseProps & ({
+    href?: never;
+    renderLink?: never;
+    current?: never;
+    /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to
+     *  the render prop that draws the rows. */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a
+     * plain command; `false` is a choice that is not chosen, which is different.
+     * A check mark is drawn at the end when it is on.
+     */
+    checked?: boolean;
+    /**
+     * What kind of choice, when `checked` is given:
+     *
+     * - `radio` (default): one of a set — keksdose's budget switcher
+     *   (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.
+     * - `checkbox`: an independent on/off — "Show archived". `menuitemcheckbox`.
+     *
+     * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a
+     * `role="menu"` a screen reader expects the menu roles and reads "checked"
+     * only from them. A button with `aria-pressed` in a menu is announced as a
+     * button in a menu, which is two widgets in one.
+     */
+    checkable?: "radio" | "checkbox";
+} | {
+    /** Makes the row a link — keksdose's "Manage budgets" and account-menu rows. */
+    href: string;
+    /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads
+     *  a single-page app. Default `<a>`. The same API as `Chip` and `StatTile`. */
+    renderLink?: (props: MenuItemLinkProps) => ReactElement;
+    /** Runs on the way (close the menu). */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** The link to the page already open: `aria-current="page"` and a check mark. */
+    current?: boolean;
+    checked?: never;
+    checkable?: never;
+});
+/**
+ * One row of a `HoverMenu` / `TopBarActionMenu` panel.
+ *
+ * keksdose's account menu and budget switcher each rebuild this row by hand — the
+ * shell's class, an icon, a label, a badge, a check mark on the active budget — and the
+ * check mark was the only thing saying which budget was active, so a screen reader
+ * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).
+ *
+ * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less
+ * buttons and links to `menuitem`: a checked row must be `menuitemradio` or
+ * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that
+ * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up
+ * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`
+ * turns the list markup into `role="none"`.
+ */
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLElement>>;
+
+export { MenuItem, type MenuItemLinkProps, type MenuItemProps, type MenuItemTone };