@eifi1/ui-kit 0.9.0 → 0.11.0

package/dist/components/file-dropzone.js

@@ -14,6 +14,7 @@ import {
   summariseRejections
 } from "./file-button.js";
 import { useDragTarget } from "../hooks/use-file-drop.js";
+import { toast } from "./toast.js";
 function FileDropzone({
   file,
   onFileSelected,
@@ -90,7 +91,7 @@ function FileDropzone({
       if (rejected.length > 0) onReject?.(rejected);
       const message = stands ? summariseRejections(rejected, labels) : labels.rejectedPick(picked.length);
       if (feedback === "toast") {
-        void import("sonner").then(({ toast }) => toast.error(message));
+        toast.error(message);
       } else {
         if (feedback === "inline") setError(message);
         alert.announce(message);

package/dist/components/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  DEFAULT_FILE_PICKER_LABELS,\n  formatAccept,\n  judgePick,\n  screenFiles,\n  summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n  /** A file drag is over the zone right now. */\n  dragOver: boolean;\n  disabled: boolean;\n  busy: boolean;\n  /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n  files: readonly File[];\n  /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n  error: string | null;\n  /** Open the system picker — for a body that brings its own trigger (a second\n   *  \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n  open: () => void;\n  /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n  labels: FilePickerLabels;\n}\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is a dynamic `import(\"sonner\")` on the\n   * failure path only: `sonner` is an OPTIONAL peer, and a static import here once\n   * broke `import { Button }` for every app without it (see\n   * `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The whole pick at once, before any of the above — return `false` to refuse all\n   *  of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n   *  message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n  onPick?: FilePickHandler;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n  /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n   *  the root element below. Optional since 0.8, like the three below: each falls back\n   *  to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n   *  were required, so every call site passed four strings through `t()` by hand, and a\n   *  zone nested in a kit component (the feedback form) had no call site to pass them. */\n  dropLabel?: string;\n  /** Default `filePicker.browse`. */\n  browseLabel?: string;\n  /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n   *  `emptyMultiple`. */\n  emptyLabel?: string;\n  /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n  hint?: string;\n  /**\n   * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n   * group. keksdose locks its invoice zone while another form holds unsaved changes,\n   * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n   */\n  disabled?: boolean;\n  /**\n   * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n   * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n   * text. The other half of why keksdose's invoice zone was hand-rolled.\n   */\n  busy?: boolean;\n  /**\n   * Replace the zone's body — the icon, the text and the chosen-file list — with your\n   * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n   * hint (\"several photos are possible\"), a second trigger for the camera.\n   *\n   * The Browse button, the inline error and the live regions stay: Browse is the\n   * keyboard path, and a body that forgot it would leave the zone unreachable without\n   * a pointer. A click on a control inside the body does not also open the picker.\n   */\n  renderBody?: (state: FileDropzoneState) => ReactNode;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  onPick,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel: dropLabelProp,\n  browseLabel: browseLabelProp,\n  emptyLabel: emptyLabelProp,\n  hint: hintProp,\n  disabled,\n  busy,\n  renderBody,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [error, setError] = useState<string | null>(null);\n  const inert = Boolean(disabled || busy);\n  // State rather than a ref: `open` is handed to `renderBody` during render, and a\n  // function that reads a ref there is exactly what the refs rule cannot prove safe.\n  const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n  const browseRef = useRef<HTMLButtonElement>(null);\n  const errorId = useId();\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // The echoed file name is only text in the zone, and text changing somewhere on the\n  // page is not announced by itself.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n  const dropLabel = dropLabelProp ?? labels.dropzone;\n  const browseLabel = browseLabelProp ?? labels.browse;\n  const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n  const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (inert || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const picked = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      picked,\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    const stands = judgePick(onPick, accepted, rejected);\n    if (stands && accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (!stands || rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      if (rejected.length > 0) onReject?.(rejected);\n      const message = stands\n        ? summariseRejections(rejected, labels)\n        : labels.rejectedPick(picked.length);\n      if (feedback === \"toast\") {\n        // sonner is an optional peer: imported here, on the failure path only, so an\n        // app that never trips this never has to install it. Not awaited — nothing\n        // downstream depends on the toast having appeared, and the handlers that\n        // reach this are DOM events. sonner's own toaster is a live region, so this\n        // path does not announce a second time.\n        void import(\"sonner\").then(({ toast }) => toast.error(message));\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. Browse is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    browseRef.current?.focus();\n    status.announce(message);\n  };\n\n  // The enter/leave counter lives in the shared hook: the boolean this was flickered\n  // across every child of the zone in Safari, whose drag events carry no\n  // `relatedTarget` to tell a move onto a child from a real leave.\n  const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n    disabled: inert,\n    onDropFiles: acceptFiles,\n  });\n  const open = () => {\n    if (!inert) fileInput?.click();\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n  return (\n    <>\n      {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n          the remove buttons) inside it: nested interactive controls, which ARIA forbids\n          because a button's children are presentational — a screen reader either read\n          the zone as one opaque button or skipped the inner ones, and the zone was an\n          extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n          real button; the zone keeps its drop target and its click-anywhere for a\n          pointer, which is a convenience on top of Browse rather than the only way in. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n      <div\n        // `...rest` first: every handler below is the drop gesture itself.\n        {...rest}\n        {...dropProps}\n        // Pointer only; every control inside stops its own click from reaching here\n        // (and one in a custom body is skipped below). The keyboard equivalent is the\n        // Browse button, so no key handler belongs on a group.\n        onClick={(e) => {\n          if (fromControl(e)) return;\n          open();\n        }}\n        role=\"group\"\n        // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n        // that passes no `aria-label` — i.e. all of them today. Standardising on\n        // `aria-label` (audit §api-design) does not get to silently rename an existing\n        // required prop.\n        aria-label={ariaLabel ?? dropLabel}\n        // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\n        aria-disabled={disabled || undefined}\n        aria-busy={busy || undefined}\n        data-drag-over={dragOver || undefined}\n        className={cn(\n          // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n          // which Tailwind implements as `position: absolute` — so without a positioned\n          // ancestor its containing block is the INITIAL one, and it is laid out at its\n          // own offset from the top of the document. Nothing looks wrong, because the\n          // input is 1x1 and clipped; what breaks is the page height. On a long page\n          // every escaped sr-only element extends `documentElement.scrollHeight` to its\n          // own offset, which produces a second, whole-document scrollbar alongside the\n          // app shell's own — one that scrolls past the end of the content into nothing.\n          // Measured on the showcase: body 900px, document 47,919px.\n          \"relative flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n          // Three states out of two border tokens: the target rests on the plain\n          // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n          // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n          // one step louder than \"you are over it\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          // Inert zones keep the resting hairline and lose the hover pull: a border that\n          // answers the pointer promises a drop the zone will refuse.\n          disabled\n            ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n            : busy\n              ? \"cursor-progress border-[var(--border)]\"\n              : dragOver\n                ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n                : showError\n                  ? \"cursor-pointer border-[var(--danger-border)]\"\n                  : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        {renderBody ? (\n          renderBody({\n            dragOver,\n            disabled: Boolean(disabled),\n            busy: Boolean(busy),\n            files: chosen,\n            error: showError ? error : null,\n            open,\n            labels,\n          })\n        ) : busy ? (\n          <>\n            {/* `label={null}`: the zone is `aria-busy` and the line below says the\n                same in words; a spoken \"Loading\" would only run into it. */}\n            <Spinner label={null} className=\"size-5\" />\n            <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n          </>\n        ) : (\n          <>\n            <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n            {multiple && chosen.length > 0 ? (\n              <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n                {chosen.map((f, i) => (\n                  <li\n                    // Name + size + position: two files may share a name, and the index\n                    // alone would re-key every row below a removal.\n                    key={`${f.name}-${f.size}-${i}`}\n                    className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n                  >\n                    <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                    <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                    {onRemove && (\n                      <IconButton\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={inert}\n                        aria-label={labels.remove(f.name)}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onRemove(f, i);\n                          afterRemoval(labels.removed(f.name));\n                        }}\n                      >\n                        <X aria-hidden />\n                      </IconButton>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            ) : (\n              <>\n                <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n                  {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n                      whatever a stray `file` prop says — it used to show that file's name. */}\n                  {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n                  {!multiple && file && onClear && (\n                    <IconButton\n                      type=\"button\"\n                      size=\"sm\"\n                      disabled={inert}\n                      aria-label={labels.remove(file.name)}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onClear();\n                        afterRemoval(labels.removed(file.name));\n                      }}\n                    >\n                      <X aria-hidden />\n                    </IconButton>\n                  )}\n                </div>\n                <div className=\"text-xs text-[var(--text-muted)]\">\n                  {file && !multiple ? fileText.size(file.size) : hint}\n                </div>\n              </>\n            )}\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            ref={browseRef}\n            type=\"button\"\n            variant=\"secondary\"\n            disabled={inert}\n            onClick={(e) => {\n              e.stopPropagation();\n              open();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={inert}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        <input\n          ref={setFileInput}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={inert}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone, where they have always been (the zone used to be a\n          `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n          need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n *  link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n  const target = e.target as Element | null;\n  const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n  return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  DEFAULT_FILE_PICKER_LABELS,\n  formatAccept,\n  judgePick,\n  screenFiles,\n  summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\nimport { toast } from \"./toast\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n  /** A file drag is over the zone right now. */\n  dragOver: boolean;\n  disabled: boolean;\n  busy: boolean;\n  /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n  files: readonly File[];\n  /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n  error: string | null;\n  /** Open the system picker — for a body that brings its own trigger (a second\n   *  \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n  open: () => void;\n  /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n  labels: FilePickerLabels;\n}\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`\n   * lazily: it is an OPTIONAL peer, and a static import here once broke\n   * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The whole pick at once, before any of the above — return `false` to refuse all\n   *  of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n   *  message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n  onPick?: FilePickHandler;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n  /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n   *  the root element below. Optional since 0.8, like the three below: each falls back\n   *  to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n   *  were required, so every call site passed four strings through `t()` by hand, and a\n   *  zone nested in a kit component (the feedback form) had no call site to pass them. */\n  dropLabel?: string;\n  /** Default `filePicker.browse`. */\n  browseLabel?: string;\n  /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n   *  `emptyMultiple`. */\n  emptyLabel?: string;\n  /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n  hint?: string;\n  /**\n   * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n   * group. keksdose locks its invoice zone while another form holds unsaved changes,\n   * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n   */\n  disabled?: boolean;\n  /**\n   * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n   * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n   * text. The other half of why keksdose's invoice zone was hand-rolled.\n   */\n  busy?: boolean;\n  /**\n   * Replace the zone's body — the icon, the text and the chosen-file list — with your\n   * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n   * hint (\"several photos are possible\"), a second trigger for the camera.\n   *\n   * The Browse button, the inline error and the live regions stay: Browse is the\n   * keyboard path, and a body that forgot it would leave the zone unreachable without\n   * a pointer. A click on a control inside the body does not also open the picker.\n   */\n  renderBody?: (state: FileDropzoneState) => ReactNode;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  onPick,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel: dropLabelProp,\n  browseLabel: browseLabelProp,\n  emptyLabel: emptyLabelProp,\n  hint: hintProp,\n  disabled,\n  busy,\n  renderBody,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [error, setError] = useState<string | null>(null);\n  const inert = Boolean(disabled || busy);\n  // State rather than a ref: `open` is handed to `renderBody` during render, and a\n  // function that reads a ref there is exactly what the refs rule cannot prove safe.\n  const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n  const browseRef = useRef<HTMLButtonElement>(null);\n  const errorId = useId();\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // The echoed file name is only text in the zone, and text changing somewhere on the\n  // page is not announced by itself.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n  const dropLabel = dropLabelProp ?? labels.dropzone;\n  const browseLabel = browseLabelProp ?? labels.browse;\n  const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n  const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (inert || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const picked = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      picked,\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    const stands = judgePick(onPick, accepted, rejected);\n    if (stands && accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (!stands || rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      if (rejected.length > 0) onReject?.(rejected);\n      const message = stands\n        ? summariseRejections(rejected, labels)\n        : labels.rejectedPick(picked.length);\n      if (feedback === \"toast\") {\n        // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app\n        // that never trips this never has to install it. Nothing downstream depends\n        // on the toast having appeared. The toaster is a live region, so this path\n        // does not announce a second time.\n        toast.error(message);\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. Browse is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    browseRef.current?.focus();\n    status.announce(message);\n  };\n\n  // The enter/leave counter lives in the shared hook: the boolean this was flickered\n  // across every child of the zone in Safari, whose drag events carry no\n  // `relatedTarget` to tell a move onto a child from a real leave.\n  const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n    disabled: inert,\n    onDropFiles: acceptFiles,\n  });\n  const open = () => {\n    if (!inert) fileInput?.click();\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n  return (\n    <>\n      {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n          the remove buttons) inside it: nested interactive controls, which ARIA forbids\n          because a button's children are presentational — a screen reader either read\n          the zone as one opaque button or skipped the inner ones, and the zone was an\n          extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n          real button; the zone keeps its drop target and its click-anywhere for a\n          pointer, which is a convenience on top of Browse rather than the only way in. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n      <div\n        // `...rest` first: every handler below is the drop gesture itself.\n        {...rest}\n        {...dropProps}\n        // Pointer only; every control inside stops its own click from reaching here\n        // (and one in a custom body is skipped below). The keyboard equivalent is the\n        // Browse button, so no key handler belongs on a group.\n        onClick={(e) => {\n          if (fromControl(e)) return;\n          open();\n        }}\n        role=\"group\"\n        // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n        // that passes no `aria-label` — i.e. all of them today. Standardising on\n        // `aria-label` (audit §api-design) does not get to silently rename an existing\n        // required prop.\n        aria-label={ariaLabel ?? dropLabel}\n        // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\n        aria-disabled={disabled || undefined}\n        aria-busy={busy || undefined}\n        data-drag-over={dragOver || undefined}\n        className={cn(\n          // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n          // which Tailwind implements as `position: absolute` — so without a positioned\n          // ancestor its containing block is the INITIAL one, and it is laid out at its\n          // own offset from the top of the document. Nothing looks wrong, because the\n          // input is 1x1 and clipped; what breaks is the page height. On a long page\n          // every escaped sr-only element extends `documentElement.scrollHeight` to its\n          // own offset, which produces a second, whole-document scrollbar alongside the\n          // app shell's own — one that scrolls past the end of the content into nothing.\n          // Measured on the showcase: body 900px, document 47,919px.\n          \"relative flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n          // Three states out of two border tokens: the target rests on the plain\n          // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n          // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n          // one step louder than \"you are over it\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          // Inert zones keep the resting hairline and lose the hover pull: a border that\n          // answers the pointer promises a drop the zone will refuse.\n          disabled\n            ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n            : busy\n              ? \"cursor-progress border-[var(--border)]\"\n              : dragOver\n                ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n                : showError\n                  ? \"cursor-pointer border-[var(--danger-border)]\"\n                  : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        {renderBody ? (\n          renderBody({\n            dragOver,\n            disabled: Boolean(disabled),\n            busy: Boolean(busy),\n            files: chosen,\n            error: showError ? error : null,\n            open,\n            labels,\n          })\n        ) : busy ? (\n          <>\n            {/* `label={null}`: the zone is `aria-busy` and the line below says the\n                same in words; a spoken \"Loading\" would only run into it. */}\n            <Spinner label={null} className=\"size-5\" />\n            <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n          </>\n        ) : (\n          <>\n            <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n            {multiple && chosen.length > 0 ? (\n              <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n                {chosen.map((f, i) => (\n                  <li\n                    // Name + size + position: two files may share a name, and the index\n                    // alone would re-key every row below a removal.\n                    key={`${f.name}-${f.size}-${i}`}\n                    className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n                  >\n                    <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                    <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                    {onRemove && (\n                      <IconButton\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={inert}\n                        aria-label={labels.remove(f.name)}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onRemove(f, i);\n                          afterRemoval(labels.removed(f.name));\n                        }}\n                      >\n                        <X aria-hidden />\n                      </IconButton>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            ) : (\n              <>\n                <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n                  {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n                      whatever a stray `file` prop says — it used to show that file's name. */}\n                  {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n                  {!multiple && file && onClear && (\n                    <IconButton\n                      type=\"button\"\n                      size=\"sm\"\n                      disabled={inert}\n                      aria-label={labels.remove(file.name)}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onClear();\n                        afterRemoval(labels.removed(file.name));\n                      }}\n                    >\n                      <X aria-hidden />\n                    </IconButton>\n                  )}\n                </div>\n                <div className=\"text-xs text-[var(--text-muted)]\">\n                  {file && !multiple ? fileText.size(file.size) : hint}\n                </div>\n              </>\n            )}\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            ref={browseRef}\n            type=\"button\"\n            variant=\"secondary\"\n            disabled={inert}\n            onClick={(e) => {\n              e.stopPropagation();\n              open();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={inert}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        <input\n          ref={setFileInput}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={inert}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone, where they have always been (the zone used to be a\n          `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n          need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n *  link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n  const target = e.target as Element | null;\n  const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n  return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}

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

@@ -1,9 +1,18 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+import { ButtonHTMLAttributes, ReactNode, MouseEvent, ReactElement, Ref, HTMLAttributes } from 'react';
+import { TooltipSide } from './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 interface FloatingPanelLabels {
     /** Accessible name of the panel header's X. */
     close: string;
+    /**
+     * What a {@link FloatingAction}'s count badge adds to its accessible name ("3 new"),
+     * read after the label: "Invoices, 3 new". The dot itself is hidden from a reader —
+     * a bare "3" read out of context says nothing about what is counted.
+     */
+    badge: (count: number) => string;
 }
 declare const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels;
 /** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */
@@ -44,6 +53,49 @@ interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
      * in both states; `aria-pressed` already says which one it is in.
      */
     pressed?: boolean;
+    /**
+     * Show `label` beside the icon: the EXTENDED FAB, a pill rather than a disc. For a
+     * corner control whose words are the point — kastlan's offline indicator
+     * (shared/offline/offline-indicator.tsx:39) is a pill saying "Offline — 2 photo(s)
+     * queued" / "Syncing…", hand-placed at `fixed bottom-4 left-4`, i.e. over the
+     * bottom nav and on the wrong side in RTL. Same height as the disc (3rem), so a
+     * {@link FloatingPanel} card above it still clears it.
+     */
+    extended?: boolean;
+    /**
+     * Announce `label` whenever it changes, through a polite `role="status"` region — for
+     * an extended FAB that REPORTS something (kastlan's offline/sync state), where a
+     * sighted user sees the words change and a screen reader user otherwise hears
+     * nothing until they happen to land on the button.
+     *
+     * ⚠️ A live region announces changes, not its own arrival: a FAB that mounts already
+     * saying "Offline" says it to nobody. Keep it mounted and pass `hidden` while there
+     * is nothing to report (kastlan returns `null` when online and idle); the region
+     * stays in the page, and the first real status is heard.
+     */
+    live?: boolean;
+    /**
+     * `primary` (default): the solid brand disc of a page's main action. `surface`: the
+     * page's surface with a hairline border — for a FAB that is a status rather than a
+     * call to action, as kastlan's offline pill is (a brand pill would shout "press me"
+     * at a user who is merely offline). Ignored while `pressed` is set; a toggle has its
+     * own two looks.
+     */
+    variant?: "primary" | "surface";
+    /**
+     * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —
+     * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,
+     * which cannot work: the tooltip's anchor is a `relative inline-flex` span, and this
+     * button is `fixed` and portalled. With `tooltip` the FAB positions a fixed wrapper
+     * instead and the button sits in the tooltip inside it. `true` shows the `label`;
+     * any other content shows that. Implies no native `title` (whatever `nativeTitle`
+     * says): one hover hint, not two. `style` stays on the button; the corner and
+     * `offset` move to the wrapper.
+     */
+    tooltip?: ReactNode;
+    /** Where the {@link tooltip} opens. Default `top`; the bubble is portalled and kept on
+     *  screen, so a corner button's label is not pushed off the edge. */
+    tooltipSide?: TooltipSide;
     ref?: Ref<HTMLButtonElement>;
 }
 /**
@@ -63,7 +115,7 @@ interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
  * Portalled, because `position: fixed` inside any transformed ancestor (an animated
  * page transition) is fixed to that ancestor, not to the screen.
  */
-declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, className, style, type, title, ...rest }: FloatingActionButtonProps): react.JSX.Element;
+declare function FloatingActionButton({ label, icon, corner, offset, nativeTitle, pressed, extended, live, variant, tooltip, tooltipSide, className, style, type, title, ...rest }: FloatingActionButtonProps): react.JSX.Element;
 interface FloatingPanelProps {
     /** The panel's heading, and its accessible name. */
     title: ReactNode;
@@ -84,6 +136,10 @@ interface FloatingPanelProps {
     /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.
      *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */
     fabNativeTitle?: boolean;
+    /** The FAB's kit tooltip — see {@link FloatingActionButtonProps.tooltip}. `true` for
+     *  keksdose's assistant launcher, which wanted the kit bubble and had no way to
+     *  put one on a fixed, portalled button (dev#523). */
+    fabTooltip?: ReactNode;
     /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else "Close". */
     closeLabel?: string;
     /**
@@ -129,6 +185,93 @@ interface FloatingPanelProps {
  * panel unmounts when closed; an app that must keep a draft across a close keeps it in
  * its own state, where it also survives a reload.
  */
-declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
+declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, fabNativeTitle, fabTooltip, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
+interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    /** Name the group ("Register actions"); a reader then introduces the members as one
+     *  set. A group with no name is one more unlabelled wrapper. */
+    "aria-label"?: string;
+    /** Default `bottom-end`. */
+    corner?: FloatingCorner;
+    /** Distance above the nav / home indicator — see {@link FloatingActionButtonProps.offset}. */
+    offset?: string;
+    /** {@link FloatingAction}s, in reading order. */
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A floating pill of {@link FloatingAction}s — one to four `size-12` toggles, actions
+ * or links with hairline dividers — pinned to a corner exactly as the
+ * {@link FloatingActionButton} is: `--app-nav-h` and the home indicator cleared, a
+ * logical corner, portalled.
+ *
+ * keksdose built it twice by hand: the /transactions phone toolbar
+ * (transactions-page.tsx:644 — upcoming and pending toggles, an invoices link with a
+ * pending count, and the brand "+") and the feedback page's "awaiting only" toggle
+ * (feedback-page.tsx:854, one button in the group anyway, so the two pages look
+ * alike). Both at `right-4 bottom-20` — `right`, not `end`, so over the page's leading
+ * edge in RTL — with `divide-x`, slate hovers, and each member's `Tooltip` spelled out.
+ *
+ * `role="group"`, NOT a toolbar: every member keeps its own tab stop, as the
+ * hand-built ones did, and there is no arrow-key roving to learn. Hide it where it
+ * does not belong with a class (`md:hidden`, as both keksdose pages do).
+ */
+declare function FloatingActionGroup({ corner, offset, className, style, children, ...rest }: FloatingActionGroupProps): react.JSX.Element;
+/** What {@link FloatingActionProps.renderLink} is handed. Spread it onto your router's
+ *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+interface FloatingActionLinkProps {
+    href: string;
+    /** The member's whole look — keep it. */
+    className: string;
+    children: ReactNode;
+    "aria-label": string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    [key: `aria-${string}`]: string | boolean | number | undefined;
+    [key: `data-${string}`]: unknown;
+}
+interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    /** The accessible name, and the tooltip's text. Keep it the same in both states of a
+     *  toggle; `aria-pressed` says which one it is in. */
+    label: string;
+    icon: ReactNode;
+    /** Make it a toggle: `aria-pressed` and the brand "on" look (the brand glyph on the
+     *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link. */
+    pressed?: boolean;
+    /**
+     * `primary`: the brand-filled member, for the group's main action (the /transactions
+     * "+"). Default: the quiet one.
+     */
+    variant?: "default" | "primary";
+    /**
+     * A count in a dot at the member's top end corner — the /transactions invoices link's
+     * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count
+     * joins the accessible name through `floatingPanel.badge` ("Invoices, 3 new"), or
+     * `badgeLabel` when passed.
+     */
+    badge?: number;
+    /** The badge's words for a reader, replacing `floatingPanel.badge` — "3 to review". */
+    badgeLabel?: string;
+    /** The dot's colour. Default `warning`, the pending count's. */
+    badgeTone?: "warning" | "danger" | "brand";
+    /** Show `label` in the kit {@link Tooltip} on hover and focus. Default `true`: the
+     *  members are icon-only and this is their only visible label. */
+    tooltip?: boolean;
+    /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */
+    tooltipSide?: TooltipSide;
+    /** Make it a link — the /transactions invoices member. A plain `<a>` unless
+     *  `renderLink` hands it to your router. */
+    href?: string;
+    /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */
+    renderLink?: (props: FloatingActionLinkProps) => ReactElement;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * One member of a {@link FloatingActionGroup}: a `size-12` icon button, toggle or link
+ * with its label in a styled tooltip — what each keksdose member wrapped by hand in
+ * `<Tooltip portal>`. The tooltip is portalled because the group clips (`overflow-hidden`
+ * keeps the brand member's fill inside the pill's corners), and the focus ring is inset
+ * for the same reason.
+ */
+declare function FloatingAction({ label, icon, pressed, variant, badge, badgeLabel, badgeTone, tooltip, tooltipSide, href, renderLink, className, type, onClick, ref, ...rest }: FloatingActionProps): react.JSX.Element;
 
-export { DEFAULT_FLOATING_PANEL_LABELS, FloatingActionButton, type FloatingActionButtonProps, type FloatingCorner, FloatingPanel, type FloatingPanelLabels, type FloatingPanelProps };
+export { DEFAULT_FLOATING_PANEL_LABELS, FloatingAction, FloatingActionButton, type FloatingActionButtonProps, FloatingActionGroup, type FloatingActionGroupProps, type FloatingActionLinkProps, type FloatingActionProps, type FloatingCorner, FloatingPanel, type FloatingPanelLabels, type FloatingPanelProps };

package/dist/components/floating-panel.js

@@ -6,7 +6,11 @@ import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { dirOf } from "../lib/direction.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-const DEFAULT_FLOATING_PANEL_LABELS = { close: "Close" };
+import { Tooltip } from "./tooltip.js";
+const DEFAULT_FLOATING_PANEL_LABELS = {
+  close: "Close",
+  badge: (count) => `${count} new`
+};
 const BOTTOM_CLEARANCE = "max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))";
 const SIDE_GUTTER = "max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))";
 function cornerStyle(corner, lift) {
@@ -32,6 +36,11 @@ function FloatingActionButton({
   offset = "1rem",
   nativeTitle = true,
   pressed,
+  extended = false,
+  live = false,
+  variant = "primary",
+  tooltip,
+  tooltipSide = "top",
   className,
   style,
   type = "button",
@@ -40,36 +49,57 @@ function FloatingActionButton({
 }) {
   const [marker, dir] = usePortalDir();
   const toggle = pressed !== void 0;
-  const nativeTip = nativeTitle && title !== "" ? title ?? label : void 0;
+  const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? void 0 : tooltip;
+  const wrapped = tip !== void 0 && tip !== null;
+  const nativeTip = !wrapped && nativeTitle && title !== "" ? title ?? label : void 0;
+  const button = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      dir,
+      "aria-label": label,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
+      title: nativeTip,
+      style: wrapped ? style : { ...cornerStyle(corner, offset), ...style },
+      className: cn(
+        // Wrapped, the wrapper is the fixed thing and the button sits in it.
+        !wrapped && "fixed z-40",
+        "inline-flex items-center justify-center rounded-full",
+        extended ? "h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5" : "size-12 [&_svg]:size-6",
+        "shadow-lg transition-colors disabled:cursor-default",
+        !toggle && variant === "primary" && "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
+        !toggle && variant === "surface" && "border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:hover:bg-[var(--bg-surface)]",
+        // A toggle sits on the page's surface — a solid brand disc would read as
+        // "on" in both states — and says "on" in the brand family.
+        toggle && "border border-[var(--border)]",
+        pressed === false && "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+        pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
+        className
+      ),
+      children: [
+        icon,
+        extended && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "whitespace-nowrap", children: label })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
     typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          ...rest,
-          type,
-          dir,
-          "aria-label": label,
-          "aria-pressed": pressed ?? rest["aria-pressed"],
-          title: nativeTip,
-          style: { ...cornerStyle(corner, offset), ...style },
-          className: cn(
-            "fixed z-40 inline-flex size-12 items-center justify-center rounded-full",
-            "shadow-lg transition-colors",
-            !toggle && "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
-            // A toggle sits on the page's surface — a solid brand disc would read as
-            // "on" in both states — and says "on" in the brand family.
-            toggle && "border border-[var(--border)]",
-            pressed === false && "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
-            pressed === true && "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
-            "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
-            "[&_svg]:size-6",
-            className
-          ),
-          children: icon
-        }
-      ),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        wrapped ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            dir,
+            hidden: rest.hidden,
+            style: cornerStyle(corner, offset),
+            className: "fixed z-40 inline-flex",
+            children: /* @__PURE__ */ jsx(Tooltip, { label: tip, side: tooltipSide, portal: true, children: tip === label ? /* @__PURE__ */ jsx(Fragment, { children: button }) : button })
+          }
+        ) : button,
+        live && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: label })
+      ] }),
       document.body
     )
   ] });
@@ -84,6 +114,7 @@ function FloatingPanel({
   corner = "bottom-end",
   offset = "1rem",
   fabNativeTitle,
+  fabTooltip,
   closeLabel,
   initialFocus,
   className,
@@ -143,6 +174,7 @@ function FloatingPanel({
         corner,
         offset,
         nativeTitle: fabNativeTitle,
+        tooltip: fabTooltip,
         "aria-expanded": open,
         "aria-controls": open ? panelId : void 0,
         onClick: () => {
@@ -212,9 +244,137 @@ function FloatingPanel({
     )
   ] });
 }
+function FloatingActionGroup({
+  corner = "bottom-end",
+  offset = "1rem",
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const [marker, dir] = usePortalDir();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          role: "group",
+          dir,
+          "data-corner": corner,
+          style: { ...cornerStyle(corner, offset), ...style },
+          className: cn(
+            "fixed z-40 inline-flex flex-row overflow-hidden rounded-2xl",
+            "border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+            // Dividers on the logical start edge of every member but the first, so
+            // they sit between the same two members in RTL. The member is the
+            // tooltip's wrapper span, which is the direct child.
+            "[&>*:not(:first-child)]:border-s [&>*]:border-[var(--border)]",
+            className
+          ),
+          children
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+const BADGE_TONE = {
+  warning: "bg-[var(--warning)] text-[var(--text-inverse)]",
+  danger: "bg-[var(--danger)] text-[var(--danger-contrast)]",
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)]"
+};
+function FloatingAction({
+  label,
+  icon,
+  pressed,
+  variant = "default",
+  badge,
+  badgeLabel,
+  badgeTone = "warning",
+  tooltip = true,
+  tooltipSide = "top",
+  href,
+  renderLink,
+  className,
+  type = "button",
+  onClick,
+  ref,
+  ...rest
+}) {
+  const labels = useKitLabels("floatingPanel", DEFAULT_FLOATING_PANEL_LABELS);
+  const counted = badge !== void 0 && badge > 0;
+  const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
+  const isLink = href !== void 0;
+  const look = cn(
+    "relative flex size-12 items-center justify-center transition-colors",
+    "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
+    variant === "primary" ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : pressed && !isLink ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    counted && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-badge": "",
+        className: cn(
+          "pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-[10px] leading-4 font-semibold",
+          BADGE_TONE[badgeTone]
+        ),
+        children: badge > 99 ? "99+" : badge
+      }
+    )
+  ] });
+  let member;
+  if (isLink) {
+    const { disabled: _disabled, form: _form, value: _value, name: _name, ...anchorRest } = rest;
+    const linkProps = {
+      ...anchorRest,
+      href,
+      "aria-label": name,
+      onClick,
+      className: look,
+      children: body
+    };
+    const { children: content, ...anchor } = linkProps;
+    member = renderLink ? /* @__PURE__ */ jsx(RenderedFloatingLink, { render: renderLink, ...linkProps }) : /* @__PURE__ */ jsx("a", { ...anchor, children: content });
+  } else {
+    member = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type,
+        "aria-label": name,
+        "aria-pressed": pressed ?? rest["aria-pressed"],
+        onClick,
+        className: look,
+        children: body
+      }
+    );
+  }
+  if (!tooltip) return member;
+  return (
+    // A fragment: the bubble says the member's name, and a description that repeats
+    // the name is read twice.
+    /* @__PURE__ */ jsx(Tooltip, { label, side: tooltipSide, portal: true, children: /* @__PURE__ */ jsx(Fragment, { children: member }) })
+  );
+}
+function RenderedFloatingLink({
+  render,
+  ...props
+}) {
+  return render(props);
+}
 export {
   DEFAULT_FLOATING_PANEL_LABELS,
+  FloatingAction,
   FloatingActionButton,
+  FloatingActionGroup,
   FloatingPanel
 };
 //# sourceMappingURL=floating-panel.js.map