@eifi1/ui-kit 0.8.1 → 0.9.0

package/dist/components/floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/floating-panel.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ButtonHTMLAttributes, CSSProperties, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface FloatingPanelLabels {\n  /** Accessible name of the panel header's X. */\n  close: string;\n}\n\nexport const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = { close: \"Close\" };\n\n/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */\nexport type FloatingCorner = \"bottom-end\" | \"bottom-start\";\n\n/**\n * How far off the bottom edge anything floating here sits: clear of `AppShell`'s phone\n * nav (`--app-nav-h`, `0px` above `md` where the nav is not rendered) and of the home\n * indicator, whichever reaches higher — the nav does not pad itself for the inset, so\n * with no nav on screen the inset is all there is to clear. `max`, not a sum: where the\n * nav does cover the inset, adding both would float the button a nav-height too high.\n */\nconst BOTTOM_CLEARANCE = \"max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))\";\n/** The side gutter, widened for a landscape notch. Both insets, because a logical\n *  side has no one physical inset to name. */\nconst SIDE_GUTTER = \"max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\";\n\nfunction cornerStyle(corner: FloatingCorner, lift: string): CSSProperties {\n  return {\n    bottom: `calc(${BOTTOM_CLEARANCE} + ${lift})`,\n    // Logical properties, so the corner follows the reading direction with no JS. The\n    // portal carries the `dir` across (see `usePortalDir`).\n    [corner === \"bottom-start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: SIDE_GUTTER,\n  };\n}\n\n/**\n * The reading direction where the component was RENDERED, for its portalled root: a\n * portal to `<body>` leaves the subtree whose `dir` it inherited, and a logical\n * `inset-inline-end` resolves against the portal's own direction. Read off a hidden\n * inline marker in a layout effect, so the first painted frame already has it.\n */\nfunction usePortalDir(): [Ref<HTMLSpanElement>, Direction | undefined] {\n  const marker = useRef<HTMLSpanElement>(null);\n  const [dir, setDir] = useState<Direction | undefined>(undefined);\n  useLayoutEffect(() => {\n    setDir(dirOf(marker.current));\n  }, []);\n  return [marker, dir];\n}\n\nexport interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** The accessible name — the button shows only its icon. */\n  label: string;\n  icon: ReactNode;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /**\n   * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it\n   * to stack above another floating control in the same corner — keksdose's assistant\n   * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).\n   */\n  offset?: string;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A round, icon-only button pinned to a corner of the viewport — the trigger of a\n * {@link FloatingPanel}, and usable alone for a page's one primary action.\n *\n * keksdose hand-placed each of its floating controls: the assistant launcher at\n * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions\n * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess\n * at the phone nav's height plus whatever else floats there (Keksdose live #314 found\n * out what such a guess is worth for a footer), `right` rather than `end` puts it over\n * the page's leading edge in RTL, and none allows for the home indicator. Here the\n * base is `--app-nav-h` and the safe-area inset, the corner is logical, and\n * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the\n * height of whatever else it has to clear, not the nav's.\n *\n * Portalled, because `position: fixed` inside any transformed ancestor (an animated\n * page transition) is fixed to that ancestor, not to the screen.\n */\nexport function FloatingActionButton({\n  label,\n  icon,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  className,\n  style,\n  type = \"button\",\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <button\n            {...rest}\n            type={type}\n            dir={dir}\n            aria-label={label}\n            title={rest.title ?? label}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex size-12 items-center justify-center rounded-full\",\n              \"bg-[var(--brand)] text-[var(--brand-contrast)] shadow-lg transition-colors hover:bg-[var(--brand-hover)]\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2\",\n              \"[&_svg]:size-6\",\n              className,\n            )}\n          >\n            {icon}\n          </button>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingPanelProps {\n  /** The panel's heading, and its accessible name. */\n  title: ReactNode;\n  /** The trigger's accessible name (\"Assistant\", \"Send feedback\"). */\n  fabLabel: string;\n  fabIcon: ReactNode;\n  /** Controlled open state. Leave it out to let the panel own it. */\n  open?: boolean;\n  /** Uncontrolled initial state. Default closed. */\n  defaultOpen?: boolean;\n  /** Every request to open or close — the FAB, the X, Escape. */\n  onOpenChange?: (open: boolean) => void;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.\n   *  From `md` up the card sits above the FAB, so it moves with it. */\n  offset?: string;\n  /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * Where focus goes on open. Default the panel itself, so a phone's keyboard does not\n   * rise over the sheet before the user has asked to type; pass the chat field for a\n   * panel whose one job is typing.\n   */\n  initialFocus?: () => HTMLElement | null;\n  /** Extra classes for the panel. */\n  className?: string;\n  /** Extra classes for the scrolling body. */\n  bodyClassName?: string;\n  children: ReactNode;\n}\n\n/**\n * A docked, NON-MODAL panel in a corner of the screen, opened by a\n * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,\n * which each built one.\n *\n * ## Not a Modal\n *\n * The page stays usable while it is open: that is the point of an assistant beside the\n * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and\n * no focus trap — Tab walks out of the panel into the page and back, and a click on the\n * page does not close it. It is `role=\"dialog\"` without `aria-modal`, which is what\n * ARIA calls a non-modal dialog, named by its heading.\n *\n * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a\n * keyboard user who pressed the FAB should not have to hunt for what appeared), and\n * closing gives it back to the FAB — but only when focus was in the panel, so a panel\n * closed from the page (a controlled owner) never pulls focus out of the field the\n * user is typing in. Escape closes it while focus is inside, and only then: on the\n * panel element, not the document, so Escape in the page keeps meaning whatever the\n * page means by it.\n *\n * ## Layout\n *\n * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet\n * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and\n * clear of the home indicator. Pure CSS — no width is measured in JavaScript.\n *\n * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The\n * panel unmounts when closed; an app that must keep a draft across a close keeps it in\n * its own state, where it also survives a reload.\n */\nexport function FloatingPanel({\n  title,\n  fabLabel,\n  fabIcon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  closeLabel,\n  initialFocus,\n  className,\n  bodyClassName,\n  children,\n}: FloatingPanelProps) {\n  const labels = useKitLabels(\n    \"floatingPanel\",\n    DEFAULT_FLOATING_PANEL_LABELS,\n    closeLabel === undefined ? undefined : { close: closeLabel },\n  );\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const uid = useId();\n  const panelId = `${uid}-panel`;\n  const titleId = `${uid}-title`;\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [marker, dir] = usePortalDir();\n\n  const initialFocusRef = useRef(initialFocus);\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  // Focus follows the open/closed TRANSITION, never the mount: a panel that renders\n  // open (`defaultOpen`, a restored route) does not take the page's focus by existing.\n  const wasOpen = useRef(open);\n  // Whether focus was inside the panel when it last changed — read at close time, when\n  // the panel (and whatever had focus in it) is already gone.\n  const focusInside = useRef(false);\n  useEffect(() => {\n    const changed = wasOpen.current !== open;\n    wasOpen.current = open;\n    if (!changed) return;\n    if (open) {\n      (initialFocusRef.current?.() ?? panelRef.current)?.focus();\n      return;\n    }\n    const active = document.activeElement;\n    const lost = active === null || active === document.body;\n    if (focusInside.current || lost) fabRef.current?.focus();\n    focusInside.current = false;\n  }, [open]);\n\n  const onPanelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented) return;\n    // Stopped here, so an overlay underneath with a document-level Escape listener does\n    // not close too — the innermost thing that has focus is the one that closes.\n    e.stopPropagation();\n    focusInside.current = true;\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <span ref={marker} hidden />\n      <FloatingActionButton\n        ref={fabRef}\n        label={fabLabel}\n        icon={fabIcon}\n        corner={corner}\n        offset={offset}\n        aria-expanded={open}\n        aria-controls={open ? panelId : undefined}\n        onClick={() => {\n          // A press ON the FAB closing the panel: the FAB keeps focus by being clicked,\n          // nothing to hand back.\n          focusInside.current = false;\n          setOpen(!open);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // A container for Escape bubbling up from anything inside it, as a dialog is.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            ref={panelRef}\n            id={panelId}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            tabIndex={-1}\n            dir={dir}\n            data-corner={corner}\n            onKeyDown={onPanelKeyDown}\n            onFocus={() => {\n              focusInside.current = true;\n            }}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusInside.current = false;\n            }}\n            // The phone's sheet sits on the nav; from `md` up the card floats above the\n            // FAB (its offset + the 3rem button + a 0.75rem gap).\n            style={\n              {\n                \"--fp-bottom\": `calc(${BOTTOM_CLEARANCE})`,\n                \"--fp-bottom-md\": `calc(${BOTTOM_CLEARANCE} + ${offset} + 3.75rem)`,\n                \"--fp-side\": SIDE_GUTTER,\n              } as CSSProperties\n            }\n            className={cn(\n              \"animate-sheet fixed z-40 flex flex-col overflow-hidden outline-none\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl\",\n              // Phone: full width, docked, rounded only where it meets the page.\n              \"inset-x-0 bottom-[var(--fp-bottom)] max-h-[min(85dvh,calc(100dvh_-_var(--fp-bottom)_-_1rem))] rounded-t-xl border-x-0 border-b-0\",\n              \"pb-[env(safe-area-inset-bottom,0px)] md:pb-0\",\n              // md+: a card in the corner, above the FAB.\n              \"md:inset-x-auto md:bottom-[var(--fp-bottom-md)] md:w-[24rem] md:max-h-[min(36rem,calc(100dvh_-_var(--fp-bottom-md)_-_1rem))] md:rounded-xl md:border\",\n              corner === \"bottom-start\" ? \"md:start-[var(--fp-side)]\" : \"md:end-[var(--fp-side)]\",\n              className,\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3\">\n              <h2 id={titleId} className=\"min-w-0 truncate text-base font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  focusInside.current = true;\n                  setOpen(false);\n                }}\n                aria-label={labels.close}\n                className=\"-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n              >\n                <X aria-hidden className=\"size-5\" />\n              </button>\n            </div>\n            <div className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4\", bodyClassName)}>\n              {children}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/floating-panel.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ButtonHTMLAttributes, CSSProperties, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface FloatingPanelLabels {\n  /** Accessible name of the panel header's X. */\n  close: string;\n}\n\nexport const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = { close: \"Close\" };\n\n/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */\nexport type FloatingCorner = \"bottom-end\" | \"bottom-start\";\n\n/**\n * How far off the bottom edge anything floating here sits: clear of `AppShell`'s phone\n * nav (`--app-nav-h`, `0px` above `md` where the nav is not rendered) and of the home\n * indicator, whichever reaches higher — the nav does not pad itself for the inset, so\n * with no nav on screen the inset is all there is to clear. `max`, not a sum: where the\n * nav does cover the inset, adding both would float the button a nav-height too high.\n */\nconst BOTTOM_CLEARANCE = \"max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))\";\n/** The side gutter, widened for a landscape notch. Both insets, because a logical\n *  side has no one physical inset to name. */\nconst SIDE_GUTTER = \"max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\";\n\nfunction cornerStyle(corner: FloatingCorner, lift: string): CSSProperties {\n  return {\n    bottom: `calc(${BOTTOM_CLEARANCE} + ${lift})`,\n    // Logical properties, so the corner follows the reading direction with no JS. The\n    // portal carries the `dir` across (see `usePortalDir`).\n    [corner === \"bottom-start\" ? \"insetInlineStart\" : \"insetInlineEnd\"]: SIDE_GUTTER,\n  };\n}\n\n/**\n * The reading direction where the component was RENDERED, for its portalled root: a\n * portal to `<body>` leaves the subtree whose `dir` it inherited, and a logical\n * `inset-inline-end` resolves against the portal's own direction. Read off a hidden\n * inline marker in a layout effect, so the first painted frame already has it.\n */\nfunction usePortalDir(): [Ref<HTMLSpanElement>, Direction | undefined] {\n  const marker = useRef<HTMLSpanElement>(null);\n  const [dir, setDir] = useState<Direction | undefined>(undefined);\n  useLayoutEffect(() => {\n    setDir(dirOf(marker.current));\n  }, []);\n  return [marker, dir];\n}\n\nexport interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** The accessible name — the button shows only its icon. */\n  label: string;\n  icon: ReactNode;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /**\n   * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it\n   * to stack above another floating control in the same corner — keksdose's assistant\n   * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).\n   */\n  offset?: string;\n  /**\n   * Whether the button carries the browser's own tooltip (`title`, the `label` unless a\n   * `title` is passed). Default `true`, so an icon-only button keeps a hover hint for a\n   * mouse user with no other way to learn what it is. `false` renders no `title` at all:\n   * keksdose has ONE tooltip, the kit's `Tooltip` (dev#523), and its source scan fails a\n   * native `title=` anywhere — so a flag, not `title=\"\"`, which the scan would still\n   * see. An empty `title` renders no attribute either, for the caller who has no scan.\n   *\n   * Not flipped to off by default: a FAB wrapped in nothing would lose the only hover\n   * hint it has, silently, in every app already on it. And the kit cannot wrap itself\n   * in its `Tooltip` — the bubble's anchor is a `relative inline-flex` span, and the\n   * button is `fixed` and portalled — so the one-tooltip caller wraps it.\n   */\n  nativeTitle?: boolean;\n  /**\n   * Make it a toggle. `true`/`false` set `aria-pressed` and swap the solid brand disc for\n   * a surface disc — the glyph in brand on the quiet brand fill when on, the secondary\n   * text colour when off — the \"on\" look of `IconButton`'s `pressed` and of a selected\n   * Chip. Left out, it is the ordinary action FAB. For keksdose's corner filter toggles\n   * (feedback-page's \"awaiting only\", the /transactions pending and upcoming toggles),\n   * which paint `text-[var(--brand)]` on a surface button by hand. Keep `label` the same\n   * in both states; `aria-pressed` already says which one it is in.\n   */\n  pressed?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A round, icon-only button pinned to a corner of the viewport — the trigger of a\n * {@link FloatingPanel}, and usable alone for a page's one primary action.\n *\n * keksdose hand-placed each of its floating controls: the assistant launcher at\n * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions\n * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess\n * at the phone nav's height plus whatever else floats there (Keksdose live #314 found\n * out what such a guess is worth for a footer), `right` rather than `end` puts it over\n * the page's leading edge in RTL, and none allows for the home indicator. Here the\n * base is `--app-nav-h` and the safe-area inset, the corner is logical, and\n * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the\n * height of whatever else it has to clear, not the nav's.\n *\n * Portalled, because `position: fixed` inside any transformed ancestor (an animated\n * page transition) is fixed to that ancestor, not to the screen.\n */\nexport function FloatingActionButton({\n  label,\n  icon,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  nativeTitle = true,\n  pressed,\n  className,\n  style,\n  type = \"button\",\n  title,\n  ...rest\n}: FloatingActionButtonProps) {\n  const [marker, dir] = usePortalDir();\n  const toggle = pressed !== undefined;\n  // An empty title is \"no tooltip\", not an attribute with nothing in it.\n  const nativeTip = nativeTitle && title !== \"\" ? (title ?? label) : undefined;\n  return (\n    <>\n      <span ref={marker} hidden />\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <button\n            {...rest}\n            type={type}\n            dir={dir}\n            aria-label={label}\n            aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n            title={nativeTip}\n            style={{ ...cornerStyle(corner, offset), ...style }}\n            className={cn(\n              \"fixed z-40 inline-flex size-12 items-center justify-center rounded-full\",\n              \"shadow-lg transition-colors\",\n              !toggle && \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\",\n              // A toggle sits on the page's surface — a solid brand disc would read as\n              // \"on\" in both states — and says \"on\" in the brand family.\n              toggle && \"border border-[var(--border)]\",\n              pressed === false &&\n                \"bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\",\n              pressed === true &&\n                \"border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2\",\n              \"[&_svg]:size-6\",\n              className,\n            )}\n          >\n            {icon}\n          </button>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nexport interface FloatingPanelProps {\n  /** The panel's heading, and its accessible name. */\n  title: ReactNode;\n  /** The trigger's accessible name (\"Assistant\", \"Send feedback\"). */\n  fabLabel: string;\n  fabIcon: ReactNode;\n  /** Controlled open state. Leave it out to let the panel own it. */\n  open?: boolean;\n  /** Uncontrolled initial state. Default closed. */\n  defaultOpen?: boolean;\n  /** Every request to open or close — the FAB, the X, Escape. */\n  onOpenChange?: (open: boolean) => void;\n  /** Default `bottom-end`. */\n  corner?: FloatingCorner;\n  /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.\n   *  From `md` up the card sits above the FAB, so it moves with it. */\n  offset?: string;\n  /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.\n   *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */\n  fabNativeTitle?: boolean;\n  /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * Where focus goes on open. Default the panel itself, so a phone's keyboard does not\n   * rise over the sheet before the user has asked to type; pass the chat field for a\n   * panel whose one job is typing.\n   */\n  initialFocus?: () => HTMLElement | null;\n  /** Extra classes for the panel. */\n  className?: string;\n  /** Extra classes for the scrolling body. */\n  bodyClassName?: string;\n  children: ReactNode;\n}\n\n/**\n * A docked, NON-MODAL panel in a corner of the screen, opened by a\n * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,\n * which each built one.\n *\n * ## Not a Modal\n *\n * The page stays usable while it is open: that is the point of an assistant beside the\n * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and\n * no focus trap — Tab walks out of the panel into the page and back, and a click on the\n * page does not close it. It is `role=\"dialog\"` without `aria-modal`, which is what\n * ARIA calls a non-modal dialog, named by its heading.\n *\n * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a\n * keyboard user who pressed the FAB should not have to hunt for what appeared), and\n * closing gives it back to the FAB — but only when focus was in the panel, so a panel\n * closed from the page (a controlled owner) never pulls focus out of the field the\n * user is typing in. Escape closes it while focus is inside, and only then: on the\n * panel element, not the document, so Escape in the page keeps meaning whatever the\n * page means by it.\n *\n * ## Layout\n *\n * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet\n * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and\n * clear of the home indicator. Pure CSS — no width is measured in JavaScript.\n *\n * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The\n * panel unmounts when closed; an app that must keep a draft across a close keeps it in\n * its own state, where it also survives a reload.\n */\nexport function FloatingPanel({\n  title,\n  fabLabel,\n  fabIcon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  corner = \"bottom-end\",\n  offset = \"1rem\",\n  fabNativeTitle,\n  closeLabel,\n  initialFocus,\n  className,\n  bodyClassName,\n  children,\n}: FloatingPanelProps) {\n  const labels = useKitLabels(\n    \"floatingPanel\",\n    DEFAULT_FLOATING_PANEL_LABELS,\n    closeLabel === undefined ? undefined : { close: closeLabel },\n  );\n  const [ownOpen, setOwnOpen] = useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const uid = useId();\n  const panelId = `${uid}-panel`;\n  const titleId = `${uid}-title`;\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [marker, dir] = usePortalDir();\n\n  const initialFocusRef = useRef(initialFocus);\n  useEffect(() => {\n    initialFocusRef.current = initialFocus;\n  });\n\n  // Focus follows the open/closed TRANSITION, never the mount: a panel that renders\n  // open (`defaultOpen`, a restored route) does not take the page's focus by existing.\n  const wasOpen = useRef(open);\n  // Whether focus was inside the panel when it last changed — read at close time, when\n  // the panel (and whatever had focus in it) is already gone.\n  const focusInside = useRef(false);\n  useEffect(() => {\n    const changed = wasOpen.current !== open;\n    wasOpen.current = open;\n    if (!changed) return;\n    if (open) {\n      (initialFocusRef.current?.() ?? panelRef.current)?.focus();\n      return;\n    }\n    const active = document.activeElement;\n    const lost = active === null || active === document.body;\n    if (focusInside.current || lost) fabRef.current?.focus();\n    focusInside.current = false;\n  }, [open]);\n\n  const onPanelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\" || e.defaultPrevented) return;\n    // Stopped here, so an overlay underneath with a document-level Escape listener does\n    // not close too — the innermost thing that has focus is the one that closes.\n    e.stopPropagation();\n    focusInside.current = true;\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <span ref={marker} hidden />\n      <FloatingActionButton\n        ref={fabRef}\n        label={fabLabel}\n        icon={fabIcon}\n        corner={corner}\n        offset={offset}\n        nativeTitle={fabNativeTitle}\n        aria-expanded={open}\n        aria-controls={open ? panelId : undefined}\n        onClick={() => {\n          // A press ON the FAB closing the panel: the FAB keeps focus by being clicked,\n          // nothing to hand back.\n          focusInside.current = false;\n          setOpen(!open);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // A container for Escape bubbling up from anything inside it, as a dialog is.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            ref={panelRef}\n            id={panelId}\n            role=\"dialog\"\n            aria-labelledby={titleId}\n            tabIndex={-1}\n            dir={dir}\n            data-corner={corner}\n            onKeyDown={onPanelKeyDown}\n            onFocus={() => {\n              focusInside.current = true;\n            }}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusInside.current = false;\n            }}\n            // The phone's sheet sits on the nav; from `md` up the card floats above the\n            // FAB (its offset + the 3rem button + a 0.75rem gap).\n            style={\n              {\n                \"--fp-bottom\": `calc(${BOTTOM_CLEARANCE})`,\n                \"--fp-bottom-md\": `calc(${BOTTOM_CLEARANCE} + ${offset} + 3.75rem)`,\n                \"--fp-side\": SIDE_GUTTER,\n              } as CSSProperties\n            }\n            className={cn(\n              \"animate-sheet fixed z-40 flex flex-col overflow-hidden outline-none\",\n              \"border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl\",\n              // Phone: full width, docked, rounded only where it meets the page.\n              \"inset-x-0 bottom-[var(--fp-bottom)] max-h-[min(85dvh,calc(100dvh_-_var(--fp-bottom)_-_1rem))] rounded-t-xl border-x-0 border-b-0\",\n              \"pb-[env(safe-area-inset-bottom,0px)] md:pb-0\",\n              // md+: a card in the corner, above the FAB.\n              \"md:inset-x-auto md:bottom-[var(--fp-bottom-md)] md:w-[24rem] md:max-h-[min(36rem,calc(100dvh_-_var(--fp-bottom-md)_-_1rem))] md:rounded-xl md:border\",\n              corner === \"bottom-start\" ? \"md:start-[var(--fp-side)]\" : \"md:end-[var(--fp-side)]\",\n              className,\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3\">\n              <h2 id={titleId} className=\"min-w-0 truncate text-base font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  focusInside.current = true;\n                  setOpen(false);\n                }}\n                aria-label={labels.close}\n                className=\"-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n              >\n                <X aria-hidden className=\"size-5\" />\n              </button>\n            </div>\n            <div className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4\", bodyClassName)}>\n              {children}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/number-field.d.ts

@@ -15,6 +15,8 @@ import '../hooks/use-anchored-rect.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';

package/dist/components/number-input.d.ts

@@ -15,6 +15,8 @@ import '../hooks/use-anchored-rect.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';

package/dist/components/numpad-sheet.d.ts

@@ -13,6 +13,8 @@ import '../hooks/use-anchored-rect.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';

package/dist/components/progress-bar.d.ts

@@ -1,8 +1,22 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
-type ProgressBarSize = "sm" | "md" | "lg";
+/**
+ * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the
+ * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what
+ * came in or went out is money, and painting it `success` / `warning` said "good" and
+ * "careful" about a figure that is neither. keksdose's report meters (food-group-card,
+ * drilldown-modal) sit beside amounts that are already in the money colours.
+ */
+type ProgressBarTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info" | "income" | "expense";
+/**
+ * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a
+ * letter because the letters are taken in order — an `xs` at 6px would be THICKER than
+ * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's
+ * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a
+ * line of text where 8px outweighs the text.
+ */
+type ProgressBarSize = "sm" | "slim" | "md" | "lg";
 interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
     /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way
      *  and nobody knows how much is left (an import that reports no count). */

package/dist/components/progress-bar.js

@@ -9,9 +9,11 @@ const FILL = {
   success: "bg-[var(--success)]",
   warning: "bg-[var(--warning)]",
   danger: "bg-[var(--danger)]",
-  info: "bg-[var(--info)]"
+  info: "bg-[var(--info)]",
+  income: "bg-[var(--money-income)]",
+  expense: "bg-[var(--money-expense)]"
 };
-const TRACK_HEIGHT = { sm: "h-1", md: "h-2", lg: "h-3" };
+const TRACK_HEIGHT = { sm: "h-1", slim: "h-1.5", md: "h-2", lg: "h-3" };
 function ProgressBar({
   value,
   min = 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport type ProgressBarTone = \"brand\" | \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", md: \"h-2\", lg: \"h-3\" };\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  max?: number;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rest\n}: ProgressBarProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n\n  const meter = variant === \"meter\";\n  const current = value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value;\n  const indeterminate = current === undefined;\n  const span = max - min;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText =\n    clamped === undefined\n      ? undefined\n      : formatValue\n        ? formatValue(clamped, max, min)\n        : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(fraction);\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <div className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={valueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {indeterminate ? (\n          <div\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <div\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0GQ,SAEI,KAFJ;AA1GR,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,oBAAoB;AAKlE,MAAM,OAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,eAAgD,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,MAAM;AAiDjF,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,UAAU,MAAM;AAEtB,QAAM,QAAQ,YAAY;AAC1B,QAAM,UAAU,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IAAK,QAAQ,MAAM,SAAa;AAC7F,QAAM,gBAAgB,YAAY;AAClC,QAAM,OAAO,MAAM;AACnB,QAAM,UAAU,gBAAgB,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC;AAChF,QAAM,WAAW,YAAY,UAAa,QAAQ,IAAI,KAAK,UAAU,OAAO;AAE5E,QAAM,YACJ,YAAY,SACR,SACA,cACE,YAAY,SAAS,KAAK,GAAG,IAC7B,IAAI,KAAK,aAAa,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,QAAQ;AAExG,QAAM,aAAa,mBAAmB,SAAS,OAAO,UAAU;AAChE,QAAM,OAAO,aAAa,SAAa,cAAc,gBAAgB,OAAO,UAAU;AAEtF,SACE,qBAAC,SAAI,WAAW,GAAG,WAAW,SAAS,GAAG,cAAY,gBAAgB,kBAAkB,eACpF;AAAA,cAAS,QAAS,aAAa,cAAc,WAC7C,qBAAC,SAAI,WAAU,0CACZ;AAAA,eAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wCAC1B,iBACH;AAAA,MAED,aAAa,cAAc;AAAA;AAAA,MAG1B,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,qBACH;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,QAAQ,UAAU;AAAA,QACxB,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,aAAW,CAAC,SAAS,gBAAgB,OAAO;AAAA,QAG5C,WAAW,GAAG,sEAAsE,aAAa,IAAI,CAAC;AAAA,QAErG,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMT;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YAGV,WAAW,GAAG,qFAAqF,KAAK,IAAI,CAAC;AAAA,YAC7G,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI;AAAA;AAAA,QACvC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  max?: number;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rest\n}: ProgressBarProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n\n  const meter = variant === \"meter\";\n  const current = value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value;\n  const indeterminate = current === undefined;\n  const span = max - min;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText =\n    clamped === undefined\n      ? undefined\n      : formatValue\n        ? formatValue(clamped, max, min)\n        : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(fraction);\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <div className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={valueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {indeterminate ? (\n          <div\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <div\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAkIQ,SAEI,KAFJ;AAlIR,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,uBAAuB,cAAc,oBAAoB;AA2BlE,MAAM,OAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,eAAgD,EAAE,IAAI,OAAO,MAAM,SAAS,IAAI,OAAO,IAAI,MAAM;AAiDhG,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,UAAU,MAAM;AAEtB,QAAM,QAAQ,YAAY;AAC1B,QAAM,UAAU,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IAAK,QAAQ,MAAM,SAAa;AAC7F,QAAM,gBAAgB,YAAY;AAClC,QAAM,OAAO,MAAM;AACnB,QAAM,UAAU,gBAAgB,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC;AAChF,QAAM,WAAW,YAAY,UAAa,QAAQ,IAAI,KAAK,UAAU,OAAO;AAE5E,QAAM,YACJ,YAAY,SACR,SACA,cACE,YAAY,SAAS,KAAK,GAAG,IAC7B,IAAI,KAAK,aAAa,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,QAAQ;AAExG,QAAM,aAAa,mBAAmB,SAAS,OAAO,UAAU;AAChE,QAAM,OAAO,aAAa,SAAa,cAAc,gBAAgB,OAAO,UAAU;AAEtF,SACE,qBAAC,SAAI,WAAW,GAAG,WAAW,SAAS,GAAG,cAAY,gBAAgB,kBAAkB,eACpF;AAAA,cAAS,QAAS,aAAa,cAAc,WAC7C,qBAAC,SAAI,WAAU,0CACZ;AAAA,eAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wCAC1B,iBACH;AAAA,MAED,aAAa,cAAc;AAAA;AAAA,MAG1B,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,qBACH;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,QAAQ,UAAU;AAAA,QACxB,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,aAAW,CAAC,SAAS,gBAAgB,OAAO;AAAA,QAG5C,WAAW,GAAG,sEAAsE,aAAa,IAAI,CAAC;AAAA,QAErG,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMT;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YAGV,WAAW,GAAG,qFAAqF,KAAK,IAAI,CAAC;AAAA,YAC7G,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI;AAAA;AAAA,QACvC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/ui.d.ts

@@ -47,13 +47,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare function Button({ variant, size, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
 type IconButtonSize = "lg" | "md" | "sm" | "xs" | "2xs";
-declare const ICON_BUTTON_TONES: {
-    readonly default: "";
-    readonly muted: "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
-    readonly danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]";
-    readonly warning: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]";
-    readonly info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]";
-};
+type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info";
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Any {@link ButtonVariant}, or `overlay` — a round translucent disc for use over
      *  an image (see `ICON_BUTTON_OVERLAY`). */
@@ -67,8 +61,26 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
      *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
      *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
-     *  (keksdose's reconcile). Default: the variant's own colours. */
-    tone?: keyof typeof ICON_BUTTON_TONES;
+     *  (keksdose's reconcile). Default: the variant's own colours. See `quiet` for
+     *  turning a coloured tone's resting look the other way. */
+    tone?: IconButtonTone;
+    /**
+     * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:
+     * `true` is placeholder grey at rest and the tone's colour on hover and focus;
+     * `false` wears the tone's colour at rest. Left out, each tone keeps its own
+     * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by
+     * definition) and `default` (no tone).
+     *
+     * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where
+     * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one
+     * "delete all" and a touch screen that never hovers, so it painted rose by hand.
+     * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated
+     * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an
+     * `emphasis` scale: there are exactly two resting looks, every coloured tone has
+     * both, and which one fits is a question about the SITE (alone or repeated, touch or
+     * pointer), not about the tone — so it is one switch the family shares.
+     */
+    quiet?: boolean;
     /**
      * Make it a toggle button. `true` sets `aria-pressed="true"` and draws the "on" look
      * (brand glyph on the quiet brand fill); `false` sets `aria-pressed="false"` with the
@@ -401,13 +413,24 @@ interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"
  * beside text, inside a button, or inside the app's own live region.
  */
 declare function Spinner({ className, label, ...rest }: SpinnerProps): react.JSX.Element;
-interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
     /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
      *  every empty state in three apps look like the same thing — so there is no
      *  `children` slot to put arbitrary content in. The two slots below are the only
      *  other things an empty state has turned out to need, and each has a fixed place. */
-    title: string;
-    hint?: string;
+    /** Nodes rather than strings, so a title can carry a code, a link or an emphasised
+     *  word — keksdose's error boundary shows the error's name in `<code>` — while the
+     *  box still sets the type. */
+    title: ReactNode;
+    hint?: ReactNode;
+    /**
+     * Render the title as a heading of this level. Left out it is a `<div>`, as before:
+     * most empty states are a message inside a section that already has its heading.
+     * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing
+     * when it moved onto EmptyState — so the page's heading outline lost the one line
+     * that says what happened. Only the element changes; the look is the box's.
+     */
+    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
      *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
      *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
@@ -419,7 +442,7 @@ interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "childre
      *  caller renders; the box only places them. */
     action?: ReactNode;
 }
-declare function EmptyState({ title, hint, icon, action, className, ...rest }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }: EmptyStateProps): react.JSX.Element;
 /** One tab of a {@link Tabs} strip. */
 interface TabItem<T extends string> {
     id: T;
@@ -604,4 +627,4 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
 }
 declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
 
-export { Button, type ButtonClassesOptions, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };
+export { Button, type ButtonClassesOptions, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonTone, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };

package/dist/components/ui.js

@@ -60,19 +60,28 @@ const ICON_BUTTON_SIZES = {
   "2xs": "size-6 rounded [&_svg]:size-3.5"
 };
 const ICON_BUTTON_TONES = {
-  default: "",
-  muted: "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]",
-  danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
-  // Amber AT REST, unlike `danger`: a warning icon button is the one on the row that
-  // needs attention (keksdose's "needs review" flag on a transaction, the stale-rate
-  // marker), not an action repeated down a list — quiet grey would hide the very
-  // thing it is there to point out.
-  warning: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]",
-  // Sky at rest, for the same reason as `warning`: keksdose's reconcile action on an
-  // account row (accounts-page:867) is the one on the row to notice, and it is
-  // informational rather than a problem, so it takes the `--info` family.
-  info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]"
+  danger: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
+    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border)]"
+  },
+  warning: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus:ring-[var(--warning-border)]",
+    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]"
+  },
+  info: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]",
+    toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]"
+  }
 };
+const ICON_BUTTON_MUTED = "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
+const QUIET_BY_DEFAULT = { danger: true, warning: false, info: false };
+function iconButtonToneClass(tone, quiet) {
+  if (tone === "default") return "";
+  if (tone === "muted") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);
+  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];
+  const look = ICON_BUTTON_TONES[tone];
+  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;
+}
 const ICON_BUTTON_DISABLED_REST = {
   primary: "disabled:hover:bg-[var(--bg-surface-2)]",
   secondary: "disabled:hover:bg-transparent",
@@ -82,13 +91,10 @@ const ICON_BUTTON_DISABLED_REST = {
   link: "disabled:hover:bg-transparent disabled:hover:no-underline",
   overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]"
 };
-const ICON_BUTTON_TONES_DISABLED_REST = {
-  muted: "disabled:hover:text-[var(--text-placeholder)]",
-  danger: "disabled:hover:text-[var(--text-placeholder)]"
-};
+const ICON_BUTTON_QUIET_DISABLED_REST = "disabled:hover:text-[var(--text-placeholder)]";
 const ICON_BUTTON_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]";
 const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]";
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", pressed, stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
+const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", quiet, pressed, stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -109,8 +115,7 @@ const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "
         // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
         variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
         ICON_BUTTON_DISABLED_REST[variant],
-        ICON_BUTTON_TONES[tone],
-        ICON_BUTTON_TONES_DISABLED_REST[tone],
+        iconButtonToneClass(tone, quiet),
         pressed && ICON_BUTTON_PRESSED,
         className
       )
@@ -576,7 +581,8 @@ function Spinner({ className, label, ...rest }) {
     " "
   ] }) });
 }
-function EmptyState({ title, hint, icon, action, className, ...rest }) {
+function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }) {
+  const Title = headingAs ?? "div";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -587,8 +593,8 @@ function EmptyState({ title, hint, icon, action, className, ...rest }) {
       ),
       children: [
         icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", children: icon }),
-        /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--text-secondary)]", children: title }),
-        hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
+        /* @__PURE__ */ jsx(Title, { className: "text-sm font-medium text-[var(--text-secondary)]", children: title }),
+        hint != null && hint !== false && hint !== "" && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
         action != null && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: action })
       ]
     }