@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, forwardRef, useId, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from \"./ui\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  isOptionEnabled,\n  stepEnabled,\n  useActiveOptionScroll,\n  useComboboxFieldError,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  > {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   *\n   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the\n   * unlabelled field then keeps its end-hint row whether or not a \"?\" is in it, so the\n   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule\n   * the rest of the family has had since 0.23 (and the fields since 0.22).\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n  /**\n   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox\n   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address\n   * search whose taken row writes the address, a lookup that links a record.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no\n   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or\n   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form\n   * around it, and a caller's `onKeyDown` does not hear it; every other key still\n   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in\n   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way with the lock's reason (which wins over its own). A search\n   * whose result is only draft state — the form's Save writes it — leaves this off and\n   * stays live under the lock. No provider, or an unlocked one: no effect.\n   */\n  commit?: boolean;\n}\n\nfunction AutocompleteInner<V extends string | number = string>(\n  props: AutocompleteProps<V>,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    disabledReason,\n    commit,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  } = props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(error, invalid, hintParts.describedBy);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,\n  // so a locked field asks nothing and shows nothing even with `open` held true.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const live = open && !disabled && !locked;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled || locked) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      {/* `\"hint\" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at\n          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so\n          a \"?\" coming and going never re-parents the <input> under the caret (0.24, the\n          last of the family to get it; the siblings had it in 0.23). */}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, hasLabel, hintParts.labelHint)}>\n        {withLock(\n          <div ref={fieldRef} className={cn(\"relative\", locked && \"cursor-not-allowed\")}>\n            {icon && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none absolute flex text-[var(--text-muted)]\",\n                  small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                  // Labelled, the icon sits on the VALUE's line — the one line box below\n                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                  // the box. Centred on the box it rose into the top strip and sat on the\n                  // label's first letters, which float at the same start inset. On the\n                  // value line it is beside what it describes, and the label keeps the\n                  // start edge every other label in the form's column shares.\n                  hasLabel\n                    ? \"top-[calc(1rem+1px)] h-5 items-center\"\n                    : \"top-1/2 -translate-y-1/2\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <input\n              {...rest}\n              ref={ref}\n              id={fieldId}\n              size={nativeSize}\n              type=\"text\"\n              value={value}\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || rest.readOnly}\n              aria-disabled={locked || rest[\"aria-disabled\"]}\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={expanded}\n              // Required by the role, and set while closed too, as on the siblings.\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n              aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              autoComplete=\"off\"\n              onFocus={(e) => {\n                onFocus?.(e);\n                // A locked field takes focus to say why, and opens nothing.\n                if (locked) return;\n                // A seeded field (keksdose's `initialQuery`) is looked up as it is\n                // focused; an empty one asks nothing, because of `minChars`.\n                setOpen(true);\n              }}\n              onBlur={(e) => {\n                onBlur?.(e);\n                close();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                // Locked: Enter is swallowed (no form submit, no caller's \"search now\");\n                // every other key is the caller's and the caret's. No list to drive.\n                if (locked) {\n                  if (e.key === \"Enter\") e.preventDefault();\n                  else onKeyDown?.(e);\n                  return;\n                }\n                // An Escape that closes the OPEN list is the list's, and is consumed before\n                // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n                // address search) otherwise closed the whole panel when the user only meant\n                // to dismiss the suggestions — the opposite of what the docs promised.\n                if (e.key === \"Escape\" && expanded) {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  close();\n                  return;\n                }\n                onKeyDown?.(e);\n                if (e.defaultPrevented) return;\n                // Disabled rows are passed over; at either end the highlight stays put.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  else setActive((i) => stepEnabled(results, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n                } else if (e.key === \"Enter\") {\n                  // No row highlighted: the text is the answer, and a form's own submit\n                  // is left alone.\n                  if (expanded && activeId) {\n                    e.preventDefault();\n                    take(results[active]);\n                  }\n                } else if (e.key === \"Tab\") {\n                  close();\n                }\n              }}\n              className={cn(\n                FIELD_BASE,\n                hasLabel && FIELD_FLOATING_PAD,\n                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n                // cannot grow it.\n                small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n                icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n                busy && (small ? \"pe-7\" : \"pe-9\"),\n                field.isInvalid && FIELD_INVALID,\n                inputClassName,\n              )}\n            />\n            {busy && live && (\n              // Decorative: the live region below already says \"Loading…\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                  small ? \"end-2\" : \"end-2.5\",\n                )}\n              >\n                <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n              </span>\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            className=\"fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            style={{ top, left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            \"flex w-full items-center gap-2 px-3 text-start\",\n                            small ? \"py-1 text-xs\" : \"py-1.5 text-sm\",\n                            o.disabled\n                              ? DISABLED_ROW_CLASS\n                              : i === active\n                                ? \"bg-[var(--bg-active)]\"\n                                : \"hover:bg-[var(--bg-hover)]\",\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-[var(--text-muted)]\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate text-[var(--text-primary)]\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate text-[var(--text-placeholder)]\",\n                                  small ? \"text-[11px]\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n                  results.length > 0 && \"border-t border-[var(--border)] text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nconst AutocompleteBase = forwardRef(AutocompleteInner);\nAutocompleteBase.displayName = \"Autocomplete\";\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport const Autocomplete = AutocompleteBase as <V extends string | number = string>(\n  props: AutocompleteProps<V> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, forwardRef, useId, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from \"./ui\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  isOptionEnabled,\n  stepEnabled,\n  useActiveOptionScroll,\n  useComboboxFieldError,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  > {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   *\n   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the\n   * unlabelled field then keeps its end-hint row whether or not a \"?\" is in it, so the\n   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule\n   * the rest of the family has had since 0.23 (and the fields since 0.22).\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n  /**\n   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox\n   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address\n   * search whose taken row writes the address, a lookup that links a record.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no\n   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or\n   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form\n   * around it, and a caller's `onKeyDown` does not hear it; every other key still\n   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in\n   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way with the lock's reason (which wins over its own). A search\n   * whose result is only draft state — the form's Save writes it — leaves this off and\n   * stays live under the lock. No provider, or an unlocked one: no effect.\n   */\n  commit?: boolean;\n}\n\nfunction AutocompleteInner<V extends string | number = string>(\n  props: AutocompleteProps<V>,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    disabledReason,\n    commit,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  } = props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(error, invalid, hintParts.describedBy);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,\n  // so a locked field asks nothing and shows nothing even with `open` held true.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const live = open && !disabled && !locked;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled || locked) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      {/* `\"hint\" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at\n          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so\n          a \"?\" coming and going never re-parents the <input> under the caret (0.24, the\n          last of the family to get it; the siblings had it in 0.23). */}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, hasLabel, hintParts.labelHint)}>\n        {withLock(\n          <div ref={fieldRef} className={cn(\"relative\", locked && \"cursor-not-allowed\")}>\n            {icon && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none absolute flex text-[var(--text-muted)]\",\n                  small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                  // Labelled, the icon sits on the VALUE's line — the one line box below\n                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                  // the box. Centred on the box it rose into the top strip and sat on the\n                  // label's first letters, which float at the same start inset. On the\n                  // value line it is beside what it describes, and the label keeps the\n                  // start edge every other label in the form's column shares.\n                  hasLabel\n                    ? \"top-[calc(1rem+1px)] h-5 items-center\"\n                    : \"top-1/2 -translate-y-1/2\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <input\n              {...rest}\n              ref={ref}\n              id={fieldId}\n              size={nativeSize}\n              type=\"text\"\n              value={value}\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || rest.readOnly}\n              aria-disabled={locked || rest[\"aria-disabled\"]}\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={expanded}\n              // Required by the role, and set while closed too, as on the siblings.\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n              aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              autoComplete=\"off\"\n              onFocus={(e) => {\n                onFocus?.(e);\n                // A locked field takes focus to say why, and opens nothing.\n                if (locked) return;\n                // A seeded field (keksdose's `initialQuery`) is looked up as it is\n                // focused; an empty one asks nothing, because of `minChars`.\n                setOpen(true);\n              }}\n              onBlur={(e) => {\n                onBlur?.(e);\n                close();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                // Locked: Enter is swallowed (no form submit, no caller's \"search now\");\n                // every other key is the caller's and the caret's. No list to drive.\n                if (locked) {\n                  if (e.key === \"Enter\") e.preventDefault();\n                  else onKeyDown?.(e);\n                  return;\n                }\n                // An Escape that closes the OPEN list is the list's, and is consumed before\n                // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n                // address search) otherwise closed the whole panel when the user only meant\n                // to dismiss the suggestions — the opposite of what the docs promised.\n                if (e.key === \"Escape\" && expanded) {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  close();\n                  return;\n                }\n                onKeyDown?.(e);\n                if (e.defaultPrevented) return;\n                // Disabled rows are passed over; at either end the highlight stays put.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  else setActive((i) => stepEnabled(results, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n                } else if (e.key === \"Enter\") {\n                  // No row highlighted: the text is the answer, and a form's own submit\n                  // is left alone.\n                  if (expanded && activeId) {\n                    e.preventDefault();\n                    take(results[active]);\n                  }\n                } else if (e.key === \"Tab\") {\n                  close();\n                }\n              }}\n              className={cn(\n                FIELD_BASE,\n                hasLabel && FIELD_FLOATING_PAD,\n                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n                // cannot grow it.\n                small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n                icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n                busy && (small ? \"pe-7\" : \"pe-9\"),\n                field.isInvalid && FIELD_INVALID,\n                inputClassName,\n              )}\n            />\n            {busy && live && (\n              // Decorative: the live region below already says \"Loading…\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                  small ? \"end-2\" : \"end-2.5\",\n                )}\n              >\n                <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n              </span>\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            className=\"fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            style={{ top, left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className=\"px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            \"flex w-full items-center gap-2 px-3 text-start\",\n                            small ? \"py-1 text-xs\" : \"py-1.5 text-sm\",\n                            o.disabled\n                              ? DISABLED_ROW_CLASS\n                              : i === active\n                                ? \"bg-[var(--bg-active)]\"\n                                : \"hover:bg-[var(--bg-hover)]\",\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-[var(--text-muted)]\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate text-[var(--text-primary)]\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate text-[var(--text-placeholder)]\",\n                                  small ? \"text-caption\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n                  results.length > 0 && \"border-t border-[var(--border)] text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nconst AutocompleteBase = forwardRef(AutocompleteInner);\nAutocompleteBase.displayName = \"Autocomplete\";\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport const Autocomplete = AutocompleteBase as <V extends string | number = string>(\n  props: AutocompleteProps<V> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null;\n"],"mappings":"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","names":[]}

package/dist/components/breadcrumbs.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
 const DEFAULT_BREADCRUMBS_LABELS = {
@@ -37,7 +38,7 @@ function Breadcrumbs({
   const collapsible = collapse && !expanded && firstKept - 1 >= 2;
   const isHidden = (i) => collapsible && i >= 1 && i < firstKept;
   const sep = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 items-center text-[var(--text-placeholder)]", children: separator ?? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 rtl:-scale-x-100" }) });
-  const linkClass = "block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]";
+  const linkClass = cn("block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)]", FOCUS_RING);
   return /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": ariaLabel ?? labels.label, className: cn("min-w-0 text-sm", className), children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]", children: items.map((item, i) => {
     const last = i === items.length - 1;
     const key = item.key ?? (typeof item.label === "string" ? `${i}-${item.label}` : String(i));
@@ -64,7 +65,7 @@ function Breadcrumbs({
             },
             "aria-label": labels.showAll,
             "aria-expanded": false,
-            className: "flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+            className: cn("flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)]", FOCUS_RING),
             children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": true })
           }
         )

package/dist/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const kitLink = useKitLink();\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass =\n    \"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            const kit = pickLinkRenderer<BreadcrumbLinkProps>(undefined, kitLink, item.href);\n            content = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className=\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const kitLink = useKitLink();\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass = cn(\"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)]\", FOCUS_RING);\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            const kit = pickLinkRenderer<BreadcrumbLinkProps>(undefined, kitLink, item.href);\n            content = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className={cn(\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)]\", FOCUS_RING)}\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/bulk-action-bar.d.ts

@@ -22,8 +22,8 @@ type BulkActionBarVariant = "floating" | "sticky" | "inline";
 /**
  * A variant per breakpoint, mobile first — `{ base: "floating", md: "sticky" }` is the
  * phone's floating card below 768px and the desktop's sticky bar from there up. The
- * breakpoints are Tailwind's (sm 640, md 768, lg 1024, xl 1280px), the ones the kit's
- * classes already use. keksdose's payees selection bar (payees-selection-bar.tsx)
+ * breakpoints are the ones the kit's classes use (sm 640, md 768, lg 1024, xl 1280px
+ * at Normal text size; since 0.32 they move with the text size, as `md:` does). keksdose's payees selection bar (payees-selection-bar.tsx)
  * computes exactly this with its own `useMediaQuery("(min-width: 768px)")`; every bar
  * that is a card on a phone and a strip on a desktop would repeat it.
  *

package/dist/components/bulk-action-bar.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useAnnounce } from "../hooks/use-announce.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { OVERLAY_EXIT_MS, prefersReducedMotion } from "../hooks/use-close-transition.js";
 import { Button, IconButton } from "./ui.js";
 const DEFAULT_BULK_ACTION_BAR_LABELS = {
@@ -14,21 +14,16 @@ const DEFAULT_BULK_ACTION_BAR_LABELS = {
   clear: "Clear selection",
   cleared: "Selection cleared"
 };
-const BREAKPOINTS = [
-  ["xl", "(min-width: 1280px)"],
-  ["lg", "(min-width: 1024px)"],
-  ["md", "(min-width: 768px)"],
-  ["sm", "(min-width: 640px)"]
-];
+const BREAKPOINTS = ["xl", "lg", "md", "sm"];
 function useResolvedVariant(variant) {
   const matches = {
-    xl: useMediaQuery(BREAKPOINTS[0][1], false),
-    lg: useMediaQuery(BREAKPOINTS[1][1], false),
-    md: useMediaQuery(BREAKPOINTS[2][1], false),
-    sm: useMediaQuery(BREAKPOINTS[3][1], false)
+    xl: useBreakpoint("xl"),
+    lg: useBreakpoint("lg"),
+    md: useBreakpoint("md"),
+    sm: useBreakpoint("sm")
   };
   if (typeof variant === "string") return variant;
-  for (const [key] of BREAKPOINTS) {
+  for (const key of BREAKPOINTS) {
     const v = variant[key];
     if (matches[key] && v !== void 0) return v;
   }

package/dist/components/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/bulk-action-bar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { OVERLAY_EXIT_MS, prefersReducedMotion } from \"../hooks/use-close-transition\";\nimport { Button, IconButton } from \"./ui\";\n\nexport interface BulkActionBarLabels {\n  /** The count, shown in the bar, spoken by its live region and used as the toolbar's\n   *  name: \"3 selected\". */\n  selected: (count: number) => string;\n  /** The clear/cancel action's name — the X of the floating bar, the text button of the\n   *  others. */\n  clear: string;\n  /** Spoken when the selection empties and the bar goes. */\n  cleared: string;\n}\n\nexport const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {\n  selected: (count) => `${count} selected`,\n  clear: \"Clear selection\",\n  cleared: \"Selection cleared\",\n};\n\n/**\n * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the\n * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the\n * desktop's: pinned to the top of its scroll container, over the rows it acts on.\n * `inline` — in the flow, where the caller places it.\n */\nexport type BulkActionBarVariant = \"floating\" | \"sticky\" | \"inline\";\n\n/**\n * A variant per breakpoint, mobile first — `{ base: \"floating\", md: \"sticky\" }` is the\n * phone's floating card below 768px and the desktop's sticky bar from there up. The\n * breakpoints are Tailwind's (sm 640, md 768, lg 1024, xl 1280px), the ones the kit's\n * classes already use. keksdose's payees selection bar (payees-selection-bar.tsx)\n * computes exactly this with its own `useMediaQuery(\"(min-width: 768px)\")`; every bar\n * that is a card on a phone and a strip on a desktop would repeat it.\n *\n * Resolved in JS rather than with `md:` classes because the variants differ in more\n * than classes: the floating bar's clear is an icon at the start, the others' a text\n * button at the end, and the floating bar is positioned by inline style.\n */\nexport interface ResponsiveBulkActionBarVariant {\n  base: BulkActionBarVariant;\n  sm?: BulkActionBarVariant;\n  md?: BulkActionBarVariant;\n  lg?: BulkActionBarVariant;\n  xl?: BulkActionBarVariant;\n}\n\nconst BREAKPOINTS = [\n  [\"xl\", \"(min-width: 1280px)\"],\n  [\"lg\", \"(min-width: 1024px)\"],\n  [\"md\", \"(min-width: 768px)\"],\n  [\"sm\", \"(min-width: 640px)\"],\n] as const;\n\n/** The variant in force: the widest breakpoint that matches AND names one, else\n *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —\n *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)\n *  every query is false, so the bar renders its `base`, the phone's, first. */\nfunction useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {\n  const matches = {\n    xl: useMediaQuery(BREAKPOINTS[0][1], false),\n    lg: useMediaQuery(BREAKPOINTS[1][1], false),\n    md: useMediaQuery(BREAKPOINTS[2][1], false),\n    sm: useMediaQuery(BREAKPOINTS[3][1], false),\n  };\n  if (typeof variant === \"string\") return variant;\n  for (const [key] of BREAKPOINTS) {\n    const v = variant[key];\n    if (matches[key] && v !== undefined) return v;\n  }\n  return variant.base;\n}\n\nexport interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\" | \"children\"> {\n  /** How many items are selected. The bar shows only while this is above zero —\n   *  unless {@link open} says otherwise. */\n  count: number;\n  /**\n   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked\n   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as\n   * before.\n   *\n   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a\n   * \"Select\" button, and the bar must be there at \"0 selected\" to hold the way out and\n   * a \"Select all\" (pass it as a child); gated on the count, the bar appeared only at\n   * the first tick, and the user who pressed \"Select\" saw nothing happen. The exit plays\n   * when it closes either way, and the count is still announced on every change.\n   */\n  open?: boolean;\n  /** Clear the selection / leave selection mode. */\n  onClear: () => void;\n  /**\n   * The actions: buttons (`IconButton size=\"lg\"` on a phone, `Button` from md up),\n   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.\n   *\n   * LINKS rove too (keksdose F8): a `<Button href>` — \"View report\", which navigates\n   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place\n   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled\n   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any\n   * other focusable of your own joins with `data-toolbar-item`.\n   */\n  children?: ReactNode;\n  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per\n   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */\n  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;\n  /**\n   * Content BELOW the toolbar row, inside the same surface — the same floating card or\n   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops\n   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's\n   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —\n   * a category picker, an exclude checkbox, Apply — under the count and the clear; a\n   * form is not a toolbar's content (`role=\"toolbar\"` promises one arrow-key widget),\n   * and set beside the bar it lost the sticky tint and scrolled away from it.\n   *\n   * On the floating variant the panel scrolls within 60% of the viewport's height, so a\n   * long form on a phone cannot push the bar off the top of the screen.\n   */\n  panel?: ReactNode;\n  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */\n  labels?: Partial<BulkActionBarLabels>;\n}\n\n/** Where the floating bar sits: clear of the phone nav and of the home indicator,\n *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.\n *  Set as inline style, so reposition it through `style` (which is merged over this,\n *  e.g. `style={{ insetInline: \"auto 2rem\", width: \"24rem\" }}`), not `className`. */\nconst FLOATING_STYLE: CSSProperties = {\n  bottom: \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)\",\n  // Both insets on both sides: a logical side has no one physical inset to name, and\n  // the bar is symmetric, so RTL needs nothing more.\n  insetInline: \"max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\",\n};\n\n/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by\n *  `tabindex`, because the roving below sets every one but the current to `-1` — a\n *  custom control joins with `data-toolbar-item`.\n *\n *  `a[href]` is here on purpose (keksdose F8, a \"View report\" `Button href` in the bar):\n *  a link in a toolbar is a toolbar item like any other, and left out it would keep its\n *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`\n *  WITHOUT one, and is skipped as a disabled button is. */\nconst ITEMS =\n  \"button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]\";\n\n/** Keys a text field needs for itself — the toolbar must not take its caret away. */\nfunction ownsArrows(el: Element): boolean {\n  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;\n  if (el instanceof HTMLInputElement) return ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\"].includes(el.type);\n  return (el as HTMLElement).isContentEditable;\n}\n\n/**\n * The bar that appears while rows are selected: the count, a way out, and what can be\n * done to all of them at once.\n *\n * keksdose had written it three times — the transactions phone bar\n * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars\n * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had\n * drifted where it matters: two parked themselves with a guessed `bottom-16` that the\n * third had already found leaves a 24px gap (live #314: the nav is content-sized and\n * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,\n * and all three were `role=\"toolbar\"` without the arrow keys that role promises.\n *\n * ## Keep it mounted\n *\n * Render it unconditionally and let `count` decide. At zero it renders only its live\n * region — which must already be in the DOM for the first \"3 selected\" to be heard —\n * and when the count drops to zero it plays its exit before it goes, which a\n * `{count > 0 && <Bar/>}` gate would cut off.\n *\n * ## The toolbar\n *\n * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab\n * leaves — the WAI-ARIA toolbar pattern, since that is what `role=\"toolbar\"` tells a\n * screen reader to expect. The stop remembers the control last used. Arrow keys inside\n * a text field stay the field's.\n *\n * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,\n * because tapping more rows is how a selection grows.\n */\nexport function BulkActionBar({\n  count,\n  onClear,\n  children,\n  variant: variantProp = \"floating\",\n  open,\n  panel,\n  labels: labelsProp,\n  className,\n  style,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: BulkActionBarProps) {\n  const labels = useKitLabels(\"bulkActionBar\", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const barRef = useRef<HTMLDivElement>(null);\n  const variant = useResolvedVariant(variantProp);\n  const shown = open ?? count > 0;\n\n  // The count the bar last SHOWED, so a bar lowering itself after \"clear\" still reads\n  // \"3 selected\" on its way out rather than \"0 selected\". Adjusted during render\n  // (`Collapse`'s pattern), as is the exit below.\n  const [shownCount, setShownCount] = useState(count);\n  const [leaving, setLeaving] = useState(false);\n  const [prev, setPrev] = useState({ count, shown });\n  if (count !== prev.count || shown !== prev.shown) {\n    setPrev({ count, shown });\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else if (prev.shown) {\n      setLeaving(!prefersReducedMotion());\n    }\n  }\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [leaving]);\n\n  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected\n  // was not the result of anything the user just did.\n  const spoken = useRef(count);\n  useEffect(() => {\n    if (spoken.current === count) return;\n    spoken.current = count;\n    // In selection mode the bar stays at zero, so zero is a count like any other.\n    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);\n  }, [count, shown, labels, announce]);\n\n  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM\n  // rather than through props: after every render the remembered control (or the\n  // first) is the one with `tabindex=0`, every other one `-1`.\n  const active = useRef<HTMLElement | null>(null);\n  // Every render: the caller's controls come and go (a \"remove added\" that exists\n  // only while some are removable), and a stop on a control that left must move on.\n  useLayoutEffect(() => {\n    rove(barRef.current, active);\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;\n    const list = itemsOf(barRef.current);\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    if (at === -1 || list.length === 0) return;\n    const step = horizontalStep(e.key, barRef.current);\n    let next = -1;\n    if (step !== 0) next = (at + step + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === -1) return;\n    e.preventDefault();\n    active.current = list[next];\n    rove(barRef.current, active);\n    list[next].focus();\n  };\n\n  if (!shown && !leaving) {\n    return <span {...regionProps} />;\n  }\n\n  const floating = variant === \"floating\";\n  const clear = floating ? (\n    <IconButton size=\"lg\" onClick={onClear} aria-label={labels.clear}>\n      <X />\n    </IconButton>\n  ) : (\n    // `ms-auto`: when the actions wrap, the way out still sits at the bar's end.\n    <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={onClear} className=\"ms-auto\">\n      {labels.clear}\n    </Button>\n  );\n\n  const hasPanel = panel !== undefined && panel !== null && panel !== false;\n  // The surface — where the bar sits and what it looks like — and the toolbar row's\n  // own layout. Without a panel they are one element, exactly as before 0.11.0; with\n  // one the surface wraps the row and the panel, so both share its tint and position.\n  const surfaceClass = floating\n    ? cn(\n        \"fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        shown ? \"animate-sheet\" : \"animate-sheet-out\",\n      )\n    : cn(\n        variant === \"sticky\" &&\n          \"sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur\",\n        shown ? \"animate-overlay\" : \"animate-overlay-out\",\n      );\n  // `flex-wrap`: on a phone the count, three actions and a text \"Clear selection\" are\n  // wider than the screen. Without wrapping the count (the one shrinkable item)\n  // collapsed to a sliver and the rest ran out of the bar; wrapped, the actions that do\n  // not fit move to a second line and every label stays whole.\n  const rowClass = cn(\"flex flex-wrap items-center\", floating ? \"gap-1 px-2 py-1\" : \"gap-2 px-3 py-2\");\n  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;\n\n  const toolbar = (\n    <div\n      {...(hasPanel ? null : rest)}\n      ref={barRef}\n      role=\"toolbar\"\n      aria-label={labels.selected(shownCount)}\n      aria-orientation=\"horizontal\"\n      data-bulk-action-bar={hasPanel ? undefined : variant}\n      // Leaving: out of the tab order and the accessibility tree at once, while the\n      // bar still animates. The selection it acted on is already gone.\n      inert={(!hasPanel && !shown) || undefined}\n      onKeyDown={handleKeyDown}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // Clicking a control is using it: the stop follows the pointer too.\n        const hit = itemsOf(barRef.current).find((el) => el === e.target);\n        if (hit) {\n          active.current = hit;\n          rove(barRef.current, active);\n        }\n      }}\n      style={hasPanel ? undefined : surfaceStyle}\n      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}\n    >\n      {floating && clear}\n      {/* `flex-auto`, not `flex-1`: a zero basis told the wrapping that the count needs\n          no room, so it was the item squeezed to nothing instead of a line breaking.\n          Its own width is its basis now; `truncate` is left for a label too long for a\n          line on its own. */}\n      <span className=\"min-w-0 flex-auto truncate text-sm font-medium text-[var(--text-primary)]\">\n        {labels.selected(shownCount)}\n      </span>\n      {/* `contents`, so the caller's controls are flex items of the bar itself. */}\n      <div className=\"contents\">{children}</div>\n      {!floating && clear}\n    </div>\n  );\n\n  return (\n    <>\n      <span {...regionProps} />\n      {hasPanel ? (\n        <div\n          {...rest}\n          data-bulk-action-bar={variant}\n          inert={!shown || undefined}\n          style={surfaceStyle}\n          className={cn(\"flex flex-col\", surfaceClass, className)}\n        >\n          {toolbar}\n          <div\n            data-bulk-action-bar-panel=\"\"\n            className={cn(\n              \"border-t border-[var(--border)] px-3 py-3\",\n              floating && \"max-h-[60dvh] overflow-y-auto\",\n            )}\n          >\n            {panel}\n          </div>\n        </div>\n      ) : (\n        toolbar\n      )}\n    </>\n  );\n}\n\nfunction itemsOf(bar: HTMLElement | null): HTMLElement[] {\n  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];\n}\n\n/** Put the one Tab stop on the remembered control — or the first, when that one has\n *  gone or was never set — and take it off every other. */\nfunction rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {\n  const list = itemsOf(bar);\n  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;\n  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/bulk-action-bar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { OVERLAY_EXIT_MS, prefersReducedMotion } from \"../hooks/use-close-transition\";\nimport { Button, IconButton } from \"./ui\";\n\nexport interface BulkActionBarLabels {\n  /** The count, shown in the bar, spoken by its live region and used as the toolbar's\n   *  name: \"3 selected\". */\n  selected: (count: number) => string;\n  /** The clear/cancel action's name — the X of the floating bar, the text button of the\n   *  others. */\n  clear: string;\n  /** Spoken when the selection empties and the bar goes. */\n  cleared: string;\n}\n\nexport const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {\n  selected: (count) => `${count} selected`,\n  clear: \"Clear selection\",\n  cleared: \"Selection cleared\",\n};\n\n/**\n * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the\n * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the\n * desktop's: pinned to the top of its scroll container, over the rows it acts on.\n * `inline` — in the flow, where the caller places it.\n */\nexport type BulkActionBarVariant = \"floating\" | \"sticky\" | \"inline\";\n\n/**\n * A variant per breakpoint, mobile first — `{ base: \"floating\", md: \"sticky\" }` is the\n * phone's floating card below 768px and the desktop's sticky bar from there up. The\n * breakpoints are the ones the kit's classes use (sm 640, md 768, lg 1024, xl 1280px\n * at Normal text size; since 0.32 they move with the text size, as `md:` does). keksdose's payees selection bar (payees-selection-bar.tsx)\n * computes exactly this with its own `useMediaQuery(\"(min-width: 768px)\")`; every bar\n * that is a card on a phone and a strip on a desktop would repeat it.\n *\n * Resolved in JS rather than with `md:` classes because the variants differ in more\n * than classes: the floating bar's clear is an icon at the start, the others' a text\n * button at the end, and the floating bar is positioned by inline style.\n */\nexport interface ResponsiveBulkActionBarVariant {\n  base: BulkActionBarVariant;\n  sm?: BulkActionBarVariant;\n  md?: BulkActionBarVariant;\n  lg?: BulkActionBarVariant;\n  xl?: BulkActionBarVariant;\n}\n\n/** Widest first: the first that matches and names a value wins. Each is the class's own\n *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */\nconst BREAKPOINTS = [\"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/** The variant in force: the widest breakpoint that matches AND names one, else\n *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —\n *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)\n *  every query is false, so the bar renders its `base`, the phone's, first. */\nfunction useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {\n  const matches = {\n    xl: useBreakpoint(\"xl\"),\n    lg: useBreakpoint(\"lg\"),\n    md: useBreakpoint(\"md\"),\n    sm: useBreakpoint(\"sm\"),\n  };\n  if (typeof variant === \"string\") return variant;\n  for (const key of BREAKPOINTS) {\n    const v = variant[key];\n    if (matches[key] && v !== undefined) return v;\n  }\n  return variant.base;\n}\n\nexport interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\" | \"children\"> {\n  /** How many items are selected. The bar shows only while this is above zero —\n   *  unless {@link open} says otherwise. */\n  count: number;\n  /**\n   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked\n   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as\n   * before.\n   *\n   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a\n   * \"Select\" button, and the bar must be there at \"0 selected\" to hold the way out and\n   * a \"Select all\" (pass it as a child); gated on the count, the bar appeared only at\n   * the first tick, and the user who pressed \"Select\" saw nothing happen. The exit plays\n   * when it closes either way, and the count is still announced on every change.\n   */\n  open?: boolean;\n  /** Clear the selection / leave selection mode. */\n  onClear: () => void;\n  /**\n   * The actions: buttons (`IconButton size=\"lg\"` on a phone, `Button` from md up),\n   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.\n   *\n   * LINKS rove too (keksdose F8): a `<Button href>` — \"View report\", which navigates\n   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place\n   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled\n   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any\n   * other focusable of your own joins with `data-toolbar-item`.\n   */\n  children?: ReactNode;\n  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per\n   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */\n  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;\n  /**\n   * Content BELOW the toolbar row, inside the same surface — the same floating card or\n   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops\n   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's\n   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —\n   * a category picker, an exclude checkbox, Apply — under the count and the clear; a\n   * form is not a toolbar's content (`role=\"toolbar\"` promises one arrow-key widget),\n   * and set beside the bar it lost the sticky tint and scrolled away from it.\n   *\n   * On the floating variant the panel scrolls within 60% of the viewport's height, so a\n   * long form on a phone cannot push the bar off the top of the screen.\n   */\n  panel?: ReactNode;\n  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */\n  labels?: Partial<BulkActionBarLabels>;\n}\n\n/** Where the floating bar sits: clear of the phone nav and of the home indicator,\n *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.\n *  Set as inline style, so reposition it through `style` (which is merged over this,\n *  e.g. `style={{ insetInline: \"auto 2rem\", width: \"24rem\" }}`), not `className`. */\nconst FLOATING_STYLE: CSSProperties = {\n  bottom: \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)\",\n  // Both insets on both sides: a logical side has no one physical inset to name, and\n  // the bar is symmetric, so RTL needs nothing more.\n  insetInline: \"max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\",\n};\n\n/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by\n *  `tabindex`, because the roving below sets every one but the current to `-1` — a\n *  custom control joins with `data-toolbar-item`.\n *\n *  `a[href]` is here on purpose (keksdose F8, a \"View report\" `Button href` in the bar):\n *  a link in a toolbar is a toolbar item like any other, and left out it would keep its\n *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`\n *  WITHOUT one, and is skipped as a disabled button is. */\nconst ITEMS =\n  \"button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]\";\n\n/** Keys a text field needs for itself — the toolbar must not take its caret away. */\nfunction ownsArrows(el: Element): boolean {\n  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;\n  if (el instanceof HTMLInputElement) return ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\"].includes(el.type);\n  return (el as HTMLElement).isContentEditable;\n}\n\n/**\n * The bar that appears while rows are selected: the count, a way out, and what can be\n * done to all of them at once.\n *\n * keksdose had written it three times — the transactions phone bar\n * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars\n * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had\n * drifted where it matters: two parked themselves with a guessed `bottom-16` that the\n * third had already found leaves a 24px gap (live #314: the nav is content-sized and\n * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,\n * and all three were `role=\"toolbar\"` without the arrow keys that role promises.\n *\n * ## Keep it mounted\n *\n * Render it unconditionally and let `count` decide. At zero it renders only its live\n * region — which must already be in the DOM for the first \"3 selected\" to be heard —\n * and when the count drops to zero it plays its exit before it goes, which a\n * `{count > 0 && <Bar/>}` gate would cut off.\n *\n * ## The toolbar\n *\n * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab\n * leaves — the WAI-ARIA toolbar pattern, since that is what `role=\"toolbar\"` tells a\n * screen reader to expect. The stop remembers the control last used. Arrow keys inside\n * a text field stay the field's.\n *\n * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,\n * because tapping more rows is how a selection grows.\n */\nexport function BulkActionBar({\n  count,\n  onClear,\n  children,\n  variant: variantProp = \"floating\",\n  open,\n  panel,\n  labels: labelsProp,\n  className,\n  style,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: BulkActionBarProps) {\n  const labels = useKitLabels(\"bulkActionBar\", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const barRef = useRef<HTMLDivElement>(null);\n  const variant = useResolvedVariant(variantProp);\n  const shown = open ?? count > 0;\n\n  // The count the bar last SHOWED, so a bar lowering itself after \"clear\" still reads\n  // \"3 selected\" on its way out rather than \"0 selected\". Adjusted during render\n  // (`Collapse`'s pattern), as is the exit below.\n  const [shownCount, setShownCount] = useState(count);\n  const [leaving, setLeaving] = useState(false);\n  const [prev, setPrev] = useState({ count, shown });\n  if (count !== prev.count || shown !== prev.shown) {\n    setPrev({ count, shown });\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else if (prev.shown) {\n      setLeaving(!prefersReducedMotion());\n    }\n  }\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [leaving]);\n\n  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected\n  // was not the result of anything the user just did.\n  const spoken = useRef(count);\n  useEffect(() => {\n    if (spoken.current === count) return;\n    spoken.current = count;\n    // In selection mode the bar stays at zero, so zero is a count like any other.\n    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);\n  }, [count, shown, labels, announce]);\n\n  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM\n  // rather than through props: after every render the remembered control (or the\n  // first) is the one with `tabindex=0`, every other one `-1`.\n  const active = useRef<HTMLElement | null>(null);\n  // Every render: the caller's controls come and go (a \"remove added\" that exists\n  // only while some are removable), and a stop on a control that left must move on.\n  useLayoutEffect(() => {\n    rove(barRef.current, active);\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;\n    const list = itemsOf(barRef.current);\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    if (at === -1 || list.length === 0) return;\n    const step = horizontalStep(e.key, barRef.current);\n    let next = -1;\n    if (step !== 0) next = (at + step + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === -1) return;\n    e.preventDefault();\n    active.current = list[next];\n    rove(barRef.current, active);\n    list[next].focus();\n  };\n\n  if (!shown && !leaving) {\n    return <span {...regionProps} />;\n  }\n\n  const floating = variant === \"floating\";\n  const clear = floating ? (\n    <IconButton size=\"lg\" onClick={onClear} aria-label={labels.clear}>\n      <X />\n    </IconButton>\n  ) : (\n    // `ms-auto`: when the actions wrap, the way out still sits at the bar's end.\n    <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={onClear} className=\"ms-auto\">\n      {labels.clear}\n    </Button>\n  );\n\n  const hasPanel = panel !== undefined && panel !== null && panel !== false;\n  // The surface — where the bar sits and what it looks like — and the toolbar row's\n  // own layout. Without a panel they are one element, exactly as before 0.11.0; with\n  // one the surface wraps the row and the panel, so both share its tint and position.\n  const surfaceClass = floating\n    ? cn(\n        \"fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        shown ? \"animate-sheet\" : \"animate-sheet-out\",\n      )\n    : cn(\n        variant === \"sticky\" &&\n          \"sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur\",\n        shown ? \"animate-overlay\" : \"animate-overlay-out\",\n      );\n  // `flex-wrap`: on a phone the count, three actions and a text \"Clear selection\" are\n  // wider than the screen. Without wrapping the count (the one shrinkable item)\n  // collapsed to a sliver and the rest ran out of the bar; wrapped, the actions that do\n  // not fit move to a second line and every label stays whole.\n  const rowClass = cn(\"flex flex-wrap items-center\", floating ? \"gap-1 px-2 py-1\" : \"gap-2 px-3 py-2\");\n  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;\n\n  const toolbar = (\n    <div\n      {...(hasPanel ? null : rest)}\n      ref={barRef}\n      role=\"toolbar\"\n      aria-label={labels.selected(shownCount)}\n      aria-orientation=\"horizontal\"\n      data-bulk-action-bar={hasPanel ? undefined : variant}\n      // Leaving: out of the tab order and the accessibility tree at once, while the\n      // bar still animates. The selection it acted on is already gone.\n      inert={(!hasPanel && !shown) || undefined}\n      onKeyDown={handleKeyDown}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // Clicking a control is using it: the stop follows the pointer too.\n        const hit = itemsOf(barRef.current).find((el) => el === e.target);\n        if (hit) {\n          active.current = hit;\n          rove(barRef.current, active);\n        }\n      }}\n      style={hasPanel ? undefined : surfaceStyle}\n      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}\n    >\n      {floating && clear}\n      {/* `flex-auto`, not `flex-1`: a zero basis told the wrapping that the count needs\n          no room, so it was the item squeezed to nothing instead of a line breaking.\n          Its own width is its basis now; `truncate` is left for a label too long for a\n          line on its own. */}\n      <span className=\"min-w-0 flex-auto truncate text-sm font-medium text-[var(--text-primary)]\">\n        {labels.selected(shownCount)}\n      </span>\n      {/* `contents`, so the caller's controls are flex items of the bar itself. */}\n      <div className=\"contents\">{children}</div>\n      {!floating && clear}\n    </div>\n  );\n\n  return (\n    <>\n      <span {...regionProps} />\n      {hasPanel ? (\n        <div\n          {...rest}\n          data-bulk-action-bar={variant}\n          inert={!shown || undefined}\n          style={surfaceStyle}\n          className={cn(\"flex flex-col\", surfaceClass, className)}\n        >\n          {toolbar}\n          <div\n            data-bulk-action-bar-panel=\"\"\n            className={cn(\n              \"border-t border-[var(--border)] px-3 py-3\",\n              floating && \"max-h-[60dvh] overflow-y-auto\",\n            )}\n          >\n            {panel}\n          </div>\n        </div>\n      ) : (\n        toolbar\n      )}\n    </>\n  );\n}\n\nfunction itemsOf(bar: HTMLElement | null): HTMLElement[] {\n  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];\n}\n\n/** Put the one Tab stop on the remembered control — or the first, when that one has\n *  gone or was never set — and take it off every other. */\nfunction rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {\n  const list = itemsOf(bar);\n  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;\n  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;\n}\n"],"mappings":"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","names":[]}

package/dist/components/button-group.d.ts

@@ -1,17 +1,19 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { bH as ButtonVariant, bF as ButtonSize } from '../delete-account-setting-CpIhzxxZ.js';
+import { bO as ButtonVariant, bM as ButtonSize } from '../delete-account-setting-FLyJf-kZ.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -80,6 +82,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -93,7 +98,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
 
 interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —

package/dist/components/button-group.js

@@ -15,6 +15,11 @@ const JOINED_COMMON = cn(
   // the next one's background.
   "[&>*]:relative [&>*:focus-within]:z-10"
 );
+const JOINED_WRAP_AT_LARGE = cn(
+  "large:max-w-full large:flex-wrap large:border-0 large:ps-px large:pt-px",
+  "large:[&>*]:border large:[&>*]:-ms-px large:[&>*]:-mt-px",
+  "large:[&>*]:grow large:[&>*>button]:grow large:[&>*>a]:grow"
+);
 const JOINED = {
   // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the
   // first member sits on the right with the right-hand corners rounded — the physical
@@ -25,7 +30,8 @@ const JOINED = {
     "[&>*:not(:first-child)]:border-s",
     "[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md",
     "[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md",
-    "[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md"
+    "[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md",
+    JOINED_WRAP_AT_LARGE
   ),
   // The block axis is top-to-bottom in both reading directions, so top/bottom are
   // already the logical edges here.

package/dist/components/button-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonClasses, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it. The same again for an\n// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a\n// tooltip. A bare link is a direct child and needs nothing extra.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n    \"[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md\",\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n    \"[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md\",\n  ),\n};\n\n// `gapped`: the members keep their own shape — round overlay discs, each its own\n// border and radius — and sit apart. Nothing is stripped, so there is nothing to\n// restore per edge, and the gap is logical by nature.\nconst GAPPED: Record<\"horizontal\" | \"vertical\", string> = {\n  horizontal: \"inline-flex flex-row items-center gap-1\",\n  vertical: \"inline-flex flex-col items-center gap-1\",\n};\n\n// `elevated`, joined: the frame itself floats — a filled surface under the members (a\n// ghost member would otherwise show the content through it) and the shadow of a\n// control lifted over the page.\nconst ELEVATED_JOINED = \"bg-[var(--bg-surface)] shadow-lg\";\n// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the\n// control, not the tooltip's square wrapper span, whose shadow would be a box round a\n// round disc.\nconst ELEVATED_GAPPED =\n  \"[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md\";\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:\n   * separate controls with a small gap, each keeping its own shape — the overlay\n   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +\n   * `IconButton variant=\"overlay\"` in a hand-made `flex gap-1`), where a joined frame\n   * would be a box drawn over the photo.\n   */\n  variant?: \"joined\" | \"gapped\";\n  /**\n   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's\n   * zoom, a photo's controls) rather than in the page's flow — keksdose adds\n   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the\n   * frame is filled and shadowed; on a gapped one, each member.\n   */\n  elevated?: boolean;\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({\n  orientation = \"horizontal\",\n  variant = \"joined\",\n  elevated = false,\n  className,\n  ...rest\n}: ButtonGroupProps) {\n  const joined = variant === \"joined\";\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      data-variant={variant}\n      className={cn(\n        joined ? JOINED[orientation] : GAPPED[orientation],\n        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),\n        className,\n      )}\n    />\n  );\n}\n\n/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ButtonGroupLinkRenderProps {\n  href: string;\n  /** The button look — keep it, or the member is a bare link in the frame. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"page\";\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"className\" | \"children\"> {\n  href: string;\n  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The member for the page you are on: `aria-current=\"page\"` and the \"on\" look of a\n   *  pressed member, so a link row reads as a segmented switch between pages. */\n  current?: boolean;\n  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.\n   *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */\n  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst LINK_CURRENT = \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\";\n\n/**\n * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it\n * joins the frame like one. A group mixing actions and pages — \"Export\" beside \"Open\n * report\" — had to either make the page a button with an `onClick` navigate (no\n * middle-click, no \"open in new tab\", no link semantics) or style an `<a>` whose\n * corners the group did not know about. Plain `<a>` by default; `renderLink` for the\n * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).\n */\nexport function ButtonGroupLink({\n  href,\n  variant = \"secondary\",\n  size,\n  current = false,\n  renderLink,\n  className,\n  children,\n  ...rest\n}: ButtonGroupLinkProps) {\n  const kitLink = useKitLink();\n  const props: ButtonGroupLinkRenderProps = {\n    ...rest,\n    href,\n    \"aria-current\": current ? \"page\" : undefined,\n    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),\n    children,\n  };\n  const render = pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedGroupLink render={render} {...props} />;\n  const { children: content, ...anchor } = props;\n  return <a {...anchor}>{content}</a>;\n}\n\n/** Calls `renderLink` as a component, so the router link's hooks are its own. */\nfunction RenderedGroupLink({\n  render,\n  ...props\n}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAmHI;AAlHJ,SAAS,UAAU;AACnB,SAAS,qBAA0D;AACnE,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAYjC,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAKA,MAAM,SAAoD;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AACZ;AAKA,MAAM,kBAAkB;AAIxB,MAAM,kBACJ;AAsCK,SAAS,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,SAAS,OAAO,WAAW,IAAI,OAAO,WAAW;AAAA,QACjD,aAAa,SAAS,kBAAkB;AAAA,QACxC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAgCA,MAAM,eAAe;AAUd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,WAAW;AAC3B,QAAM,QAAoC;AAAA,IACxC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,UAAU,SAAS;AAAA,IACnC,WAAW,cAAc,SAAS,EAAE,MAAM,WAAW,GAAG,WAAW,cAAc,SAAS,EAAE,CAAC;AAAA,IAC7F;AAAA,EACF;AACA,QAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,MAAI,OAAQ,QAAO,oBAAC,qBAAkB,QAAiB,GAAG,OAAO;AACjE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SAAO,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AACjC;AAGA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonClasses, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it. The same again for an\n// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a\n// tooltip. A bare link is a direct child and needs nothing extra.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\n/**\n * A joined row at Large and Extra large wraps rather than run past its container (0.32.1,\n * the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing\n * overflows\"): \"Buttons | Chips | Feedback\" was 329 px at 150 %, 67 px past a 360 px\n * phone's card. A wrapped row cannot keep one frame with dividers between members — the\n * second line's first member would carry a divider against the frame and no line would\n * part the rows — so at Large the frame is drawn by the members: each its own 1px\n * border, overlapping its neighbours by a pixel on both axes (the container's `ps-px\n * pt-px` takes the overlap back at the edges). On one row that draws the same frame and\n * dividers as Normal; wrapped, every line and every member is parted by one hairline,\n * and the members share out each line (`grow`), so the lines make one block. A group\n * that fits is only as wide as its members, so nothing grows there. A `large:` class,\n * so Normal keeps the frame it has, and it costs no render.\n */\nconst JOINED_WRAP_AT_LARGE = cn(\n  \"large:max-w-full large:flex-wrap large:border-0 large:ps-px large:pt-px\",\n  \"large:[&>*]:border large:[&>*]:-ms-px large:[&>*]:-mt-px\",\n  \"large:[&>*]:grow large:[&>*>button]:grow large:[&>*>a]:grow\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n    \"[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md\",\n    JOINED_WRAP_AT_LARGE,\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n    \"[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md\",\n  ),\n};\n\n// `gapped`: the members keep their own shape — round overlay discs, each its own\n// border and radius — and sit apart. Nothing is stripped, so there is nothing to\n// restore per edge, and the gap is logical by nature.\nconst GAPPED: Record<\"horizontal\" | \"vertical\", string> = {\n  horizontal: \"inline-flex flex-row items-center gap-1\",\n  vertical: \"inline-flex flex-col items-center gap-1\",\n};\n\n// `elevated`, joined: the frame itself floats — a filled surface under the members (a\n// ghost member would otherwise show the content through it) and the shadow of a\n// control lifted over the page.\nconst ELEVATED_JOINED = \"bg-[var(--bg-surface)] shadow-lg\";\n// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the\n// control, not the tooltip's square wrapper span, whose shadow would be a box round a\n// round disc.\nconst ELEVATED_GAPPED =\n  \"[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md\";\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:\n   * separate controls with a small gap, each keeping its own shape — the overlay\n   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +\n   * `IconButton variant=\"overlay\"` in a hand-made `flex gap-1`), where a joined frame\n   * would be a box drawn over the photo.\n   */\n  variant?: \"joined\" | \"gapped\";\n  /**\n   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's\n   * zoom, a photo's controls) rather than in the page's flow — keksdose adds\n   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the\n   * frame is filled and shadowed; on a gapped one, each member.\n   */\n  elevated?: boolean;\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({\n  orientation = \"horizontal\",\n  variant = \"joined\",\n  elevated = false,\n  className,\n  ...rest\n}: ButtonGroupProps) {\n  const joined = variant === \"joined\";\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      data-variant={variant}\n      className={cn(\n        joined ? JOINED[orientation] : GAPPED[orientation],\n        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),\n        className,\n      )}\n    />\n  );\n}\n\n/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ButtonGroupLinkRenderProps {\n  href: string;\n  /** The button look — keep it, or the member is a bare link in the frame. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"page\";\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"className\" | \"children\"> {\n  href: string;\n  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The member for the page you are on: `aria-current=\"page\"` and the \"on\" look of a\n   *  pressed member, so a link row reads as a segmented switch between pages. */\n  current?: boolean;\n  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.\n   *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */\n  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst LINK_CURRENT = \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\";\n\n/**\n * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it\n * joins the frame like one. A group mixing actions and pages — \"Export\" beside \"Open\n * report\" — had to either make the page a button with an `onClick` navigate (no\n * middle-click, no \"open in new tab\", no link semantics) or style an `<a>` whose\n * corners the group did not know about. Plain `<a>` by default; `renderLink` for the\n * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).\n */\nexport function ButtonGroupLink({\n  href,\n  variant = \"secondary\",\n  size,\n  current = false,\n  renderLink,\n  className,\n  children,\n  ...rest\n}: ButtonGroupLinkProps) {\n  const kitLink = useKitLink();\n  const props: ButtonGroupLinkRenderProps = {\n    ...rest,\n    href,\n    \"aria-current\": current ? \"page\" : undefined,\n    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),\n    children,\n  };\n  const render = pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedGroupLink render={render} {...props} />;\n  const { children: content, ...anchor } = props;\n  return <a {...anchor}>{content}</a>;\n}\n\n/** Calls `renderLink` as a component, so the router link's hooks are its own. */\nfunction RenderedGroupLink({\n  render,\n  ...props\n}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAwII;AAvIJ,SAAS,UAAU;AACnB,SAAS,qBAA0D;AACnE,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAYjC,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAgBA,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAKA,MAAM,SAAoD;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AACZ;AAKA,MAAM,kBAAkB;AAIxB,MAAM,kBACJ;AAsCK,SAAS,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,SAAS,OAAO,WAAW,IAAI,OAAO,WAAW;AAAA,QACjD,aAAa,SAAS,kBAAkB;AAAA,QACxC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAgCA,MAAM,eAAe;AAUd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,WAAW;AAC3B,QAAM,QAAoC;AAAA,IACxC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,UAAU,SAAS;AAAA,IACnC,WAAW,cAAc,SAAS,EAAE,MAAM,WAAW,GAAG,WAAW,cAAc,SAAS,EAAE,CAAC;AAAA,IAC7F;AAAA,EACF;AACA,QAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,MAAI,OAAQ,QAAO,oBAAC,qBAAkB,QAAiB,GAAG,OAAO;AACjE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SAAO,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AACjC;AAGA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/components/calculator.d.ts

@@ -1,16 +1,18 @@
 import * as react from 'react';
-import { bI as CalculatorLabels } from '../delete-account-setting-CpIhzxxZ.js';
+import { bP as CalculatorLabels } from '../delete-account-setting-FLyJf-kZ.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -79,6 +81,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -92,7 +97,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not