@eifi1/ui-kit 0.32.2 → 0.33.0

package/dist/components/status-dot.js

@@ -35,7 +35,7 @@ function statusDotColor(tone) {
   return COLOR[tone];
 }
 const SIZE = { sm: "size-2", md: "size-2.5", lg: "size-3" };
-const LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const LABEL_TRUNCATE = "truncate-until-large";
 const DOT_ON_FIRST_LINE = {
   sm: "large:mt-[calc((1lh_-_0.5rem)/2)]",
   md: "large:mt-[calc((1lh_-_0.625rem)/2)]",
@@ -72,7 +72,7 @@ function StatusDot({
     // span is one ARIA forbids and screen readers ignore.
     /* @__PURE__ */ jsxs("span", { ...rest, className: cn("inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start", className), children: [
       dot,
-      /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", LABEL_WRAP_AT_LARGE), children: label })
+      /* @__PURE__ */ jsx("span", { className: cn("min-w-0", LABEL_TRUNCATE), children: label })
     ] })
   );
 }

package/dist/components/status-dot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/status-dot.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { ProgressBarTone } from \"./progress-bar\";\nimport type { ChipHue } from \"./chip\";\n\n/**\n * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a\n * dot in a legend, the bar it explains and the badge beside it can be given the same\n * word and agree. The money pair is here for the same reason it is there: a legend\n * swatch for income is money, not \"success\". Chip's categorical hues are here too\n * (0.11): a unit-status dot in a combobox (kastlan lease-unit-step.tsx:35, \"rented\"\n * is blue) must match the Chip that states the same status elsewhere.\n */\nexport type StatusDotTone = ProgressBarTone | ChipHue;\n\n/** `sm` 8px (keksdose's unread dot on the support trigger), `md` 10px (the avatar's\n *  unread dot), `lg` 12px (kastlan's occupancy legend swatch). */\nexport type StatusDotSize = \"sm\" | \"md\" | \"lg\";\n\nconst FILL: Record<StatusDotTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n  blue: \"bg-[var(--hue-blue)]\",\n  indigo: \"bg-[var(--hue-indigo)]\",\n  purple: \"bg-[var(--hue-purple)]\",\n  teal: \"bg-[var(--hue-teal)]\",\n  orange: \"bg-[var(--hue-orange)]\",\n};\n\n/**\n * The colour of each tone as a CSS value — the same `var(--…)` the dot's class paints\n * with. For a mark the kit does not draw: a `SwatchPicker` option (`color`), a chart\n * series, an inline `style`. keksdose's category picker spelled `var(--hue-teal)` out by\n * hand to match the dot beside the category name; a renamed token would have parted\n * them silently. (The class table above stays literal: Tailwind finds classes by\n * reading the source, so `bg-[${…}]` would never be generated. A test keeps the two\n * tables agreeing.)\n */\nconst COLOR: Record<StatusDotTone, string> = {\n  brand: \"var(--brand)\",\n  neutral: \"var(--text-muted)\",\n  success: \"var(--success)\",\n  warning: \"var(--warning)\",\n  danger: \"var(--danger)\",\n  info: \"var(--info)\",\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  blue: \"var(--hue-blue)\",\n  indigo: \"var(--hue-indigo)\",\n  purple: \"var(--hue-purple)\",\n  teal: \"var(--hue-teal)\",\n  orange: \"var(--hue-orange)\",\n};\n\n/** The CSS colour a {@link StatusDot} of `tone` is filled with — `statusDotColor(\"teal\")`\n *  is `\"var(--hue-teal)\"`. See the table above for when to reach for it. */\nexport function statusDotColor(tone: StatusDotTone): string {\n  return COLOR[tone];\n}\n\nconst SIZE: Record<StatusDotSize, string> = { sm: \"size-2\", md: \"size-2.5\", lg: \"size-3\" };\n\n/**\n * A labelled dot at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the label wraps instead of\n * ending in \"…\", so a legend entry or a status keeps its last word, the one that tells\n * two states apart. The dot then sits on the label's FIRST line rather than halfway down\n * the block: the row aligns to the top and the dot moves down by half of what one line\n * (`1lh`, the label's own line height, which the dot inherits) leaves around it.\n * `large:` classes, so Normal keeps its one centred line.\n *\n * `break-words`, not `[overflow-wrap:anywhere]`: a legend often sits in a table, and\n * `anywhere` lowers the label's min-content width to one letter, so an auto-sized column\n * squeezed it to a letter per line (the showcase's tone table at 360 px, Extra large).\n * `break-word` keeps each word whole wherever the width is the content's to choose, and\n * still breaks one that cannot fit its line at all.\n */\nconst LABEL_WRAP_AT_LARGE = \"large:whitespace-normal large:break-words\";\nconst DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {\n  sm: \"large:mt-[calc((1lh_-_0.5rem)/2)]\",\n  md: \"large:mt-[calc((1lh_-_0.625rem)/2)]\",\n  lg: \"large:mt-[calc((1lh_-_0.75rem)/2)]\",\n};\n\nexport interface StatusDotProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  tone?: StatusDotTone;\n  size?: StatusDotSize;\n  /**\n   * Visible text beside the dot — a legend entry (\"Rented\") or a status (\"Online\"). It\n   * is also what a screen reader reads: the dot itself is decorative whenever there is\n   * a label.\n   *\n   * Without a label the dot is hidden from assistive technology, because a coloured\n   * circle says nothing to someone who cannot see it. Say the state where it IS read —\n   * keksdose's avatar trigger puts \"3 unread\" in its own `aria-label` — or give the dot\n   * an `aria-label` of its own, which makes it an image with that name.\n   */\n  label?: ReactNode;\n  /**\n   * A ring in the surface colour round the dot, so a dot laid over the corner of an\n   * icon or an avatar reads as a separate mark and not a smudge (keksdose top-bar.tsx\n   * :152, account-menu.tsx ~385, both hand-drawing `ring-2 ring-white\n   * dark:ring-slate-900`). Position it with `className` (`absolute -end-0.5 -top-0.5`).\n   */\n  ring?: boolean;\n  /** Extra classes for the dot itself; `className` goes on the outer element. */\n  dotClassName?: string;\n}\n\n/**\n * A small token-coloured dot, with an optional label.\n *\n * kastlan's reporting dashboard (dashboard-tab.tsx:79) paints its occupancy legend\n * with raw `bg-green-500` / `bg-red-500` / `bg-yellow-500`, which ignores the palette\n * and the dark theme; keksdose draws two unread dots by hand in `rose-500`. Both are\n * this.\n */\nexport function StatusDot({\n  tone = \"neutral\",\n  size = \"sm\",\n  label,\n  ring = false,\n  className,\n  dotClassName,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: StatusDotProps) {\n  const dot = (\n    <span\n      className={cn(\n        \"inline-block shrink-0 rounded-full\",\n        SIZE[size],\n        FILL[tone],\n        ring && \"ring-2 ring-[var(--bg-surface)]\",\n        label != null && DOT_ON_FIRST_LINE[size],\n        label == null && className,\n        dotClassName,\n      )}\n      {...(label == null\n        ? ariaLabel\n          ? { role: \"img\", \"aria-label\": ariaLabel, ...rest }\n          : { \"aria-hidden\": true, ...rest }\n        : { \"aria-hidden\": true })}\n    />\n  );\n  if (label == null) return dot;\n  return (\n    // No `aria-label` here: the visible label is the text, and a name on a role-less\n    // span is one ARIA forbids and screen readers ignore.\n    <span {...rest} className={cn(\"inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start\", className)}>\n      {dot}\n      <span className={cn(\"min-w-0 truncate\", LABEL_WRAP_AT_LARGE)}>{label}</span>\n    </span>\n  );\n}\n"],"mappings":";AAsII,cAqBA,YArBA;AArIJ,SAAS,UAAU;AAkBnB,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAWA,MAAM,QAAuC;AAAA,EAC3C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAIO,SAAS,eAAe,MAA6B;AAC1D,SAAO,MAAM,IAAI;AACnB;AAEA,MAAM,OAAsC,EAAE,IAAI,UAAU,IAAI,YAAY,IAAI,SAAS;AAiBzF,MAAM,sBAAsB;AAC5B,MAAM,oBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAmCO,SAAS,UAAU;AAAA,EACxB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAmB;AACjB,QAAM,MACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT,KAAK,IAAI;AAAA,QACT,QAAQ;AAAA,QACR,SAAS,QAAQ,kBAAkB,IAAI;AAAA,QACvC,SAAS,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,MACC,GAAI,SAAS,OACV,YACE,EAAE,MAAM,OAAO,cAAc,WAAW,GAAG,KAAK,IAChD,EAAE,eAAe,MAAM,GAAG,KAAK,IACjC,EAAE,eAAe,KAAK;AAAA;AAAA,EAC5B;AAEF,MAAI,SAAS,KAAM,QAAO;AAC1B;AAAA;AAAA;AAAA,IAGE,qBAAC,UAAM,GAAG,MAAM,WAAW,GAAG,sEAAsE,SAAS,GAC1G;AAAA;AAAA,MACD,oBAAC,UAAK,WAAW,GAAG,oBAAoB,mBAAmB,GAAI,iBAAM;AAAA,OACvE;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/status-dot.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { ProgressBarTone } from \"./progress-bar\";\nimport type { ChipHue } from \"./chip\";\n\n/**\n * The tones are `ProgressBar`'s, name for name — which are `Chip`'s, less nothing — so a\n * dot in a legend, the bar it explains and the badge beside it can be given the same\n * word and agree. The money pair is here for the same reason it is there: a legend\n * swatch for income is money, not \"success\". Chip's categorical hues are here too\n * (0.11): a unit-status dot in a combobox (kastlan lease-unit-step.tsx:35, \"rented\"\n * is blue) must match the Chip that states the same status elsewhere.\n */\nexport type StatusDotTone = ProgressBarTone | ChipHue;\n\n/** `sm` 8px (keksdose's unread dot on the support trigger), `md` 10px (the avatar's\n *  unread dot), `lg` 12px (kastlan's occupancy legend swatch). */\nexport type StatusDotSize = \"sm\" | \"md\" | \"lg\";\n\nconst FILL: Record<StatusDotTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n  blue: \"bg-[var(--hue-blue)]\",\n  indigo: \"bg-[var(--hue-indigo)]\",\n  purple: \"bg-[var(--hue-purple)]\",\n  teal: \"bg-[var(--hue-teal)]\",\n  orange: \"bg-[var(--hue-orange)]\",\n};\n\n/**\n * The colour of each tone as a CSS value — the same `var(--…)` the dot's class paints\n * with. For a mark the kit does not draw: a `SwatchPicker` option (`color`), a chart\n * series, an inline `style`. keksdose's category picker spelled `var(--hue-teal)` out by\n * hand to match the dot beside the category name; a renamed token would have parted\n * them silently. (The class table above stays literal: Tailwind finds classes by\n * reading the source, so `bg-[${…}]` would never be generated. A test keeps the two\n * tables agreeing.)\n */\nconst COLOR: Record<StatusDotTone, string> = {\n  brand: \"var(--brand)\",\n  neutral: \"var(--text-muted)\",\n  success: \"var(--success)\",\n  warning: \"var(--warning)\",\n  danger: \"var(--danger)\",\n  info: \"var(--info)\",\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  blue: \"var(--hue-blue)\",\n  indigo: \"var(--hue-indigo)\",\n  purple: \"var(--hue-purple)\",\n  teal: \"var(--hue-teal)\",\n  orange: \"var(--hue-orange)\",\n};\n\n/** The CSS colour a {@link StatusDot} of `tone` is filled with — `statusDotColor(\"teal\")`\n *  is `\"var(--hue-teal)\"`. See the table above for when to reach for it. */\nexport function statusDotColor(tone: StatusDotTone): string {\n  return COLOR[tone];\n}\n\nconst SIZE: Record<StatusDotSize, string> = { sm: \"size-2\", md: \"size-2.5\", lg: \"size-3\" };\n\n/**\n * A labelled dot at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the label wraps instead of\n * ending in \"…\", so a legend entry or a status keeps its last word, the one that tells\n * two states apart. The dot then sits on the label's FIRST line rather than halfway down\n * the block: the row aligns to the top and the dot moves down by half of what one line\n * (`1lh`, the label's own line height, which the dot inherits) leaves around it.\n * `large:` classes, so Normal keeps its one centred line.\n *\n * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this\n * file's own `truncate` + `large:whitespace-normal large:break-words`. The utility breaks\n * with `overflow-wrap: anywhere`, which lowers the label's min-content width: a legend in\n * an auto-sized table column (the showcase's tone table at 360 px, Extra large) wants the\n * column given a width, or it is squeezed to a letter per line.\n */\nconst LABEL_TRUNCATE = \"truncate-until-large\";\nconst DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {\n  sm: \"large:mt-[calc((1lh_-_0.5rem)/2)]\",\n  md: \"large:mt-[calc((1lh_-_0.625rem)/2)]\",\n  lg: \"large:mt-[calc((1lh_-_0.75rem)/2)]\",\n};\n\nexport interface StatusDotProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  tone?: StatusDotTone;\n  size?: StatusDotSize;\n  /**\n   * Visible text beside the dot — a legend entry (\"Rented\") or a status (\"Online\"). It\n   * is also what a screen reader reads: the dot itself is decorative whenever there is\n   * a label.\n   *\n   * Without a label the dot is hidden from assistive technology, because a coloured\n   * circle says nothing to someone who cannot see it. Say the state where it IS read —\n   * keksdose's avatar trigger puts \"3 unread\" in its own `aria-label` — or give the dot\n   * an `aria-label` of its own, which makes it an image with that name.\n   */\n  label?: ReactNode;\n  /**\n   * A ring in the surface colour round the dot, so a dot laid over the corner of an\n   * icon or an avatar reads as a separate mark and not a smudge (keksdose top-bar.tsx\n   * :152, account-menu.tsx ~385, both hand-drawing `ring-2 ring-white\n   * dark:ring-slate-900`). Position it with `className` (`absolute -end-0.5 -top-0.5`).\n   */\n  ring?: boolean;\n  /** Extra classes for the dot itself; `className` goes on the outer element. */\n  dotClassName?: string;\n}\n\n/**\n * A small token-coloured dot, with an optional label.\n *\n * kastlan's reporting dashboard (dashboard-tab.tsx:79) paints its occupancy legend\n * with raw `bg-green-500` / `bg-red-500` / `bg-yellow-500`, which ignores the palette\n * and the dark theme; keksdose draws two unread dots by hand in `rose-500`. Both are\n * this.\n */\nexport function StatusDot({\n  tone = \"neutral\",\n  size = \"sm\",\n  label,\n  ring = false,\n  className,\n  dotClassName,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: StatusDotProps) {\n  const dot = (\n    <span\n      className={cn(\n        \"inline-block shrink-0 rounded-full\",\n        SIZE[size],\n        FILL[tone],\n        ring && \"ring-2 ring-[var(--bg-surface)]\",\n        label != null && DOT_ON_FIRST_LINE[size],\n        label == null && className,\n        dotClassName,\n      )}\n      {...(label == null\n        ? ariaLabel\n          ? { role: \"img\", \"aria-label\": ariaLabel, ...rest }\n          : { \"aria-hidden\": true, ...rest }\n        : { \"aria-hidden\": true })}\n    />\n  );\n  if (label == null) return dot;\n  return (\n    // No `aria-label` here: the visible label is the text, and a name on a role-less\n    // span is one ARIA forbids and screen readers ignore.\n    <span {...rest} className={cn(\"inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start\", className)}>\n      {dot}\n      <span className={cn(\"min-w-0\", LABEL_TRUNCATE)}>{label}</span>\n    </span>\n  );\n}\n"],"mappings":";AAsII,cAqBA,YArBA;AArIJ,SAAS,UAAU;AAkBnB,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAWA,MAAM,QAAuC;AAAA,EAC3C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAIO,SAAS,eAAe,MAA6B;AAC1D,SAAO,MAAM,IAAI;AACnB;AAEA,MAAM,OAAsC,EAAE,IAAI,UAAU,IAAI,YAAY,IAAI,SAAS;AAiBzF,MAAM,iBAAiB;AACvB,MAAM,oBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAmCO,SAAS,UAAU;AAAA,EACxB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAmB;AACjB,QAAM,MACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT,KAAK,IAAI;AAAA,QACT,QAAQ;AAAA,QACR,SAAS,QAAQ,kBAAkB,IAAI;AAAA,QACvC,SAAS,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,MACC,GAAI,SAAS,OACV,YACE,EAAE,MAAM,OAAO,cAAc,WAAW,GAAG,KAAK,IAChD,EAAE,eAAe,MAAM,GAAG,KAAK,IACjC,EAAE,eAAe,KAAK;AAAA;AAAA,EAC5B;AAEF,MAAI,SAAS,KAAM,QAAO;AAC1B;AAAA;AAAA;AAAA,IAGE,qBAAC,UAAM,GAAG,MAAM,WAAW,GAAG,sEAAsE,SAAS,GAC1G;AAAA;AAAA,MACD,oBAAC,UAAK,WAAW,GAAG,WAAW,cAAc,GAAI,iBAAM;AAAA,OACzD;AAAA;AAEJ;","names":[]}

package/dist/components/swatch-picker.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { TileSize } from './tile-radio.js';
+import { CommitScope } from './write-lock.js';
 
 interface SwatchPickerLabels {
     /** The "no colour" tile's name, when `allowNone` is set. */
@@ -102,7 +103,7 @@ interface SwatchPickerProps<T extends string> extends Omit<ComponentPropsWithout
     /** This picker COMMITS — choosing a colour saves it. Under a locked
      *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
      *  reason, as {@link Button}'s `commit` does. */
-    commit?: boolean;
+    commit?: CommitScope;
 }
 /**
  * A row of colour swatches that is one radio group.

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 } 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?: boolean;\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 { 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":[]}

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

@@ -1,29 +1,99 @@
 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';
 
 /**
- * One armed swipe action: what it does, and how the reveal panel presents it.
- *
- * The two background classes are the idle and armed states. Before the first
- * threshold is crossed the panel previews the nearest action in its IDLE colour, so
- * the user can see what a little more drag will do; crossing the threshold flips it to
- * `armedClassName`. Passing the same value for both simply removes that feedback.
+ * 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;
+/**
+ * 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
+ * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app
+ * 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 SwipeAction {
+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. */
+    foreground: string;
+}
+interface SwipeActionBase {
     onCommit: () => void;
     label: string;
     /** Rendered inside the panel. Icons stay the consumer's choice — this package
      *  ships no opinion about which icon set an app uses. */
     icon?: ReactNode;
-    /** Background utility class while the action is previewed but not yet armed. The
-     *  panel's text is white unless this sets a text colour too — and a fill that turns
-     *  light in dark mode needs one: pass the fill's contrast token
-     *  (`bg-[var(--danger)] text-[var(--danger-contrast)]`; also `--brand-contrast`,
-     *  `--success-contrast`), as the kit's own swipes do since 0.26. */
+}
+/**
+ * One armed swipe action: what it does, and how the reveal panel presents it.
+ *
+ * The panel has two states. Before the first threshold is crossed it previews the
+ * nearest action IDLE, so the user can see what a little more drag will do; crossing
+ * the threshold ARMS it — "let go and this fires".
+ *
+ * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the
+ * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);
+ * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid
+ * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at
+ * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every
+ * dark-mode pastel.
+ *
+ * **`paint`** follows the same rule for an app's documented exception (see
+ * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so
+ * 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 & ({
+    /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
+    tone: SwipeTone;
+    paint?: never;
+    className?: never;
+    armedClassName?: never;
+} | {
+    /** A documented app exception: idle a 14 % wash of `fill` under the body ink,
+     *  armed `fill` under `foreground`. */
+    paint: SwipePaint;
+    tone?: never;
+    className?: never;
+    armedClassName?: never;
+} | {
+    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. */
     className: string;
-    /** Background utility class once the drag has passed this action's threshold. */
+    /** @deprecated 0.33 — pass `tone`, or `paint`. Background utility class once
+     *  the drag has passed this action's threshold. */
     armedClassName: string;
-}
+});
+/**
+ * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a
+ * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair
+ * takes Chip's soft money look, the well under the money colour; neutral the active
+ * fill under the secondary ink); armed is the plain fill, not `-hover`, under the
+ * fill's own foreground. Measured in every shipped preset by
+ * theme/__tests__/tokens-css-audit.test.ts.
+ */
+declare const SWIPE_TONE: Record<SwipeTone, {
+    idle: string;
+    armed: string;
+}>;
 /**
  * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on
  * purpose: a swipe is a movement of the finger across the glass, the gesture hook
@@ -65,8 +135,9 @@ interface SwipeableRowProps {
  * action reachable and roughly doubles the room between them.
  *
  * **Whether the action will fire is stated three ways, not one** (feedback #174): the
- * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the
- * label turns bold — plus the existing haptic tick per newly armed stage. A colour
+ * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a
+ * filled disc, and the label turns bold — plus the existing haptic tick per newly armed
+ * stage. A colour
  * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot
  * distinguish the two tones.
  *
@@ -93,4 +164,4 @@ interface SwipeableRowProps {
  */
 declare function SwipeableRow({ right, left, enabled, actionsLabel, className, children, }: SwipeableRowProps): react.JSX.Element;
 
-export { type SwipeAction, SwipeableRow, type SwipeableRowProps };
+export { SWIPE_TONE, type SwipeAction, type SwipePaint, type SwipeTone, SwipeableRow, type SwipeableRowProps };

package/dist/components/swipeable-row.js

@@ -5,6 +5,37 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { useRowSwipe } from "../hooks/use-row-swipe.js";
 import { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+const SWIPE_TONE = {
+  brand: { idle: "bg-brand-soft text-brand-muted", armed: "bg-brand text-brand-contrast" },
+  neutral: { idle: "bg-active text-secondary", armed: "bg-neutral text-neutral-contrast" },
+  success: { idle: "bg-success-soft text-success", armed: "bg-success text-success-contrast" },
+  warning: { idle: "bg-warning-soft text-warning", armed: "bg-warning text-warning-contrast" },
+  danger: { idle: "bg-danger-soft text-danger", armed: "bg-danger text-danger-contrast" },
+  info: { idle: "bg-info-soft text-info", armed: "bg-info text-info-contrast" },
+  income: { idle: "bg-surface-2 text-money-pos", armed: "bg-money-pos text-money-income-contrast" },
+  expense: { idle: "bg-surface-2 text-money-neg", armed: "bg-money-neg text-money-expense-contrast" },
+  blue: { idle: "bg-hue-blue-soft text-hue-blue", armed: "bg-hue-blue text-hue-blue-contrast" },
+  indigo: { idle: "bg-hue-indigo-soft text-hue-indigo", armed: "bg-hue-indigo text-hue-indigo-contrast" },
+  purple: { idle: "bg-hue-purple-soft text-hue-purple", armed: "bg-hue-purple text-hue-purple-contrast" },
+  teal: { idle: "bg-hue-teal-soft text-hue-teal", armed: "bg-hue-teal text-hue-teal-contrast" },
+  orange: { idle: "bg-hue-orange-soft text-hue-orange", armed: "bg-hue-orange text-hue-orange-contrast" }
+};
+const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
+const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
+function panelLook(action, armed) {
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
+  if (action.paint) {
+    return {
+      className: armed ? PAINT_ARMED : PAINT_IDLE,
+      style: {
+        "--swipe-paint-fill": action.paint.fill,
+        "--swipe-paint-fg": action.paint.foreground
+      },
+      dim: false
+    };
+  }
+  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
+}
 const PEEK_PX = 40;
 function SwipeableRow({
   right,
@@ -57,24 +88,27 @@ function SwipeableRow({
   const draggingLeft = side ? side === "left" : lastSide === "left";
   const shown = draggingLeft ? leftActions[Math.max(0, swipe.armedLeftIndex)] : rightActions[Math.max(0, swipe.armedRightIndex)];
   const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;
+  const look = shown ? panelLook(shown, armed) : null;
   return /* @__PURE__ */ jsxs("div", { ref: rowRef, className: cn("relative overflow-hidden", className), children: [
-    active && shown && /* @__PURE__ */ jsxs(
+    active && shown && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 bg-surface" }),
+    active && shown && look && /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
-          "text-xs font-medium text-white transition-all",
-          // Dimmed until the drag has actually passed a threshold: "nothing will
-          // happen yet" has to look different from "let go and this fires", and on
-          // a moving row a one-step colour change was too quiet to notice.
-          armed ? "opacity-100" : "opacity-60",
-          armed ? shown.armedClassName : shown.className,
+          "text-xs font-medium transition-all",
+          look.className,
+          // The old path only: dimmed until the drag has passed a threshold. A tone
+          // or a paint says it with the soft→solid step instead, which keeps its
+          // label readable at both ends.
+          look.dim && "opacity-60",
           // The panel is anchored to the edge the row is uncovering, so the label
           // sits where the eye already is rather than across the screen. That edge is
           // physical, while a flex row starts at the INLINE start — so in RTL the two
           // directions swap, or the label sat under the row on the covered side.
           draggingLeft ? "flex-row-reverse rtl:flex-row" : "rtl:flex-row-reverse"
         ),
+        style: look.style,
         children: [
           shown.icon && /* @__PURE__ */ jsx(
             "span",
@@ -82,8 +116,10 @@ function SwipeableRow({
               className: cn(
                 "flex shrink-0 items-center justify-center rounded-full transition-all",
                 // Armed, the icon gets a disc of its own and grows — a second,
-                // non-colour signal, and the one that stays readable at a glance.
-                armed ? "size-8 scale-110 bg-white/25" : "size-7 bg-white/10"
+                // non-colour signal, and the one that stays readable at a glance. In
+                // the label's own colour (0.33): a white disc vanished on a dark
+                // theme's pastel fill, and the label's colour works on every pair.
+                armed ? "size-8 scale-110 bg-current/20" : "size-7 bg-current/10"
               ),
               children: shown.icon
             }
@@ -152,6 +188,7 @@ function SwipeableRow({
   ] });
 }
 export {
+  SWIPE_TONE,
   SwipeableRow
 };
 //# sourceMappingURL=swipeable-row.js.map

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 { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\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  /** Background utility class while the action is previewed but not yet armed. The\n   *  panel's text is white unless this sets a text colour too — and a fill that turns\n   *  light in dark mode needs one: pass the fill's contrast token\n   *  (`bg-[var(--danger)] text-[var(--danger-contrast)]`; also `--brand-contrast`,\n   *  `--success-contrast`), as the kit's own swipes do since 0.26. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\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 dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed 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\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.className,\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        >\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.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/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. 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":[]}

package/dist/components/switch.d.ts

@@ -1,6 +1,7 @@
 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';
@@ -88,7 +89,7 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
      * is locked the `disabledReason` way with the lock's reason (which wins over its
      * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
      */
-    commit?: boolean;
+    commit?: CommitScope;
 }
 /**
  * A native checkbox drawn as a track and thumb, announced as a 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\";\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?: boolean;\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":";AAoKI,SA6FI,UA5FF,KADF;AApKJ,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kBAAkB;AAoB3B,MAAM,QAAQ;AAAA;AAAA;AAAA,EAGZ,IAAI,EAAE,OAAO,WAAW,OAAO,gCAAgC;AAAA;AAAA,EAE/D,IAAI,EAAE,OAAO,WAAW,OAAO,gCAAgC;AACjE;AAWA,MAAM,QACJ,4JAGsB,UAAU;AAOlC,MAAM,QACJ;AAqEK,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK;AACpB,QAAM,aAAa,sBAAsB,qBAAqB;AAG9D,QAAM,gBAAgB,QAAQ,QAAQ,KAAK;AAC3C,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,OAAO,UAAU,UAAa,CAAC;AACrC,QAAM,WAAW,MAAM,IAAI;AAE3B,QAAM,QACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,CAAC,UAAU,SAAS,GAC/E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,OAAO,KAAK;AAAA,QAEhB,UAAU,SAAS,SAAY;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe,UAAU,KAAK,eAAe,KAAK;AAAA,QAClD,oBAAkB;AAAA,UAChB,KAAK,kBAAkB;AAAA,UACvB,mBAAmB;AAAA,UACnB,UAAU,KAAK;AAAA,QACjB;AAAA,QAEA,SAAS,SAAS,SAAY;AAAA,QAC9B,UAAU,CAAC,MAAqC;AAC9C,cAAI,QAAQ;AAGV,cAAE,cAAc,UAAU,CAAC,EAAE,cAAc;AAC3C;AAAA,UACF;AACA,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,OAAO,SAAS,OAAO,UAAU,sBAAsB,cAAc;AAAA;AAAA,IACrF;AAAA,IACA,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,KAAK,GAAG;AAAA,KAC1D;AAMF,QAAM,cAAc,UAAU,cAAc,CAAC;AAC7C,QAAM,UACJ,UAAU,CAAC,cACT,oBAAC,gBAAa,MAAY,MAAM,YAAY,WAAW,GAAG,YAAY,QAAQ,SAAS,GACpF,iBACH,IAEA;AAGJ,MAAI,KAAM,QAAO;AAOjB,QAAM,WAAW;AACjB,QAAM,OAAO,oBAAC,UAAK,WAAW,GAAG,kCAAkC,YAAY,YAAY,GAAI,mBAAQ;AACvG,QAAM,QACJ,qBAAC,UAAK,WAAU,kBACb;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,uBAAuB;AAAA,UACvC,YAAY;AAAA,QACd;AAAA,QAEC;AAAA;AAAA,UACA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAU,+BAA8B,eAE1D;AAAA;AAAA;AAAA,IAEJ;AAAA,IAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAW,GAAG,iDAAiD,YAAY,YAAY,GAC7G,uBACH;AAAA,IAED,eACC,oBAAC,UAAK,IAAI,KAAK,UAAU,WAAW,4BACjC,eAAK,QACR;AAAA,KAEJ;AAGF,SACE,oBAAC,SAAI,WAAW,GAAG,0BAA0B,iBAAiB,CAAC,YAAY,cAAc,SAAS,GAC/F,6BAAmB,QAClB,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Switch"]}
+{"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"]}

package/dist/components/table.d.ts

@@ -53,7 +53,8 @@ interface TableProps extends ComponentPropsWithRef<"table"> {
     /** Tint every other body row. */
     zebra?: boolean;
     /** Tint the body row under the pointer. Off by default: a static table whose rows
-     *  light up promises a click that does nothing. */
+     *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to
+     *  the card colour (0.33): the hover tint is too close to the well. */
     hover?: boolean;
     /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */
     wrapperClassName?: string;