@eifi1/ui-kit 0.21.0 → 0.23.0

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

@@ -1,15 +1,19 @@
 import * as react from 'react';
-import { aE as InputProps } from '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import { bf as InputProps } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.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';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -23,7 +27,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 +34,7 @@ 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/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 +53,20 @@ 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';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).
@@ -91,8 +96,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

package/dist/components/toggle-group.js

@@ -1,9 +1,15 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
 import { FIELD_INVALID, FloatingField, Label } from "./ui.js";
+import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
+import { hasContent, LabelStrip } from "./field-parts.js";
+const CHROME_PAD = { md: "pt-5 pb-0.5", sm: "pt-5 pb-1" };
+const CHROME_SEGMENT = { md: "py-0 leading-[18px]", sm: "py-0 leading-4" };
+const STRIP_SEGMENT = { md: "py-0", sm: "py-0.5" };
 function ToggleGroup(props) {
   const {
     value,
@@ -16,24 +22,33 @@ function ToggleGroup(props) {
     size = "md",
     label,
     labelPlacement = "field",
+    chromeClassName,
     hint,
     error,
+    disabledReason: ownDisabledReason,
+    commit,
     "aria-label": ariaLabelAttr,
     ...restWithMode
   } = props;
   const labelId = useId();
   const errorId = useId();
-  const labelled = label !== void 0 && label !== null && label !== false && label !== "";
+  const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
+  const locked = hasContent(disabledReason);
+  const dimmed = disabled || locked;
+  const labelled = hasContent(label);
   const field = labelled && labelPlacement === "field";
   const above = labelled && labelPlacement === "above";
-  const hasError = labelled && error !== void 0 && error !== null && error !== false && error !== "";
+  const strip = labelled && labelPlacement === "strip";
+  const hasError = labelled && hasContent(error);
   const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;
   const outsideInvalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
   const captionId = useId();
   const captionIsLive = typeof caption === "function";
   const captionNode = captionIsLive ? caption(value) : caption;
-  const hasCaption = captionNode !== void 0 && captionNode !== null && captionNode !== false && captionNode !== "";
+  const hasCaption = hasContent(captionNode);
   const choose = (next) => {
+    if (locked) return;
     if (props.allowEmpty) props.onChange(next === value ? null : next);
     else props.onChange(next);
   };
@@ -55,6 +70,68 @@ function ToggleGroup(props) {
     buttons?.[next]?.focus();
     choose(options[next].value);
   };
+  const segments = options.map((opt, index) => {
+    const active = opt.value === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: pressed ? void 0 : "radio",
+        "aria-checked": pressed ? void 0 : active,
+        "aria-pressed": pressed ? active : void 0,
+        disabled: disabled && !locked,
+        "aria-disabled": locked || void 0,
+        "aria-describedby": locked ? reasonId : void 0,
+        tabIndex: pressed ? void 0 : opt.value === tabStop ? 0 : -1,
+        onKeyDown: pressed ? void 0 : (e) => onRadioKey(e, index),
+        onClick: () => choose(opt.value),
+        className: cn(
+          // `truncate` (which carries whitespace-nowrap) rather than letting a
+          // label wrap: a segmented control sizes its whole row to the tallest
+          // option, so one two-word option — Keksdose feedback #147's "Where I
+          // am" — silently doubles the height of every segment beside it.
+          //
+          // `basis-auto` is what keeps that ellipsis a LAST resort rather than
+          // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a
+          // shrink-to-fit group (`w-auto`) still resolves to the sum of the
+          // labels' widths — and then splits it EQUALLY, so the short option
+          // got 66px it did not need and "Where I am" got 66 of the 81 it did:
+          // truncated at 1778px of free screen. Basing each segment on its own
+          // content and sharing only the LEFTOVER space keeps a full-width
+          // group's segments near-equal and an auto-width group's exact.
+          //
+          // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring
+          // is a box-shadow that spreads OUTWARD, so on a flush group it painted
+          // 2px of ring over both neighbours and over the container's own border
+          // — and on a phone it appeared on every TAP, because a tap focuses the
+          // button. That is the other half of what live #268's rework saw
+          // overlaying the selected segment's boundary. Inset keeps the ring
+          // inside the segment it belongs to; focus-visible keeps it for the
+          // keyboard, which is the only input that needs it.
+          overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
+          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          size === "sm" && "px-2 py-1 text-xs",
+          // In the field chrome: no vertical padding, and the line that makes the
+          // field 42px under a strip that clears the label — see CHROME_PAD. `sm`
+          // keeps its 12px type here (it used to be overridden to the md line).
+          field && CHROME_SEGMENT[size],
+          // In the strip placement: a 26px group under a 16px strip — STRIP_SEGMENT.
+          strip && STRIP_SEGMENT[size],
+          active ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+          // No hover fill on a group that cannot be changed — a segment that
+          // lights up under the pointer is an offer, and there is none here. Not on
+          // the chosen segment: its fill IS its state, and its inverse text would
+          // vanish on a transparent hover.
+          dimmed && "cursor-not-allowed",
+          dimmed && !active && "hover:bg-transparent dark:hover:bg-transparent",
+          optionClassName,
+          opt.className
+        ),
+        children: opt.label
+      },
+      opt.value
+    );
+  });
   const group = /* @__PURE__ */ jsx(
     "div",
     {
@@ -64,7 +141,7 @@ function ToggleGroup(props) {
       "aria-labelledby": labelled && ariaLabelAttr === void 0 && ariaLabel === void 0 ? labelId : rest["aria-labelledby"],
       "aria-invalid": hasError || rest["aria-invalid"] || void 0,
       "aria-describedby": [rest["aria-describedby"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || void 0,
-      "aria-disabled": disabled || void 0,
+      "aria-disabled": dimmed || void 0,
       className: cn(
         // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
         // sits in a uniform 2px moat and no two fills ever touch. Flush segments were
@@ -83,72 +160,27 @@ function ToggleGroup(props) {
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
-        disabled && "opacity-60",
+        dimmed && "opacity-60",
         // The bare group (no chrome to paint) wears the invalid border itself.
-        !field && (outsideInvalid || above && hasError) && FIELD_INVALID,
+        !field && (outsideInvalid || (above || strip) && hasError) && FIELD_INVALID,
         // Inside the field's chrome the group is only a row of segments: no border, no
         // surface, no padding of its own, and the field (not the group) is what dims.
         field && "border-0 bg-transparent p-0 shadow-none opacity-100",
         !labelled && className
       ),
-      children: options.map((opt, index) => {
-        const active = opt.value === value;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: pressed ? void 0 : "radio",
-            "aria-checked": pressed ? void 0 : active,
-            "aria-pressed": pressed ? active : void 0,
-            disabled,
-            tabIndex: pressed ? void 0 : opt.value === tabStop ? 0 : -1,
-            onKeyDown: pressed ? void 0 : (e) => onRadioKey(e, index),
-            onClick: () => choose(opt.value),
-            className: cn(
-              // `truncate` (which carries whitespace-nowrap) rather than letting a
-              // label wrap: a segmented control sizes its whole row to the tallest
-              // option, so one two-word option — Keksdose feedback #147's "Where I
-              // am" — silently doubles the height of every segment beside it.
-              //
-              // `basis-auto` is what keeps that ellipsis a LAST resort rather than
-              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a
-              // shrink-to-fit group (`w-auto`) still resolves to the sum of the
-              // labels' widths — and then splits it EQUALLY, so the short option
-              // got 66px it did not need and "Where I am" got 66 of the 81 it did:
-              // truncated at 1778px of free screen. Basing each segment on its own
-              // content and sharing only the LEFTOVER space keeps a full-width
-              // group's segments near-equal and an auto-width group's exact.
-              //
-              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring
-              // is a box-shadow that spreads OUTWARD, so on a flush group it painted
-              // 2px of ring over both neighbours and over the container's own border
-              // — and on a phone it appeared on every TAP, because a tap focuses the
-              // button. That is the other half of what live #268's rework saw
-              // overlaying the selected segment's boundary. Inset keeps the ring
-              // inside the segment it belongs to; focus-visible keeps it for the
-              // keyboard, which is the only input that needs it.
-              overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
-              "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
-              size === "sm" && "px-2 py-1 text-xs",
-              // In a field: no vertical padding and a 20px line — a `text-sm` line, the
-              // same line a labelled Select holds under its label strip — so the field's
-              // own `pt-4 pb-1` decides the height, as it does for the select.
-              field && "py-0 leading-5",
-              active ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-              // No hover fill on a group that cannot be changed — a segment that
-              // lights up under the pointer is an offer, and there is none here. Not on
-              // the chosen segment: its fill IS its state, and its inverse text would
-              // vanish on a transparent hover.
-              disabled && "cursor-not-allowed",
-              disabled && !active && "hover:bg-transparent dark:hover:bg-transparent",
-              optionClassName,
-              opt.className
-            ),
-            children: opt.label
-          },
-          opt.value
-        );
-      })
+      children: locked ? (
+        // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a
+        // wrapper outside it would become the flex or grid item in the caller's row in
+        // the group's place, and a `w-full` / `md:w-auto` on the group would size the
+        // wrong box. This row inherits the group's gap and wrap, so the segments lay out
+        // exactly as they do unlocked, and `:scope > button` above still finds them. A
+        // fragment child, so the Tooltip describes nothing itself — each segment points
+        // at the hidden copy, the way a locked Button does.
+        /* @__PURE__ */ jsx(Tooltip, { label: disabledReason, className: "flex min-w-0 flex-1 gap-[inherit] [flex-wrap:inherit]", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          segments,
+          /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+        ] }) })
+      ) : segments
     }
   );
   const captionEl = hasCaption || captionIsLive ? /* @__PURE__ */ jsx(
@@ -168,7 +200,7 @@ function ToggleGroup(props) {
           Label,
           {
             id: labelId,
-            disabled,
+            disabled: dimmed,
             "data-error": hasError || void 0,
             className: "data-[error=true]:text-[var(--danger)]",
             children: label
@@ -183,6 +215,13 @@ function ToggleGroup(props) {
       ] })
     ] });
   }
+  if (strip) {
+    return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint, disabled: dimmed, pad: "field", className, children: [
+      group,
+      captionEl,
+      errorEl
+    ] });
+  }
   if (!field) {
     if (!captionEl) return group;
     return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
@@ -205,9 +244,11 @@ function ToggleGroup(props) {
             "div",
             {
               className: cn(
-                "flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm",
-                disabled && "bg-[var(--bg-surface-2)] opacity-60",
-                hasError && FIELD_INVALID
+                "flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 shadow-sm",
+                CHROME_PAD[size],
+                dimmed && "bg-[var(--bg-surface-2)] opacity-60",
+                hasError && FIELD_INVALID,
+                chromeClassName
               ),
               children: group
             }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./ui\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\";\n  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with\n   *  `label`. */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n}\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted 11px text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const labelled = label !== undefined && label !== null && label !== false && label !== \"\";\n  // `field` is the chrome; a label placed above keeps the bare group's own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const hasError = labelled && error !== undefined && error !== null && error !== false && error !== \"\";\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = captionNode !== undefined && captionNode !== null && captionNode !== false && captionNode !== \"\";\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        overflow === \"wrap\" && \"flex-wrap\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || (above && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={pressed ? undefined : \"radio\"}\n            aria-checked={pressed ? undefined : active}\n            aria-pressed={pressed ? active : undefined}\n            disabled={disabled}\n            tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate\",\n              \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n              size === \"sm\" && \"px-2 py-1 text-xs\",\n              // In a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here. Not on\n              // the chosen segment: its fill IS its state, and its inverse text would\n              // vanish on a transparent hover.\n              disabled && \"cursor-not-allowed\",\n              disabled && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-[11px] leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n      {error}\n    </p>\n  ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={disabled}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-[var(--danger)]\"\n          >\n            {label}\n          </Label>\n          {hint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (!field) {\n    if (!captionEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={hint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasContent, LabelStrip } from \"./field-parts\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   *\n   * Honoured inside the field chrome and the strip too (keksdose K1): the 12px type\n   * stays, and the field is still 42px — see `CHROME_PAD`.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * `\"strip\"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a\n   * group that stands in a row of fields but is not one (keksdose K2 — the transaction\n   * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group\n   * keeps its own box, and its segments drop their vertical padding so a 16px strip\n   * plus the 26px group is exactly a labelled {@link Input}'s 42px, the label on the\n   * same line as theirs. `error` and `caption` go under the group, as in the other two.\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\" | \"strip\";\n  /**\n   * Classes for the field chrome's own box — the bordered, padded box round the\n   * segments — merged last, so they win. `className` styles the wrapper the chrome sits\n   * in; this reaches the box itself. Only with `label` in the `\"field\"` placement.\n   *\n   * For a field JOINED flush to a neighbour (keksdose K1): reports-filters.tsx joins its\n   * \"group by\" field to the range select on its start edge from `md` up, and squares the\n   * shared corners by hand chrome today — here that is\n   * `chromeClassName=\"md:rounded-s-none\"` with `className=\"md:-ms-px\"` (the wrapper\n   * overlaps the neighbour by the one border they share). A class rather than a\n   * `joined=\"start\"` because every such join keksdose has is responsive: on a phone the\n   * two stack and both keep their corners.\n   */\n  chromeClassName?: string;\n  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with\n   *  `label`. */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n  /**\n   * Why the group cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a group that saves itself on change (keksdose K3: the last `SaveGuard` sites are\n   * self-committing controls like this one, and SaveGuard's native `disabled` took\n   * them out of the tab order so the reason never reached a keyboard).\n   *\n   * The group stays reachable — its segments are `aria-disabled`, not `disabled`, and\n   * a radio group's arrow keys still walk them — but nothing reaches `onChange`, and\n   * the reason shows in the kit {@link Tooltip} over the segments on hover or focus and\n   * describes each segment. The chosen option keeps its fill, as under `disabled`.\n   * Wins over `disabled`, as on Button: passing both keeps the group reachable.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This group COMMITS — choosing an option saves it. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over a `disabledReason` of its own): *\"everything renders; only\n   * the commit is locked\"* (keksdose dev#496/#497), and a control that is its own commit\n   * must render refused, never live-and-discarding. No provider, or an unlocked one:\n   * no effect.\n   */\n  commit?: boolean;\n}\n\n/**\n * The field chrome's vertical geometry — keksdose K1, the kit reintroducing feedback\n * #117 that keksdose's hand-built chrome had fixed.\n *\n * The label is the field's static label: `top-1` and 11px in a `leading-tight` line, so\n * its line box runs from 4px to 17.75px. Until 0.22 the chrome was `pt-4` over a 20px\n * (`leading-5`) segment, so the ACTIVE segment's fill — painted from the top of the\n * segment — started at 17px (1px border + 16px), 0.75px INSIDE the label's line box:\n * the highlight touched the word above it, exactly what #117's rework had measured and\n * cured with `pt-5`.\n *\n * Now the strip is `pt-5` and the fill starts at 21px, 3.25px clear, and the segment\n * gives the 4px back so the field stays a labelled Select's 42px: `md` sets its 14px\n * text in an 18px line with a 2px moat under it (the bare group's own `p-0.5` moat),\n * `sm` sets 12px text in a 16px line over `pb-1` — keksdose's measured chrome\n * (price-level-picker, reports-filters: `pt-5 pb-1`, `text-xs md:py-0`), byte for byte.\n * Before, `size=\"sm\"` inside the chrome was overridden to the md 20px line.\n *\n *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42\n */\nconst CHROME_PAD: Record<\"sm\" | \"md\", string> = { md: \"pt-5 pb-0.5\", sm: \"pt-5 pb-1\" };\nconst CHROME_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0 leading-[18px]\", sm: \"py-0 leading-4\" };\n\n/**\n * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px\n * strip — `md`'s 20px text-sm line with no padding, `sm`'s 16px line with 2px either\n * side. See `LABEL_STRIP_PAD` for why 16.\n */\nconst STRIP_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0\", sm: \"py-0.5\" };\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted 11px text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    chromeClassName,\n    hint,\n    error,\n    disabledReason: ownDisabledReason,\n    commit,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const reasonId = useId();\n  // The lock's reason under a locked provider (with `commit`), else the group's own.\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —\n  // but stays focusable; `disabled` alone also takes the segments out of the tab order.\n  const dimmed = disabled || locked;\n  const labelled = hasContent(label);\n  // `field` is the chrome; a label placed above or in a strip keeps the bare group's\n  // own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const strip = labelled && labelPlacement === \"strip\";\n  const hasError = labelled && hasContent(error);\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = hasContent(captionNode);\n  const choose = (next: T) => {\n    // A locked group swallows the change: it saves on change, and a lock that let the\n    // value move and then discarded it would show a state that was never stored.\n    if (locked) return;\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    // The segments' own parent: the group, or under a lock the tooltip's row inside it.\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    // Locked: the focus walks (each segment says why on arrival), the choice does not.\n    choose(options[next].value);\n  };\n  const segments = options.map((opt, index) => {\n    const active = opt.value === value;\n    return (\n      <button\n        key={opt.value}\n        type=\"button\"\n        role={pressed ? undefined : \"radio\"}\n        aria-checked={pressed ? undefined : active}\n        aria-pressed={pressed ? active : undefined}\n        // A reason wins over `disabled` (as on Button): reachable, and refusing.\n        disabled={disabled && !locked}\n        aria-disabled={locked || undefined}\n        // On each segment rather than the group: the segment is what takes focus, and\n        // a group's description is not read reliably when focus lands inside it.\n        aria-describedby={locked ? reasonId : undefined}\n        tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n        onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n        onClick={() => choose(opt.value)}\n        className={cn(\n          // `truncate` (which carries whitespace-nowrap) rather than letting a\n          // label wrap: a segmented control sizes its whole row to the tallest\n          // option, so one two-word option — Keksdose feedback #147's \"Where I\n          // am\" — silently doubles the height of every segment beside it.\n          //\n          // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n          // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n          // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n          // labels' widths — and then splits it EQUALLY, so the short option\n          // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n          // truncated at 1778px of free screen. Basing each segment on its own\n          // content and sharing only the LEFTOVER space keeps a full-width\n          // group's segments near-equal and an auto-width group's exact.\n          //\n          // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n          // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n          // 2px of ring over both neighbours and over the container's own border\n          // — and on a phone it appeared on every TAP, because a tap focuses the\n          // button. That is the other half of what live #268's rework saw\n          // overlaying the selected segment's boundary. Inset keeps the ring\n          // inside the segment it belongs to; focus-visible keeps it for the\n          // keyboard, which is the only input that needs it.\n          overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate\",\n          \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n          size === \"sm\" && \"px-2 py-1 text-xs\",\n          // In the field chrome: no vertical padding, and the line that makes the\n          // field 42px under a strip that clears the label — see CHROME_PAD. `sm`\n          // keeps its 12px type here (it used to be overridden to the md line).\n          field && CHROME_SEGMENT[size],\n          // In the strip placement: a 26px group under a 16px strip — STRIP_SEGMENT.\n          strip && STRIP_SEGMENT[size],\n          active\n            ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n            : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n          // No hover fill on a group that cannot be changed — a segment that\n          // lights up under the pointer is an offer, and there is none here. Not on\n          // the chosen segment: its fill IS its state, and its inverse text would\n          // vanish on a transparent hover.\n          dimmed && \"cursor-not-allowed\",\n          dimmed && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n          optionClassName,\n          opt.className,\n        )}\n      >\n        {opt.label}\n      </button>\n    );\n  });\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as on (or `disabled` on) each button: a\n      // radio group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={dimmed || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        overflow === \"wrap\" && \"flex-wrap\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        dimmed && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || ((above || strip) && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {locked ? (\n        // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a\n        // wrapper outside it would become the flex or grid item in the caller's row in\n        // the group's place, and a `w-full` / `md:w-auto` on the group would size the\n        // wrong box. This row inherits the group's gap and wrap, so the segments lay out\n        // exactly as they do unlocked, and `:scope > button` above still finds them. A\n        // fragment child, so the Tooltip describes nothing itself — each segment points\n        // at the hidden copy, the way a locked Button does.\n        <Tooltip label={disabledReason} className=\"flex min-w-0 flex-1 gap-[inherit] [flex-wrap:inherit]\">\n          <>\n            {segments}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        segments\n      )}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-[11px] leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n      {error}\n    </p>\n  ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={dimmed}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-[var(--danger)]\"\n          >\n            {label}\n          </Label>\n          {hint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (strip) {\n    return (\n      <LabelStrip labelId={labelId} label={label} hint={hint} disabled={dimmed} pad=\"field\" className={className}>\n        {group}\n        {captionEl}\n        {errorEl}\n      </LabelStrip>\n    );\n  }\n  if (!field) {\n    if (!captionEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={hint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 shadow-sm\",\n            CHROME_PAD[size],\n            dimmed && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n            chromeClassName,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/trigger-aria.d.ts

@@ -11,6 +11,9 @@ interface TriggerAria {
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+    /** 0.23.0: a form library's `required` (RhfMonthPicker) is announced on the trigger,
+     *  not lost on the wrapper. */
+    "aria-required"?: boolean | "true" | "false";
 }
 /** Split a field's props into what its trigger takes and what its wrapper takes. */
 declare function splitTriggerAria<T extends TriggerAria>(props: T): [TriggerAria, Omit<T, keyof TriggerAria>];