@eifi1/ui-kit 0.20.1 → 0.22.0

package/dist/components/text-link.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { aF as KitLinkComponent } from '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import { b2 as KitLinkComponent } from '../kit-labels-R8mIAc9N.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -24,7 +26,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -32,11 +33,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -55,14 +55,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
 
 /**
  * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a

package/dist/components/tile-radio.d.ts

@@ -2,24 +2,64 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * The machinery {@link SwatchPicker} and {@link IconPicker} share: a row of square
- * tiles that behaves as ONE radio group. Private to the package — not re-exported
- * from the barrel.
+ * A row of square tiles that behaves as ONE radio group — the machinery
+ * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the
+ * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles
+ * show something of the app's own — a mark, a pattern, a symbol set the kit does not
+ * ship).
  *
  * Keksdose had three of these (the category colours, the category symbols, the
  * transaction flags) and all three were rows of `aria-pressed` buttons: a separate
  * tab stop per tile, and "pressed" on a choice that is really one-of-n. The APG radio
  * group is the shape a screen reader expects for that ("Red, radio, 2 of 7, checked")
  * and the one a keyboard expects too — a single tab stop, arrows to move.
+ *
+ * ## The container is yours
+ *
+ * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns
+ * (a wrapping row, a grid, a row beside a search box). That element must carry the
+ * group's semantics, as SwatchPicker's does:
+ *
+ * ```tsx
+ * <div role="radiogroup" aria-labelledby={headingId} className="flex flex-wrap gap-1.5">
+ *   <TileRadioGroup
+ *     items={[{ key: "dots", label: "Dots" }, { key: "lines", label: "Lines" }]}
+ *     checked={pattern}
+ *     onSelect={(key) => key && setPattern(key)}
+ *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}
+ *   />
+ * </div>
+ * ```
+ *
+ * `role="radiogroup"` and a name (`aria-label` or `aria-labelledby`) — without them a
+ * screen reader hears radios that belong to nothing, and no "2 of 7". Set
+ * `aria-disabled` on it as well when the whole group is `disabled`.
+ *
+ * ## What a tile is
+ *
+ * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by
+ * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing
+ * that label in a bubble on hover and focus — a row of unlabelled squares is the
+ * complaint that put the bubble there. It is for choices that are SEEN: a colour, a
+ * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines
+ * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}
+ * (`type="radio"`): a card names its option by its title and describes it by its text,
+ * where a tile would hide the text behind a bubble and repeat it.
+ *
+ * No strings of its own: every name is an item's `label`, the "none" tile's included.
  */
+/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */
 type TileSize = "sm" | "md" | "lg";
-/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). */
+/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`
+ *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them
+ *  in `renderTile` so a tile of the app's own matches theirs. */
 declare const TILE_SIZE: Record<TileSize, {
     tile: string;
     glyph: string;
     swatch: string;
 }>;
-/** One tile, whatever it shows. `key` is `null` for the "none" entry. */
+/** One tile, whatever it shows. `key` is `null` for the "none" entry — a tile of its
+ *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */
 interface TileItem<T extends string> {
     key: T | null;
     label: string;
@@ -29,22 +69,37 @@ interface TileItem<T extends string> {
     disabled?: boolean;
 }
 interface TileRadioGroupProps<T extends string> {
+    /** The tiles, in reading order. Render them inside a `role="radiogroup"` element
+     *  with a name — see the module note. */
     items: TileItem<T>[];
     /** The checked key, or `undefined` for "nothing is checked" (the mixed state, or
      *  a value that is not among the options). */
     checked: T | null | undefined;
     onSelect: (key: T | null) => void;
-    /** "automatic": an arrow key moves AND checks, the APG default. "manual": arrows
-     *  move focus only, Space or Enter checks — for a picker whose change is expensive
-     *  (a bulk edit that saves on every change). */
-    activation: "automatic" | "manual";
-    disabled: boolean;
-    size: TileSize;
-    /** What goes inside a tile. The frame, the tick and the note's dot are drawn here. */
+    /** "automatic" (default): an arrow key moves AND checks, the APG default. "manual":
+     *  arrows move focus only, Space or Enter checks — for a picker whose change is
+     *  expensive (a bulk edit that saves on every change). */
+    activation?: "automatic" | "manual";
+    /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */
+    disabled?: boolean;
+    /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default "md"; "lg" is the touch-target
+     *  size a phone surface wants. */
+    size?: TileSize;
+    /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by
+     *  `label`. Not called for the `null` ("none") item, which shows the kit's "no"
+     *  glyph. The frame, the tick and the note's dot are drawn around it. */
     renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;
-    /** Extra classes for a tile, per item. */
+    /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here
+     *  beats `size`'s (a tile that grows in a narrow card). */
     tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;
 }
+/**
+ * The tiles of one radio group, without the group element — render them inside a
+ * `role="radiogroup"` with a name (the module note above has the example). One tab stop
+ * (the checked tile, else the first that can be chosen), arrows to move — left and
+ * right follow the page's direction — Home and End to the ends, and by default the
+ * arrows choose as they go.
+ */
 declare function TileRadioGroup<T extends string>({ items, checked, onSelect, activation, disabled, size, renderTile, tileClassName, }: TileRadioGroupProps<T>): react.JSX.Element;
 
 export { TILE_SIZE, type TileItem, TileRadioGroup, type TileRadioGroupProps, type TileSize };

package/dist/components/tile-radio.js

@@ -17,9 +17,9 @@ function TileRadioGroup({
   items,
   checked,
   onSelect,
-  activation,
-  disabled,
-  size,
+  activation = "automatic",
+  disabled = false,
+  size = "md",
   renderTile,
   tileClassName
 }) {

package/dist/components/tile-radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * The machinery {@link SwatchPicker} and {@link IconPicker} share: a row of square\n * tiles that behaves as ONE radio group. Private to the package — not re-exported\n * from the barrel.\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n */\n\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  disabled?: boolean;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\": an arrow key moves AND checks, the APG default. \"manual\": arrows\n   *  move focus only, Space or Enter checks — for a picker whose change is expensive\n   *  (a bulk edit that saves on every change). */\n  activation: \"automatic\" | \"manual\";\n  disabled: boolean;\n  size: TileSize;\n  /** What goes inside a tile. The frame, the tick and the note's dot are drawn here. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item. */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation,\n  disabled,\n  size,\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be chosen — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere.\n  const tabStop =\n    checkedIndex >= 0 && !items[checkedIndex].disabled\n      ? checkedIndex\n      : items.findIndex((it) => !it.disabled);\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const enabled = items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    if (activation === \"automatic\") onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's.\n            aria-describedby={item.note ? `${noteId}-${i}` : undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            disabled={disabled || item.disabled}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own.\n            onClick={() => !selected && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * A row of square tiles that behaves as ONE radio group — the machinery\n * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the\n * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles\n * show something of the app's own — a mark, a pattern, a symbol set the kit does not\n * ship).\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n *\n * ## The container is yours\n *\n * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns\n * (a wrapping row, a grid, a row beside a search box). That element must carry the\n * group's semantics, as SwatchPicker's does:\n *\n * ```tsx\n * <div role=\"radiogroup\" aria-labelledby={headingId} className=\"flex flex-wrap gap-1.5\">\n *   <TileRadioGroup\n *     items={[{ key: \"dots\", label: \"Dots\" }, { key: \"lines\", label: \"Lines\" }]}\n *     checked={pattern}\n *     onSelect={(key) => key && setPattern(key)}\n *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}\n *   />\n * </div>\n * ```\n *\n * `role=\"radiogroup\"` and a name (`aria-label` or `aria-labelledby`) — without them a\n * screen reader hears radios that belong to nothing, and no \"2 of 7\". Set\n * `aria-disabled` on it as well when the whole group is `disabled`.\n *\n * ## What a tile is\n *\n * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by\n * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing\n * that label in a bubble on hover and focus — a row of unlabelled squares is the\n * complaint that put the bubble there. It is for choices that are SEEN: a colour, a\n * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines\n * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}\n * (`type=\"radio\"`): a card names its option by its title and describes it by its text,\n * where a tile would hide the text behind a bubble and repeat it.\n *\n * No strings of its own: every name is an item's `label`, the \"none\" tile's included.\n */\n\n/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`\n *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them\n *  in `renderTile` so a tile of the app's own matches theirs. */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry — a tile of its\n *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  disabled?: boolean;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  /** The tiles, in reading order. Render them inside a `role=\"radiogroup\"` element\n   *  with a name — see the module note. */\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\" (default): an arrow key moves AND checks, the APG default. \"manual\":\n   *  arrows move focus only, Space or Enter checks — for a picker whose change is\n   *  expensive (a bulk edit that saves on every change). */\n  activation?: \"automatic\" | \"manual\";\n  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */\n  disabled?: boolean;\n  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default \"md\"; \"lg\" is the touch-target\n   *  size a phone surface wants. */\n  size?: TileSize;\n  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by\n   *  `label`. Not called for the `null` (\"none\") item, which shows the kit's \"no\"\n   *  glyph. The frame, the tick and the note's dot are drawn around it. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here\n   *  beats `size`'s (a tile that grows in a narrow card). */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n\n/**\n * The tiles of one radio group, without the group element — render them inside a\n * `role=\"radiogroup\"` with a name (the module note above has the example). One tab stop\n * (the checked tile, else the first that can be chosen), arrows to move — left and\n * right follow the page's direction — Home and End to the ends, and by default the\n * arrows choose as they go.\n */\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation = \"automatic\",\n  disabled = false,\n  size = \"md\",\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be chosen — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere.\n  const tabStop =\n    checkedIndex >= 0 && !items[checkedIndex].disabled\n      ? checkedIndex\n      : items.findIndex((it) => !it.disabled);\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const enabled = items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    if (activation === \"automatic\") onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's.\n            aria-describedby={item.note ? `${noteId}-${i}` : undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            disabled={disabled || item.disabled}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own.\n            onClick={() => !selected && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,6 +1,8 @@
 import * as react from 'react';
-import { aE as InputProps } from '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import { a$ as InputProps } from '../kit-labels-R8mIAc9N.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -23,7 +25,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -31,11 +32,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -54,14 +54,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).
@@ -91,8 +93,12 @@ import '../lib/translation-review.js';
  *    {@link FIELD_INVALID} and `aria-invalid`. A reversed window (`min="22:00"
  *    max="06:00"`, a night shift, quiet hours) is read the way the HTML spec reads it:
  *    as wrapping past midnight.
+ *
+ * `hint` is Input's too (keksdose K4): text is a caption under the field ("Local time
+ * at the site"), a {@link FieldHint} rides the label line. `showCount` is typed out — a
+ * time has no length worth counting.
  */
-interface TimeInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant"> {
+interface TimeInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "min" | "max" | "step" | "variant" | "showCount" | "countLabels"> {
     /** `"HH:mm"` (or `"HH:mm:ss"` with a sub-minute `step`); `""` is "no time". */
     value: string;
     /** The normalised value on every change the browser reports — which for a time

package/dist/components/time-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/time-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ChangeEvent } from \"react\";\nimport { Input, type InputProps } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * A time of day, as a `\"HH:mm\"` string (`\"HH:mm:ss\"` once `step` asks for seconds).\n *\n * NATIVE `<input type=\"time\">`, deliberately, rather than a pair of custom spinners.\n * What the browser's control gives for free is the part a hand-rolled one gets wrong:\n * 12- versus 24-hour display follows the user's OWN locale settings (not the page's —\n * which is the right authority for \"how do I read a clock\"), a phone opens its\n * platform wheel or dial, each segment is a spin button a screen reader already knows,\n * and typing \"1430\" fills both segments. The price is that the display cannot be\n * forced to 24h from here and the look of the segments is the browser's; neither is a\n * reason for three apps to ship an unaudited widget. So this is {@link Input} with\n * `type=\"time\"` and a string contract, and everything else — the floating label, the\n * `invalid`/`error` wiring, the click-anywhere `showPicker()` (feedback #224) — is\n * Input's own, inherited rather than copied.\n *\n * Two things it adds over `<Input type=\"time\">`:\n *\n *  - **A normalised value.** A time input's value is any valid time string, so a\n *    browser may leave off a zero seconds segment with `step={1}` or report\n *    milliseconds, and a stored value may carry seconds the field does not show.\n *    `onValueChange` always hands back exactly the shape `step` implies, so the value\n *    a form stores compares and sorts as a plain string.\n *  - **Out-of-range painted, not just flagged.** A native time input outside\n *    `min`/`max` matches `:invalid` and nothing styles that selector (see Input's\n *    `invalid`), so an out-of-window time looked fine. Here it wears\n *    {@link FIELD_INVALID} and `aria-invalid`. A reversed window (`min=\"22:00\"\n *    max=\"06:00\"`, a night shift, quiet hours) is read the way the HTML spec reads it:\n *    as wrapping past midnight.\n */\nexport interface TimeInputProps\n  extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\" | \"variant\"> {\n  /** `\"HH:mm\"` (or `\"HH:mm:ss\"` with a sub-minute `step`); `\"\"` is \"no time\". */\n  value: string;\n  /** The normalised value on every change the browser reports — which for a time\n   *  input is only once every segment holds a digit, or when the field is cleared\n   *  (`\"\"`). Plain `onChange` still fires alongside it with the raw event. */\n  onValueChange?: (value: string) => void;\n  /** Earliest time, `\"HH:mm\"`. May be later than `max` for a window that wraps\n   *  midnight. */\n  min?: string;\n  /** Latest time, `\"HH:mm\"`. */\n  max?: string;\n  /** Granularity in SECONDS, as on the native input: 60 (the default) is minutes,\n   *  900 is quarter hours, anything not a whole minute (e.g. 1) shows seconds. */\n  step?: number;\n}\n\n/** Seconds shown when `step` is not a whole number of minutes — the browser's own rule\n *  for whether the seconds segment appears. */\nfunction withSeconds(step: number | undefined): boolean {\n  return step !== undefined && step % 60 !== 0;\n}\n\n/** Any `HH:mm[:ss[.sss]]` the browser reports → exactly the shape `step` implies.\n *  Anything else (including `\"\"`) comes back as it went in. */\nexport function normalizeTime(raw: string, seconds: boolean): string {\n  const m = /^(\\d{2}):(\\d{2})(?::(\\d{2}))?/.exec(raw);\n  if (!m) return raw;\n  return seconds ? `${m[1]}:${m[2]}:${m[3] ?? \"00\"}` : `${m[1]}:${m[2]}`;\n}\n\n/** Whether `value` lies inside `[min, max]`, wrapping midnight when `min > max`.\n *  Zero-padded times compare as strings; both sides are padded to seconds first so\n *  \"14:30\" and \"14:30:00\" are the same instant. */\nexport function isTimeInRange(value: string, min?: string, max?: string): boolean {\n  if (value === \"\") return true;\n  const v = normalizeTime(value, true);\n  const lo = min ? normalizeTime(min, true) : undefined;\n  const hi = max ? normalizeTime(max, true) : undefined;\n  if (lo !== undefined && hi !== undefined && lo > hi) return v >= lo || v <= hi;\n  return (lo === undefined || v >= lo) && (hi === undefined || v <= hi);\n}\n\nexport const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(function TimeInput(\n  { value, onValueChange, onChange, min, max, step, invalid, inputClassName, ...rest },\n  ref,\n) {\n  const seconds = withSeconds(step);\n  const outOfRange = !isTimeInRange(value, min, max);\n  return (\n    <Input\n      ref={ref}\n      {...rest}\n      type=\"time\"\n      // Normalised on the way IN as well: a stored \"14:30:00\" handed to a minutes-only\n      // field would otherwise make the browser show a seconds segment nobody asked for.\n      value={normalizeTime(value, seconds)}\n      min={min}\n      max={max}\n      step={step}\n      invalid={invalid || outOfRange}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e);\n        onValueChange?.(normalizeTime(e.target.value, seconds));\n      }}\n      // The segments are digits that change under the caret as you spin them;\n      // proportional figures make the whole field jitter sideways on every step.\n      inputClassName={cn(\"tabular-nums\", inputClassName)}\n    />\n  );\n});\nTimeInput.displayName = \"TimeInput\";\n"],"mappings":";AAqFI;AArFJ,SAAS,kBAAkB;AAE3B,SAAS,aAA8B;AACvC,SAAS,UAAU;AAmDnB,SAAS,YAAY,MAAmC;AACtD,SAAO,SAAS,UAAa,OAAO,OAAO;AAC7C;AAIO,SAAS,cAAc,KAAa,SAA0B;AACnE,QAAM,IAAI,gCAAgC,KAAK,GAAG;AAClD,MAAI,CAAC,EAAG,QAAO;AACf,SAAO,UAAU,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;AACtE;AAKO,SAAS,cAAc,OAAe,KAAc,KAAuB;AAChF,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,IAAI,cAAc,OAAO,IAAI;AACnC,QAAM,KAAK,MAAM,cAAc,KAAK,IAAI,IAAI;AAC5C,QAAM,KAAK,MAAM,cAAc,KAAK,IAAI,IAAI;AAC5C,MAAI,OAAO,UAAa,OAAO,UAAa,KAAK,GAAI,QAAO,KAAK,MAAM,KAAK;AAC5E,UAAQ,OAAO,UAAa,KAAK,QAAQ,OAAO,UAAa,KAAK;AACpE;AAEO,MAAM,YAAY,WAA6C,SAASA,WAC7E,EAAE,OAAO,eAAe,UAAU,KAAK,KAAK,MAAM,SAAS,gBAAgB,GAAG,KAAK,GACnF,KACA;AACA,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,aAAa,CAAC,cAAc,OAAO,KAAK,GAAG;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MAGL,OAAO,cAAc,OAAO,OAAO;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,UAAU,CAAC,MAAqC;AAC9C,mBAAW,CAAC;AACZ,wBAAgB,cAAc,EAAE,OAAO,OAAO,OAAO,CAAC;AAAA,MACxD;AAAA,MAGA,gBAAgB,GAAG,gBAAgB,cAAc;AAAA;AAAA,EACnD;AAEJ,CAAC;AACD,UAAU,cAAc;","names":["TimeInput"]}
+{"version":3,"sources":["../../src/components/time-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ChangeEvent } from \"react\";\nimport { Input, type InputProps } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * A time of day, as a `\"HH:mm\"` string (`\"HH:mm:ss\"` once `step` asks for seconds).\n *\n * NATIVE `<input type=\"time\">`, deliberately, rather than a pair of custom spinners.\n * What the browser's control gives for free is the part a hand-rolled one gets wrong:\n * 12- versus 24-hour display follows the user's OWN locale settings (not the page's —\n * which is the right authority for \"how do I read a clock\"), a phone opens its\n * platform wheel or dial, each segment is a spin button a screen reader already knows,\n * and typing \"1430\" fills both segments. The price is that the display cannot be\n * forced to 24h from here and the look of the segments is the browser's; neither is a\n * reason for three apps to ship an unaudited widget. So this is {@link Input} with\n * `type=\"time\"` and a string contract, and everything else — the floating label, the\n * `invalid`/`error` wiring, the click-anywhere `showPicker()` (feedback #224) — is\n * Input's own, inherited rather than copied.\n *\n * Two things it adds over `<Input type=\"time\">`:\n *\n *  - **A normalised value.** A time input's value is any valid time string, so a\n *    browser may leave off a zero seconds segment with `step={1}` or report\n *    milliseconds, and a stored value may carry seconds the field does not show.\n *    `onValueChange` always hands back exactly the shape `step` implies, so the value\n *    a form stores compares and sorts as a plain string.\n *  - **Out-of-range painted, not just flagged.** A native time input outside\n *    `min`/`max` matches `:invalid` and nothing styles that selector (see Input's\n *    `invalid`), so an out-of-window time looked fine. Here it wears\n *    {@link FIELD_INVALID} and `aria-invalid`. A reversed window (`min=\"22:00\"\n *    max=\"06:00\"`, a night shift, quiet hours) is read the way the HTML spec reads it:\n *    as wrapping past midnight.\n *\n * `hint` is Input's too (keksdose K4): text is a caption under the field (\"Local time\n * at the site\"), a {@link FieldHint} rides the label line. `showCount` is typed out — a\n * time has no length worth counting.\n */\nexport interface TimeInputProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\" | \"variant\" | \"showCount\" | \"countLabels\"\n  > {\n  /** `\"HH:mm\"` (or `\"HH:mm:ss\"` with a sub-minute `step`); `\"\"` is \"no time\". */\n  value: string;\n  /** The normalised value on every change the browser reports — which for a time\n   *  input is only once every segment holds a digit, or when the field is cleared\n   *  (`\"\"`). Plain `onChange` still fires alongside it with the raw event. */\n  onValueChange?: (value: string) => void;\n  /** Earliest time, `\"HH:mm\"`. May be later than `max` for a window that wraps\n   *  midnight. */\n  min?: string;\n  /** Latest time, `\"HH:mm\"`. */\n  max?: string;\n  /** Granularity in SECONDS, as on the native input: 60 (the default) is minutes,\n   *  900 is quarter hours, anything not a whole minute (e.g. 1) shows seconds. */\n  step?: number;\n}\n\n/** Seconds shown when `step` is not a whole number of minutes — the browser's own rule\n *  for whether the seconds segment appears. */\nfunction withSeconds(step: number | undefined): boolean {\n  return step !== undefined && step % 60 !== 0;\n}\n\n/** Any `HH:mm[:ss[.sss]]` the browser reports → exactly the shape `step` implies.\n *  Anything else (including `\"\"`) comes back as it went in. */\nexport function normalizeTime(raw: string, seconds: boolean): string {\n  const m = /^(\\d{2}):(\\d{2})(?::(\\d{2}))?/.exec(raw);\n  if (!m) return raw;\n  return seconds ? `${m[1]}:${m[2]}:${m[3] ?? \"00\"}` : `${m[1]}:${m[2]}`;\n}\n\n/** Whether `value` lies inside `[min, max]`, wrapping midnight when `min > max`.\n *  Zero-padded times compare as strings; both sides are padded to seconds first so\n *  \"14:30\" and \"14:30:00\" are the same instant. */\nexport function isTimeInRange(value: string, min?: string, max?: string): boolean {\n  if (value === \"\") return true;\n  const v = normalizeTime(value, true);\n  const lo = min ? normalizeTime(min, true) : undefined;\n  const hi = max ? normalizeTime(max, true) : undefined;\n  if (lo !== undefined && hi !== undefined && lo > hi) return v >= lo || v <= hi;\n  return (lo === undefined || v >= lo) && (hi === undefined || v <= hi);\n}\n\nexport const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(function TimeInput(\n  { value, onValueChange, onChange, min, max, step, invalid, inputClassName, ...rest },\n  ref,\n) {\n  const seconds = withSeconds(step);\n  const outOfRange = !isTimeInRange(value, min, max);\n  return (\n    <Input\n      ref={ref}\n      {...rest}\n      type=\"time\"\n      // Normalised on the way IN as well: a stored \"14:30:00\" handed to a minutes-only\n      // field would otherwise make the browser show a seconds segment nobody asked for.\n      value={normalizeTime(value, seconds)}\n      min={min}\n      max={max}\n      step={step}\n      invalid={invalid || outOfRange}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e);\n        onValueChange?.(normalizeTime(e.target.value, seconds));\n      }}\n      // The segments are digits that change under the caret as you spin them;\n      // proportional figures make the whole field jitter sideways on every step.\n      inputClassName={cn(\"tabular-nums\", inputClassName)}\n    />\n  );\n});\nTimeInput.displayName = \"TimeInput\";\n"],"mappings":";AA4FI;AA5FJ,SAAS,kBAAkB;AAE3B,SAAS,aAA8B;AACvC,SAAS,UAAU;AA0DnB,SAAS,YAAY,MAAmC;AACtD,SAAO,SAAS,UAAa,OAAO,OAAO;AAC7C;AAIO,SAAS,cAAc,KAAa,SAA0B;AACnE,QAAM,IAAI,gCAAgC,KAAK,GAAG;AAClD,MAAI,CAAC,EAAG,QAAO;AACf,SAAO,UAAU,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;AACtE;AAKO,SAAS,cAAc,OAAe,KAAc,KAAuB;AAChF,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,IAAI,cAAc,OAAO,IAAI;AACnC,QAAM,KAAK,MAAM,cAAc,KAAK,IAAI,IAAI;AAC5C,QAAM,KAAK,MAAM,cAAc,KAAK,IAAI,IAAI;AAC5C,MAAI,OAAO,UAAa,OAAO,UAAa,KAAK,GAAI,QAAO,KAAK,MAAM,KAAK;AAC5E,UAAQ,OAAO,UAAa,KAAK,QAAQ,OAAO,UAAa,KAAK;AACpE;AAEO,MAAM,YAAY,WAA6C,SAASA,WAC7E,EAAE,OAAO,eAAe,UAAU,KAAK,KAAK,MAAM,SAAS,gBAAgB,GAAG,KAAK,GACnF,KACA;AACA,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,aAAa,CAAC,cAAc,OAAO,KAAK,GAAG;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MAGL,OAAO,cAAc,OAAO,OAAO;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,UAAU,CAAC,MAAqC;AAC9C,mBAAW,CAAC;AACZ,wBAAgB,cAAc,EAAE,OAAO,OAAO,OAAO,CAAC;AAAA,MACxD;AAAA,MAGA,gBAAgB,GAAG,gBAAgB,cAAc;AAAA;AAAA,EACnD;AAEJ,CAAC;AACD,UAAU,cAAc;","names":["TimeInput"]}

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

@@ -53,6 +53,9 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor
      * (rule-editor:204) writes as `optionClassName="px-2 py-1 text-xs"` beside a small
      * caption. `md` (default) is the size every other group has.
+     *
+     * Honoured inside the field chrome and the strip too (keksdose K1): the 12px type
+     * stays, and the field is still 42px — see `CHROME_PAD`.
      */
     size?: "sm" | "md";
     /**
@@ -78,11 +81,32 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * cap pair sits in a `Field` column between two labelled-above inputs, where the
      * chrome's inner label would be the only one of its kind).
      *
+     * `"strip"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a
+     * group that stands in a row of fields but is not one (keksdose K2 — the transaction
+     * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group
+     * keeps its own box, and its segments drop their vertical padding so a 16px strip
+     * plus the 26px group is exactly a labelled {@link Input}'s 42px, the label on the
+     * same line as theirs. `error` and `caption` go under the group, as in the other two.
+     *
      * Inside a `Field`, pass no `label` at all and spread the render-prop instead —
      * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —
      * so the Field's label names the group and its hint and error describe it.
      */
-    labelPlacement?: "field" | "above";
+    labelPlacement?: "field" | "above" | "strip";
+    /**
+     * Classes for the field chrome's own box — the bordered, padded box round the
+     * segments — merged last, so they win. `className` styles the wrapper the chrome sits
+     * in; this reaches the box itself. Only with `label` in the `"field"` placement.
+     *
+     * For a field JOINED flush to a neighbour (keksdose K1): reports-filters.tsx joins its
+     * "group by" field to the range select on its start edge from `md` up, and squares the
+     * shared corners by hand chrome today — here that is
+     * `chromeClassName="md:rounded-s-none"` with `className="md:-ms-px"` (the wrapper
+     * overlaps the neighbour by the one border they share). A class rather than a
+     * `joined="start"` because every such join keksdose has is responsive: on a phone the
+     * two stack and both keep their corners.
+     */
+    chromeClassName?: string;
     /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with
      *  `label`. */
     hint?: ReactNode;
@@ -90,6 +114,28 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      *  `--danger`, marks the group `aria-invalid` and describes it with the message, as
      *  {@link Select}'s `error` does. Only with `label`. */
     error?: ReactNode;
+    /**
+     * Why the group cannot be changed right now — {@link Button}'s `disabledReason`, for
+     * a group that saves itself on change (keksdose K3: the last `SaveGuard` sites are
+     * self-committing controls like this one, and SaveGuard's native `disabled` took
+     * them out of the tab order so the reason never reached a keyboard).
+     *
+     * The group stays reachable — its segments are `aria-disabled`, not `disabled`, and
+     * a radio group's arrow keys still walk them — but nothing reaches `onChange`, and
+     * the reason shows in the kit {@link Tooltip} over the segments on hover or focus and
+     * describes each segment. The chosen option keeps its fill, as under `disabled`.
+     * Wins over `disabled`, as on Button: passing both keeps the group reachable.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * This group COMMITS — choosing an option saves it. Under a locked
+     * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
+     * reason (which wins over a `disabledReason` of its own): *"everything renders; only
+     * the commit is locked"* (keksdose dev#496/#497), and a control that is its own commit
+     * must render refused, never live-and-discarding. No provider, or an unlocked one:
+     * no effect.
+     */
+    commit?: boolean;
 }
 /**
  * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField