@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/swatch-picker.js

@@ -6,11 +6,9 @@ import { useKitLabels } from "../i18n/kit-labels.js";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
-import { hasContent, LabelStrip } from "./field-parts.js";
-const DEFAULT_SWATCH_PICKER_LABELS = {
-  none: "No colour",
-  mixed: "Mixed: the selected items have different colours"
-};
+import { hasContent } from "../lib/presence.js";
+import { LabelStrip, mergeDescribedBy, useFieldMessages } from "./field-parts.js";
+import { DEFAULT_SWATCH_PICKER_LABELS } from "./swatch-picker-labels.js";
 function SwatchPicker({
   options,
   value,
@@ -36,6 +34,11 @@ function SwatchPicker({
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const labelled = hasContent(label);
+  const messages = useFieldMessages({
+    hint: labelled ? hint : void 0,
+    describedBy: rest["aria-describedby"],
+    reasonId: mergeDescribedBy(mixed && mixedId, locked && reasonId)
+  });
   const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
   const items = [
     ...allowNone ? [{ key: null, label: text.none }] : [],
@@ -63,7 +66,7 @@ function SwatchPicker({
         // not-allowed cursor, and no hover offer on a tile that cannot be
         // chosen. Not on the selected tile, whose frame IS its state.
         locked && "cursor-not-allowed opacity-50",
-        locked && !selected && "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]",
+        locked && !selected && "hover:border-subtle hover:bg-surface",
         tileClassName
       ) : void 0,
       renderTile: (item) => {
@@ -90,7 +93,7 @@ function SwatchPicker({
       role: "radiogroup",
       "aria-labelledby": labelled && rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0 ? labelId : rest["aria-labelledby"],
       "aria-disabled": disabled || locked || void 0,
-      "aria-describedby": [rest["aria-describedby"], mixed && mixedId, locked && reasonId].filter(Boolean).join(" ") || void 0,
+      "aria-describedby": messages.describedBy,
       className: cn("flex flex-wrap items-center gap-1.5", !labelled && className),
       children: [
         locked ? (
@@ -116,7 +119,10 @@ function SwatchPicker({
     }
   );
   if (!labelled) return group;
-  return /* @__PURE__ */ jsx(LabelStrip, { labelId, label, hint, disabled: disabled || locked, pad: "clear", className, children: group });
+  return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint: messages.labelHint, disabled: disabled || locked, className, children: [
+    group,
+    messages.below
+  ] });
 }
 export {
   DEFAULT_SWATCH_PICKER_LABELS,

package/dist/components/swatch-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swatch-picker.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { hasContent, LabelStrip } from \"./field-parts\";\n\nexport interface SwatchPickerLabels {\n  /** The \"no colour\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n}\n\nexport const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels = {\n  none: \"No colour\",\n  mixed: \"Mixed: the selected items have different colours\",\n};\n\nexport interface SwatchOption<T extends string> {\n  value: T;\n  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an\n   *  inline background, so it does not have to be a class the kit's CSS knows.\n   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that\n   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor(\"teal\")` rather\n   *  than `\"var(--hue-teal)\"` written out — one table, so the two cannot drift. */\n  color?: string;\n  /** The colour's name, in the user's language. Shown in the bubble and read out;\n   *  required, because a swatch with no name is a colour only some people can read. */\n  label: string;\n  /** Classes for the swatch dot, for a palette that lives in classes rather than\n   *  values (a light/dark pair). An inline `color` would win over a class, so pass\n   *  one or the other. */\n  swatchClassName?: string;\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Groceries\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS colour cannot be chosen right now — the whole picker's `disabledReason`,\n   * one tile at a time (the kit's later list after keksdose K3: a colour another\n   * category already wears, a flag only an owner may set). {@link Button}'s rule: a tile\n   * that is merely `disabled` is a dead square a keyboard never lands on, so nobody\n   * learns why it is dimmed.\n   *\n   * The tile looks disabled but is `aria-disabled`, not `disabled`: Tab and the arrow\n   * keys still reach it, its bubble shows the reason under its name, and the reason\n   * describes it. Choosing it — a click, Space or Enter, or an arrow under automatic\n   * activation — does nothing: the focus moves onto it and the checked colour stays\n   * where it was, as under the whole-picker lock. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n}\n\n/**\n * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's\n * is omitted rather than shadowed, as on {@link ToggleGroup}.\n */\nexport interface SwatchPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: SwatchOption<T>[];\n  /** The chosen colour, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no colour\" tile whose value is `null`. Clearing a colour has to be\n   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */\n  allowNone?: boolean;\n  /**\n   * \"Some of each\" — a bulk edit over rows whose colours differ. Nothing is checked\n   * (not even \"none\", whatever `value` says), and the group is described as mixed.\n   * Distinct from `value={null}`, which is an answer: \"no colour\".\n   */\n  mixed?: boolean;\n  /** See {@link IconPickerProps.activation}. Default \"automatic\". */\n  activation?: \"automatic\" | \"manual\";\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: Partial<SwatchPickerLabels>;\n  /**\n   * An 11px static label in a strip over the swatches, named by it (keksdose K2): the\n   * transaction row's flag picker stands between labelled fields and hand-builds this\n   * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.\n   * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the\n   * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a\n   * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an\n   * explicit `aria-label` / `aria-labelledby` still names the group instead.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. */\n  hint?: ReactNode;\n  /**\n   * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a picker that saves itself on change (keksdose K3, the flag picker in a row a\n   * read-only viewer may see). The swatches stay reachable and the arrow keys still\n   * walk them, but nothing reaches `onChange`; the reason is shown in the kit\n   * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and\n   * describes the group. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — choosing a colour saves it. Under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason, as {@link Button}'s `commit` does. */\n  commit?: CommitScope;\n}\n\n/**\n * A row of colour swatches that is one radio group.\n *\n * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading\n * above it. Each swatch is named by its `label` and shows it in a bubble on hover and\n * focus, so the name is not the screen reader's alone.\n *\n * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one\n * while nothing is checked; the arrow keys move between swatches and, by default,\n * choose as they go; Home and End jump to the ends. Left and right follow the page's\n * direction.\n */\nexport function SwatchPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  disabledReason: ownDisabledReason,\n  commit,\n  className,\n  ...rest\n}: SwatchPickerProps<T>) {\n  const text = useKitLabels(\"swatchPicker\", DEFAULT_SWATCH_PICKER_LABELS, labels);\n  const mixedId = useId();\n  const labelId = useId();\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const labelled = hasContent(label);\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...options.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n  const tiles = (\n    <TileRadioGroup\n      items={items}\n      checked={mixed ? undefined : value}\n      // A locked picker saves on change, so the change is swallowed — the arrow keys\n      // still move the focus (and, automatic, would choose), and nothing is chosen. A\n      // locked TILE is refused by the tiles themselves; asked again here so a reason\n      // can never become a change, whatever the tiles do.\n      onSelect={(next) => {\n        if (!locked && !hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n      }}\n      activation={activation}\n      // A reason wins over `disabled`: the tiles stay in the tab order.\n      disabled={disabled && !locked}\n      size={size}\n      tileClassName={\n        tileClassName || locked\n          ? (_item, selected) =>\n              cn(\n                // The disabled tile's look, without its `disabled`: dimmed, a\n                // not-allowed cursor, and no hover offer on a tile that cannot be\n                // chosen. Not on the selected tile, whose frame IS its state.\n                locked && \"cursor-not-allowed opacity-50\",\n                locked && !selected && \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\",\n                tileClassName,\n              )\n          : undefined\n      }\n      renderTile={(item) => {\n        const opt = item.key === null ? undefined : byValue.get(item.key);\n        return (\n          <span\n            aria-hidden\n            // A hairline round the dot, drawn over whatever colour it is: a pale\n            // yellow swatch on a white surface is otherwise a hole in the row.\n            className={cn(\n              \"rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15\",\n              TILE_SIZE[size].swatch,\n              opt?.swatchClassName,\n            )}\n            style={{ background: opt?.color }}\n          />\n        );\n      }}\n    />\n  );\n  const group = (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-labelledby={\n        labelled && rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n          ? labelId\n          : rest[\"aria-labelledby\"]\n      }\n      aria-disabled={disabled || locked || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], mixed && mixedId, locked && reasonId].filter(Boolean).join(\" \") ||\n        undefined\n      }\n      className={cn(\"flex flex-wrap items-center gap-1.5\", !labelled && className)}\n    >\n      {locked ? (\n        // Inside the group, round the tiles — not round the group, whose box is the\n        // caller's row item. This row inherits the group's gap, wrap and alignment, so\n        // the tiles sit exactly where they sit unlocked. Below the row: each tile's own\n        // bubble (its colour's name) is above it.\n        <Tooltip\n          label={disabledReason}\n          side=\"bottom\"\n          className=\"flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]\"\n        >\n          <>\n            {tiles}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        tiles\n      )}\n      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this\n          way it takes no room in the row. */}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return group;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={hint} disabled={disabled || locked} pad=\"clear\" className={className}>\n      {group}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/swatch-picker.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport { LabelStrip, mergeDescribedBy, useFieldMessages } from \"./field-parts\";\nimport { DEFAULT_SWATCH_PICKER_LABELS } from \"./swatch-picker-labels\";\n\nexport interface SwatchPickerLabels {\n  /** The \"no colour\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n}\n\n// Defined in ./swatch-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SWATCH_PICKER_LABELS };\n\nexport interface SwatchOption<T extends string> {\n  value: T;\n  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an\n   *  inline background, so it does not have to be a class the kit's CSS knows.\n   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that\n   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor(\"teal\")` rather\n   *  than `\"var(--hue-teal)\"` written out — one table, so the two cannot drift. */\n  color?: string;\n  /** The colour's name, in the user's language. Shown in the bubble and read out;\n   *  required, because a swatch with no name is a colour only some people can read. */\n  label: string;\n  /** Classes for the swatch dot, for a palette that lives in classes rather than\n   *  values (a light/dark pair). An inline `color` would win over a class, so pass\n   *  one or the other. */\n  swatchClassName?: string;\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Groceries\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS colour cannot be chosen right now — the whole picker's `disabledReason`,\n   * one tile at a time (the kit's later list after keksdose K3: a colour another\n   * category already wears, a flag only an owner may set). {@link Button}'s rule: a tile\n   * that is merely `disabled` is a dead square a keyboard never lands on, so nobody\n   * learns why it is dimmed.\n   *\n   * The tile looks disabled but is `aria-disabled`, not `disabled`: Tab and the arrow\n   * keys still reach it, its bubble shows the reason under its name, and the reason\n   * describes it. Choosing it — a click, Space or Enter, or an arrow under automatic\n   * activation — does nothing: the focus moves onto it and the checked colour stays\n   * where it was, as under the whole-picker lock. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n}\n\n/**\n * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's\n * is omitted rather than shadowed, as on {@link ToggleGroup}.\n */\nexport interface SwatchPickerProps<T extends string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: SwatchOption<T>[];\n  /** The chosen colour, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no colour\" tile whose value is `null`. Clearing a colour has to be\n   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */\n  allowNone?: boolean;\n  /**\n   * \"Some of each\" — a bulk edit over rows whose colours differ. Nothing is checked\n   * (not even \"none\", whatever `value` says), and the group is described as mixed.\n   * Distinct from `value={null}`, which is an answer: \"no colour\".\n   */\n  mixed?: boolean;\n  /** See {@link IconPickerProps.activation}. Default \"automatic\". */\n  activation?: \"automatic\" | \"manual\";\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: LabelOverride<SwatchPickerLabels>;\n  /**\n   * An 11px static label in a strip over the swatches, named by it (keksdose K2): the\n   * transaction row's flag picker stands between labelled fields and hand-builds this\n   * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.\n   * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the\n   * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a\n   * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an\n   * explicit `aria-label` / `aria-labelledby` still names the group instead.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since\n   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a\n   *  touch screen (§4), is a caption under the swatches, describing the group. */\n  hint?: ReactNode;\n  /**\n   * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a picker that saves itself on change (keksdose K3, the flag picker in a row a\n   * read-only viewer may see). The swatches stay reachable and the arrow keys still\n   * walk them, but nothing reaches `onChange`; the reason is shown in the kit\n   * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and\n   * describes the group. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — choosing a colour saves it. Under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason, as {@link Button}'s `commit` does. */\n  commit?: CommitScope;\n}\n\n/**\n * A row of colour swatches that is one radio group.\n *\n * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading\n * above it. Each swatch is named by its `label` and shows it in a bubble on hover and\n * focus, so the name is not the screen reader's alone.\n *\n * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one\n * while nothing is checked; the arrow keys move between swatches and, by default,\n * choose as they go; Home and End jump to the ends. Left and right follow the page's\n * direction.\n */\nexport function SwatchPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  disabledReason: ownDisabledReason,\n  commit,\n  className,\n  ...rest\n}: SwatchPickerProps<T>) {\n  const text = useKitLabels(\"swatchPicker\", DEFAULT_SWATCH_PICKER_LABELS, labels);\n  const mixedId = useId();\n  const labelId = useId();\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const labelled = hasContent(label);\n  // The label line's \"?\", or the caption under the swatches (DUP-2). Only with a label.\n  // The caller's ids, the caption, then the group's state: mixed, locked.\n  const messages = useFieldMessages({\n    hint: labelled ? hint : undefined,\n    describedBy: rest[\"aria-describedby\"],\n    reasonId: mergeDescribedBy(mixed && mixedId, locked && reasonId),\n  });\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...options.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n  const tiles = (\n    <TileRadioGroup\n      items={items}\n      checked={mixed ? undefined : value}\n      // A locked picker saves on change, so the change is swallowed — the arrow keys\n      // still move the focus (and, automatic, would choose), and nothing is chosen. A\n      // locked TILE is refused by the tiles themselves; asked again here so a reason\n      // can never become a change, whatever the tiles do.\n      onSelect={(next) => {\n        if (!locked && !hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n      }}\n      activation={activation}\n      // A reason wins over `disabled`: the tiles stay in the tab order.\n      disabled={disabled && !locked}\n      size={size}\n      tileClassName={\n        tileClassName || locked\n          ? (_item, selected) =>\n              cn(\n                // The disabled tile's look, without its `disabled`: dimmed, a\n                // not-allowed cursor, and no hover offer on a tile that cannot be\n                // chosen. Not on the selected tile, whose frame IS its state.\n                locked && \"cursor-not-allowed opacity-50\",\n                locked && !selected && \"hover:border-subtle hover:bg-surface\",\n                tileClassName,\n              )\n          : undefined\n      }\n      renderTile={(item) => {\n        const opt = item.key === null ? undefined : byValue.get(item.key);\n        return (\n          <span\n            aria-hidden\n            // A hairline round the dot, drawn over whatever colour it is: a pale\n            // yellow swatch on a white surface is otherwise a hole in the row.\n            className={cn(\n              \"rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15\",\n              TILE_SIZE[size].swatch,\n              opt?.swatchClassName,\n            )}\n            style={{ background: opt?.color }}\n          />\n        );\n      }}\n    />\n  );\n  const group = (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-labelledby={\n        labelled && rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n          ? labelId\n          : rest[\"aria-labelledby\"]\n      }\n      aria-disabled={disabled || locked || undefined}\n      aria-describedby={messages.describedBy}\n      className={cn(\"flex flex-wrap items-center gap-1.5\", !labelled && className)}\n    >\n      {locked ? (\n        // Inside the group, round the tiles — not round the group, whose box is the\n        // caller's row item. This row inherits the group's gap, wrap and alignment, so\n        // the tiles sit exactly where they sit unlocked. Below the row: each tile's own\n        // bubble (its colour's name) is above it.\n        <Tooltip\n          label={disabledReason}\n          side=\"bottom\"\n          className=\"flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]\"\n        >\n          <>\n            {tiles}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        tiles\n      )}\n      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this\n          way it takes no room in the row. */}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return group;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled || locked} className={className}>\n      {group}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/swipeable-row.d.ts

@@ -1,24 +1,12 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { StatusDotTone } from './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
-
+import type { ReactNode } from "react";
+import type { StatusDotTone } from "./status-dot.js";
 /**
  * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot
  * already share, so a curtain can be "the colour of the status it produces" by name:
  * brand, neutral, success, warning, danger, info, income, expense, and the categorical
  * hues blue, indigo, purple, teal and orange.
  */
-type SwipeTone = StatusDotTone;
+export type SwipeTone = StatusDotTone;
 /**
  * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md
  * §12.6) — a curtain that must be exactly its status pill's palette fill, or two
@@ -26,7 +14,7 @@ type SwipeTone = StatusDotTone;
  * passes a variable it declares per theme in its own stylesheet. The kit cannot measure
  * these, so the app's tests pin the pair.
  */
-interface SwipePaint {
+export interface SwipePaint {
     /** The armed panel's fill; idle shows a 14 % wash of it on the card. */
     fill: string;
     /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */
@@ -58,7 +46,7 @@ interface SwipeActionBase {
  * existing call sites compile; there the label is white unless the classes set a
  * colour, and the idle panel is still dimmed.
  */
-type SwipeAction = SwipeActionBase & ({
+export type SwipeAction = SwipeActionBase & ({
     /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
     tone: SwipeTone;
     paint?: never;
@@ -74,12 +62,12 @@ type SwipeAction = SwipeActionBase & ({
 } | {
     tone?: never;
     paint?: never;
-    /** @deprecated 0.33 — pass `tone`, or `paint` for an exception. Background
-     *  utility class while the action is previewed but not yet armed; the panel is
-     *  dimmed then, and its text is white unless this sets a text colour. */
+    /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.
+     *  Background utility class while the action is previewed but not yet armed; the
+     *  panel is dimmed then, and its text is white unless this sets a text colour. */
     className: string;
-    /** @deprecated 0.33 — pass `tone`, or `paint`. Background utility class once
-     *  the drag has passed this action's threshold. */
+    /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background
+     *  utility class once the drag has passed this action's threshold. */
     armedClassName: string;
 });
 /**
@@ -90,7 +78,7 @@ type SwipeAction = SwipeActionBase & ({
  * fill's own foreground. Measured in every shipped preset by
  * theme/__tests__/tokens-css-audit.test.ts.
  */
-declare const SWIPE_TONE: Record<SwipeTone, {
+export declare const SWIPE_TONE: Record<SwipeTone, {
     idle: string;
     armed: string;
 }>;
@@ -103,7 +91,7 @@ declare const SWIPE_TONE: Record<SwipeTone, {
  * reveal panel's contents hug the physical edge being uncovered, and the keyboard
  * buttons sit at the row's logical END.
  */
-interface SwipeableRowProps {
+export interface SwipeableRowProps {
     /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */
     right?: SwipeAction[];
     /** Actions committed by dragging (physically) LEFT, nearest threshold first. */
@@ -162,6 +150,5 @@ interface SwipeableRowProps {
  * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be
  * done to it rather than keeping it behind a gesture nobody can hear.
  */
-declare function SwipeableRow({ right, left, enabled, actionsLabel, className, children, }: SwipeableRowProps): react.JSX.Element;
-
-export { SWIPE_TONE, type SwipeAction, type SwipePaint, type SwipeTone, SwipeableRow, type SwipeableRowProps };
+export declare function SwipeableRow({ right, left, enabled, actionsLabel, className, children, }: SwipeableRowProps): import("react").JSX.Element;
+export {};

package/dist/components/swipeable-row.js

@@ -137,7 +137,7 @@ function SwipeableRow({
           e.stopPropagation();
         },
         className: cn(
-          "relative bg-[var(--bg-surface)]",
+          "relative bg-surface",
           // A mouse drag is a supported way to swipe (use-row-swipe gates only on
           // the button, not the pointer type), and a horizontal mouse drag over
           // text also SELECTS that text — so committing an action left the row
@@ -165,7 +165,7 @@ function SwipeableRow({
             type: "button",
             onClick: action.onCommit,
             className: cn(
-              "sr-only whitespace-nowrap rounded-md border-[var(--border)] bg-[var(--bg-surface)] text-xs font-medium text-[var(--text-primary)] shadow-sm",
+              "sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm",
               "focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5",
               // The box's padding and border only once it shows (0.32.1, keksdose's
               // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s

package/dist/components/swipeable-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so\n * existing call sites compile; there the label is white unless the classes set a\n * colour, and the idle panel is still dimmed.\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        tone?: never;\n        paint?: never;\n        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception. Background\n         *  utility class while the action is previewed but not yet armed; the panel is\n         *  dimmed then, and its text is white unless this sets a text colour. */\n        className: string;\n        /** @deprecated 0.33 — pass `tone`, or `paint`. Background utility class once\n         *  the drag has passed this action's threshold. */\n        armedClassName: string;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes, inline style and dimming for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"], dim: false };\n  if (action.paint) {\n    return {\n      className: armed ? PAINT_ARMED : PAINT_IDLE,\n      style: {\n        \"--swipe-paint-fill\": action.paint.fill,\n        \"--swipe-paint-fg\": action.paint.foreground,\n      } as CSSProperties,\n      dim: false,\n    };\n  }\n  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.\n  return { className: cn(\"text-white\", armed ? action.armedClassName : action.className), dim: !armed };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            look.className,\n            // The old path only: dimmed until the drag has passed a threshold. A tone\n            // or a paint says it with the soft→solid step instead, which keeps its\n            // label readable at both ends.\n            look.dim && \"opacity-60\",\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-[var(--bg-surface)]\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-[var(--border)] bg-[var(--bg-surface)] text-xs font-medium text-[var(--text-primary)] shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so\n * existing call sites compile; there the label is white unless the classes set a\n * colour, and the idle panel is still dimmed.\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        tone?: never;\n        paint?: never;\n        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.\n         *  Background utility class while the action is previewed but not yet armed; the\n         *  panel is dimmed then, and its text is white unless this sets a text colour. */\n        className: string;\n        /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background\n         *  utility class once the drag has passed this action's threshold. */\n        armedClassName: string;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes, inline style and dimming for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"], dim: false };\n  if (action.paint) {\n    return {\n      className: armed ? PAINT_ARMED : PAINT_IDLE,\n      style: {\n        \"--swipe-paint-fill\": action.paint.fill,\n        \"--swipe-paint-fg\": action.paint.foreground,\n      } as CSSProperties,\n      dim: false,\n    };\n  }\n  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.\n  return { className: cn(\"text-white\", armed ? action.armedClassName : action.className), dim: !armed };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            look.className,\n            // The old path only: dimmed until the drag has passed a threshold. A tone\n            // or a paint says it with the soft→solid step instead, which keeps its\n            // label readable at both ends.\n            look.dim && \"opacity-60\",\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/switch.d.ts

@@ -1,11 +1,6 @@
-import * as react from 'react';
-import { InputHTMLAttributes, ReactNode } from 'react';
-import { DisabledReasonDisplay } from './field-parts.js';
-import { CommitScope } from './write-lock.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import type { CommitScope } from "./write-lock.js";
 /**
  * An on/off switch that is still `<input type="checkbox">`, with `role="switch"`.
  *
@@ -33,8 +28,8 @@ declare const SIZES: {
         readonly thumb: "size-4 peer-checked:start-4.5";
     };
 };
-type SwitchSize = keyof typeof SIZES;
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "role"> {
+export type SwitchSize = keyof typeof SIZES;
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "role"> {
     /** `"md"` (36×20, default) or `"sm"` (28×16) — Kastlan's `default` and `sm`. */
     size?: SwitchSize;
     /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s
@@ -90,6 +85,9 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
      * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
      */
     commit?: CommitScope;
+    /** The `<input type="checkbox" role="switch">`. A React 19 ref prop since 0.34 (MOD-4,
+     *  refactor audit 2026-10); it was `forwardRef`. */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * A native checkbox drawn as a track and thumb, announced as a switch.
@@ -98,6 +96,5 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
  * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain
  * `<form>` (`name`, `value`).
  */
-declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
-
-export { Switch, type SwitchProps, type SwitchSize };
+export declare function Switch({ ref, size, label, description, switchPosition, onCheckedChange, onChange, className, inputClassName, id, disabled, required, disabledReason, disabledReasonDisplay, commit, onClick, ...rest }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist/components/switch.js

@@ -1,11 +1,12 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { cn } from "../lib/cn.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { hasContent } from "../lib/presence.js";
 import {
   DISABLED_REASON_LINE_CLASS,
   LockedReason,
+  mergeDescribedBy,
   useDisabledReasonLine,
   useLockReason
 } from "./field-parts.js";
@@ -17,9 +18,10 @@ const SIZES = {
   // 2.25 × 1.25rem track, 1rem thumb (36×20 / 16). Checked: 2.25 − 1 − 0.125 = 1.125rem.
   md: { track: "h-5 w-9", thumb: "size-4 peer-checked:start-4.5" }
 };
-const TRACK = `peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors checked:bg-[var(--brand)] focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed`;
-const THUMB = "pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm transition-[inset-inline-start,background-color] motion-reduce:transition-none peer-checked:bg-[var(--brand-contrast)]";
-const Switch = forwardRef(function Switch2({
+const TRACK = `peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors checked:bg-brand focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed`;
+const THUMB = "pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-surface shadow-sm transition-[inset-inline-start,background-color] motion-reduce:transition-none peer-checked:bg-[var(--brand-contrast)]";
+function Switch({
+  ref,
   size = "md",
   label,
   description,
@@ -36,7 +38,7 @@ const Switch = forwardRef(function Switch2({
   commit,
   onClick,
   ...rest
-}, ref) {
+}) {
   const generated = useId();
   const inputId = id ?? generated;
   const lock = useLockReason(commit, disabledReason);
@@ -44,7 +46,7 @@ const Switch = forwardRef(function Switch2({
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay);
   const looksDisabled = Boolean(disabled) || locked;
   const descriptionId = `${inputId}-description`;
-  const showDescription = hasMessage(description);
+  const showDescription = hasContent(description);
   const bare = label === void 0 && !showDescription;
   const geometry = SIZES[size];
   const track = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && !locked && className), children: [
@@ -89,17 +91,17 @@ const Switch = forwardRef(function Switch2({
       {
         htmlFor: inputId,
         className: cn(
-          "block text-sm leading-5 text-[var(--text-primary)]",
+          "block text-sm leading-5 text-primary",
           looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
           dimParts && "opacity-60"
         ),
         children: [
           label,
-          required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-[var(--danger)]", children: "*" })
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-danger", children: "*" })
         ]
       }
     ),
-    showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: cn("mt-0.5 block text-xs text-[var(--text-muted)]", dimParts && "opacity-60"), children: description }),
+    showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: cn("mt-0.5 block text-xs text-muted", dimParts && "opacity-60"), children: description }),
     lineInWords && /* @__PURE__ */ jsx("span", { id: lock.reasonId, className: DISABLED_REASON_LINE_CLASS, children: lock.reason })
   ] });
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-3", looksDisabled && !dimParts && "opacity-60", className), children: switchPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -109,8 +111,7 @@ const Switch = forwardRef(function Switch2({
     cell,
     words
   ] }) });
-});
-Switch.displayName = "Switch";
+}
 export {
   Switch
 };

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  LockedReason,\n  useDisabledReasonLine,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `start-0.5` (0.125rem, 2 px at Normal) in from\n *  each end of the track, so its checked offset is `track width − thumb − 0.125rem`.\n *  All of it in rem since 0.32 (docs/text-size-harmonization.md §3.2, §4): the track\n *  and thumb already grew with the text, and a checked offset left in px (14 / 18) put\n *  the thumb short of the end at 125 % and in the middle at 150 %. `start-*`, never\n *  `left-*` or a `translate-x`: an inline-start offset follows the writing direction,\n *  so in a right-to-left form the thumb travels right-to-left with no `rtl:` override\n *  to keep in step. */\nconst SIZES = {\n  // 1.75 × 1rem track, 0.75rem thumb (28×16 / 12 at Normal): the dense setting rows in\n  // Kastlan's tables. Checked: 1.75 − 0.75 − 0.125 = 0.875rem.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-3.5\" },\n  // 2.25 × 1.25rem track, 1rem thumb (36×20 / 16). Checked: 2.25 − 1 − 0.125 = 1.125rem.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-4.5\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  // The kit's focus frame (§5), stood off the track so it never merges with the fill.\n  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] ` +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is\n   * the control that \"takes effect the moment it is flipped\", so it is the first one\n   * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native\n   * `disabled`, out of the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the switch is `aria-disabled` instead: still focusable, a click or\n   * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in\n   * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row\n   * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the\n   * switch anew (it moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line in the words column under the description (a\n   * bare switch: under the track), and in the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it\n   * is locked the `disabledReason` way with the lock's reason (which wins over its\n   * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.\n   */\n  commit?: CommitScope;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);\n  // Locked is disabled the focusable way — the row fades and the words stop inviting a\n  // click, as for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const track = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the switch stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n        )}\n        // A locked switch's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the thumb back and report nothing — see Checkbox for why here and not\n            // by cancelling the click. Label clicks and Space arrive as clicks too.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, locked && \"cursor-not-allowed\", inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n  // The Tooltip goes round the track, not the row — the row is the caller's layout. A\n  // bare switch hands its `className` to the wrapper, then the outermost element. With\n  // words beside it, the reason LINE goes under them instead (below), so the track\n  // stays where the row puts it.\n  const lineInWords = locked && reasonLine && !bare;\n  const control =\n    locked && !lineInWords ? (\n      <LockedReason lock={lock} line={reasonLine} className={cn(\"shrink-0\", bare && className)}>\n        {track}\n      </LockedReason>\n    ) : (\n      track\n    );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 1.25rem) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  // With the reason line in the words, the row's fade moves onto its parts: the line is\n  // the one thing on the row still to be read, and at 60 % it would not be.\n  const dimParts = lineInWords;\n  const cell = <span className={cn(\"flex h-5 shrink-0 items-center\", dimParts && \"opacity-60\")}>{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            dimParts && \"opacity-60\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className={cn(\"mt-0.5 block text-xs text-[var(--text-muted)]\", dimParts && \"opacity-60\")}>\n          {description}\n        </span>\n      )}\n      {lineInWords && (\n        <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>\n          {lock.reason}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", looksDisabled && !dimParts && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":"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","names":["Switch"]}
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  LockedReason,\n  mergeDescribedBy,\n  useDisabledReasonLine,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `start-0.5` (0.125rem, 2 px at Normal) in from\n *  each end of the track, so its checked offset is `track width − thumb − 0.125rem`.\n *  All of it in rem since 0.32 (docs/text-size-harmonization.md §3.2, §4): the track\n *  and thumb already grew with the text, and a checked offset left in px (14 / 18) put\n *  the thumb short of the end at 125 % and in the middle at 150 %. `start-*`, never\n *  `left-*` or a `translate-x`: an inline-start offset follows the writing direction,\n *  so in a right-to-left form the thumb travels right-to-left with no `rtl:` override\n *  to keep in step. */\nconst SIZES = {\n  // 1.75 × 1rem track, 0.75rem thumb (28×16 / 12 at Normal): the dense setting rows in\n  // Kastlan's tables. Checked: 1.75 − 0.75 − 0.125 = 0.875rem.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-3.5\" },\n  // 2.25 × 1.25rem track, 1rem thumb (36×20 / 16). Checked: 2.25 − 1 − 0.125 = 1.125rem.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-4.5\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-brand \" +\n  // The kit's focus frame (§5), stood off the track so it never merges with the fill.\n  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-surface ` +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-surface shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is\n   * the control that \"takes effect the moment it is flipped\", so it is the first one\n   * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native\n   * `disabled`, out of the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the switch is `aria-disabled` instead: still focusable, a click or\n   * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in\n   * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row\n   * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the\n   * switch anew (it moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line in the words column under the description (a\n   * bare switch: under the track), and in the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it\n   * is locked the `disabledReason` way with the lock's reason (which wins over its\n   * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.\n   */\n  commit?: CommitScope;\n  /** The `<input type=\"checkbox\" role=\"switch\">`. A React 19 ref prop since 0.34 (MOD-4,\n   *  refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport function Switch({\n  ref,\n  size = \"md\",\n  label,\n  description,\n  switchPosition = \"end\",\n  onCheckedChange,\n  onChange,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  required,\n  disabledReason,\n  disabledReasonDisplay,\n  commit,\n  onClick,\n  ...rest\n}: SwitchProps) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);\n  // Locked is disabled the focusable way — the row fades and the words stop inviting a\n  // click, as for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasContent(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const track = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the switch stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n        )}\n        // A locked switch's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the thumb back and report nothing — see Checkbox for why here and not\n            // by cancelling the click. Label clicks and Space arrive as clicks too.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, locked && \"cursor-not-allowed\", inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n  // The Tooltip goes round the track, not the row — the row is the caller's layout. A\n  // bare switch hands its `className` to the wrapper, then the outermost element. With\n  // words beside it, the reason LINE goes under them instead (below), so the track\n  // stays where the row puts it.\n  const lineInWords = locked && reasonLine && !bare;\n  const control =\n    locked && !lineInWords ? (\n      <LockedReason lock={lock} line={reasonLine} className={cn(\"shrink-0\", bare && className)}>\n        {track}\n      </LockedReason>\n    ) : (\n      track\n    );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 1.25rem) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  // With the reason line in the words, the row's fade moves onto its parts: the line is\n  // the one thing on the row still to be read, and at 60 % it would not be.\n  const dimParts = lineInWords;\n  const cell = <span className={cn(\"flex h-5 shrink-0 items-center\", dimParts && \"opacity-60\")}>{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-primary\",\n            looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            dimParts && \"opacity-60\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-danger\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className={cn(\"mt-0.5 block text-xs text-muted\", dimParts && \"opacity-60\")}>\n          {description}\n        </span>\n      )}\n      {lineInWords && (\n        <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>\n          {lock.reason}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", looksDisabled && !dimParts && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}