@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/choice-card.js

@@ -1,22 +1,24 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useRef } from "react";
 import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { hasContent } from "../lib/presence.js";
+import { assignRef, FIELD_ERROR_CLASS, mergeDescribedBy, useFieldError } from "./field-parts.js";
 import { useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer } from "./text-link.js";
 const InGroupContext = createContext(false);
 function RequiredMark() {
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-[var(--danger)]", children: "*" });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-danger", children: "*" });
 }
-const CARD = "flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] has-[:focus-visible]:outline-[length:var(--focus-ring-width)] has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
-const CARD_DISABLED = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
-const CARD_INVALID = "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] has-[:checked]:border-[var(--danger-border-strong)] has-[:checked]:ring-[var(--danger-border-strong)]";
-const BOX = "peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed";
-const CHECKBOX = "rounded checked:bg-[var(--brand)]";
+const CARD = "flex cursor-pointer items-start gap-3 rounded-lg border border-subtle bg-surface p-3 shadow-sm transition-colors hover:border-strong hover:bg-hover has-[:checked]:border-brand has-[:checked]:bg-brand-soft has-[:checked]:ring-1 has-[:checked]:ring-brand has-[:focus-visible]:outline-focus has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
+const CARD_DISABLED = "hover:border-subtle hover:bg-surface";
+const CARD_INVALID = "border-danger-strong ring-1 ring-danger-strong has-[:checked]:border-danger-strong has-[:checked]:ring-danger-strong";
+const BOX = "peer size-4 shrink-0 appearance-none border border-strong bg-surface transition-colors checked:border-brand focus:outline-none disabled:cursor-not-allowed";
+const CHECKBOX = "rounded checked:bg-brand";
 const RADIO = "rounded-full checked:border-[0.3125rem]";
-const ChoiceCard = forwardRef(function ChoiceCard2({
+function ChoiceCard({
+  ref,
   type = "checkbox",
   title,
   description,
@@ -32,15 +34,15 @@ const ChoiceCard = forwardRef(function ChoiceCard2({
   disabled,
   required,
   ...rest
-}, ref) {
+}) {
   const inGroup = useContext(InGroupContext);
   const generated = useId();
   const inputId = id ?? generated;
   const titleId = `${inputId}-title`;
   const descriptionId = `${inputId}-description`;
   const errorId = `${inputId}-error`;
-  const showDescription = hasMessage(description);
-  const showError = hasMessage(error);
+  const showDescription = hasContent(description);
+  const showError = hasContent(error);
   const isInvalid = Boolean(invalid) || showError;
   const mixed = type === "checkbox" && indeterminate;
   const local = useRef(null);
@@ -84,7 +86,7 @@ const ChoiceCard = forwardRef(function ChoiceCard2({
               className: cn(
                 BOX,
                 type === "radio" ? RADIO : CHECKBOX,
-                mixed && "border-[var(--brand)] bg-[var(--brand)]",
+                mixed && "border-brand bg-brand",
                 inputClassName
               )
             }
@@ -94,51 +96,51 @@ const ChoiceCard = forwardRef(function ChoiceCard2({
             {
               "aria-hidden": true,
               strokeWidth: 3,
-              className: "pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]"
+              className: "pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast"
             }
           ) : /* @__PURE__ */ jsx(
             Check,
             {
               "aria-hidden": true,
               strokeWidth: 3,
-              className: "pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible"
+              className: "pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible"
             }
           ))
         ] }),
-        Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]" }),
+        Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-secondary" }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs(
             "span",
             {
               id: titleId,
-              className: "block select-none text-sm font-medium leading-5 text-[var(--text-primary)]",
+              className: "block select-none text-sm font-medium leading-5 text-primary",
               children: [
                 title,
                 required && !inGroup && /* @__PURE__ */ jsx(RequiredMark, {})
               ]
             }
           ),
-          showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-[var(--text-muted)]", children: description }),
-          showError && /* @__PURE__ */ jsx("span", { id: errorId, className: "mt-1 block text-caption leading-tight text-[var(--danger)]", children: error })
+          showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-muted", children: description }),
+          showError && /* @__PURE__ */ jsx("span", { id: errorId, className: cn("block", FIELD_ERROR_CLASS), children: error })
         ] })
       ]
     }
   );
-});
-ChoiceCard.displayName = "ChoiceCard";
+}
 const META_TONE = {
-  muted: "text-[var(--text-muted)]",
-  warning: "text-[var(--warning)]",
-  danger: "text-[var(--danger)]",
-  info: "text-[var(--info)]",
-  success: "text-[var(--success)]"
+  muted: "text-muted",
+  warning: "text-warning",
+  danger: "text-danger",
+  info: "text-info",
+  success: "text-success"
 };
 const ICON_TONE = {
-  default: "text-[var(--text-secondary)]",
+  default: "text-secondary",
   ...META_TONE,
   brand: "text-brand-muted"
 };
-const ActionCard = forwardRef(function ActionCard2({
+function ActionCard({
+  ref,
   title,
   description,
   meta,
@@ -152,22 +154,22 @@ const ActionCard = forwardRef(function ActionCard2({
   id,
   type = "button",
   ...rest
-}, ref) {
+}) {
   const kitLink = useKitLink();
   const generated = useId();
   const baseId = id ?? generated;
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;
   const metaId = `${baseId}-meta`;
-  const showDescription = hasMessage(description);
-  const showMeta = hasMessage(meta);
+  const showDescription = hasContent(description);
+  const showMeta = hasContent(meta);
   const look = cn(
-    "flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors",
-    "hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]",
+    "flex w-full items-start gap-3 rounded-lg border border-subtle bg-surface p-3 text-start shadow-sm transition-colors",
+    "hover:border-brand hover:bg-hover",
     // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's
     // width (§5).
-    "focus:outline-none focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
-    "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]",
+    "focus:outline-none focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand",
+    "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-subtle disabled:hover:bg-surface",
     className
   );
   const labelledBy = rest["aria-labelledby"] ?? titleId;
@@ -179,8 +181,8 @@ const ActionCard = forwardRef(function ActionCard2({
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn("mt-0.5 size-5 shrink-0", ICON_TONE[iconTone], iconClassName) }),
     /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 space-y-1", children: [
-      /* @__PURE__ */ jsx("span", { id: titleId, className: "block text-sm font-medium leading-5 text-[var(--text-primary)]", children: title }),
-      showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "block text-sm text-[var(--text-secondary)]", children: description }),
+      /* @__PURE__ */ jsx("span", { id: titleId, className: "block text-sm font-medium leading-5 text-primary", children: title }),
+      showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "block text-sm text-secondary", children: description }),
       showMeta && /* @__PURE__ */ jsx("span", { id: metaId, className: cn("block text-sm", META_TONE[metaTone]), children: meta })
     ] })
   ] });
@@ -223,8 +225,7 @@ const ActionCard = forwardRef(function ActionCard2({
       children: body
     }
   );
-});
-ActionCard.displayName = "ActionCard";
+}
 function RenderedActionLink({
   render,
   ...props
@@ -235,8 +236,7 @@ function ChoiceCardGroup(props) {
   const { options, legend, name, className, cardClassName, disabled, error, required } = props;
   const generated = useId();
   const groupName = name ?? generated;
-  const errorId = `${generated}-error`;
-  const showError = hasMessage(error);
+  const field = useFieldError(error, false, void 0);
   const isChecked = (v) => props.multiple ? props.value.includes(v) : props.value === v;
   const toggle = (v, on) => {
     if (props.multiple) {
@@ -252,11 +252,11 @@ function ChoiceCardGroup(props) {
     "fieldset",
     {
       "aria-label": props["aria-label"],
-      "aria-describedby": showError ? errorId : void 0,
+      "aria-describedby": field.describedBy,
       disabled,
       className: "min-w-0",
       children: [
-        legend !== void 0 && /* @__PURE__ */ jsxs("legend", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: [
+        legend !== void 0 && /* @__PURE__ */ jsxs("legend", { className: "mb-2 text-sm font-medium text-primary", children: [
           legend,
           required && /* @__PURE__ */ jsx(RequiredMark, {})
         ] }),
@@ -270,7 +270,7 @@ function ChoiceCardGroup(props) {
             description: o.description,
             icon: o.icon,
             disabled: o.disabled,
-            invalid: showError,
+            invalid: field.isInvalid,
             required: required && (!props.multiple || props.value.length === 0) ? true : void 0,
             checked: isChecked(o.value),
             onCheckedChange: (on) => toggle(o.value, on),
@@ -278,7 +278,7 @@ function ChoiceCardGroup(props) {
           },
           o.value
         )) }),
-        showError && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-caption leading-tight text-[var(--danger)]", children: error })
+        field.errorEl
       ]
     }
   ) });

package/dist/components/choice-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type {\n  ButtonHTMLAttributes,\n  ChangeEvent,\n  ComponentType,\n  InputHTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n  /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n   *  a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n  type?: ChoiceCardType;\n  /** The option's name — the input's accessible name. */\n  title: ReactNode;\n  /** A line or two under the title. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n  indeterminate?: boolean;\n  /** Paints the card and sets `aria-invalid` together. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words. Rendered in the card and attached with\n   *  `aria-describedby`; implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>`. `className` styles the card. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n   * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n   * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n   * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n   * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n   */\n  required?: boolean;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n *  cards inside it draw none of their own. Private — not a prop a caller could set\n *  by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n *  announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n  return (\n    <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n      *\n    </span>\n  );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n  \"flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors \" +\n  \"hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] \" +\n  \"has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] \" +\n  // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n  // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n  // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n  // order, and the loser would be the focus mark. Offset, so the two never merge. Its\n  // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More\n  // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.\n  \"has-[:focus-visible]:outline-[length:var(--focus-ring-width)] has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] \" +\n  // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n  \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\nconst CARD_INVALID =\n  \"border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] has-[:checked]:border-[var(--danger-border-strong)] has-[:checked]:ring-[var(--danger-border-strong)]\";\n\nconst BOX =\n  \"peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors \" +\n  \"checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded checked:bg-[var(--brand)]\";\n// A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a\n// surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32\n// (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a\n// dot.\nconst RADIO = \"rounded-full checked:border-[0.3125rem]\";\n\nexport const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(\n  {\n    type = \"checkbox\",\n    title,\n    description,\n    icon: Icon,\n    indeterminate = false,\n    invalid,\n    error,\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    ...rest\n  },\n  ref,\n) {\n  const inGroup = useContext(InGroupContext);\n  const generated = useId();\n  const inputId = id ?? generated;\n  const titleId = `${inputId}-title`;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showDescription = hasMessage(description);\n  const showError = hasMessage(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const mixed = type === \"checkbox\" && indeterminate;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After every render, as Checkbox does: a click clears the DOM property.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = mixed;\n  });\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n    >\n      {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n      <span className=\"relative flex h-5 shrink-0 items-center\">\n        <input\n          ref={setRef}\n          id={inputId}\n          disabled={disabled}\n          required={required}\n          {...rest}\n          type={type}\n          aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={mergeDescribedBy(\n            rest[\"aria-describedby\"],\n            showDescription && descriptionId,\n            showError && errorId,\n          )}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e);\n            onCheckedChange?.(e.target.checked);\n          }}\n          className={cn(\n            BOX,\n            type === \"radio\" ? RADIO : CHECKBOX,\n            mixed && \"border-[var(--brand)] bg-[var(--brand)]\",\n            inputClassName,\n          )}\n        />\n        {type === \"checkbox\" &&\n          (mixed ? (\n            <Minus\n              aria-hidden\n              strokeWidth={3}\n              className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n            />\n          ) : (\n            <Check\n              aria-hidden\n              strokeWidth={3}\n              className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n            />\n          ))}\n      </span>\n      {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span\n          id={titleId}\n          // `select-none`: a double-click to toggle twice would otherwise select the words.\n          className=\"block select-none text-sm font-medium leading-5 text-[var(--text-primary)]\"\n        >\n          {title}\n          {required && !inGroup && <RequiredMark />}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className=\"mt-1 block text-caption leading-tight text-[var(--danger)]\">\n            {error}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nChoiceCard.displayName = \"ChoiceCard\";\n\n/* ── ActionCard ──────────────────────────────────────────────────────────── */\n\n/** The colour of {@link ActionCardProps.meta}. */\nexport type ActionCardMetaTone = \"muted\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst META_TONE: Record<ActionCardMetaTone, string> = {\n  muted: \"text-[var(--text-muted)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n};\n\n/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour\n *  the icon has always had; `brand` tints it (keksdose's privacy enrolment) with the\n *  brand as text, `--brand-muted` (0.33, docs/colour-roles-harmonization.md §5.5):\n *  `--brand` read 3.03:1 on the card's hover in the derived dark presets. */\nexport type ActionCardIconTone = \"default\" | \"muted\" | \"brand\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst ICON_TONE: Record<ActionCardIconTone, string> = {\n  default: \"text-[var(--text-secondary)]\",\n  ...META_TONE,\n  brand: \"text-brand-muted\",\n};\n\n/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ActionCardLinkProps {\n  href: string;\n  /** The card's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"title\"> {\n  /** What the card does — the button's accessible name. */\n  title: ReactNode;\n  /** A line or two on what it means. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * What it costs, or what else to know — a third line, said as prose and not as fine\n   * print (keksdose's custody choice: both options are legitimate and neither is free,\n   * so a card listing only benefits would be selling rather than explaining). Attached\n   * with `aria-describedby` after the description.\n   */\n  meta?: ReactNode;\n  /** The meta line's colour. Default `muted`; keksdose's cost line is `warning`. */\n  metaTone?: ActionCardMetaTone;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ChoiceCardProps[\"icon\"];\n  /** The icon's colour. Default `default` (the secondary text colour). */\n  iconTone?: ActionCardIconTone;\n  /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */\n  iconClassName?: string;\n  /**\n   * Makes the card a LINK to another page rather than a button that acts: kastlan's\n   * section tiles on the group overview (group-overview-page), each an icon, a name and\n   * a line on what is there. A real `<a href>`, so a middle click opens it in a new\n   * tab. A `disabled` card renders the inert button instead — a link cannot be\n   * disabled. The ref then reaches the `<a>`.\n   */\n  href?: string;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored without `href`. */\n  renderLink?: (props: ActionCardLinkProps) => ReactElement;\n}\n\n/**\n * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the\n * card's icon, title and description, plus a `meta` line, that runs `onClick` the\n * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,\n * `CustodyOption`) offers two custody modes this way — picking one IS the next step,\n * so there is no checked state to show and no \"Continue\" to press after it. With\n * `href` it is the same card as a link (kastlan's overview section tiles).\n *\n * A separate component rather than `ChoiceCard as=\"button\"`: a ChoiceCard is an\n * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.\n * Named by the title alone and described by the rest, so a screen reader hears\n * \"Keep the key yourself, button\" and then the explanation, not one long name.\n */\nexport const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(function ActionCard(\n  {\n    title,\n    description,\n    meta,\n    metaTone = \"muted\",\n    icon: Icon,\n    iconTone = \"default\",\n    iconClassName,\n    href,\n    renderLink,\n    className,\n    id,\n    type = \"button\",\n    ...rest\n  },\n  ref,\n) {\n  const kitLink = useKitLink();\n  const generated = useId();\n  const baseId = id ?? generated;\n  const titleId = `${baseId}-title`;\n  const descriptionId = `${baseId}-description`;\n  const metaId = `${baseId}-meta`;\n  const showDescription = hasMessage(description);\n  const showMeta = hasMessage(meta);\n  const look = cn(\n    \"flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors\",\n    \"hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]\",\n    // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's\n    // width (§5).\n    \"focus:outline-none focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n    \"disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]\",\n    className,\n  );\n  const labelledBy = rest[\"aria-labelledby\"] ?? titleId;\n  const describedBy = mergeDescribedBy(\n    rest[\"aria-describedby\"],\n    showDescription && descriptionId,\n    showMeta && metaId,\n  );\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className={cn(\"mt-0.5 size-5 shrink-0\", ICON_TONE[iconTone], iconClassName)} />}\n      <span className=\"min-w-0 flex-1 space-y-1\">\n        <span id={titleId} className=\"block text-sm font-medium leading-5 text-[var(--text-primary)]\">\n          {title}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"block text-sm text-[var(--text-secondary)]\">\n            {description}\n          </span>\n        )}\n        {showMeta && (\n          <span id={metaId} className={cn(\"block text-sm\", META_TONE[metaTone])}>\n            {meta}\n          </span>\n        )}\n      </span>\n    </>\n  );\n\n  if (href !== undefined && !rest.disabled) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and handlers ride along.\n    const {\n      disabled: _disabled,\n      form: _form,\n      formAction: _formAction,\n      name: _name,\n      value: _value,\n      onClick,\n      ...anchorRest\n    } = rest;\n    const linkProps: ActionCardLinkProps = {\n      ...(anchorRest as Partial<ActionCardLinkProps>),\n      ref: ref as unknown as Ref<HTMLAnchorElement>,\n      id,\n      href,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      onClick: onClick as unknown as ActionCardLinkProps[\"onClick\"],\n      className: look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    if (render) return <RenderedActionLink render={render} {...linkProps} />;\n    const { children: content, ...anchor } = linkProps;\n    return <a {...anchor}>{content}</a>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      id={id}\n      type={type}\n      {...rest}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      className={look}\n    >\n      {body}\n    </button>\n  );\n});\nActionCard.displayName = \"ActionCard\";\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedActionLink({\n  render,\n  ...props\n}: ActionCardLinkProps & { render: (props: ActionCardLinkProps) => ReactElement }) {\n  return render(props);\n}\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n  value: T;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ChoiceCardProps[\"icon\"];\n  disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n  options: ChoiceCardOption<T>[];\n  /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n   *  what names the group. Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  \"aria-label\"?: string;\n  /** Shared by every input — what a plain form submits under. Generated if omitted. */\n  name?: string;\n  /** Classes for the card grid. Default: one column, two from `sm` up. */\n  className?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n  disabled?: boolean;\n  /** What is wrong with the answer as a whole. Rendered under the cards and attached\n   *  to the fieldset. */\n  error?: ReactNode;\n  /**\n   * An answer is needed. Draws the required star after the `legend` (none without\n   * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n   * reaches the inputs as the native `required`:\n   *  - radios: every radio of the set, which is how HTML marks a radio group — the\n   *    group is satisfied by any one of them, and each announces \"required\";\n   *  - checkboxes: every box while NONE is ticked, dropped from all of them once one\n   *    is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n   *    to submit an empty set, and nothing is left demanding a second box.\n   */\n  required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple?: false;\n  value: T | null;\n  onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple: true;\n  value: T[];\n  onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n  | ChoiceCardSingleProps<T>\n  | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n  const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n  const generated = useId();\n  const groupName = name ?? generated;\n  const errorId = `${generated}-error`;\n  const showError = hasMessage(error);\n\n  const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n  const toggle = (v: T, on: boolean) => {\n    if (props.multiple) {\n      const next = new Set(props.value);\n      if (on) next.add(v);\n      else next.delete(v);\n      props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n    } else if (on) {\n      props.onChange(v);\n    }\n  };\n\n  return (\n    <InGroupContext.Provider value={true}>\n      <fieldset\n        aria-label={props[\"aria-label\"]}\n        aria-describedby={showError ? errorId : undefined}\n        disabled={disabled}\n        className=\"min-w-0\"\n      >\n        {legend !== undefined && (\n          <legend className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n            {legend}\n            {required && <RequiredMark />}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2\", className)}>\n          {options.map((o) => (\n            <ChoiceCard\n              key={o.value}\n              type={props.multiple ? \"checkbox\" : \"radio\"}\n              name={groupName}\n              value={o.value}\n              title={o.title}\n              description={o.description}\n              icon={o.icon}\n              disabled={o.disabled}\n              invalid={showError}\n              required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n              checked={isChecked(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n      </fieldset>\n    </InGroupContext.Provider>\n  );\n}\n"],"mappings":"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","names":["ChoiceCard","ActionCard"]}
+{"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type {\n  ButtonHTMLAttributes,\n  ChangeEvent,\n  ComponentType,\n  InputHTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { assignRef, FIELD_ERROR_CLASS, mergeDescribedBy, useFieldError } from \"./field-parts\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n  /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n   *  a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n  type?: ChoiceCardType;\n  /** The option's name — the input's accessible name. */\n  title: ReactNode;\n  /** A line or two under the title. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n  indeterminate?: boolean;\n  /** Paints the card and sets `aria-invalid` together. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words. Rendered in the card and attached with\n   *  `aria-describedby`; implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>`. `className` styles the card. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n   * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n   * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n   * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n   * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n   */\n  required?: boolean;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n *  cards inside it draw none of their own. Private — not a prop a caller could set\n *  by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n *  announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n  return (\n    <span aria-hidden className=\"ms-0.5 text-danger\">\n      *\n    </span>\n  );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n  \"flex cursor-pointer items-start gap-3 rounded-lg border border-subtle bg-surface p-3 shadow-sm transition-colors \" +\n  \"hover:border-strong hover:bg-hover \" +\n  \"has-[:checked]:border-brand has-[:checked]:bg-brand-soft has-[:checked]:ring-1 has-[:checked]:ring-brand \" +\n  // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n  // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n  // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n  // order, and the loser would be the focus mark. Offset, so the two never merge. Its\n  // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More\n  // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.\n  \"has-[:focus-visible]:outline-focus has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand \" +\n  // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n  \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-subtle hover:bg-surface\";\n\nconst CARD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong has-[:checked]:border-danger-strong has-[:checked]:ring-danger-strong\";\n\nconst BOX =\n  \"peer size-4 shrink-0 appearance-none border border-strong bg-surface transition-colors \" +\n  \"checked:border-brand focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded checked:bg-brand\";\n// A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a\n// surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32\n// (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a\n// dot.\nconst RADIO = \"rounded-full checked:border-[0.3125rem]\";\n\nexport function ChoiceCard({\n  ref,\n  type = \"checkbox\",\n  title,\n  description,\n  icon: Icon,\n  indeterminate = false,\n  invalid,\n  error,\n  onCheckedChange,\n  onChange,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  required,\n  ...rest\n}: ChoiceCardProps) {\n  const inGroup = useContext(InGroupContext);\n  const generated = useId();\n  const inputId = id ?? generated;\n  const titleId = `${inputId}-title`;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showDescription = hasContent(description);\n  const showError = hasContent(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const mixed = type === \"checkbox\" && indeterminate;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After every render, as Checkbox does: a click clears the DOM property.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = mixed;\n  });\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n    >\n      {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n      <span className=\"relative flex h-5 shrink-0 items-center\">\n        <input\n          ref={setRef}\n          id={inputId}\n          disabled={disabled}\n          required={required}\n          {...rest}\n          type={type}\n          aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={mergeDescribedBy(\n            rest[\"aria-describedby\"],\n            showDescription && descriptionId,\n            showError && errorId,\n          )}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e);\n            onCheckedChange?.(e.target.checked);\n          }}\n          className={cn(\n            BOX,\n            type === \"radio\" ? RADIO : CHECKBOX,\n            mixed && \"border-brand bg-brand\",\n            inputClassName,\n          )}\n        />\n        {type === \"checkbox\" &&\n          (mixed ? (\n            <Minus\n              aria-hidden\n              strokeWidth={3}\n              className=\"pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast\"\n            />\n          ) : (\n            <Check\n              aria-hidden\n              strokeWidth={3}\n              className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible\"\n            />\n          ))}\n      </span>\n      {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-secondary\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span\n          id={titleId}\n          // `select-none`: a double-click to toggle twice would otherwise select the words.\n          className=\"block select-none text-sm font-medium leading-5 text-primary\"\n        >\n          {title}\n          {required && !inGroup && <RequiredMark />}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-muted\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", FIELD_ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\n/* ── ActionCard ──────────────────────────────────────────────────────────── */\n\n/** The colour of {@link ActionCardProps.meta}. */\nexport type ActionCardMetaTone = \"muted\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst META_TONE: Record<ActionCardMetaTone, string> = {\n  muted: \"text-muted\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n  success: \"text-success\",\n};\n\n/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour\n *  the icon has always had; `brand` tints it (keksdose's privacy enrolment) with the\n *  brand as text, `--brand-muted` (0.33, docs/colour-roles-harmonization.md §5.5):\n *  `--brand` read 3.03:1 on the card's hover in the derived dark presets. */\nexport type ActionCardIconTone = \"default\" | \"muted\" | \"brand\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst ICON_TONE: Record<ActionCardIconTone, string> = {\n  default: \"text-secondary\",\n  ...META_TONE,\n  brand: \"text-brand-muted\",\n};\n\n/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ActionCardLinkProps {\n  href: string;\n  /** The card's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"title\"> {\n  /** What the card does — the button's accessible name. */\n  title: ReactNode;\n  /** A line or two on what it means. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * What it costs, or what else to know — a third line, said as prose and not as fine\n   * print (keksdose's custody choice: both options are legitimate and neither is free,\n   * so a card listing only benefits would be selling rather than explaining). Attached\n   * with `aria-describedby` after the description.\n   */\n  meta?: ReactNode;\n  /** The meta line's colour. Default `muted`; keksdose's cost line is `warning`. */\n  metaTone?: ActionCardMetaTone;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ChoiceCardProps[\"icon\"];\n  /** The icon's colour. Default `default` (the secondary text colour). */\n  iconTone?: ActionCardIconTone;\n  /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */\n  iconClassName?: string;\n  /**\n   * Makes the card a LINK to another page rather than a button that acts: kastlan's\n   * section tiles on the group overview (group-overview-page), each an icon, a name and\n   * a line on what is there. A real `<a href>`, so a middle click opens it in a new\n   * tab. A `disabled` card renders the inert button instead — a link cannot be\n   * disabled. The ref then reaches the `<a>`.\n   */\n  href?: string;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored without `href`. */\n  renderLink?: (props: ActionCardLinkProps) => ReactElement;\n  /** The `<button>` — or, with `href`, the `<a>`. A React 19 ref prop since 0.34 (MOD-4,\n   *  refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the\n * card's icon, title and description, plus a `meta` line, that runs `onClick` the\n * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,\n * `CustodyOption`) offers two custody modes this way — picking one IS the next step,\n * so there is no checked state to show and no \"Continue\" to press after it. With\n * `href` it is the same card as a link (kastlan's overview section tiles).\n *\n * A separate component rather than `ChoiceCard as=\"button\"`: a ChoiceCard is an\n * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.\n * Named by the title alone and described by the rest, so a screen reader hears\n * \"Keep the key yourself, button\" and then the explanation, not one long name.\n */\nexport function ActionCard({\n  ref,\n  title,\n  description,\n  meta,\n  metaTone = \"muted\",\n  icon: Icon,\n  iconTone = \"default\",\n  iconClassName,\n  href,\n  renderLink,\n  className,\n  id,\n  type = \"button\",\n  ...rest\n}: ActionCardProps) {\n  const kitLink = useKitLink();\n  const generated = useId();\n  const baseId = id ?? generated;\n  const titleId = `${baseId}-title`;\n  const descriptionId = `${baseId}-description`;\n  const metaId = `${baseId}-meta`;\n  const showDescription = hasContent(description);\n  const showMeta = hasContent(meta);\n  const look = cn(\n    \"flex w-full items-start gap-3 rounded-lg border border-subtle bg-surface p-3 text-start shadow-sm transition-colors\",\n    \"hover:border-brand hover:bg-hover\",\n    // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's\n    // width (§5).\n    \"focus:outline-none focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n    \"disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-subtle disabled:hover:bg-surface\",\n    className,\n  );\n  const labelledBy = rest[\"aria-labelledby\"] ?? titleId;\n  const describedBy = mergeDescribedBy(\n    rest[\"aria-describedby\"],\n    showDescription && descriptionId,\n    showMeta && metaId,\n  );\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className={cn(\"mt-0.5 size-5 shrink-0\", ICON_TONE[iconTone], iconClassName)} />}\n      <span className=\"min-w-0 flex-1 space-y-1\">\n        <span id={titleId} className=\"block text-sm font-medium leading-5 text-primary\">\n          {title}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"block text-sm text-secondary\">\n            {description}\n          </span>\n        )}\n        {showMeta && (\n          <span id={metaId} className={cn(\"block text-sm\", META_TONE[metaTone])}>\n            {meta}\n          </span>\n        )}\n      </span>\n    </>\n  );\n\n  if (href !== undefined && !rest.disabled) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and handlers ride along.\n    const {\n      disabled: _disabled,\n      form: _form,\n      formAction: _formAction,\n      name: _name,\n      value: _value,\n      onClick,\n      ...anchorRest\n    } = rest;\n    const linkProps: ActionCardLinkProps = {\n      ...(anchorRest as Partial<ActionCardLinkProps>),\n      ref: ref as unknown as Ref<HTMLAnchorElement>,\n      id,\n      href,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      onClick: onClick as unknown as ActionCardLinkProps[\"onClick\"],\n      className: look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    if (render) return <RenderedActionLink render={render} {...linkProps} />;\n    const { children: content, ...anchor } = linkProps;\n    return <a {...anchor}>{content}</a>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      id={id}\n      type={type}\n      {...rest}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      className={look}\n    >\n      {body}\n    </button>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedActionLink({\n  render,\n  ...props\n}: ActionCardLinkProps & { render: (props: ActionCardLinkProps) => ReactElement }) {\n  return render(props);\n}\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n  value: T;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ChoiceCardProps[\"icon\"];\n  disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n  options: ChoiceCardOption<T>[];\n  /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n   *  what names the group. Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  \"aria-label\"?: string;\n  /** Shared by every input — what a plain form submits under. Generated if omitted. */\n  name?: string;\n  /** Classes for the card grid. Default: one column, two from `sm` up. */\n  className?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n  disabled?: boolean;\n  /** What is wrong with the answer as a whole. Rendered under the cards and attached\n   *  to the fieldset. */\n  error?: ReactNode;\n  /**\n   * An answer is needed. Draws the required star after the `legend` (none without\n   * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n   * reaches the inputs as the native `required`:\n   *  - radios: every radio of the set, which is how HTML marks a radio group — the\n   *    group is satisfied by any one of them, and each announces \"required\";\n   *  - checkboxes: every box while NONE is ticked, dropped from all of them once one\n   *    is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n   *    to submit an empty set, and nothing is left demanding a second box.\n   */\n  required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple?: false;\n  value: T | null;\n  onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple: true;\n  value: T[];\n  onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n  | ChoiceCardSingleProps<T>\n  | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n  const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n  const generated = useId();\n  const groupName = name ?? generated;\n  // Every field's error wiring (DUP-8): the message under the cards, the group's\n  // description, and every card painted.\n  const field = useFieldError(error, false, undefined);\n\n  const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n  const toggle = (v: T, on: boolean) => {\n    if (props.multiple) {\n      const next = new Set(props.value);\n      if (on) next.add(v);\n      else next.delete(v);\n      props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n    } else if (on) {\n      props.onChange(v);\n    }\n  };\n\n  return (\n    <InGroupContext.Provider value={true}>\n      <fieldset\n        aria-label={props[\"aria-label\"]}\n        aria-describedby={field.describedBy}\n        disabled={disabled}\n        className=\"min-w-0\"\n      >\n        {legend !== undefined && (\n          <legend className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n            {required && <RequiredMark />}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2\", className)}>\n          {options.map((o) => (\n            <ChoiceCard\n              key={o.value}\n              type={props.multiple ? \"checkbox\" : \"radio\"}\n              name={groupName}\n              value={o.value}\n              title={o.title}\n              description={o.description}\n              icon={o.icon}\n              disabled={o.disabled}\n              invalid={field.isInvalid}\n              required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n              checked={isChecked(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n        {field.errorEl}\n      </fieldset>\n    </InGroupContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/column-mapper-labels.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnMapperLabels } from "./column-mapper.js";
+/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a
+ *  provider whose labels predate the key. */
+export declare const markedShort: (role: string) => string;
+export declare const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels;

package/dist/components/column-mapper-labels.js

@@ -0,0 +1,34 @@
+"use client";
+const markedShort = (role) => `${role} *`;
+const DEFAULT_COLUMN_MAPPER_LABELS = {
+  paste: "Paste a table",
+  pasteHint: "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
+  chooseFile: "Choose a file",
+  readError: (name) => `\u201C${name}\u201D could not be read`,
+  headerRow: "The first line names the columns",
+  summary: (columns, rows) => `${columns} ${columns === 1 ? "column" : "columns"}, ${rows} ${rows === 1 ? "row" : "rows"}`,
+  separatorSemicolon: "separated by semicolons",
+  separatorComma: "separated by commas",
+  separatorTab: "separated by tabs",
+  separatorSpace: "separated by spaces",
+  decimalComma: "decimal comma (1,5)",
+  decimalPoint: "decimal point (1.5)",
+  unreadCount: (count) => count === 1 ? "1 line could not be read" : `${count} lines could not be read`,
+  unreadLine: (line) => `Line ${line} could not be read`,
+  unreadMore: (count) => `\u2026and ${count} more`,
+  noRows: "No line of this text reads as a row of the table.",
+  table: "Columns and their roles",
+  columnN: (n) => `Column ${n}`,
+  roleOf: (column) => `What does column \u201C${column}\u201D hold?`,
+  ignore: "Ignore",
+  requiredRole: (role) => `${role} (required)`,
+  requiredRoleShort: markedShort,
+  previewOf: (shown, total) => shown === 1 ? `The first of ${total} rows` : `The first ${shown} of ${total} rows`,
+  oneOf: (roles) => `either ${roles}`,
+  missing: (roles) => `Still needed: ${roles}.`
+};
+export {
+  DEFAULT_COLUMN_MAPPER_LABELS,
+  markedShort
+};
+//# sourceMappingURL=column-mapper-labels.js.map

package/dist/components/column-mapper-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/column-mapper-labels.ts"],"sourcesContent":["// The English words of ./column-mapper, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./column-mapper re-exports them.\n\nimport type { ColumnMapperLabels } from \"./column-mapper\";\n\n/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a\n *  provider whose labels predate the key. */\nexport const markedShort = (role: string) => `${role} *`;\n\nexport const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {\n  paste: \"Paste a table\",\n  pasteHint:\n    \"Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.\",\n  chooseFile: \"Choose a file\",\n  readError: (name) => `“${name}” could not be read`,\n  headerRow: \"The first line names the columns\",\n  summary: (columns, rows) =>\n    `${columns} ${columns === 1 ? \"column\" : \"columns\"}, ${rows} ${rows === 1 ? \"row\" : \"rows\"}`,\n  separatorSemicolon: \"separated by semicolons\",\n  separatorComma: \"separated by commas\",\n  separatorTab: \"separated by tabs\",\n  separatorSpace: \"separated by spaces\",\n  decimalComma: \"decimal comma (1,5)\",\n  decimalPoint: \"decimal point (1.5)\",\n  unreadCount: (count) =>\n    count === 1\n      ? \"1 line could not be read\"\n      : `${count} lines could not be read`,\n  unreadLine: (line) => `Line ${line} could not be read`,\n  unreadMore: (count) => `…and ${count} more`,\n  noRows: \"No line of this text reads as a row of the table.\",\n  table: \"Columns and their roles\",\n  columnN: (n) => `Column ${n}`,\n  roleOf: (column) => `What does column “${column}” hold?`,\n  ignore: \"Ignore\",\n  requiredRole: (role) => `${role} (required)`,\n  requiredRoleShort: markedShort,\n  previewOf: (shown, total) =>\n    shown === 1\n      ? `The first of ${total} rows`\n      : `The first ${shown} of ${total} rows`,\n  oneOf: (roles) => `either ${roles}`,\n  missing: (roles) => `Still needed: ${roles}.`,\n};\n"],"mappings":";AAQO,MAAM,cAAc,CAAC,SAAiB,GAAG,IAAI;AAE7C,MAAM,+BAAmD;AAAA,EAC9D,OAAO;AAAA,EACP,WACE;AAAA,EACF,YAAY;AAAA,EACZ,WAAW,CAAC,SAAS,SAAI,IAAI;AAAA,EAC7B,WAAW;AAAA,EACX,SAAS,CAAC,SAAS,SACjB,GAAG,OAAO,IAAI,YAAY,IAAI,WAAW,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,QAAQ,MAAM;AAAA,EAC5F,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa,CAAC,UACZ,UAAU,IACN,6BACA,GAAG,KAAK;AAAA,EACd,YAAY,CAAC,SAAS,QAAQ,IAAI;AAAA,EAClC,YAAY,CAAC,UAAU,aAAQ,KAAK;AAAA,EACpC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS,CAAC,MAAM,UAAU,CAAC;AAAA,EAC3B,QAAQ,CAAC,WAAW,0BAAqB,MAAM;AAAA,EAC/C,QAAQ;AAAA,EACR,cAAc,CAAC,SAAS,GAAG,IAAI;AAAA,EAC/B,mBAAmB;AAAA,EACnB,WAAW,CAAC,OAAO,UACjB,UAAU,IACN,gBAAgB,KAAK,UACrB,aAAa,KAAK,OAAO,KAAK;AAAA,EACpC,OAAO,CAAC,UAAU,UAAU,KAAK;AAAA,EACjC,SAAS,CAAC,UAAU,iBAAiB,KAAK;AAC5C;","names":[]}

package/dist/components/column-mapper.d.ts

@@ -1,8 +1,8 @@
-import * as react from 'react';
-import { ReactNode, HTMLAttributes } from 'react';
-import { ColumnRole, ColumnMapperResult, ColumnMapping } from '../lib/column-mapping.js';
-import { TextTable } from '../lib/table-text.js';
-
+import type { HTMLAttributes, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { ColumnMapperResult, ColumnMapping, ColumnRole } from "../lib/column-mapping.js";
+import type { TextTable } from "../lib/table-text.js";
+import { DEFAULT_COLUMN_MAPPER_LABELS } from "./column-mapper-labels.js";
 /**
  * A table pasted, dropped or chosen as a file, and which of its columns plays which
  * part — Kurvenschmiede's columns input and keksdose's bank-file mapping step, once.
@@ -29,7 +29,7 @@ import { TextTable } from '../lib/table-text.js';
  * than doubling up, what is missing is named, and the rows a numeric role cannot read
  * are reported by line number rather than dropped.
  */
-interface ColumnMapperLabels {
+export interface ColumnMapperLabels {
     /** The paste box's label. */
     paste: string;
     /** The caption under the paste box. */
@@ -85,7 +85,7 @@ interface ColumnMapperLabels {
     /** What the table still needs, already joined as a list with "and". */
     missing: (roles: string) => string;
 }
-declare const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels;
+export { DEFAULT_COLUMN_MAPPER_LABELS };
 /** A `data-*` attribute, typed so `{ "data-private": "" }` needs no cast. */
 type DataAttributes = {
     [key: `data-${string}`]: string | number | boolean | undefined;
@@ -94,13 +94,13 @@ type DataAttributes = {
  * What {@link ColumnRoleTableProps.bodyProps} puts on the preview's `<tbody>`: `data-*`
  * hooks, an `id`, a class, a style.
  */
-type ColumnRoleTableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, "children" | "dangerouslySetInnerHTML"> & DataAttributes;
+export type ColumnRoleTableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, "children" | "dangerouslySetInnerHTML"> & DataAttributes;
 /**
  * What {@link ColumnRoleTableProps.rowProps} returns for one preview row's `<tr>` —
  * the same shape as LineItems' `LineItemsRowProps`, on a table row.
  */
-type ColumnRoleTableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, "children" | "dangerouslySetInnerHTML"> & DataAttributes;
-interface ColumnRoleTableProps<R extends string, M extends ColumnMapping<R> = ColumnMapping<R>> {
+export type ColumnRoleTableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, "children" | "dangerouslySetInnerHTML"> & DataAttributes;
+export interface ColumnRoleTableProps<R extends string, M extends ColumnMapping<R> = ColumnMapping<R>> {
     /** The columns' names — the file's header line — or `null` for a table without one
      *  (each column is then "Column 1", "Column 2", …). */
     header: readonly string[] | null;
@@ -143,7 +143,7 @@ interface ColumnRoleTableProps<R extends string, M extends ColumnMapping<R> = Co
      * to protect; a `className` is added after its classes.
      */
     rowProps?: (row: readonly string[], index: number) => ColumnRoleTableRowProps | undefined;
-    labels?: Partial<ColumnMapperLabels>;
+    labels?: LabelOverride<ColumnMapperLabels>;
     className?: string;
 }
 /**
@@ -188,8 +188,8 @@ interface ColumnRoleTableProps<R extends string, M extends ColumnMapping<R> = Co
  * focused behind the fade is scrolled clear of it, cell and all, and the Table's
  * wrapper says which ends are cut in `data-overflow`.
  */
-declare function ColumnRoleTable<R extends string, M extends ColumnMapping<R> = ColumnMapping<R>>({ header, rows, width: widthProp, roles, mapping, onMappingChange, previewRows, totalRows, disabled, bodyProps, rowProps, labels: labelsProp, className, }: ColumnRoleTableProps<R, M>): react.JSX.Element;
-interface ColumnMapperProps<R extends string> {
+export declare function ColumnRoleTable<R extends string, M extends ColumnMapping<R> = ColumnMapping<R>>({ header, rows, width: widthProp, roles, mapping, onMappingChange, previewRows, totalRows, disabled, bodyProps, rowProps, labels: labelsProp, className, }: ColumnRoleTableProps<R, M>): import("react").JSX.Element;
+export interface ColumnMapperProps<R extends string> {
     /** The parts the columns play — translated labels, which are required, which must
      *  be numbers. See {@link ColumnRole}. */
     roles: readonly ColumnRole<R>[];
@@ -226,7 +226,7 @@ interface ColumnMapperProps<R extends string> {
     /** One preview row's `<tr>` attributes — {@link ColumnRoleTableProps.rowProps}
      *  (0.24). `row` is the row as read, `index` its place in the preview. */
     rowProps?: (row: readonly string[], index: number) => ColumnRoleTableRowProps | undefined;
-    labels?: Partial<ColumnMapperLabels>;
+    labels?: LabelOverride<ColumnMapperLabels>;
     className?: string;
 }
 /**
@@ -249,6 +249,4 @@ interface ColumnMapperProps<R extends string> {
  * parts: {@link parseTextTable} or its own server's sniff, then {@link ColumnRoleTable},
  * then {@link readMappedTable}.
  */
-declare function ColumnMapper<R extends string>({ roles, onChange, label, hint, accept, maxSize, defaultText, previewRows, guess, disabled, bodyProps, rowProps, labels: labelsProp, className, }: ColumnMapperProps<R>): react.JSX.Element;
-
-export { ColumnMapper, type ColumnMapperLabels, type ColumnMapperProps, ColumnRoleTable, type ColumnRoleTableBodyProps, type ColumnRoleTableProps, type ColumnRoleTableRowProps, DEFAULT_COLUMN_MAPPER_LABELS };
+export declare function ColumnMapper<R extends string>({ roles, onChange, label, hint, accept, maxSize, defaultText, previewRows, guess, disabled, bodyProps, rowProps, labels: labelsProp, className, }: ColumnMapperProps<R>): import("react").JSX.Element;

package/dist/components/column-mapper.js

@@ -26,35 +26,9 @@ import {
   TableHeaderCell,
   TableRow
 } from "./table.js";
-import { Select, Textarea } from "./ui.js";
-const markedShort = (role) => `${role} *`;
-const DEFAULT_COLUMN_MAPPER_LABELS = {
-  paste: "Paste a table",
-  pasteHint: "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
-  chooseFile: "Choose a file",
-  readError: (name) => `\u201C${name}\u201D could not be read`,
-  headerRow: "The first line names the columns",
-  summary: (columns, rows) => `${columns} ${columns === 1 ? "column" : "columns"}, ${rows} ${rows === 1 ? "row" : "rows"}`,
-  separatorSemicolon: "separated by semicolons",
-  separatorComma: "separated by commas",
-  separatorTab: "separated by tabs",
-  separatorSpace: "separated by spaces",
-  decimalComma: "decimal comma (1,5)",
-  decimalPoint: "decimal point (1.5)",
-  unreadCount: (count) => count === 1 ? "1 line could not be read" : `${count} lines could not be read`,
-  unreadLine: (line) => `Line ${line} could not be read`,
-  unreadMore: (count) => `\u2026and ${count} more`,
-  noRows: "No line of this text reads as a row of the table.",
-  table: "Columns and their roles",
-  columnN: (n) => `Column ${n}`,
-  roleOf: (column) => `What does column \u201C${column}\u201D hold?`,
-  ignore: "Ignore",
-  requiredRole: (role) => `${role} (required)`,
-  requiredRoleShort: markedShort,
-  previewOf: (shown, total) => shown === 1 ? `The first of ${total} rows` : `The first ${shown} of ${total} rows`,
-  oneOf: (roles) => `either ${roles}`,
-  missing: (roles) => `Still needed: ${roles}.`
-};
+import { Select } from "./select.js";
+import { Textarea } from "./textarea.js";
+import { DEFAULT_COLUMN_MAPPER_LABELS, markedShort } from "./column-mapper-labels.js";
 const SEPARATOR_LABEL = {
   ";": "separatorSemicolon",
   ",": "separatorComma",
@@ -120,7 +94,7 @@ function ColumnRoleTable({
                 scope: "col",
                 className: "min-w-36 py-2 align-top",
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "block max-w-56 truncate pb-1 text-caption font-normal text-[var(--text-muted)]", children: name }),
+                  /* @__PURE__ */ jsx("span", { className: "block max-w-56 truncate pb-1 text-caption font-normal text-muted", children: name }),
                   /* @__PURE__ */ jsxs(
                     Select,
                     {
@@ -168,14 +142,14 @@ function ColumnRoleTable({
                 "font-mono whitespace-nowrap",
                 // Dimmed, not hidden: its values are what tell you whether ignoring
                 // it was right.
-                roleOfColumn(roles, mapping, column) === null && "text-[var(--text-muted)]"
+                roleOfColumn(roles, mapping, column) === null && "text-muted"
               ),
               children: /* @__PURE__ */ jsx("span", { className: "block max-w-56 truncate", children: row[column] ?? "" })
             },
             column
           )))) })
         ] }),
-        total > shown.length && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: labels.previewOf(shown.length, total) }),
+        total > shown.length && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: labels.previewOf(shown.length, total) }),
         gaps.length > 0 && /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", variant: "inline", size: "sm", block: true, children: labels.missing(formatList(gaps, "conjunction", locale)) })
       ]
     }
@@ -280,7 +254,7 @@ function ColumnMapper({
             disabled,
             className: cn(
               "font-mono text-xs",
-              dragOver && "rounded-md ring-2 ring-[var(--brand)]"
+              dragOver && "rounded-md ring-2 ring-brand"
             ),
             "data-drag-over": dragOver || void 0,
             onChange: (event) => {
@@ -343,7 +317,7 @@ function ColumnMapper({
           /* @__PURE__ */ jsx(
             "p",
             {
-              className: "text-xs text-[var(--text-secondary)]",
+              className: "text-xs text-secondary",
               "data-slot": "column-mapper-summary",
               children: [
                 labels.summary(table.width, result.rows.length),
@@ -377,10 +351,10 @@ function ColumnMapper({
               "data-slot": "column-mapper-unread",
               children: /* @__PURE__ */ jsxs("ul", { className: "space-y-1 text-xs", children: [
                 unread.slice(0, UNREAD_LISTED).map((line) => /* @__PURE__ */ jsxs("li", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("span", { className: "block text-[var(--text-secondary)]", children: labels.unreadLine(line.line) }),
-                  /* @__PURE__ */ jsx("code", { className: "block truncate font-mono text-[var(--text-muted)]", children: line.text })
+                  /* @__PURE__ */ jsx("span", { className: "block text-secondary", children: labels.unreadLine(line.line) }),
+                  /* @__PURE__ */ jsx("code", { className: "block truncate font-mono text-muted", children: line.text })
                 ] }, line.line)),
-                unread.length > UNREAD_LISTED && /* @__PURE__ */ jsx("li", { className: "text-[var(--text-muted)]", children: labels.unreadMore(unread.length - UNREAD_LISTED) })
+                unread.length > UNREAD_LISTED && /* @__PURE__ */ jsx("li", { className: "text-muted", children: labels.unreadMore(unread.length - UNREAD_LISTED) })
               ] })
             }
           )