@eifi1/ui-kit 0.51.4 → 0.51.5

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\n/**\n * A button's look.\n *\n * - `default`: the quiet action — a warm filled chip with a hairline border. What a\n *   Button with no `variant` draws.\n * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one\n *   call to action a view leads with. \"Accent\" is the button's role here, painted in\n *   `--brand`; it is not the palette's second anchor colour, also called `accent`\n *   (theme/palette-derive.ts), which no button paints.\n * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,\n *   for an action that destroys something. `link`: a text link that acts (a `<button>`).\n * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,\n *   same look; a development build warns once per name). They are removed in 0.51, and\n *   `primary` will not come back with another meaning.\n */\nexport type ButtonVariant =\n  | \"default\"\n  | \"accent\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"danger\"\n  | \"link\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\n/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's\n *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`\n *  centred on it takes the taps a finger lands round the glyph. Not public. */\nexport const HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (`default` = filled warm chip, secondary =\n// outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`.\nexport const buttonVariantClasses: Record<ButtonVariant, string> = {\n  default:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger:\n    \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  accent:\n    \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's focus ring stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  //\n  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More\n  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0\n  // as text too. Both modes, since `contrast:` does not split them.\n  link:\n    \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `default` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `accent` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or accent button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\n// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,\n// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link\n// stays quiet under More contrast. On `ghost` it reads the same either way.\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<ButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {\n  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary:\n    \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  default:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey. Under\n// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the\n// `link` variant), whatever the tone.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  variant: ButtonVariant = \"default\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAiDjC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAK3B,MAAM,iBACX;AAgBF,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AAQlB,MAAM,uBAAsD;AAAA,EACjE;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QACE;AAAA,EACF,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaF,MACE;AACJ;AAiCA,MAAM,eAA+D;AAAA,EACnE,OACE;AAAA,EACF,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAAmB,CAAC,QAAQ,OAAO,CAAC;AAK/D,MAAM,sBAA8D;AAAA;AAAA;AAAA;AAAA,EAIlE,OAAO;AAAA,EACP,WACE;AAAA,EACF,SACE;AACJ;AAOO,MAAM,sBACX;AAoBK,SAAS,cACd,UAAyB,WACzB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,SAAwB,MAAkB,SAA8B,MAAkB;AACnH,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\n/**\n * A button's look.\n *\n * - `default`: the quiet action — a warm filled chip with a hairline border. What a\n *   Button with no `variant` draws.\n * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one\n *   call to action a view leads with. \"Accent\" is the button's role here, painted in\n *   `--brand`; it is not the palette's second anchor colour, also called `accent`\n *   (theme/palette-derive.ts), which no button paints.\n * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,\n *   for an action that destroys something. `link`: a text link that acts (a `<button>`).\n * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,\n *   same look; a development build warns once per name). They are removed in 0.51, and\n *   `primary` will not come back with another meaning.\n */\nexport type ButtonVariant = \"default\" | \"accent\" | \"secondary\" | \"ghost\" | \"danger\" | \"link\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\n/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's\n *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`\n *  centred on it takes the taps a finger lands round the glyph. Not public. */\nexport const HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (`default` = filled warm chip, secondary =\n// outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`.\nexport const buttonVariantClasses: Record<ButtonVariant, string> = {\n  default:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger: \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  accent: \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's focus ring stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  //\n  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More\n  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0\n  // as text too. Both modes, since `contrast:` does not split them.\n  link: \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `default` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `accent` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or accent button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\n// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,\n// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link\n// stays quiet under More contrast. On `ghost` it reads the same either way.\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted: \"text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<ButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {\n  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary: \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  default:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey. Under\n// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the\n// `link` variant), whatever the tone.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  variant: ButtonVariant = \"default\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AA2CjC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAK3B,MAAM,iBACX;AAgBF,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AAQlB,MAAM,uBAAsD;AAAA,EACjE;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QAAQ;AAAA,EACR,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaR,MAAM;AACR;AAiCA,MAAM,eAA+D;AAAA,EACnE,OAAO;AAAA,EACP,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAAmB,CAAC,QAAQ,OAAO,CAAC;AAK/D,MAAM,sBAA8D;AAAA;AAAA;AAAA;AAAA,EAIlE,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SACE;AACJ;AAOO,MAAM,sBACX;AAoBK,SAAS,cACd,UAAyB,WACzB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,SAAwB,MAAkB,SAA8B,MAAkB;AACnH,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/components/button.js

@@ -138,13 +138,7 @@ function ButtonElement({
       ),
       children: pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center gap-[inherit] opacity-0", children }),
-        /* @__PURE__ */ jsx(
-          Spinner,
-          {
-            label: null,
-            className: "absolute inset-0 m-auto size-4 border-current/30 border-t-current"
-          }
-        )
+        /* @__PURE__ */ jsx(Spinner, { label: null, className: "absolute inset-0 m-auto size-4 border-current/30 border-t-current" })
       ] }) : children
     }
   );

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport { LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { BUTTON_LINK_PRESSED, ICON_BUTTON_PRESSED, RenderedButtonLink, buttonLook } from \"./button-look\";\nimport type { ButtonSize, ButtonTone, ButtonVariant } from \"./button-look\";\n\n// The kit's text button, and `<Button href>`, the link that looks like one. Its look —\n// the variant, size and tone maps, and `buttonClasses` — is ./button-look, which\n// IconButton shares (0.34, MOD-2, refactor audit 2026-10).\n\n/**\n * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS\n * it unless you pass `type=\"button\"`. Kept native on purpose — a form's own submit\n * button relies on it, and changing the default would silently stop those forms from\n * submitting. Pass `type=\"button\"` for every other action in a form (keksdose had six\n * link buttons submitting their form).\n */\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** `default` (the quiet action, what a Button without `variant` draws), `accent` (the\n   *  strong call to action, solid brand), `secondary`, `ghost`, `danger` or `link`.\n   *  `primary` / `brand` are deprecated aliases of `default` / `accent`. See {@link ButtonVariant}. */\n  variant?: ButtonVariant;\n  /** `md` (default) is the page's action button. `sm` is the compact one — 12px text\n   *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a\n   *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand\n   *  there). Every variant takes either size. */\n  size?: ButtonSize;\n  /** In a flex row next to a taller labelled field, fill the field's height so the\n   *  two line up. No effect outside a flex row. */\n  stretch?: boolean;\n  /** The `<button>` element. React 19 passes `ref` to a function component as an\n   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —\n   *  declared here only because `ButtonHTMLAttributes` does not carry it. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or\n   *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an\n   *  outlined destructive button and `default` a soft one; ignored by the other\n   *  variants. See {@link ButtonTone}. */\n  tone?: ButtonTone;\n  /**\n   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets\n   * `aria-pressed=\"true\"` and draws the \"on\" look — on a `link`, the brand colour and a\n   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and\n   * `false` sets `aria-pressed=\"false\"` with the ordinary look. Left out, no\n   * `aria-pressed` (or the caller's own). For lenkbank's \"All speeds\" text toggle\n   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`\n   * swapping two class strings; with `variant=\"link\" tone=\"muted\"` it is this.\n   */\n  pressed?: boolean;\n  /**\n   * Why the action is not available — the button's half of DangerConfirm's\n   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).\n   *\n   * A disabled button that cannot say why is a dead end: the native `disabled` takes it\n   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a\n   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`\n   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form\n   * submission they stand for) do nothing, and the reason is shown in the kit\n   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it\n   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is\n   * the point of giving a reason.\n   *\n   * The description is a `hidden` copy of the reason rather than the bubble itself: the\n   * bubble exists only while hovered or focused once it is portalled, and a description\n   * that comes and goes is read inconsistently. The bubble is kept visual, the way\n   * DangerConfirm keeps its own.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default a\n   * line under the button at Large and on a touch screen, the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This button COMMITS — it saves, creates, deletes. Under a locked\n   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's\n   * reason (which wins over a `disabledReason` of its own). No provider, or an\n   * unlocked one: no effect. See {@link WriteLockProvider}; a {@link CommitScope} since\n   * 0.33 (`COMMIT_EXCEPT_BILLING`: every lock but a lapsed plan's).\n   */\n  commit?: CommitScope;\n  /**\n   * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.\n   *\n   * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a\n   * `submittingLabel`, so the button jumps width mid-click and a screen reader hears\n   * the name change instead of \"busy\". Here the label STAYS — it is still the\n   * accessible name and still holds the button's width — and the spinner is drawn over\n   * it in the text colour, so nothing beside the button moves.\n   *\n   * The same prop {@link FileButton} has (`pending`), with one difference: this one is\n   * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,\n   * and a native `disabled` drops that focus to `<body>` the moment the save starts;\n   * clicks, and the Enter that submits a form through it, are swallowed instead.\n   */\n  pending?: boolean;\n  /** Only on the link form — see {@link ButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.\n *\n * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the\n * invoice / lease / unit preview dialogs' \"Open\" at invoice-preview-dialog.tsx:36,\n * platform-companies-page.tsx:111, verify-email-page.tsx:86's \"Log in\",\n * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>\n * navigate(…)}>` that are links in all but markup: no middle-click, no \"open in new\n * tab\", no URL on hover, and a screen reader announces a button that then changes the\n * page. With `href` it is an `<a>`: the provider's router link\n * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.\n *\n * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.\n */\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\"> {\n  href: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  stretch?: boolean;\n  tone?: ButtonTone;\n  /** The in-app router link, over the provider's `linkComponent` (see\n   *  {@link KitLinkComponent}). Ignored when `external`. */\n  renderLink?: KitLinkComponent;\n  /** Leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`, never the\n   *  router link, and \"(opens in a new tab)\" read after the label — billing-history's\n   *  Stripe PDF. A `target=\"_blank\"` of your own is announced the same way. */\n  external?: boolean;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return here —\n   * keksdose F1: the \"Continue\" out of a one-shot page (an emailed confirmation link, a\n   * payment return URL) that must not be landed on again. Handed to the router link as\n   * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click\n   * becomes `location.replace(href)`. Ignored when `external`.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead\n   * of the router swapping the view — keksdose F1: a route the SPA does not own (a\n   * server-rendered export, a logout that must drop every in-memory cache). Wins over\n   * `renderLink` and the provider's `linkComponent`.\n   */\n  reloadDocument?: boolean;\n  /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —\n   *  `role=\"link\"` and `aria-disabled`, out of the tab order like a disabled button,\n   *  with the disabled look. The router link is not used: it needs somewhere to go. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pending?: never;\n  pressed?: never;\n  disabledReason?: never;\n  disabledReasonDisplay?: never;\n  commit?: never;\n}\n\n// Declared link-first so `<Button href>` picks the link props; the LAST signature is\n// what `ComponentProps<typeof Button>` reads, so wrappers (FileButton) still see the\n// `<button>` props they always did.\nexport function Button(props: ButtonLinkProps): ReactElement;\nexport function Button(props: ButtonProps): ReactElement;\nexport function Button(props: ButtonProps | ButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <ButtonLink {...(props as ButtonLinkProps)} />;\n  return <ButtonElement {...(props as ButtonProps)} />;\n}\n\nfunction ButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"default\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  className,\n  children,\n  target,\n  rel,\n  onClick,\n  ...rest\n}: ButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The same rule as every kit link (`pickLinkRenderer`): an external `href` or an\n  // in-page `#anchor` is never handed to the provider's router link, even without\n  // `external`.\n  // `reloadDocument` is the caller saying \"not the router\" for this one link.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const cls = cn(\n    buttonLook(variant, size, stretch, tone),\n    // `relative` holds the sr-only note (see sr-only-containment.test).\n    newTab && \"relative\",\n    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also\n    // keeps the hover fill from lighting up on something that refuses the click.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const body = (\n    <>\n      {children}\n      {/* The space OUTSIDE the sr-only span: a name computation trims each child's\n          text, so one inside it was lost (\"Download(opens…\"). In a flex box a bare\n          space draws nothing. */}\n      {newTab && \" \"}\n      {newTab && <span className=\"sr-only\">({common.opensInNewTab})</span>}\n    </>\n  );\n  if (disabled) {\n    return (\n      <a {...rest} role=\"link\" aria-disabled=\"true\" className={cls}>\n        {body}\n      </a>\n    );\n  }\n  if (external || !Link) {\n    return (\n      <a\n        {...rest}\n        href={href}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? onClick : replacingClick(onClick, href, replace, target)}\n        className={cls}\n      >\n        {body}\n      </a>\n    );\n  }\n  return (\n    <RenderedButtonLink\n      render={Link}\n      {...rest}\n      {...routerLinkNavigation(replace)}\n      href={href}\n      target={target}\n      rel={rel}\n      onClick={onClick}\n      className={cls}\n    >\n      {body}\n    </RenderedButtonLink>\n  );\n}\n\nfunction ButtonElement({\n  variant = \"default\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  pressed,\n  disabledReason: ownDisabledReason,\n  disabledReasonDisplay,\n  commit,\n  pending,\n  className,\n  onClick,\n  children,\n  href: _href,\n  renderLink: _renderLink,\n  external: _external,\n  replace: _replace,\n  reloadDocument: _reloadDocument,\n  ...rest\n}: ButtonProps) {\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      onClick={(e) => {\n        // `preventDefault` as well as not calling through: a locked submit button must\n        // not submit its form, and the browser does that after this handler returns.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      className={cn(\n        buttonLook(variant, size, stretch, tone),\n        pressed && (variant === \"link\" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),\n        // The disabled look for the focusable kind of disabled.\n        locked && \"cursor-not-allowed opacity-50\",\n        // No dimming while pending: the spinner IS the state, and at half opacity it\n        // would be the faintest thing on the button. `relative` anchors it.\n        pending && \"relative cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        <>\n          {/* Transparent, not hidden: it keeps the width AND stays the accessible\n              name (`visibility: hidden` would drop it from the name). `gap-[inherit]`\n              keeps an icon + text spaced as the button spaces them. */}\n          <span className=\"inline-flex items-center justify-center gap-[inherit] opacity-0\">{children}</span>\n          {/* Decorative: `aria-busy` says it, as on FileButton. */}\n          <Spinner\n            label={null}\n            className=\"absolute inset-0 m-auto size-4 border-current/30 border-t-current\"\n          />\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n  if (!locked) return button;\n  return (\n    <LockedReason\n      lock={{ reason: disabledReason, reasonId }}\n      display={disabledReasonDisplay}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      {button}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/button.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport { LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { BUTTON_LINK_PRESSED, ICON_BUTTON_PRESSED, RenderedButtonLink, buttonLook } from \"./button-look\";\nimport type { ButtonSize, ButtonTone, ButtonVariant } from \"./button-look\";\n\n// The kit's text button, and `<Button href>`, the link that looks like one. Its look —\n// the variant, size and tone maps, and `buttonClasses` — is ./button-look, which\n// IconButton shares (0.34, MOD-2, refactor audit 2026-10).\n\n/**\n * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS\n * it unless you pass `type=\"button\"`. Kept native on purpose — a form's own submit\n * button relies on it, and changing the default would silently stop those forms from\n * submitting. Pass `type=\"button\"` for every other action in a form (keksdose had six\n * link buttons submitting their form).\n */\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** `default` (the quiet action, what a Button without `variant` draws), `accent` (the\n   *  strong call to action, solid brand), `secondary`, `ghost`, `danger` or `link`.\n   *  `primary` / `brand` are deprecated aliases of `default` / `accent`. See {@link ButtonVariant}. */\n  variant?: ButtonVariant;\n  /** `md` (default) is the page's action button. `sm` is the compact one — 12px text\n   *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a\n   *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand\n   *  there). Every variant takes either size. */\n  size?: ButtonSize;\n  /** In a flex row next to a taller labelled field, fill the field's height so the\n   *  two line up. No effect outside a flex row. */\n  stretch?: boolean;\n  /** The `<button>` element. React 19 passes `ref` to a function component as an\n   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —\n   *  declared here only because `ButtonHTMLAttributes` does not carry it. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or\n   *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an\n   *  outlined destructive button and `default` a soft one; ignored by the other\n   *  variants. See {@link ButtonTone}. */\n  tone?: ButtonTone;\n  /**\n   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets\n   * `aria-pressed=\"true\"` and draws the \"on\" look — on a `link`, the brand colour and a\n   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and\n   * `false` sets `aria-pressed=\"false\"` with the ordinary look. Left out, no\n   * `aria-pressed` (or the caller's own). For lenkbank's \"All speeds\" text toggle\n   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`\n   * swapping two class strings; with `variant=\"link\" tone=\"muted\"` it is this.\n   */\n  pressed?: boolean;\n  /**\n   * Why the action is not available — the button's half of DangerConfirm's\n   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).\n   *\n   * A disabled button that cannot say why is a dead end: the native `disabled` takes it\n   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a\n   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`\n   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form\n   * submission they stand for) do nothing, and the reason is shown in the kit\n   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it\n   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is\n   * the point of giving a reason.\n   *\n   * The description is a `hidden` copy of the reason rather than the bubble itself: the\n   * bubble exists only while hovered or focused once it is portalled, and a description\n   * that comes and goes is read inconsistently. The bubble is kept visual, the way\n   * DangerConfirm keeps its own.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default a\n   * line under the button at Large and on a touch screen, the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This button COMMITS — it saves, creates, deletes. Under a locked\n   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's\n   * reason (which wins over a `disabledReason` of its own). No provider, or an\n   * unlocked one: no effect. See {@link WriteLockProvider}; a {@link CommitScope} since\n   * 0.33 (`COMMIT_EXCEPT_BILLING`: every lock but a lapsed plan's).\n   */\n  commit?: CommitScope;\n  /**\n   * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.\n   *\n   * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a\n   * `submittingLabel`, so the button jumps width mid-click and a screen reader hears\n   * the name change instead of \"busy\". Here the label STAYS — it is still the\n   * accessible name and still holds the button's width — and the spinner is drawn over\n   * it in the text colour, so nothing beside the button moves.\n   *\n   * The same prop {@link FileButton} has (`pending`), with one difference: this one is\n   * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,\n   * and a native `disabled` drops that focus to `<body>` the moment the save starts;\n   * clicks, and the Enter that submits a form through it, are swallowed instead.\n   */\n  pending?: boolean;\n  /** Only on the link form — see {@link ButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.\n *\n * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the\n * invoice / lease / unit preview dialogs' \"Open\" at invoice-preview-dialog.tsx:36,\n * platform-companies-page.tsx:111, verify-email-page.tsx:86's \"Log in\",\n * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>\n * navigate(…)}>` that are links in all but markup: no middle-click, no \"open in new\n * tab\", no URL on hover, and a screen reader announces a button that then changes the\n * page. With `href` it is an `<a>`: the provider's router link\n * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.\n *\n * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.\n */\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\"> {\n  href: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  stretch?: boolean;\n  tone?: ButtonTone;\n  /** The in-app router link, over the provider's `linkComponent` (see\n   *  {@link KitLinkComponent}). Ignored when `external`. */\n  renderLink?: KitLinkComponent;\n  /** Leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`, never the\n   *  router link, and \"(opens in a new tab)\" read after the label — billing-history's\n   *  Stripe PDF. A `target=\"_blank\"` of your own is announced the same way. */\n  external?: boolean;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return here —\n   * keksdose F1: the \"Continue\" out of a one-shot page (an emailed confirmation link, a\n   * payment return URL) that must not be landed on again. Handed to the router link as\n   * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click\n   * becomes `location.replace(href)`. Ignored when `external`.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead\n   * of the router swapping the view — keksdose F1: a route the SPA does not own (a\n   * server-rendered export, a logout that must drop every in-memory cache). Wins over\n   * `renderLink` and the provider's `linkComponent`.\n   */\n  reloadDocument?: boolean;\n  /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —\n   *  `role=\"link\"` and `aria-disabled`, out of the tab order like a disabled button,\n   *  with the disabled look. The router link is not used: it needs somewhere to go. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pending?: never;\n  pressed?: never;\n  disabledReason?: never;\n  disabledReasonDisplay?: never;\n  commit?: never;\n}\n\n// Declared link-first so `<Button href>` picks the link props; the LAST signature is\n// what `ComponentProps<typeof Button>` reads, so wrappers (FileButton) still see the\n// `<button>` props they always did.\nexport function Button(props: ButtonLinkProps): ReactElement;\nexport function Button(props: ButtonProps): ReactElement;\nexport function Button(props: ButtonProps | ButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <ButtonLink {...(props as ButtonLinkProps)} />;\n  return <ButtonElement {...(props as ButtonProps)} />;\n}\n\nfunction ButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"default\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  className,\n  children,\n  target,\n  rel,\n  onClick,\n  ...rest\n}: ButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The same rule as every kit link (`pickLinkRenderer`): an external `href` or an\n  // in-page `#anchor` is never handed to the provider's router link, even without\n  // `external`.\n  // `reloadDocument` is the caller saying \"not the router\" for this one link.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const cls = cn(\n    buttonLook(variant, size, stretch, tone),\n    // `relative` holds the sr-only note (see sr-only-containment.test).\n    newTab && \"relative\",\n    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also\n    // keeps the hover fill from lighting up on something that refuses the click.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const body = (\n    <>\n      {children}\n      {/* The space OUTSIDE the sr-only span: a name computation trims each child's\n          text, so one inside it was lost (\"Download(opens…\"). In a flex box a bare\n          space draws nothing. */}\n      {newTab && \" \"}\n      {newTab && <span className=\"sr-only\">({common.opensInNewTab})</span>}\n    </>\n  );\n  if (disabled) {\n    return (\n      <a {...rest} role=\"link\" aria-disabled=\"true\" className={cls}>\n        {body}\n      </a>\n    );\n  }\n  if (external || !Link) {\n    return (\n      <a\n        {...rest}\n        href={href}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? onClick : replacingClick(onClick, href, replace, target)}\n        className={cls}\n      >\n        {body}\n      </a>\n    );\n  }\n  return (\n    <RenderedButtonLink\n      render={Link}\n      {...rest}\n      {...routerLinkNavigation(replace)}\n      href={href}\n      target={target}\n      rel={rel}\n      onClick={onClick}\n      className={cls}\n    >\n      {body}\n    </RenderedButtonLink>\n  );\n}\n\nfunction ButtonElement({\n  variant = \"default\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  pressed,\n  disabledReason: ownDisabledReason,\n  disabledReasonDisplay,\n  commit,\n  pending,\n  className,\n  onClick,\n  children,\n  href: _href,\n  renderLink: _renderLink,\n  external: _external,\n  replace: _replace,\n  reloadDocument: _reloadDocument,\n  ...rest\n}: ButtonProps) {\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      onClick={(e) => {\n        // `preventDefault` as well as not calling through: a locked submit button must\n        // not submit its form, and the browser does that after this handler returns.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      className={cn(\n        buttonLook(variant, size, stretch, tone),\n        pressed && (variant === \"link\" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),\n        // The disabled look for the focusable kind of disabled.\n        locked && \"cursor-not-allowed opacity-50\",\n        // No dimming while pending: the spinner IS the state, and at half opacity it\n        // would be the faintest thing on the button. `relative` anchors it.\n        pending && \"relative cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        <>\n          {/* Transparent, not hidden: it keeps the width AND stays the accessible\n              name (`visibility: hidden` would drop it from the name). `gap-[inherit]`\n              keeps an icon + text spaced as the button spaces them. */}\n          <span className=\"inline-flex items-center justify-center gap-[inherit] opacity-0\">{children}</span>\n          {/* Decorative: `aria-busy` says it, as on FileButton. */}\n          <Spinner label={null} className=\"absolute inset-0 m-auto size-4 border-current/30 border-t-current\" />\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n  if (!locked) return button;\n  return (\n    <LockedReason\n      lock={{ reason: disabledReason, reasonId }}\n      display={disabledReasonDisplay}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      {button}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/calculator.js

@@ -7,10 +7,7 @@ import { cn } from "../lib/cn.js";
 import { FIELD_TOUCH_TEXT } from "./field-base.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc.js";
-import {
-  DEFAULT_CALCULATOR_LABELS,
-  useKitLabels
-} from "../i18n/kit-labels.js";
+import { DEFAULT_CALCULATOR_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 const KEYS = [
   { kind: "ins", label: "7", ins: "7" },
   { kind: "ins", label: "8", ins: "8" },
@@ -80,7 +77,10 @@ function CalculatorPanel({
           }
         },
         dir: "ltr",
-        className: cn("block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong", FIELD_TOUCH_TEXT)
+        className: cn(
+          "block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong",
+          FIELD_TOUCH_TEXT
+        )
       }
     ),
     /* @__PURE__ */ jsx("div", { dir: "ltr", className: "h-4 pr-1 text-right font-mono text-xs text-placeholder", children: result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : "" }),

package/dist/components/calculator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  \"aria-label\"?: string;\n  /** Screen-reader names for the panel's own controls. `aria-label` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName }\n  | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n// The kit's one focus frame (text-size §5). Until 0.34 the keys rang in `ring-strong` on\n// `focus:`, so a pointer click left a grey ring on the key it pressed (DOC-7).\nconst KEY_BASE = `flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors ${FOCUS_RING}`;\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--bg-active` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\n//\n// 0.33 (docs/colour-roles-harmonization.md §12.2, §12.9): the digits hover onto\n// `--bg-active`, 1.11–1.18:1 from the key — `--bg-hover` is mixed against the card and\n// sat only 1.04:1 from the well, which in light is the page. The operators rest on\n// `--bg-active` rather than `--border`: More contrast steps the border until it is a\n// 3:1 LINE, and as a fill under the label that left 2.2–2.7:1.\nconst KEY_DIGIT = \"bg-surface-2 text-primary hover:bg-active\";\nconst KEY_ACCENT = \"bg-active text-secondary hover:bg-surface-2\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        // Arithmetic reads left to right in every script, and a calculator display\n        // is right-aligned in every script too — so both stay physical, pinned\n        // with `dir=\"ltr\"` rather than mirrored in a right-to-left form.\n        dir=\"ltr\"\n        className={cn(\"block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong\", FIELD_TOUCH_TEXT)}\n      />\n      <div dir=\"ltr\" className=\"h-4 pr-1 text-right font-mono text-xs text-placeholder\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2\", KEY_ACCENT)}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-inverse text-inverse hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  \"aria-label\": ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the name prop folded in as the `open` key it has\n  // always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width=\"14rem\"\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-placeholder transition-colors hover:text-secondary\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  \"aria-label\"?: string;\n  /** Screen-reader names for the panel's own controls. `aria-label` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key = { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName } | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n// The kit's one focus frame (text-size §5). Until 0.34 the keys rang in `ring-strong` on\n// `focus:`, so a pointer click left a grey ring on the key it pressed (DOC-7).\nconst KEY_BASE = `flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors ${FOCUS_RING}`;\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--bg-active` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\n//\n// 0.33 (docs/colour-roles-harmonization.md §12.2, §12.9): the digits hover onto\n// `--bg-active`, 1.11–1.18:1 from the key — `--bg-hover` is mixed against the card and\n// sat only 1.04:1 from the well, which in light is the page. The operators rest on\n// `--bg-active` rather than `--border`: More contrast steps the border until it is a\n// 3:1 LINE, and as a fill under the label that left 2.2–2.7:1.\nconst KEY_DIGIT = \"bg-surface-2 text-primary hover:bg-active\";\nconst KEY_ACCENT = \"bg-active text-secondary hover:bg-surface-2\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        // Arithmetic reads left to right in every script, and a calculator display\n        // is right-aligned in every script too — so both stay physical, pinned\n        // with `dir=\"ltr\"` rather than mirrored in a right-to-left form.\n        dir=\"ltr\"\n        className={cn(\n          \"block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong\",\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n      <div dir=\"ltr\" className=\"h-4 pr-1 text-right font-mono text-xs text-placeholder\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2\", KEY_ACCENT)}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-inverse text-inverse hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  \"aria-label\": ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the name prop folded in as the `open` key it has\n  // always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width=\"14rem\"\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-placeholder transition-colors hover:text-secondary\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/calendar-heatmap.js

@@ -253,7 +253,9 @@ function CalendarHeatmap({
   const gridName = ariaLabel ?? labels.grid;
   let body;
   if (layout === "weeks") {
-    const columns = { gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))` };
+    const columns = {
+      gridTemplateColumns: `var(--heatmap-label, 2rem) repeat(${weekCount}, var(--heatmap-cell, 0.75rem))`
+    };
     const cellSize = "size-[var(--heatmap-cell,0.75rem)]";
     const monthLabels = Array.from({ length: weekCount }, (_, w) => {
       for (let r = 0; r < 7; r++) {
@@ -309,15 +311,7 @@ function CalendarHeatmap({
     body,
     legend && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "mt-2 flex items-center justify-end gap-1 text-micro text-muted", children: [
       /* @__PURE__ */ jsx("span", { className: "me-0.5", children: labels.less }),
-      legendLevels.map((l) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-legend-level": l,
-          className: "size-2.5 rounded-sm",
-          style: { background: legendFill(l) }
-        },
-        l
-      )),
+      legendLevels.map((l) => /* @__PURE__ */ jsx("span", { "data-legend-level": l, className: "size-2.5 rounded-sm", style: { background: legendFill(l) } }, l)),
       /* @__PURE__ */ jsx("span", { className: "ms-0.5", children: labels.more })
     ] })
   ] });