@eifi1/ui-kit 0.48.2 → 0.50.0

package/dist/components/picker-sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { Button } from \"./button\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  /** The search box's accessible name. Default: `searchPlaceholder` — a placeholder is\n   *  gone the moment a character is typed, and is no name to many readers at all. */\n  searchLabel?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * The list's keyboard, on the search box — where focus is while the sheet is up:\n   * Up/Down/Home/End/Enter (round 0.34 Wave 2, BUG-5). `ComboboxPanel` passes its own;\n   * without it arrows and Enter in the sheet did nothing at all.\n   */\n  onSearchKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n  /** The `role=\"listbox\"` the search box filters, for its `aria-controls`. */\n  listboxId?: string;\n  /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */\n  activeId?: string;\n  children: ReactNode;\n  /**\n   * A row pinned under the scrolling list — {@link FullBleedDialog}'s `footer`, on the\n   * picker's sheet (kk run 79 gap 2). Outside the scroller, so it stays put however long\n   * the list; padded for the home indicator, since it is the sheet's bottom edge.\n   */\n  footer?: ReactNode;\n  /**\n   * The kit's one sticky \"Done\" at the foot of the sheet (Marcel, keksdose #412): the\n   * button a multi-select sheet is left by once its rows are ticked. Ticks apply as\n   * they are made, so it closes (`onClose`) rather than saves. After any `footer`.\n   * {@link ComboboxPanel} turns it on for every `multi` list — `MultiSelect` and\n   * `MultiEntityCombobox` — and a single-select sheet, which closes on the tap that\n   * picks, has no use for it. Label: `pickerSheet.done`, else \"Done\" (`doneLabel`).\n   */\n  done?: boolean;\n  /** Default: `pickerSheet.done` from the {@link UiKitProvider}, else \"Done\". */\n  doneLabel?: string;\n  /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with the sheet's own ref, which its focus trap holds. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  searchLabel,\n  inputRef,\n  closeLabel,\n  onSearchKeyDown,\n  listboxId,\n  activeId,\n  children,\n  footer,\n  done,\n  doneLabel,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ref,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });\n  const hasFooter = (footer !== undefined && footer !== null && footer !== false) || Boolean(done);\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const setSheet = useMemo(() => mergeRefs(sheetRef, ref), [ref]);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this\n   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back\n   * to that field on close re-opens the sheet the user has just dismissed — a row tap\n   * would select a value and immediately put the list back over it. The field that\n   * opened it is the only thing that knows whether re-focusing it means \"open\"; a sheet\n   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a\n   * dismissal, which on the phone this shape is for costs nothing, and on a pointer\n   * device is what happened before this change too.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n  // `Modal` or a `FullBleedDialog`. It is a layer on the Escape stack (Wave 2, DUP-1),\n  // above the dialog, and takes the key on its own element: one press dismissing this\n  // list and the dialog underneath with it was Keksdose live #309 (*\"Mouse Back does\n  // not only close the select but also the whole edit or create dialog which is\n  // cumbersome\"*), which the Back gesture already learned, on the key a desktop user\n  // reaches for instead.\n  useDismissLayer(open, onClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    takeEscape(e);\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={setSheet}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-surface outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-subtle px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-primary\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-muted hover:bg-hover\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n        aria-label={searchLabel ?? searchPlaceholder}\n        // Focus is in this box while the sheet is up, so this is where the list's keys\n        // land and what has to name the list and the row the arrows are on (BUG-5).\n        onKeyDown={onSearchKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —\n          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the\n          browser rather than joining the option's name (keksdose E8). */}\n      <div {...{ [CLIPS_ATTRIBUTE]: \"\" }} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n        {children}\n      </div>\n      {hasFooter && (\n        <div\n          data-picker-sheet-footer=\"\"\n          className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle bg-surface px-3 pt-3\"\n          style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n        >\n          {footer}\n          {done && (\n            // Full width: the one thing left to do on the sheet, under the thumb.\n            <Button type=\"button\" className=\"flex-1\" onClick={onClose}>\n              {labels.done}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base\",\n  \"text-primary hover:bg-hover\",\n);\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { Button } from \"./button\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  /** The search box's accessible name. Default: `searchPlaceholder` — a placeholder is\n   *  gone the moment a character is typed, and is no name to many readers at all. */\n  searchLabel?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * The list's keyboard, on the search box — where focus is while the sheet is up:\n   * Up/Down/Home/End/Enter (round 0.34 Wave 2, BUG-5). `ComboboxPanel` passes its own;\n   * without it arrows and Enter in the sheet did nothing at all.\n   */\n  onSearchKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n  /** The `role=\"listbox\"` the search box filters, for its `aria-controls`. */\n  listboxId?: string;\n  /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */\n  activeId?: string;\n  children: ReactNode;\n  /**\n   * A row pinned under the scrolling list — {@link FullBleedDialog}'s `footer`, on the\n   * picker's sheet (kk run 79 gap 2). Outside the scroller, so it stays put however long\n   * the list; padded for the home indicator, since it is the sheet's bottom edge.\n   */\n  footer?: ReactNode;\n  /**\n   * The kit's one sticky \"Done\" at the foot of the sheet (Marcel, keksdose #412): the\n   * button a multi-select sheet is left by once its rows are ticked. Ticks apply as\n   * they are made, so it closes (`onClose`) rather than saves. After any `footer`.\n   * {@link ComboboxPanel} turns it on for every `multi` list — `MultiSelect` and\n   * `MultiEntityCombobox` — and a single-select sheet, which closes on the tap that\n   * picks, has no use for it. Label: `pickerSheet.done`, else \"Done\" (`doneLabel`).\n   */\n  done?: boolean;\n  /** Default: `pickerSheet.done` from the {@link UiKitProvider}, else \"Done\". */\n  doneLabel?: string;\n  /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with the sheet's own ref, which its focus trap holds. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  searchLabel,\n  inputRef,\n  closeLabel,\n  onSearchKeyDown,\n  listboxId,\n  activeId,\n  children,\n  footer,\n  done,\n  doneLabel,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ref,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });\n  const hasFooter = (footer !== undefined && footer !== null && footer !== false) || Boolean(done);\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const setSheet = useMemo(() => mergeRefs(sheetRef, ref), [ref]);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this\n   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back\n   * to that field on close re-opens the sheet the user has just dismissed — a row tap\n   * would select a value and immediately put the list back over it. The field that\n   * opened it is the only thing that knows whether re-focusing it means \"open\"; a sheet\n   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a\n   * dismissal, which on the phone this shape is for costs nothing, and on a pointer\n   * device is what happened before this change too.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n  // `Modal` or a `FullBleedDialog`. It is a layer on the Escape stack (Wave 2, DUP-1),\n  // above the dialog, and takes the key on its own element: one press dismissing this\n  // list and the dialog underneath with it was Keksdose live #309 (*\"Mouse Back does\n  // not only close the select but also the whole edit or create dialog which is\n  // cumbersome\"*), which the Back gesture already learned, on the key a desktop user\n  // reaches for instead.\n  useDismissLayer(open, onClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    takeEscape(e);\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={setSheet}\n      // A kit layer and a bottom layer a docked tour card stays clear of (0.50,\n      // docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      data-tour-obstruction=\"\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-surface outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-subtle px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-primary\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-muted hover:bg-hover\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n        aria-label={searchLabel ?? searchPlaceholder}\n        // Focus is in this box while the sheet is up, so this is where the list's keys\n        // land and what has to name the list and the row the arrows are on (BUG-5).\n        onKeyDown={onSearchKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —\n          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the\n          browser rather than joining the option's name (keksdose E8). */}\n      <div {...{ [CLIPS_ATTRIBUTE]: \"\" }} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n        {children}\n      </div>\n      {hasFooter && (\n        <div\n          data-picker-sheet-footer=\"\"\n          className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle bg-surface px-3 pt-3\"\n          style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n        >\n          {footer}\n          {done && (\n            // Full width: the one thing left to do on the sheet, under the thumb.\n            <Button type=\"button\" className=\"flex-1\" onClick={onClose}>\n              {labels.done}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base\",\n  \"text-primary hover:bg-hover\",\n);\n"],"mappings":"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","names":[]}

package/dist/components/pie-chart.js

@@ -11,6 +11,7 @@ import { DEFAULT_PIE_CHART_LABELS } from "./pie-chart-labels.js";
 import { StaticLegend, ToggleLegend, toggleHidden } from "./toggle-legend.js";
 import { useTextSize } from "../theme/text-size.js";
 import { chartHeightProps } from "./chart-height.js";
+import { formatWithMinus } from "../lib/minus.js";
 const PIE_CONFIG = {};
 const RADIAN = Math.PI / 180;
 function RedactedTooltipContent(props) {
@@ -51,7 +52,7 @@ function PieChart({
     [locale]
   );
   const formatValue = useCallback(
-    (v) => formatValueProp ? formatValueProp(v) : numberFormat.format(v),
+    (v) => formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v),
     [formatValueProp, numberFormat]
   );
   const formatShare = useCallback(

package/dist/components/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["// A part-to-whole chart: a donut (or a full pie), one slice per category, its ANGLE\n// the category's share of what is drawn. Lifted out of kastlan, where the dashboard's\n// occupancy card and the reports' maintenance card each drew a recharts `<Pie>` by\n// hand inside the kit's `ChartContainer` — with a legend that could not switch\n// anything, slices a keyboard could not reach, and colours from a local hex list.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and\n// ramp (`paletteFor`), so it re-skins with the palette like every other chart, and the\n// kit's own legends (`ToggleLegend`, `StaticLegend`).\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentProps, ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Pie, PieChart as RechartsPieChart, Sector } from \"recharts\";\nimport type { PieLabelRenderProps, PieSectorShapeProps } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from \"./pie-chart-labels\";\nimport { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from \"./toggle-legend\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { chartHeightProps, type ChartHeight } from \"./chart-height\";\n\n/** One slice. */\nexport interface PieChartSlice {\n  /** Stable key, handed back by {@link PieChartProps.onSliceClick} and used by the\n   *  legend's hidden set. Labels can collide; keys must not. */\n  key: string;\n  /** What the slice is called — in the legend, the tooltip and its accessible name. */\n  label: string;\n  /**\n   * The slice's size. A value that is not a positive finite number — `null` for a\n   * figure that is missing, a zero, a negative — is NOT drawn and not in the legend:\n   * an angle cannot be negative, and a zero-degree slice is one a pointer and a\n   * keyboard would both stop on to find nothing.\n   */\n  value: number | null | undefined;\n  /** Overrides the by-index palette colour (`paletteFor(i)`, `i` the slice's index in\n   *  `data` AS GIVEN) — a status that has a colour of its own. Any CSS colour. */\n  color?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root, so a test id or a `data-tour`\n * anchor can find it. `children` is the chart's own.\n */\nexport interface PieChartProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  data: readonly PieChartSlice[];\n  /** `\"donut\"` (default) leaves a hole with the total in it; `\"pie\"` is the full disc. */\n  variant?: \"donut\" | \"pie\";\n  /**\n   * Height of the plot (the legend is under it): a CSS length (`\"20rem\"`,\n   * `\"min(20rem, 50dvh)\"`), a Tailwind class, or px. Default `\"18.75rem\"` — 300 px at\n   * Normal, growing with the text size so the slice labels keep their room (0.32,\n   * docs/text-size-harmonization.md §10.10). A number does not follow the text size.\n   */\n  height?: ChartHeight;\n  /** How a value is written in the tooltip, the slice's name, a `\"value\"` slice label\n   *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */\n  formatValue?: (value: number) => string;\n  /**\n   * What is written beside each slice: its share (`\"percent\"`, the default), its\n   * value, or nothing. Only on slices of at least {@link minLabelShare} — a label on a\n   * sliver sits on its neighbour's. The figure is in the tooltip and the slice's name\n   * either way.\n   */\n  sliceLabels?: \"percent\" | \"value\" | \"none\";\n  /** The smallest share (0–1) that gets a slice label. Default 0.04. */\n  minLabelShare?: number;\n  /** Draw the donut's centre: {@link centerLabel} over {@link centerValue}. Default\n   *  `true`; ignored for `variant=\"pie\"`, which has no centre to draw in. */\n  center?: boolean;\n  /** The caption in the donut's centre. Default: `labels.total`. */\n  centerLabel?: ReactNode;\n  /** The figure in the donut's centre. Default: the drawn total through `formatValue`. */\n  centerValue?: ReactNode;\n  /**\n   * The legend under the chart. `\"toggle\"` (default): each entry is a switch that\n   * takes its slice off the chart, and the percentages are then of what is left —\n   * the shares always read \"of this picture\". `\"static\"`: a key with nothing to press.\n   */\n  legend?: \"toggle\" | \"static\" | \"none\";\n  /** The slices switched off, for a caller that owns the set (a URL, a saved view).\n   *  Left out, the chart keeps its own. */\n  hiddenSlices?: ReadonlySet<string>;\n  /** Called with the new hidden set whenever the legend switches a slice. */\n  onHiddenSlicesChange?: (hidden: ReadonlySet<string>) => void;\n  /** A slice was activated — by click, or Enter/Space on a focused slice. Makes each\n   *  slice a `role=\"button\"`. */\n  onSliceClick?: (key: string, slice: PieChartSlice) => void;\n  /**\n   * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and\n   * `\"value\"` slice labels — so the host's demo-mode rule blurs it. A percentage alone\n   * reveals no amount, so `\"percent\"` labels stay readable, and the slices themselves\n   * are not tagged: a blurred ring is no picture at all.\n   */\n  redact?: boolean;\n  /** What to show with nothing to draw. Default: `labels.empty`. */\n  empty?: ReactNode;\n  /** BCP 47 tag for the numbers and percentages. Default: the provider's. */\n  locale?: string;\n  labels?: LabelOverride<PieChartLabels>;\n}\n\n/** A slice as drawn: only the ones with a positive value, in `data` order. */\ninterface DrawnSlice {\n  slice: PieChartSlice;\n  value: number;\n  color: string;\n  /** Of what is drawn, 0–1. */\n  share: number;\n}\n\n// Slices carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed — and none is wanted, because a config key is a\n// CSS identifier and a slice key is the caller's data (see `ChartStyle`).\nconst PIE_CONFIG: ChartConfig = {};\n\nconst RADIAN = Math.PI / 180;\n\n/** The shared tooltip with the bubble tagged `data-private` — see the treemap's\n *  `RedactedTooltipContent` for why it has to BE the element recharts clones. */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\n/**\n * Part-to-whole chart: a donut (or `variant=\"pie\"`), one slice per\n * {@link PieChartSlice}, coloured from the chart ramp by index.\n *\n * **Every slice is reachable from the keyboard.** The slices are ONE tab stop (a roving\n * tabindex, as in the kit's grids): ←/→ and ↑/↓ step to the next and previous slice —\n * clockwise from twelve o'clock, the order of the legend — with ←/→ following the\n * reading direction in RTL; Home/End go to the first and last. Each slice is named\n * \"Label: value (xx%)\" (`labels.slice`), because a colour and an angle are nothing a\n * screen reader can say, and focusing one reads it out in the donut's centre. With\n * `onSliceClick`, Enter and Space activate it as a click does.\n *\n * The legend switches slices off (`legend=\"toggle\"`); the percentages are always of\n * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend\n * and the centre follow the page.\n *\n * With nothing to draw it says so (`empty`) rather than drawing an empty box.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function PieChart({\n  data,\n  variant = \"donut\",\n  height = \"18.75rem\",\n  formatValue: formatValueProp,\n  sliceLabels = \"percent\",\n  minLabelShare = 0.04,\n  center = true,\n  centerLabel,\n  centerValue,\n  legend = \"toggle\",\n  hiddenSlices: hiddenProp,\n  onHiddenSlicesChange,\n  onSliceClick,\n  redact = false,\n  empty,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: PieChartProps) {\n  const labels = useKitLabels(\"pieChart\", DEFAULT_PIE_CHART_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The slice labels are SVG text in px: they follow the text size by this (§10.10).\n  const { scale } = useTextSize();\n  const box = chartHeightProps(height);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const percentFormats = useMemo(\n    () => ({\n      whole: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 0 }),\n      fine: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 1 }),\n    }),\n    [locale],\n  );\n  // Memoised, like everything the sectors are drawn from: they must not be rebuilt on\n  // this component's own re-renders (see `pie` below).\n  const formatValue = useCallback(\n    (v: number) => (formatValueProp ? formatValueProp(v) : numberFormat.format(v)),\n    [formatValueProp, numberFormat],\n  );\n  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice\n  // of 0.4 % labelled \"0%\" says it is not there.\n  const formatShare = useCallback(\n    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),\n    [percentFormats],\n  );\n\n  const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());\n  const hidden = hiddenProp ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = toggleHidden(hidden, key);\n    if (hiddenProp === undefined) setOwnHidden(next);\n    onHiddenSlicesChange?.(next);\n  };\n\n  // Coloured by index into `data` AS GIVEN, before anything is dropped, so a slice\n  // keeps its colour when a neighbour is switched off or has no value.\n  const { drawable, drawn, total, pieData } = useMemo(() => {\n    const drawable = data\n      .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))\n      .filter((d): d is { slice: PieChartSlice; value: number; color: string } =>\n        typeof d.value === \"number\" && Number.isFinite(d.value) && d.value > 0,\n      );\n    const shown = drawable.filter((d) => !hidden.has(d.slice.key));\n    const total = shown.reduce((acc, d) => acc + d.value, 0);\n    const drawn: DrawnSlice[] = shown.map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }));\n    const pieData = drawn.map((d) => ({\n      key: d.slice.key,\n      label: d.slice.label,\n      value: d.value,\n      fill: d.color,\n    }));\n    return { drawable, drawn, total, pieData };\n  }, [data, hidden]);\n\n  // The roving tab stop, and the slice that has focus (which the centre reads out).\n  const [stop, setStop] = useState(0);\n  const [focused, setFocused] = useState<number | undefined>(undefined);\n  const current = Math.min(stop, Math.max(0, drawn.length - 1));\n  const refs = useRef<(SVGGElement | null)[]>([]);\n  const focusedSlice = focused !== undefined ? drawn[focused] : undefined;\n\n  // Read through a ref: the sectors are drawn once per `data`, and a caller's inline\n  // `onSliceClick` is a new function every render.\n  const clickRef = useRef(onSliceClick);\n  useLayoutEffect(() => {\n    clickRef.current = onSliceClick;\n  });\n  const clickable = onSliceClick !== undefined;\n\n  /**\n   * One sector, wrapped in its keyboard stop. recharts renders it inside a layer of its\n   * own that carries the pointer's hover and click, so those are untouched.\n   *\n   * Focus does NOT drive the recharts tooltip (`defaultIndex`), as it does in\n   * `SeriesChart`: an active pie sector is re-parented into an extra layer, which\n   * remounts this element and drops the focus it just took. The donut's centre is the\n   * keyboard's read-out instead.\n   */\n  const shape = useCallback(\n    (props: PieSectorShapeProps) => {\n      const {\n        index,\n        isActive: _isActive,\n        tabIndex: _tabIndex,\n        animationElapsedTime: _elapsed,\n        isAnimating: _animating,\n        isEntrance: _entrance,\n        // recharts hands the shape its own React `key` among the props. Spread into\n        // JSX, a `key` inside a props object is a warning on every render (React 19),\n        // so it is lifted out here and passed on its own.\n        key,\n        ...sector\n      } = props as PieSectorShapeProps & {\n        animationElapsedTime?: number;\n        isAnimating?: boolean;\n        isEntrance?: boolean;\n        key?: string | number | null;\n      };\n      const d = drawn[index];\n      if (!d) return <Sector key={key ?? undefined} {...sector} />;\n      const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {\n        const step = horizontalStep(event.key, event.currentTarget);\n        let target: number | undefined;\n        if (step) target = index + step;\n        else if (event.key === \"ArrowDown\") target = index + 1;\n        else if (event.key === \"ArrowUp\") target = index - 1;\n        else if (event.key === \"Home\") target = 0;\n        else if (event.key === \"End\") target = drawn.length - 1;\n        if (target !== undefined) {\n          event.preventDefault();\n          // Round the circle: past the last slice is the first, as the eye goes.\n          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();\n        } else if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n          clickRef.current?.(d.slice.key, d.slice);\n        }\n      };\n      return (\n        <g\n          ref={(node) => {\n            refs.current[index] = node;\n          }}\n          role={clickable ? \"button\" : \"img\"}\n          // The first slice until the effect below moves the stop.\n          tabIndex={index === 0 ? 0 : -1}\n          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}\n          data-slice={d.slice.key}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setStop(index);\n            setFocused(index);\n          }}\n          onBlur={() => setFocused(undefined)}\n          // CSS beats a presentation attribute, so this recolours the sector's own\n          // stroke for as long as it has keyboard focus.\n          className=\"outline-none [&:focus-visible>path]:stroke-primary\"\n        >\n          <Sector key={key ?? undefined} {...sector} />\n        </g>\n      );\n    },\n    [drawn, labels, formatValue, formatShare, clickable],\n  );\n\n  const label = useCallback(\n    (props: PieLabelRenderProps) => {\n      const d = drawn[props.index ?? -1];\n      const cx = Number(props.cx);\n      const cy = Number(props.cy);\n      const radius = Number(props.outerRadius);\n      const mid = Number(props.midAngle);\n      if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;\n      const r = radius + 10 * scale;\n      const x = cx + r * Math.cos(-mid * RADIAN);\n      const y = cy + r * Math.sin(-mid * RADIAN);\n      const isValue = sliceLabels === \"value\";\n      return (\n        <text\n          x={x}\n          y={y}\n          textAnchor={x >= cx ? \"start\" : \"end\"}\n          dominantBaseline=\"central\"\n          fontSize={11 * scale}\n          fill=\"var(--text-secondary)\"\n          data-private={redact && isValue ? \"\" : undefined}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {isValue ? formatValue(d.value) : formatShare(d.share)}\n        </text>\n      );\n    },\n    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale],\n  );\n\n  const withLabels = sliceLabels !== \"none\";\n  // Room outside the ring for the labels, or the ring fills the box.\n  const outer = withLabels ? 72 : 88;\n  const inner = variant === \"donut\" ? Math.round(outer * 0.6) : 0;\n\n  /**\n   * The `<Pie>`, as ONE element for as long as what it draws is unchanged. recharts\n   * keys its sectors by an animation id that is renewed whenever the Pie's props object\n   * is — i.e. on every render of the Pie — so re-rendering it remounts every sector,\n   * the one with focus included, which dropped the focus to <body> on the very state\n   * update that focusing a slice makes. An unchanged element is one React does not\n   * re-render, so the sectors stay put, and the roving tab stop is moved on them in\n   * place (the effect below).\n   */\n  const pie = useMemo(\n    () => (\n      <Pie\n        data={pieData}\n        dataKey=\"value\"\n        nameKey=\"label\"\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={`${outer}%`}\n        innerRadius={`${inner}%`}\n        startAngle={90}\n        endAngle={-270}\n        // The card showing through between the slices, as the treemap's gutter.\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rootTabIndex={-1}\n        isAnimationActive={false}\n        shape={shape}\n        label={withLabels ? label : false}\n        labelLine={false}\n        onClick={\n          clickable\n            ? (_entry: unknown, index: number) => {\n                const d = drawn[index];\n                if (d) clickRef.current?.(d.slice.key, d.slice);\n              }\n            : undefined\n        }\n      />\n    ),\n    [pieData, drawn, shape, label, withLabels, outer, inner, clickable],\n  );\n\n  // The roving tab stop, moved on the sectors in place (they are not re-rendered).\n  useEffect(() => {\n    refs.current.forEach((el, i) => el?.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\"));\n  });\n\n  const legendEntries: LegendEntry[] = drawable.map((d) => ({\n    key: d.slice.key,\n    label: d.slice.label,\n    color: d.color,\n  }));\n\n  const emptyBox = (\n    <div\n      className={cn(\"flex items-center justify-center text-sm text-muted\", box.className)}\n      style={box.style}\n    >\n      {empty ?? labels.empty}\n    </div>\n  );\n\n  // Nothing drawable at all: no chart, and no legend of switches for nothing.\n  if (drawable.length === 0) {\n    return (\n      <div {...rest} className={cn(\"w-full\", className)} style={style}>\n        {emptyBox}\n      </div>\n    );\n  }\n\n  const Content = redact ? RedactedTooltipContent : ChartTooltipContent;\n\n  return (\n    <div {...rest} className={cn(\"w-full\", className)} style={style}>\n      {drawn.length === 0 ? (\n        // Every slice switched off: the legend below is how they come back.\n        emptyBox\n      ) : (\n        <div role=\"group\" aria-label={labels.slices} className={cn(\"relative\", box.className)} style={box.style}>\n          <ChartContainer\n            config={PIE_CONFIG}\n            className={cn(\"h-full\", clickable && \"[&_.recharts-pie-sector]:cursor-pointer\")}\n          >\n            <RechartsPieChart accessibilityLayer={false}>\n              <ChartTooltip\n                content={\n                  <Content\n                    hideLabel\n                    valueFormatter={(v) =>\n                      `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`\n                    }\n                  />\n                }\n              />\n              {pie}\n            </RechartsPieChart>\n          </ChartContainer>\n          {variant === \"donut\" && center && (\n            <div\n              data-private={redact ? \"\" : undefined}\n              // While a slice has keyboard focus the centre reads it out — the\n              // keyboard's tooltip. Hidden from assistive technology then: the slice's\n              // own name has just said the same.\n              aria-hidden={focusedSlice ? true : undefined}\n              className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\"\n            >\n              {/* The label wraps from Large up, inside the hole's 40 % (text size\n                  §10.17, round 0.34 T1: the sweep read \"Spent in Sept…\"). */}\n              <span className=\"max-w-[40%] truncate-until-large text-xs text-muted\">\n                {focusedSlice ? focusedSlice.slice.label : (centerLabel ?? labels.total)}\n              </span>\n              <span className=\"max-w-[40%] truncate text-lg font-semibold tabular-nums text-primary\">\n                {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}\n              </span>\n              {focusedSlice && (\n                <span className=\"text-xs tabular-nums text-muted\">\n                  {formatShare(focusedSlice.share)}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {legend === \"toggle\" && (\n        <ToggleLegend\n          entries={legendEntries}\n          hidden={hidden}\n          onToggle={toggle}\n          showSingle\n          className=\"justify-center\"\n          labels={{ legend: labels.legend }}\n        />\n      )}\n      {legend === \"static\" && (\n        <StaticLegend entries={legendEntries} className=\"justify-center\" aria-label={labels.legend} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["drawable","total","drawn","pieData"]}
+{"version":3,"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["// A part-to-whole chart: a donut (or a full pie), one slice per category, its ANGLE\n// the category's share of what is drawn. Lifted out of kastlan, where the dashboard's\n// occupancy card and the reports' maintenance card each drew a recharts `<Pie>` by\n// hand inside the kit's `ChartContainer` — with a legend that could not switch\n// anything, slices a keyboard could not reach, and colours from a local hex list.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and\n// ramp (`paletteFor`), so it re-skins with the palette like every other chart, and the\n// kit's own legends (`ToggleLegend`, `StaticLegend`).\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentProps, ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Pie, PieChart as RechartsPieChart, Sector } from \"recharts\";\nimport type { PieLabelRenderProps, PieSectorShapeProps } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from \"./pie-chart-labels\";\nimport { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from \"./toggle-legend\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { chartHeightProps, type ChartHeight } from \"./chart-height\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/** One slice. */\nexport interface PieChartSlice {\n  /** Stable key, handed back by {@link PieChartProps.onSliceClick} and used by the\n   *  legend's hidden set. Labels can collide; keys must not. */\n  key: string;\n  /** What the slice is called — in the legend, the tooltip and its accessible name. */\n  label: string;\n  /**\n   * The slice's size. A value that is not a positive finite number — `null` for a\n   * figure that is missing, a zero, a negative — is NOT drawn and not in the legend:\n   * an angle cannot be negative, and a zero-degree slice is one a pointer and a\n   * keyboard would both stop on to find nothing.\n   */\n  value: number | null | undefined;\n  /** Overrides the by-index palette colour (`paletteFor(i)`, `i` the slice's index in\n   *  `data` AS GIVEN) — a status that has a colour of its own. Any CSS colour. */\n  color?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root, so a test id or a `data-tour`\n * anchor can find it. `children` is the chart's own.\n */\nexport interface PieChartProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  data: readonly PieChartSlice[];\n  /** `\"donut\"` (default) leaves a hole with the total in it; `\"pie\"` is the full disc. */\n  variant?: \"donut\" | \"pie\";\n  /**\n   * Height of the plot (the legend is under it): a CSS length (`\"20rem\"`,\n   * `\"min(20rem, 50dvh)\"`), a Tailwind class, or px. Default `\"18.75rem\"` — 300 px at\n   * Normal, growing with the text size so the slice labels keep their room (0.32,\n   * docs/text-size-harmonization.md §10.10). A number does not follow the text size.\n   */\n  height?: ChartHeight;\n  /** How a value is written in the tooltip, the slice's name, a `\"value\"` slice label\n   *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */\n  formatValue?: (value: number) => string;\n  /**\n   * What is written beside each slice: its share (`\"percent\"`, the default), its\n   * value, or nothing. Only on slices of at least {@link minLabelShare} — a label on a\n   * sliver sits on its neighbour's. The figure is in the tooltip and the slice's name\n   * either way.\n   */\n  sliceLabels?: \"percent\" | \"value\" | \"none\";\n  /** The smallest share (0–1) that gets a slice label. Default 0.04. */\n  minLabelShare?: number;\n  /** Draw the donut's centre: {@link centerLabel} over {@link centerValue}. Default\n   *  `true`; ignored for `variant=\"pie\"`, which has no centre to draw in. */\n  center?: boolean;\n  /** The caption in the donut's centre. Default: `labels.total`. */\n  centerLabel?: ReactNode;\n  /** The figure in the donut's centre. Default: the drawn total through `formatValue`. */\n  centerValue?: ReactNode;\n  /**\n   * The legend under the chart. `\"toggle\"` (default): each entry is a switch that\n   * takes its slice off the chart, and the percentages are then of what is left —\n   * the shares always read \"of this picture\". `\"static\"`: a key with nothing to press.\n   */\n  legend?: \"toggle\" | \"static\" | \"none\";\n  /** The slices switched off, for a caller that owns the set (a URL, a saved view).\n   *  Left out, the chart keeps its own. */\n  hiddenSlices?: ReadonlySet<string>;\n  /** Called with the new hidden set whenever the legend switches a slice. */\n  onHiddenSlicesChange?: (hidden: ReadonlySet<string>) => void;\n  /** A slice was activated — by click, or Enter/Space on a focused slice. Makes each\n   *  slice a `role=\"button\"`. */\n  onSliceClick?: (key: string, slice: PieChartSlice) => void;\n  /**\n   * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and\n   * `\"value\"` slice labels — so the host's demo-mode rule blurs it. A percentage alone\n   * reveals no amount, so `\"percent\"` labels stay readable, and the slices themselves\n   * are not tagged: a blurred ring is no picture at all.\n   */\n  redact?: boolean;\n  /** What to show with nothing to draw. Default: `labels.empty`. */\n  empty?: ReactNode;\n  /** BCP 47 tag for the numbers and percentages. Default: the provider's. */\n  locale?: string;\n  labels?: LabelOverride<PieChartLabels>;\n}\n\n/** A slice as drawn: only the ones with a positive value, in `data` order. */\ninterface DrawnSlice {\n  slice: PieChartSlice;\n  value: number;\n  color: string;\n  /** Of what is drawn, 0–1. */\n  share: number;\n}\n\n// Slices carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed — and none is wanted, because a config key is a\n// CSS identifier and a slice key is the caller's data (see `ChartStyle`).\nconst PIE_CONFIG: ChartConfig = {};\n\nconst RADIAN = Math.PI / 180;\n\n/** The shared tooltip with the bubble tagged `data-private` — see the treemap's\n *  `RedactedTooltipContent` for why it has to BE the element recharts clones. */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\n/**\n * Part-to-whole chart: a donut (or `variant=\"pie\"`), one slice per\n * {@link PieChartSlice}, coloured from the chart ramp by index.\n *\n * **Every slice is reachable from the keyboard.** The slices are ONE tab stop (a roving\n * tabindex, as in the kit's grids): ←/→ and ↑/↓ step to the next and previous slice —\n * clockwise from twelve o'clock, the order of the legend — with ←/→ following the\n * reading direction in RTL; Home/End go to the first and last. Each slice is named\n * \"Label: value (xx%)\" (`labels.slice`), because a colour and an angle are nothing a\n * screen reader can say, and focusing one reads it out in the donut's centre. With\n * `onSliceClick`, Enter and Space activate it as a click does.\n *\n * The legend switches slices off (`legend=\"toggle\"`); the percentages are always of\n * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend\n * and the centre follow the page.\n *\n * With nothing to draw it says so (`empty`) rather than drawing an empty box.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function PieChart({\n  data,\n  variant = \"donut\",\n  height = \"18.75rem\",\n  formatValue: formatValueProp,\n  sliceLabels = \"percent\",\n  minLabelShare = 0.04,\n  center = true,\n  centerLabel,\n  centerValue,\n  legend = \"toggle\",\n  hiddenSlices: hiddenProp,\n  onHiddenSlicesChange,\n  onSliceClick,\n  redact = false,\n  empty,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: PieChartProps) {\n  const labels = useKitLabels(\"pieChart\", DEFAULT_PIE_CHART_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The slice labels are SVG text in px: they follow the text size by this (§10.10).\n  const { scale } = useTextSize();\n  const box = chartHeightProps(height);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const percentFormats = useMemo(\n    () => ({\n      whole: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 0 }),\n      fine: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 1 }),\n    }),\n    [locale],\n  );\n  // Memoised, like everything the sectors are drawn from: they must not be rebuilt on\n  // this component's own re-renders (see `pie` below).\n  const formatValue = useCallback(\n    (v: number) => (formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v)),\n    [formatValueProp, numberFormat],\n  );\n  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice\n  // of 0.4 % labelled \"0%\" says it is not there.\n  const formatShare = useCallback(\n    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),\n    [percentFormats],\n  );\n\n  const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());\n  const hidden = hiddenProp ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = toggleHidden(hidden, key);\n    if (hiddenProp === undefined) setOwnHidden(next);\n    onHiddenSlicesChange?.(next);\n  };\n\n  // Coloured by index into `data` AS GIVEN, before anything is dropped, so a slice\n  // keeps its colour when a neighbour is switched off or has no value.\n  const { drawable, drawn, total, pieData } = useMemo(() => {\n    const drawable = data\n      .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))\n      .filter((d): d is { slice: PieChartSlice; value: number; color: string } =>\n        typeof d.value === \"number\" && Number.isFinite(d.value) && d.value > 0,\n      );\n    const shown = drawable.filter((d) => !hidden.has(d.slice.key));\n    const total = shown.reduce((acc, d) => acc + d.value, 0);\n    const drawn: DrawnSlice[] = shown.map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }));\n    const pieData = drawn.map((d) => ({\n      key: d.slice.key,\n      label: d.slice.label,\n      value: d.value,\n      fill: d.color,\n    }));\n    return { drawable, drawn, total, pieData };\n  }, [data, hidden]);\n\n  // The roving tab stop, and the slice that has focus (which the centre reads out).\n  const [stop, setStop] = useState(0);\n  const [focused, setFocused] = useState<number | undefined>(undefined);\n  const current = Math.min(stop, Math.max(0, drawn.length - 1));\n  const refs = useRef<(SVGGElement | null)[]>([]);\n  const focusedSlice = focused !== undefined ? drawn[focused] : undefined;\n\n  // Read through a ref: the sectors are drawn once per `data`, and a caller's inline\n  // `onSliceClick` is a new function every render.\n  const clickRef = useRef(onSliceClick);\n  useLayoutEffect(() => {\n    clickRef.current = onSliceClick;\n  });\n  const clickable = onSliceClick !== undefined;\n\n  /**\n   * One sector, wrapped in its keyboard stop. recharts renders it inside a layer of its\n   * own that carries the pointer's hover and click, so those are untouched.\n   *\n   * Focus does NOT drive the recharts tooltip (`defaultIndex`), as it does in\n   * `SeriesChart`: an active pie sector is re-parented into an extra layer, which\n   * remounts this element and drops the focus it just took. The donut's centre is the\n   * keyboard's read-out instead.\n   */\n  const shape = useCallback(\n    (props: PieSectorShapeProps) => {\n      const {\n        index,\n        isActive: _isActive,\n        tabIndex: _tabIndex,\n        animationElapsedTime: _elapsed,\n        isAnimating: _animating,\n        isEntrance: _entrance,\n        // recharts hands the shape its own React `key` among the props. Spread into\n        // JSX, a `key` inside a props object is a warning on every render (React 19),\n        // so it is lifted out here and passed on its own.\n        key,\n        ...sector\n      } = props as PieSectorShapeProps & {\n        animationElapsedTime?: number;\n        isAnimating?: boolean;\n        isEntrance?: boolean;\n        key?: string | number | null;\n      };\n      const d = drawn[index];\n      if (!d) return <Sector key={key ?? undefined} {...sector} />;\n      const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {\n        const step = horizontalStep(event.key, event.currentTarget);\n        let target: number | undefined;\n        if (step) target = index + step;\n        else if (event.key === \"ArrowDown\") target = index + 1;\n        else if (event.key === \"ArrowUp\") target = index - 1;\n        else if (event.key === \"Home\") target = 0;\n        else if (event.key === \"End\") target = drawn.length - 1;\n        if (target !== undefined) {\n          event.preventDefault();\n          // Round the circle: past the last slice is the first, as the eye goes.\n          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();\n        } else if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n          clickRef.current?.(d.slice.key, d.slice);\n        }\n      };\n      return (\n        <g\n          ref={(node) => {\n            refs.current[index] = node;\n          }}\n          role={clickable ? \"button\" : \"img\"}\n          // The first slice until the effect below moves the stop.\n          tabIndex={index === 0 ? 0 : -1}\n          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}\n          data-slice={d.slice.key}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setStop(index);\n            setFocused(index);\n          }}\n          onBlur={() => setFocused(undefined)}\n          // CSS beats a presentation attribute, so this recolours the sector's own\n          // stroke for as long as it has keyboard focus.\n          className=\"outline-none [&:focus-visible>path]:stroke-primary\"\n        >\n          <Sector key={key ?? undefined} {...sector} />\n        </g>\n      );\n    },\n    [drawn, labels, formatValue, formatShare, clickable],\n  );\n\n  const label = useCallback(\n    (props: PieLabelRenderProps) => {\n      const d = drawn[props.index ?? -1];\n      const cx = Number(props.cx);\n      const cy = Number(props.cy);\n      const radius = Number(props.outerRadius);\n      const mid = Number(props.midAngle);\n      if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;\n      const r = radius + 10 * scale;\n      const x = cx + r * Math.cos(-mid * RADIAN);\n      const y = cy + r * Math.sin(-mid * RADIAN);\n      const isValue = sliceLabels === \"value\";\n      return (\n        <text\n          x={x}\n          y={y}\n          textAnchor={x >= cx ? \"start\" : \"end\"}\n          dominantBaseline=\"central\"\n          fontSize={11 * scale}\n          fill=\"var(--text-secondary)\"\n          data-private={redact && isValue ? \"\" : undefined}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {isValue ? formatValue(d.value) : formatShare(d.share)}\n        </text>\n      );\n    },\n    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale],\n  );\n\n  const withLabels = sliceLabels !== \"none\";\n  // Room outside the ring for the labels, or the ring fills the box.\n  const outer = withLabels ? 72 : 88;\n  const inner = variant === \"donut\" ? Math.round(outer * 0.6) : 0;\n\n  /**\n   * The `<Pie>`, as ONE element for as long as what it draws is unchanged. recharts\n   * keys its sectors by an animation id that is renewed whenever the Pie's props object\n   * is — i.e. on every render of the Pie — so re-rendering it remounts every sector,\n   * the one with focus included, which dropped the focus to <body> on the very state\n   * update that focusing a slice makes. An unchanged element is one React does not\n   * re-render, so the sectors stay put, and the roving tab stop is moved on them in\n   * place (the effect below).\n   */\n  const pie = useMemo(\n    () => (\n      <Pie\n        data={pieData}\n        dataKey=\"value\"\n        nameKey=\"label\"\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={`${outer}%`}\n        innerRadius={`${inner}%`}\n        startAngle={90}\n        endAngle={-270}\n        // The card showing through between the slices, as the treemap's gutter.\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rootTabIndex={-1}\n        isAnimationActive={false}\n        shape={shape}\n        label={withLabels ? label : false}\n        labelLine={false}\n        onClick={\n          clickable\n            ? (_entry: unknown, index: number) => {\n                const d = drawn[index];\n                if (d) clickRef.current?.(d.slice.key, d.slice);\n              }\n            : undefined\n        }\n      />\n    ),\n    [pieData, drawn, shape, label, withLabels, outer, inner, clickable],\n  );\n\n  // The roving tab stop, moved on the sectors in place (they are not re-rendered).\n  useEffect(() => {\n    refs.current.forEach((el, i) => el?.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\"));\n  });\n\n  const legendEntries: LegendEntry[] = drawable.map((d) => ({\n    key: d.slice.key,\n    label: d.slice.label,\n    color: d.color,\n  }));\n\n  const emptyBox = (\n    <div\n      className={cn(\"flex items-center justify-center text-sm text-muted\", box.className)}\n      style={box.style}\n    >\n      {empty ?? labels.empty}\n    </div>\n  );\n\n  // Nothing drawable at all: no chart, and no legend of switches for nothing.\n  if (drawable.length === 0) {\n    return (\n      <div {...rest} className={cn(\"w-full\", className)} style={style}>\n        {emptyBox}\n      </div>\n    );\n  }\n\n  const Content = redact ? RedactedTooltipContent : ChartTooltipContent;\n\n  return (\n    <div {...rest} className={cn(\"w-full\", className)} style={style}>\n      {drawn.length === 0 ? (\n        // Every slice switched off: the legend below is how they come back.\n        emptyBox\n      ) : (\n        <div role=\"group\" aria-label={labels.slices} className={cn(\"relative\", box.className)} style={box.style}>\n          <ChartContainer\n            config={PIE_CONFIG}\n            className={cn(\"h-full\", clickable && \"[&_.recharts-pie-sector]:cursor-pointer\")}\n          >\n            <RechartsPieChart accessibilityLayer={false}>\n              <ChartTooltip\n                content={\n                  <Content\n                    hideLabel\n                    valueFormatter={(v) =>\n                      `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`\n                    }\n                  />\n                }\n              />\n              {pie}\n            </RechartsPieChart>\n          </ChartContainer>\n          {variant === \"donut\" && center && (\n            <div\n              data-private={redact ? \"\" : undefined}\n              // While a slice has keyboard focus the centre reads it out — the\n              // keyboard's tooltip. Hidden from assistive technology then: the slice's\n              // own name has just said the same.\n              aria-hidden={focusedSlice ? true : undefined}\n              className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\"\n            >\n              {/* The label wraps from Large up, inside the hole's 40 % (text size\n                  §10.17, round 0.34 T1: the sweep read \"Spent in Sept…\"). */}\n              <span className=\"max-w-[40%] truncate-until-large text-xs text-muted\">\n                {focusedSlice ? focusedSlice.slice.label : (centerLabel ?? labels.total)}\n              </span>\n              <span className=\"max-w-[40%] truncate text-lg font-semibold tabular-nums text-primary\">\n                {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}\n              </span>\n              {focusedSlice && (\n                <span className=\"text-xs tabular-nums text-muted\">\n                  {formatShare(focusedSlice.share)}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {legend === \"toggle\" && (\n        <ToggleLegend\n          entries={legendEntries}\n          hidden={hidden}\n          onToggle={toggle}\n          showSingle\n          className=\"justify-center\"\n          labels={{ legend: labels.legend }}\n        />\n      )}\n      {legend === \"static\" && (\n        <StaticLegend entries={legendEntries} className=\"justify-center\" aria-label={labels.legend} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["drawable","total","drawn","pieData"]}

package/dist/components/popover.js

@@ -79,6 +79,7 @@ function Popover({
         {
           ...rest,
           ref: setPanel,
+          "data-kit-layer": "",
           role: "dialog",
           id: panelId,
           "aria-label": ariaLabel ?? text.panel,

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { anchoredInline, useAnchoredPanel, viewportSize } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_POPOVER_LABELS } from \"./popover-labels\";\n// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a\n// field's `help`, so importing from there would close a cycle, as it did for Tooltip.\nimport { mergeRefs } from \"../lib/refs\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Defined in ./popover-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_POPOVER_LABELS };\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: LabelOverride<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n  /** The PANEL, while it is open — where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the panel's own ref (focus trap, outside click), so\n   *  neither loses it. The trigger is the caller's own element, ref and all. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the glass — the\n  // root's client width, not `innerWidth`, which on a phone is the layout viewport grown\n  // by whatever overflows (live #381, Wave 2 DUP-7).\n  const remPx = useRemPx();\n  const glass = rect ? viewportSize().width : 0;\n  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, glass - 2 * EDGE)) : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: anchoredInline(rect, panelWidth, { dir, align: \"end\", edge: EDGE, viewportWidth: glass }).left,\n      }\n    : null;\n\n  // A press in a list opened from inside — a CurrencySelect's, a combobox's, another\n  // popover's — reaches the panel through the React tree and is inside (dev#623).\n  const markInside = useOutsideClick([triggerRef, panelRef], close, open);\n  // A layer on the Escape stack while open (Wave 2, DUP-1): a list opened inside closes\n  // first, and the dialog this popover sits in only after it — the calculator on an\n  // amount field in a Modal is exactly that.\n  const layer = useDismissLayer(open, close);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one. A `preventDefault()` on Escape\n    // there keeps the popover open — the owner's claim, as on the dialogs. And as there,\n    // the handler sees Escape only while this popover is the layer on top: a tooltip or a\n    // menu open over it takes that press first (round 0.35 R2, the dialogs' rule).\n    runOwnKeyDown(e, onKeyDownProp, layer);\n    // Focus is in here, the normal case: the key is handed to the top layer and STOPPED,\n    // so it does not travel on up the React tree to a dialog around the popover.\n    takeEscape(e);\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={setPanel}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            onPointerDownCapture={(e) => {\n              rest.onPointerDownCapture?.(e);\n              markInside(e);\n            }}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAkMI,mBAOM,KAPN;AAlMJ,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,kBAAkB,oBAAoB;AAC/D,SAAS,eAAe,YAAY,iBAAiB,uBAAuB;AAC5E,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgC;AACnD,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAwC;AACjD,SAAS,8BAA8B;AAGvC,SAAS,iBAAiB;AAgD1B,MAAM,gBAA2B;AAGjC,MAAM,OAAO;AAwCN,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,WAAW,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAC9D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAIvB,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,OAAO,aAAa,EAAE,QAAQ;AAC5C,QAAM,aAAa,OAAO,KAAK,IAAI,SAAS,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI;AAC5F,QAAM,MAAM,OACR;AAAA;AAAA;AAAA,IAGE,KAAK,UAAU,QAAQ,SAAY,UAAU;AAAA,IAC7C,QAAQ,UAAU,QAAQ,UAAU,SAAS;AAAA,IAC7C,MAAM,eAAe,MAAM,YAAY,EAAE,KAAK,OAAO,OAAO,MAAM,MAAM,eAAe,MAAM,CAAC,EAAE;AAAA,EAClG,IACA;AAIJ,QAAM,aAAa,gBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AAItE,QAAM,QAAQ,gBAAgB,MAAM,KAAK;AAEzC,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAM1D,kBAAc,GAAG,eAAe,KAAK;AAGrC,eAAW,CAAC;AAAA,EACd;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,sBAAsB,CAAC,MAAM;AAC3B,iBAAK,uBAAuB,CAAC;AAC7B,uBAAW,CAAC;AAAA,UACd;AAAA,UACA,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,QAAQ,IAAI;AAAA,YACZ,MAAM,IAAI;AAAA,YACV,OAAO;AAAA,YACP,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { anchoredInline, useAnchoredPanel, viewportSize } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_POPOVER_LABELS } from \"./popover-labels\";\n// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a\n// field's `help`, so importing from there would close a cycle, as it did for Tooltip.\nimport { mergeRefs } from \"../lib/refs\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Defined in ./popover-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_POPOVER_LABELS };\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: LabelOverride<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n  /** The PANEL, while it is open — where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the panel's own ref (focus trap, outside click), so\n   *  neither loses it. The trigger is the caller's own element, ref and all. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the glass — the\n  // root's client width, not `innerWidth`, which on a phone is the layout viewport grown\n  // by whatever overflows (live #381, Wave 2 DUP-7).\n  const remPx = useRemPx();\n  const glass = rect ? viewportSize().width : 0;\n  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, glass - 2 * EDGE)) : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: anchoredInline(rect, panelWidth, { dir, align: \"end\", edge: EDGE, viewportWidth: glass }).left,\n      }\n    : null;\n\n  // A press in a list opened from inside — a CurrencySelect's, a combobox's, another\n  // popover's — reaches the panel through the React tree and is inside (dev#623).\n  const markInside = useOutsideClick([triggerRef, panelRef], close, open);\n  // A layer on the Escape stack while open (Wave 2, DUP-1): a list opened inside closes\n  // first, and the dialog this popover sits in only after it — the calculator on an\n  // amount field in a Modal is exactly that.\n  const layer = useDismissLayer(open, close);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one. A `preventDefault()` on Escape\n    // there keeps the popover open — the owner's claim, as on the dialogs. And as there,\n    // the handler sees Escape only while this popover is the layer on top: a tooltip or a\n    // menu open over it takes that press first (round 0.35 R2, the dialogs' rule).\n    runOwnKeyDown(e, onKeyDownProp, layer);\n    // Focus is in here, the normal case: the key is handed to the top layer and STOPPED,\n    // so it does not travel on up the React tree to a dialog around the popover.\n    takeEscape(e);\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={setPanel}\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            onPointerDownCapture={(e) => {\n              rest.onPointerDownCapture?.(e);\n              markInside(e);\n            }}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/progress-bar.js

@@ -5,6 +5,7 @@ import { cn } from "../lib/cn.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { toneTextClass } from "./signed-amount.js";
 import { DEFAULT_PROGRESS_BAR_LABELS } from "./progress-bar-labels.js";
+import { formatWithMinus } from "../lib/minus.js";
 const FILL = {
   brand: "bg-brand",
   neutral: "bg-[var(--text-muted)]",
@@ -24,8 +25,7 @@ const SERIES_FILL = [
   "bg-[var(--chart-5)]",
   "bg-[var(--chart-6)]",
   "bg-[var(--chart-7)]",
-  "bg-[var(--chart-8)]",
-  "bg-[var(--chart-9)]"
+  "bg-[var(--chart-8)]"
 ];
 function segmentFills(segments) {
   let next = 0;
@@ -73,7 +73,7 @@ function ProgressBar({
   const hintId = useId();
   const hintNode = hint != null ? /* @__PURE__ */ jsx("p", { id: hintId, "data-part": "hint", className: "mt-1 text-xs text-muted", children: hint }) : null;
   if (maxProp === null) {
-    const shown = value === void 0 || !Number.isFinite(value) ? void 0 : formatValue ? formatValue(value, Infinity, min) : new Intl.NumberFormat(kitLocale).format(value);
+    const shown = value === void 0 || !Number.isFinite(value) ? void 0 : formatValue ? formatValue(value, Infinity, min) : formatWithMinus(new Intl.NumberFormat(kitLocale), value);
     return /* @__PURE__ */ jsxs(Tag, { ...rest, ref: tagRef, className: cn("min-w-0", inlineClass, className), "data-state": "unlimited", children: [
       /* @__PURE__ */ jsxs(Tag, { className: "flex items-baseline gap-2 text-sm", children: [
         label != null && /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 text-secondary", children: label }),
@@ -99,7 +99,8 @@ function ProgressBar({
   const formatPart = (v) => {
     if (!Number.isFinite(v)) return format(min);
     if (formatValue) return formatValue(v, max, min);
-    return new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
+    return formatWithMinus(
+      new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }),
       span <= 0 ? 0 : (v - min) / span
     );
   };

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { toneTextClass } from \"./signed-amount\";\nimport type { TextTone } from \"./signed-amount\";\nimport { DEFAULT_PROGRESS_BAR_LABELS } from \"./progress-bar-labels\";\n\n/** The words a progress bar adds of its own. */\nexport interface ProgressBarLabels {\n  /** Shown after the value when `max={null}`: a quota with no ceiling. */\n  unlimited: string;\n  /** The `overage` line: how far past `max` the value is. `amount` is formatted. */\n  overLimit: (amount: string) => string;\n}\n\n// Defined in ./progress-bar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PROGRESS_BAR_LABELS };\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-brand\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  danger: \"bg-danger\",\n  info: \"bg-info\",\n  income: \"bg-money-income\",\n  expense: \"bg-money-expense\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n  \"bg-[var(--chart-9)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n  /**\n   * List it in the `legend` but leave it out of the bar — its value, its share of the\n   * `aria-valuetext`, and the sum. keksdose's cut card (reports/cut-card:132) names\n   * EVERY bucket under its bar, the empty ones included, while the bar draws only the\n   * ones with a share: pass the empty buckets as `legendOnly` entries.\n   */\n  legendOnly?: boolean;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /**\n   * `\"span\"` builds the bar from spans, for a place only phrasing content may go: inside\n   * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off\n   * there. Default `\"div\"`.\n   */\n  as?: \"div\" | \"span\";\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  /**\n   * The top of the scale (default 100). `null` is a quota with NO ceiling — kastlan's\n   * billing usage on an unlimited plan (usage-progress-bar:25): nothing to fill, so no\n   * bar is drawn; the label row shows the value and \"Unlimited\" (`progressBar.unlimited`)\n   * as plain text. `formatValue` is then called with `max` = `Infinity`; without it,\n   * the value is a plain number in the kit's locale.\n   */\n  max?: number | null;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n  /**\n   * What a legend row shows at its end, in place of the part's formatted value — which\n   * it is handed, with the segment and its index. That value is the part's OWN, signed\n   * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a\n   * 0–100 scale says \"-40%\" though the bar draws nothing for it. keksdose's cut card\n   * shows the share AND a private outflow amount per bucket (cut-card:150), which one\n   * figure could not:\n   * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.\n   */\n  legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;\n  /**\n   * The colour of each legend row's figure, as a {@link TextTone} — `toneTextClass`'s\n   * palette, the money pair included. Default `\"muted\"`: the legend explains the bar and\n   * should not outshout the headline above it. One tone for every row, or a function\n   * per row. A tone and not the segment's own `tone`: keksdose's tax card fills its\n   * three parts with one bucket's certainty ramp (`className`), while the FIGURES carry\n   * the bucket's money direction — `legendTone=\"expense\"` for the tax owed — which it\n   * could only say before through `legendValue` and an app-side `Amount`. A function\n   * returning `undefined` keeps that row muted. Applies to `legendValue`'s node too\n   * (it inherits the colour unless it sets its own).\n   */\n  legendTone?: TextTone | ((segment: ProgressBarSegment, index: number) => TextTone | undefined);\n  /** A muted line under the bar — the plan's reset date, \"3 of 5 seats in use\". It\n   *  describes the bar (`aria-describedby`). */\n  hint?: ReactNode;\n  /**\n   * When `value` is past `max`, say by how much, in a danger-coloured line under the bar\n   * (kastlan usage-progress-bar:46): `true` prints `progressBar.overLimit` with the\n   * excess as a plain number; a function renders the line itself from the excess (a\n   * currency, \"2 seats\"). The bar stays full at `max` either way — colour it with\n   * `tone=\"danger\"` if it should read as over. Ignored for `segments` and `max={null}`.\n   */\n  overage?: boolean | ((over: number) => ReactNode);\n  /**\n   * Tag every figure the bar PRINTS `data-private`, so the host's demo-mode rule blurs\n   * it — the attribute `StatTile sensitive` and `Tooltip redact` carry: the `showValue`\n   * text, each `legend` row's value (yours from `legendValue` too), the unlimited\n   * figure and the `overage` line. The track, the swatches and the part names stay\n   * readable — a blurred bar is no picture at all. Before this an app with a demo-mode\n   * blur had to pass `legendValue` only to wrap the figure in a tagged span (keksdose).\n   * The `aria-valuetext` is not touched: a screen reader is not a screen-share.\n   */\n  sensitive?: boolean;\n  labels?: LabelOverride<ProgressBarLabels>;\n  /** The element the rest of the props go on — the `progressbar` (or `meter`) itself,\n   *  the box round the figure for an unlimited one — a `div` or a `span` as `as` says,\n   *  hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max: maxProp = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  legendValue,\n  legendTone = \"muted\",\n  hint,\n  overage,\n  sensitive = false,\n  labels,\n  className,\n  as = \"div\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ref,\n  ...rest\n}: ProgressBarProps) {\n  // `as=\"span\"`: the same bar from phrasing elements only, so it is valid inside a\n  // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target\n  // (keksdose P2). Every span is made a block except those already laid out as flex.\n  const Tag = as;\n  // Either element's ref, as List types its `ul`/`ol` one.\n  const tagRef = ref as Ref<HTMLDivElement & HTMLSpanElement> | undefined;\n  const inlineClass = as === \"span\" ? \"block [&_span:not(.flex):not(.inline-flex)]:block\" : undefined;\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = useKitLabels(\"progressBar\", DEFAULT_PROGRESS_BAR_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n  const priv = sensitive ? \"\" : undefined;\n  const hintId = useId();\n  const hintNode =\n    hint != null ? (\n      <p id={hintId} data-part=\"hint\" className=\"mt-1 text-xs text-muted\">\n        {hint}\n      </p>\n    ) : null;\n\n  if (maxProp === null) {\n    // No ceiling: no bar, no role — a meter with no maximum is not one. The value and\n    // \"Unlimited\" are the content, so they are plain visible text.\n    const shown =\n      value === undefined || !Number.isFinite(value)\n        ? undefined\n        : formatValue\n          ? formatValue(value, Infinity, min)\n          : new Intl.NumberFormat(kitLocale).format(value);\n    return (\n      <Tag {...rest} ref={tagRef} className={cn(\"min-w-0\", inlineClass, className)} data-state=\"unlimited\">\n        <Tag className=\"flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-secondary\">\n              {label}\n            </span>\n          )}\n          <span data-part=\"unlimited\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-muted\">\n            {shown !== undefined && `${shown} · `}\n            {text.unlimited}\n          </span>\n        </Tag>\n        {hintNode}\n      </Tag>\n    );\n  }\n  const max = maxProp;\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  // Colours are dealt over EVERY segment, legend-only ones included, so an entry keeps\n  // its swatch whether or not it is in the bar this time.\n  const fills = stacked ? segmentFills(segments) : [];\n  const barParts = stacked ? segments.filter((seg) => !seg.legendOnly) : [];\n  const partTotal = stacked ? min + barParts.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  // A PART is stated as its own value, sign and all — not as the slice of track it\n  // draws. The bar cannot draw a negative part (a refund inside a month's spending) or\n  // one past `max`, but the legend and the reader can still say it: before 0.16 a\n  // −CHF 40 part read \"0 %\" in both, and keksdose had to pass `legendValue` just to get\n  // the minus back. For a part inside `min`–`max` this is the same text as before.\n  const formatPart = (v: number) => {\n    if (!Number.isFinite(v)) return format(min);\n    if (formatValue) return formatValue(v, max, min);\n    return new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n      span <= 0 ? 0 : (v - min) / span,\n    );\n  };\n  const partTexts = stacked\n    ? barParts.map((seg) => {\n        const text = formatPart(seg.value);\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const over =\n    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;\n  const overageNode =\n    over > 0 ? (\n      <p id={`${hintId}-over`} data-part=\"overage\" data-private={priv} className=\"mt-1 text-xs text-danger\">\n        {typeof overage === \"function\"\n          ? overage(over)\n          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}\n      </p>\n    ) : null;\n  const describedBy =\n    [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(\" \") || undefined;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <Tag className={cn(\"min-w-0\", inlineClass, className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <Tag className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-secondary\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden data-part=\"value\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-muted\">\n              {valueText}\n            </span>\n          )}\n        </Tag>\n      )}\n      <Tag\n        {...rest}\n        ref={tagRef}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-active\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <Tag className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) =>\n              seg.legendOnly ? null : (\n                <Tag\n                  key={seg.key ?? i}\n                  data-part=\"segment\"\n                  className={cn(\n                    \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                    fills[i],\n                  )}\n                  style={{\n                    width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                    backgroundColor: seg.className ? undefined : seg.color,\n                  }}\n                />\n              ),\n            )}\n          </Tag>\n        ) : indeterminate ? (\n          <Tag\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <Tag\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </Tag>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                // Wraps from Large up (text size §10.17, round 0.34 T1); the value\n                // beside it keeps its width.\n                <span className=\"min-w-0 flex-1 truncate-until-large text-secondary\">{seg.label}</span>\n              )}\n              <span\n                data-part=\"legend-value\"\n                data-private={priv}\n                className={cn(\n                  \"ms-auto shrink-0 text-xs tabular-nums\",\n                  toneTextClass(\n                    (typeof legendTone === \"function\" ? legendTone(seg, i) : legendTone) ?? \"muted\",\n                  ),\n                )}\n              >\n                {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {overageNode}\n      {hintNode}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":["text"]}
+{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { toneTextClass } from \"./signed-amount\";\nimport type { TextTone } from \"./signed-amount\";\nimport { DEFAULT_PROGRESS_BAR_LABELS } from \"./progress-bar-labels\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/** The words a progress bar adds of its own. */\nexport interface ProgressBarLabels {\n  /** Shown after the value when `max={null}`: a quota with no ceiling. */\n  unlimited: string;\n  /** The `overage` line: how far past `max` the value is. `amount` is formatted. */\n  overLimit: (amount: string) => string;\n}\n\n// Defined in ./progress-bar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PROGRESS_BAR_LABELS };\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-brand\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  danger: \"bg-danger\",\n  info: \"bg-info\",\n  income: \"bg-money-income\",\n  expense: \"bg-money-expense\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\n// Eight, cycled like `paletteFor` (0.49): `--chart-9` only repeats slot 1.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n  /**\n   * List it in the `legend` but leave it out of the bar — its value, its share of the\n   * `aria-valuetext`, and the sum. keksdose's cut card (reports/cut-card:132) names\n   * EVERY bucket under its bar, the empty ones included, while the bar draws only the\n   * ones with a share: pass the empty buckets as `legendOnly` entries.\n   */\n  legendOnly?: boolean;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /**\n   * `\"span\"` builds the bar from spans, for a place only phrasing content may go: inside\n   * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off\n   * there. Default `\"div\"`.\n   */\n  as?: \"div\" | \"span\";\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  /**\n   * The top of the scale (default 100). `null` is a quota with NO ceiling — kastlan's\n   * billing usage on an unlimited plan (usage-progress-bar:25): nothing to fill, so no\n   * bar is drawn; the label row shows the value and \"Unlimited\" (`progressBar.unlimited`)\n   * as plain text. `formatValue` is then called with `max` = `Infinity`; without it,\n   * the value is a plain number in the kit's locale.\n   */\n  max?: number | null;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n  /**\n   * What a legend row shows at its end, in place of the part's formatted value — which\n   * it is handed, with the segment and its index. That value is the part's OWN, signed\n   * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a\n   * 0–100 scale says \"-40%\" though the bar draws nothing for it. keksdose's cut card\n   * shows the share AND a private outflow amount per bucket (cut-card:150), which one\n   * figure could not:\n   * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.\n   */\n  legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;\n  /**\n   * The colour of each legend row's figure, as a {@link TextTone} — `toneTextClass`'s\n   * palette, the money pair included. Default `\"muted\"`: the legend explains the bar and\n   * should not outshout the headline above it. One tone for every row, or a function\n   * per row. A tone and not the segment's own `tone`: keksdose's tax card fills its\n   * three parts with one bucket's certainty ramp (`className`), while the FIGURES carry\n   * the bucket's money direction — `legendTone=\"expense\"` for the tax owed — which it\n   * could only say before through `legendValue` and an app-side `Amount`. A function\n   * returning `undefined` keeps that row muted. Applies to `legendValue`'s node too\n   * (it inherits the colour unless it sets its own).\n   */\n  legendTone?: TextTone | ((segment: ProgressBarSegment, index: number) => TextTone | undefined);\n  /** A muted line under the bar — the plan's reset date, \"3 of 5 seats in use\". It\n   *  describes the bar (`aria-describedby`). */\n  hint?: ReactNode;\n  /**\n   * When `value` is past `max`, say by how much, in a danger-coloured line under the bar\n   * (kastlan usage-progress-bar:46): `true` prints `progressBar.overLimit` with the\n   * excess as a plain number; a function renders the line itself from the excess (a\n   * currency, \"2 seats\"). The bar stays full at `max` either way — colour it with\n   * `tone=\"danger\"` if it should read as over. Ignored for `segments` and `max={null}`.\n   */\n  overage?: boolean | ((over: number) => ReactNode);\n  /**\n   * Tag every figure the bar PRINTS `data-private`, so the host's demo-mode rule blurs\n   * it — the attribute `StatTile sensitive` and `Tooltip redact` carry: the `showValue`\n   * text, each `legend` row's value (yours from `legendValue` too), the unlimited\n   * figure and the `overage` line. The track, the swatches and the part names stay\n   * readable — a blurred bar is no picture at all. Before this an app with a demo-mode\n   * blur had to pass `legendValue` only to wrap the figure in a tagged span (keksdose).\n   * The `aria-valuetext` is not touched: a screen reader is not a screen-share.\n   */\n  sensitive?: boolean;\n  labels?: LabelOverride<ProgressBarLabels>;\n  /** The element the rest of the props go on — the `progressbar` (or `meter`) itself,\n   *  the box round the figure for an unlimited one — a `div` or a `span` as `as` says,\n   *  hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max: maxProp = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  legendValue,\n  legendTone = \"muted\",\n  hint,\n  overage,\n  sensitive = false,\n  labels,\n  className,\n  as = \"div\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ref,\n  ...rest\n}: ProgressBarProps) {\n  // `as=\"span\"`: the same bar from phrasing elements only, so it is valid inside a\n  // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target\n  // (keksdose P2). Every span is made a block except those already laid out as flex.\n  const Tag = as;\n  // Either element's ref, as List types its `ul`/`ol` one.\n  const tagRef = ref as Ref<HTMLDivElement & HTMLSpanElement> | undefined;\n  const inlineClass = as === \"span\" ? \"block [&_span:not(.flex):not(.inline-flex)]:block\" : undefined;\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = useKitLabels(\"progressBar\", DEFAULT_PROGRESS_BAR_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n  const priv = sensitive ? \"\" : undefined;\n  const hintId = useId();\n  const hintNode =\n    hint != null ? (\n      <p id={hintId} data-part=\"hint\" className=\"mt-1 text-xs text-muted\">\n        {hint}\n      </p>\n    ) : null;\n\n  if (maxProp === null) {\n    // No ceiling: no bar, no role — a meter with no maximum is not one. The value and\n    // \"Unlimited\" are the content, so they are plain visible text.\n    const shown =\n      value === undefined || !Number.isFinite(value)\n        ? undefined\n        : formatValue\n          ? formatValue(value, Infinity, min)\n          : formatWithMinus(new Intl.NumberFormat(kitLocale), value);\n    return (\n      <Tag {...rest} ref={tagRef} className={cn(\"min-w-0\", inlineClass, className)} data-state=\"unlimited\">\n        <Tag className=\"flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-secondary\">\n              {label}\n            </span>\n          )}\n          <span data-part=\"unlimited\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-muted\">\n            {shown !== undefined && `${shown} · `}\n            {text.unlimited}\n          </span>\n        </Tag>\n        {hintNode}\n      </Tag>\n    );\n  }\n  const max = maxProp;\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  // Colours are dealt over EVERY segment, legend-only ones included, so an entry keeps\n  // its swatch whether or not it is in the bar this time.\n  const fills = stacked ? segmentFills(segments) : [];\n  const barParts = stacked ? segments.filter((seg) => !seg.legendOnly) : [];\n  const partTotal = stacked ? min + barParts.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  // A PART is stated as its own value, sign and all — not as the slice of track it\n  // draws. The bar cannot draw a negative part (a refund inside a month's spending) or\n  // one past `max`, but the legend and the reader can still say it: before 0.16 a\n  // −CHF 40 part read \"0 %\" in both, and keksdose had to pass `legendValue` just to get\n  // the minus back. For a part inside `min`–`max` this is the same text as before.\n  const formatPart = (v: number) => {\n    if (!Number.isFinite(v)) return format(min);\n    if (formatValue) return formatValue(v, max, min);\n    // A part can be negative (a refund): U+2212, as everywhere (0.49, KIT-1).\n    return formatWithMinus(\n      new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }),\n      span <= 0 ? 0 : (v - min) / span,\n    );\n  };\n  const partTexts = stacked\n    ? barParts.map((seg) => {\n        const text = formatPart(seg.value);\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const over =\n    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;\n  const overageNode =\n    over > 0 ? (\n      <p id={`${hintId}-over`} data-part=\"overage\" data-private={priv} className=\"mt-1 text-xs text-danger\">\n        {typeof overage === \"function\"\n          ? overage(over)\n          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}\n      </p>\n    ) : null;\n  const describedBy =\n    [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(\" \") || undefined;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <Tag className={cn(\"min-w-0\", inlineClass, className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <Tag className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-secondary\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden data-part=\"value\" data-private={priv} className=\"ms-auto shrink-0 tabular-nums text-muted\">\n              {valueText}\n            </span>\n          )}\n        </Tag>\n      )}\n      <Tag\n        {...rest}\n        ref={tagRef}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-active\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <Tag className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) =>\n              seg.legendOnly ? null : (\n                <Tag\n                  key={seg.key ?? i}\n                  data-part=\"segment\"\n                  className={cn(\n                    \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                    fills[i],\n                  )}\n                  style={{\n                    width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                    backgroundColor: seg.className ? undefined : seg.color,\n                  }}\n                />\n              ),\n            )}\n          </Tag>\n        ) : indeterminate ? (\n          <Tag\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <Tag\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </Tag>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                // Wraps from Large up (text size §10.17, round 0.34 T1); the value\n                // beside it keeps its width.\n                <span className=\"min-w-0 flex-1 truncate-until-large text-secondary\">{seg.label}</span>\n              )}\n              <span\n                data-part=\"legend-value\"\n                data-private={priv}\n                className={cn(\n                  \"ms-auto shrink-0 text-xs tabular-nums\",\n                  toneTextClass(\n                    (typeof legendTone === \"function\" ? legendTone(seg, i) : legendTone) ?? \"muted\",\n                  ),\n                )}\n              >\n                {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {overageNode}\n      {hintNode}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":["text"]}

package/dist/components/reauth-dialog.js

@@ -133,7 +133,7 @@ function ReauthActions({
       {
         type: "submit",
         form: formId,
-        variant: danger ? "danger" : "primary",
+        variant: danger ? "danger" : "default",
         disabled: !canSubmit || busy,
         "aria-busy": busy || void 0,
         children: [