@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/reauth-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/reauth-dialog.tsx"],"sourcesContent":["import { useContext, useEffect, useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { usePromisePending } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { ModalCloseContext } from \"./modal\";\nimport { Button, Input, Spinner } from \"./ui\";\n\n/**\n * Every string the dialog renders — the `reauthDialog` namespace of\n * `<UiKitProvider labels>`, and overridable per instance through `labels`. The title,\n * description and submit button are usually worded per action (\"Add a passkey\"),\n * which is what the `title` / `description` / `submitLabel` props are for; these are\n * the fallbacks.\n */\nexport interface ReauthDialogLabels {\n  title: string;\n  description: string;\n  /** Label of the password field. */\n  password: string;\n  submit: string;\n  cancel: string;\n}\n\nexport const DEFAULT_REAUTH_DIALOG_LABELS: ReauthDialogLabels = {\n  title: \"Confirm it’s you\",\n  description: \"Enter your current password to continue.\",\n  password: \"Current password\",\n  submit: \"Continue\",\n  cancel: \"Cancel\",\n};\n\nexport interface ReauthDialogProps {\n  /**\n   * Verifies the password — the app's call, e.g. the request the password guards.\n   *\n   * Return a promise and the dialog manages itself: busy until it settles, closes\n   * (`onClose(true)`) when it resolves, STAYS OPEN with the password kept and selected\n   * when it rejects — a wrong password is a typo to correct, not a sign-out. Pass the\n   * reason as `error`. Return nothing and the app owns the rest: `busy` for the\n   * pending state, unmounting the dialog once it is done.\n   */\n  onSubmit: (password: string) => void | Promise<unknown>;\n  /**\n   * The dialog has closed: `true` after a resolved `onSubmit`, `false` for Cancel,\n   * Escape, the backdrop and Back. A dismissal while `onSubmit` is still running also\n   * answers `false`, and that call's late result is then ignored.\n   */\n  onClose: (confirmed: boolean) => void;\n  /**\n   * Why the last attempt failed (\"Wrong password\"), shown under the field, which turns\n   * invalid (`aria-invalid`, `--danger-border-strong`). The app decides the wording —\n   * a 400 is a wrong password, a 500 is not. Hidden again as soon as the user edits\n   * the field (the message is about the password they had typed), and shown again by\n   * the next failed submit.\n   */\n  error?: ReactNode;\n  /** The check is running, for a caller that tracks it itself (a mutation's\n   *  `isPending`); a promise returned from `onSubmit` does the same on its own. */\n  busy?: boolean;\n  /** Default: `labels.title` — \"Confirm it’s you\". */\n  title?: ReactNode;\n  /** The line under the title. Default: `labels.description`. */\n  description?: ReactNode;\n  /** Text of the submit button. Default: `labels.submit` — \"Continue\". */\n  submitLabel?: ReactNode;\n  /** `\"danger\"` when what the password unlocks cannot be undone: the submit is then the\n   *  destructive button. Default `\"neutral\"`. */\n  tone?: \"neutral\" | \"danger\";\n  /** Extra body above the field — what is about to happen, a warning. */\n  children?: ReactNode;\n  /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. A\n   *  flip to `false` animates it out and wipes the password. */\n  open?: boolean;\n  /** User-facing strings; see {@link ReauthDialogLabels}. */\n  labels?: Partial<ReauthDialogLabels>;\n}\n\n/**\n * \"Enter your current password to continue\" — the step-up check in front of an\n * action that changes how an account signs in (adding a passkey) or what it can\n * reach. Kurvenschmiede asked for the password before registering a passkey in a\n * dialog of its own; keksdose asks for it inline in `DangerConfirm`'s\n * `requirePassword` tile. Both are the same three facts — the field is the CURRENT\n * password (the password manager fills it, never generates one), a wrong one stays in\n * the dialog with its error, and the APP verifies it — so the promise handling is\n * `DangerConfirm`'s own, shared, the field is its `CurrentPasswordInput` spelled out\n * with an `error`, and this is the modal form of them.\n *\n * A component rather than a `useReauth()` promise: the step that follows the check\n * (Kurvenschmiede's WebAuthn ceremony) needs what the server answered, and the error\n * wording needs the app's own status codes — both already live in the app's mutation,\n * which this dialog only has to be handed (`onSubmit={(pw) => begin.mutateAsync(pw)}`,\n * `error={…}`).\n *\n * The field is a `<form>`, so Enter submits once something is typed. Focus starts in\n * the field and returns to the trigger through `Modal`'s trap. While a check runs,\n * the field is read-only, Cancel is disabled and Escape is held: a request that has\n * left cannot be cancelled by closing the dialog, and the dialog should not pretend it\n * can.\n */\nexport function ReauthDialog({\n  onSubmit,\n  onClose,\n  error,\n  busy: busyProp,\n  title,\n  description,\n  submitLabel,\n  tone = \"neutral\",\n  children,\n  open,\n  labels: labelsProp,\n}: ReauthDialogProps) {\n  const labels = useKitLabels(\"reauthDialog\", DEFAULT_REAUTH_DIALOG_LABELS, labelsProp);\n  const [password, setPassword] = useState(\"\");\n  // The error describes the password that was submitted; once the user edits it, it\n  // describes nothing on screen. Cleared by the next submit, so a second failure with\n  // the same message shows again.\n  const [edited, setEdited] = useState(false);\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(busyProp) || pending;\n  const inputRef = useRef<HTMLInputElement>(null);\n  // `onSubmit` resolved: the actions row lowers the panel (state, so it re-renders),\n  // and `onClose` answers true (a ref, because `Modal` may call the `onClose` it saw\n  // BEFORE that re-render — its latest-callback ref is refreshed in an effect that runs\n  // after the actions row's).\n  const [done, setDone] = useState(false);\n  const confirmed = useRef(false);\n  const formId = useId();\n  const isOpen = open ?? true;\n\n  // A close (kept-mounted) wipes the password: it must not sit in a hidden dialog.\n  // During render, like DangerConfirm's disarm, so no frame holds it.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (!isOpen) {\n      setPassword(\"\");\n      setEdited(false);\n      setDone(false);\n    }\n  }\n\n  // After `Modal`'s own effect (a parent's effects run after its children's), so the\n  // trap has recorded the trigger as its restore target before focus moves in.\n  useEffect(() => {\n    if (!isOpen) return;\n    confirmed.current = false;\n    inputRef.current?.focus();\n  }, [isOpen]);\n\n  const submit = () => {\n    if (busy || password === \"\") return;\n    setEdited(false);\n    run(onSubmit(password), () => {\n      confirmed.current = true;\n      setDone(true);\n    });\n  };\n\n  // A rejection leaves focus where it was (the field, or the submit button) — select\n  // the password there so the retry replaces it rather than appending to it.\n  const wasPending = useRef(false);\n  useEffect(() => {\n    if (wasPending.current && !pending && !done) inputRef.current?.select();\n    wasPending.current = pending;\n  }, [pending, done]);\n\n  const shownError = edited ? undefined : error;\n\n  return (\n    <DialogFrame\n      open={open}\n      title={title ?? labels.title}\n      description={description ?? labels.description}\n      onClose={() => onClose(confirmed.current)}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        if (busy && e.key === \"Escape\") e.preventDefault();\n      }}\n      aria-busy={busy || undefined}\n      actions={\n        <ReauthActions\n          formId={formId}\n          done={done}\n          busy={busy}\n          canSubmit={password !== \"\"}\n          danger={tone === \"danger\"}\n          cancelLabel={labels.cancel}\n          submitLabel={submitLabel ?? labels.submit}\n        />\n      }\n    >\n      {children}\n      <form\n        id={formId}\n        noValidate\n        onSubmit={(e) => {\n          e.preventDefault();\n          submit();\n        }}\n      >\n        {/* CurrentPasswordInput's field — the password manager fills it with the CURRENT\n            password and never offers to generate one; `readOnly`, not `disabled`, while\n            busy, because disabling the field that has focus drops focus to <body> —\n            plus `Input`'s own `error`, which that helper does not take. The message\n            paints the field, sits under it and is its `aria-describedby`; passing the\n            prop on every render keeps the field's box steady, so the message going away\n            on the first keystroke of a retry no longer remounts the <input> under the\n            typist (it did, which is why this used to draw its own message). */}\n        <Input\n          ref={inputRef}\n          type=\"password\"\n          autoComplete=\"current-password\"\n          label={labels.password}\n          value={password}\n          readOnly={busy}\n          error={shownError}\n          onChange={(e) => {\n            setPassword(e.target.value);\n            setEdited(true);\n          }}\n        />\n      </form>\n    </DialogFrame>\n  );\n}\n\n/**\n * The actions row. A component of its own because it renders INSIDE the `Modal`, where\n * the panel's animated close is in context: a resolved `onSubmit` lowers the panel\n * through it, the way Cancel and Escape do, and `Modal` then calls `onClose`.\n */\nfunction ReauthActions({\n  formId,\n  done,\n  busy,\n  canSubmit,\n  danger,\n  cancelLabel,\n  submitLabel,\n}: {\n  formId: string;\n  done: boolean;\n  busy: boolean;\n  canSubmit: boolean;\n  danger: boolean;\n  cancelLabel: ReactNode;\n  submitLabel: ReactNode;\n}) {\n  const close = useContext(ModalCloseContext);\n  useEffect(() => {\n    if (done) close?.();\n  }, [done, close]);\n  return (\n    <>\n      <Button type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => close?.()}>\n        {cancelLabel}\n      </Button>\n      <Button\n        type=\"submit\"\n        form={formId}\n        variant={danger ? \"danger\" : \"primary\"}\n        disabled={!canSubmit || busy}\n        aria-busy={busy || undefined}\n      >\n        {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n        {submitLabel}\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/reauth-dialog.tsx"],"sourcesContent":["import { useContext, useEffect, useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { CurrentPasswordInput, usePromisePending } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { ModalCloseContext } from \"./modal\";\nimport { Button, Spinner } from \"./ui\";\n\n/**\n * Every string the dialog renders — the `reauthDialog` namespace of\n * `<UiKitProvider labels>`, and overridable per instance through `labels`. The title,\n * description and submit button are usually worded per action (\"Add a passkey\"),\n * which is what the `title` / `description` / `submitLabel` props are for; these are\n * the fallbacks.\n */\nexport interface ReauthDialogLabels {\n  title: string;\n  description: string;\n  /** Label of the password field. */\n  password: string;\n  submit: string;\n  cancel: string;\n}\n\nexport const DEFAULT_REAUTH_DIALOG_LABELS: ReauthDialogLabels = {\n  title: \"Confirm it’s you\",\n  description: \"Enter your current password to continue.\",\n  password: \"Current password\",\n  submit: \"Continue\",\n  cancel: \"Cancel\",\n};\n\nexport interface ReauthDialogProps {\n  /**\n   * Verifies the password — the app's call, e.g. the request the password guards.\n   *\n   * Return a promise and the dialog manages itself: busy until it settles, closes\n   * (`onClose(true)`) when it resolves, STAYS OPEN with the password kept and selected\n   * when it rejects — a wrong password is a typo to correct, not a sign-out. Pass the\n   * reason as `error`. Return nothing and the app owns the rest: `busy` for the\n   * pending state, unmounting the dialog once it is done.\n   */\n  onSubmit: (password: string) => void | Promise<unknown>;\n  /**\n   * The dialog has closed: `true` after a resolved `onSubmit`, `false` for Cancel,\n   * Escape, the backdrop and Back. A dismissal while `onSubmit` is still running also\n   * answers `false`, and that call's late result is then ignored.\n   */\n  onClose: (confirmed: boolean) => void;\n  /**\n   * Why the last attempt failed (\"Wrong password\"), shown under the field, which turns\n   * invalid (`aria-invalid`, `--danger-border-strong`). The app decides the wording —\n   * a 400 is a wrong password, a 500 is not. Hidden again as soon as the user edits\n   * the field (the message is about the password they had typed), and shown again by\n   * the next failed submit.\n   */\n  error?: ReactNode;\n  /** The check is running, for a caller that tracks it itself (a mutation's\n   *  `isPending`); a promise returned from `onSubmit` does the same on its own. */\n  busy?: boolean;\n  /** Default: `labels.title` — \"Confirm it’s you\". */\n  title?: ReactNode;\n  /** The line under the title. Default: `labels.description`. */\n  description?: ReactNode;\n  /** Text of the submit button. Default: `labels.submit` — \"Continue\". */\n  submitLabel?: ReactNode;\n  /** `\"danger\"` when what the password unlocks cannot be undone: the submit is then the\n   *  destructive button. Default `\"neutral\"`. */\n  tone?: \"neutral\" | \"danger\";\n  /** Extra body above the field — what is about to happen, a warning. */\n  children?: ReactNode;\n  /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. A\n   *  flip to `false` animates it out and wipes the password. */\n  open?: boolean;\n  /** User-facing strings; see {@link ReauthDialogLabels}. */\n  labels?: Partial<ReauthDialogLabels>;\n}\n\n/**\n * \"Enter your current password to continue\" — the step-up check in front of an\n * action that changes how an account signs in (adding a passkey) or what it can\n * reach. Kurvenschmiede asked for the password before registering a passkey in a\n * dialog of its own; keksdose asks for it inline in `DangerConfirm`'s\n * `requirePassword` tile. Both are the same three facts — the field is the CURRENT\n * password (the password manager fills it, never generates one), a wrong one stays in\n * the dialog with its error, and the APP verifies it — so the promise handling is\n * `DangerConfirm`'s own, shared, the field is its `CurrentPasswordInput` with an\n * `error`, and this is the modal form of them.\n *\n * A component rather than a `useReauth()` promise: the step that follows the check\n * (Kurvenschmiede's WebAuthn ceremony) needs what the server answered, and the error\n * wording needs the app's own status codes — both already live in the app's mutation,\n * which this dialog only has to be handed (`onSubmit={(pw) => begin.mutateAsync(pw)}`,\n * `error={…}`).\n *\n * The field is a `<form>`, so Enter submits once something is typed. Focus starts in\n * the field and returns to the trigger through `Modal`'s trap. While a check runs,\n * the field is read-only, Cancel is disabled and Escape is held: a request that has\n * left cannot be cancelled by closing the dialog, and the dialog should not pretend it\n * can.\n */\nexport function ReauthDialog({\n  onSubmit,\n  onClose,\n  error,\n  busy: busyProp,\n  title,\n  description,\n  submitLabel,\n  tone = \"neutral\",\n  children,\n  open,\n  labels: labelsProp,\n}: ReauthDialogProps) {\n  const labels = useKitLabels(\"reauthDialog\", DEFAULT_REAUTH_DIALOG_LABELS, labelsProp);\n  const [password, setPassword] = useState(\"\");\n  // The error describes the password that was submitted; once the user edits it, it\n  // describes nothing on screen. Cleared by the next submit, so a second failure with\n  // the same message shows again.\n  const [edited, setEdited] = useState(false);\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(busyProp) || pending;\n  const inputRef = useRef<HTMLInputElement>(null);\n  // `onSubmit` resolved: the actions row lowers the panel (state, so it re-renders),\n  // and `onClose` answers true (a ref, because `Modal` may call the `onClose` it saw\n  // BEFORE that re-render — its latest-callback ref is refreshed in an effect that runs\n  // after the actions row's).\n  const [done, setDone] = useState(false);\n  const confirmed = useRef(false);\n  const formId = useId();\n  const isOpen = open ?? true;\n\n  // A close (kept-mounted) wipes the password: it must not sit in a hidden dialog.\n  // During render, like DangerConfirm's disarm, so no frame holds it.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (!isOpen) {\n      setPassword(\"\");\n      setEdited(false);\n      setDone(false);\n    }\n  }\n\n  // After `Modal`'s own effect (a parent's effects run after its children's), so the\n  // trap has recorded the trigger as its restore target before focus moves in.\n  useEffect(() => {\n    if (!isOpen) return;\n    confirmed.current = false;\n    inputRef.current?.focus();\n  }, [isOpen]);\n\n  const submit = () => {\n    if (busy || password === \"\") return;\n    setEdited(false);\n    run(onSubmit(password), () => {\n      confirmed.current = true;\n      setDone(true);\n    });\n  };\n\n  // A rejection leaves focus where it was (the field, or the submit button) — select\n  // the password there so the retry replaces it rather than appending to it.\n  const wasPending = useRef(false);\n  useEffect(() => {\n    if (wasPending.current && !pending && !done) inputRef.current?.select();\n    wasPending.current = pending;\n  }, [pending, done]);\n\n  const shownError = edited ? undefined : error;\n\n  return (\n    <DialogFrame\n      open={open}\n      title={title ?? labels.title}\n      description={description ?? labels.description}\n      onClose={() => onClose(confirmed.current)}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        if (busy && e.key === \"Escape\") e.preventDefault();\n      }}\n      aria-busy={busy || undefined}\n      actions={\n        <ReauthActions\n          formId={formId}\n          done={done}\n          busy={busy}\n          canSubmit={password !== \"\"}\n          danger={tone === \"danger\"}\n          cancelLabel={labels.cancel}\n          submitLabel={submitLabel ?? labels.submit}\n        />\n      }\n    >\n      {children}\n      <form\n        id={formId}\n        noValidate\n        onSubmit={(e) => {\n          e.preventDefault();\n          submit();\n        }}\n      >\n        {/* The kit's CurrentPasswordInput (0.23; it drew the same field by hand until\n            then): the password manager fills it with the CURRENT password and never\n            offers to generate one; `busy` makes it `readOnly`, not `disabled`, because\n            disabling the field that has focus drops focus to <body>. Labelled by this\n            namespace's `password` (\"Current password\"), not `dangerConfirm.password`.\n            The `error` is Input's own: it paints the field, sits under it and is its\n            `aria-describedby`; passing the prop on every render keeps the field's box\n            steady, so the message going away on the first keystroke of a retry does not\n            remount the <input> under the typist. */}\n        <CurrentPasswordInput\n          ref={inputRef}\n          label={labels.password}\n          value={password}\n          busy={busy}\n          error={shownError}\n          onValueChange={(next) => {\n            setPassword(next);\n            setEdited(true);\n          }}\n        />\n      </form>\n    </DialogFrame>\n  );\n}\n\n/**\n * The actions row. A component of its own because it renders INSIDE the `Modal`, where\n * the panel's animated close is in context: a resolved `onSubmit` lowers the panel\n * through it, the way Cancel and Escape do, and `Modal` then calls `onClose`.\n */\nfunction ReauthActions({\n  formId,\n  done,\n  busy,\n  canSubmit,\n  danger,\n  cancelLabel,\n  submitLabel,\n}: {\n  formId: string;\n  done: boolean;\n  busy: boolean;\n  canSubmit: boolean;\n  danger: boolean;\n  cancelLabel: ReactNode;\n  submitLabel: ReactNode;\n}) {\n  const close = useContext(ModalCloseContext);\n  useEffect(() => {\n    if (done) close?.();\n  }, [done, close]);\n  return (\n    <>\n      <Button type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => close?.()}>\n        {cancelLabel}\n      </Button>\n      <Button\n        type=\"submit\"\n        form={formId}\n        variant={danger ? \"danger\" : \"primary\"}\n        disabled={!canSubmit || busy}\n        aria-busy={busy || undefined}\n      >\n        {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n        {submitLabel}\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart.d.ts

@@ -5,18 +5,22 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { x as ChartTooltipPlacement } from '../kit-labels-D1J2_jyD.js';
+import { y as ChartTooltipPlacement } from '../feedback-BxeQVzwq.js';
 import 'recharts';
-import './data-table-labels.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -29,7 +33,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -37,11 +40,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -60,14 +59,20 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
 
 interface SeriesChartSeries {
     /** The row key this line reads — and the `--color-<key>` it is painted with, so it

package/dist/components/settings-fields.d.ts

@@ -1,17 +1,21 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aQ as SelectProps } from '../kit-labels-D1J2_jyD.js';
+import { bw as SelectProps } from '../feedback-BxeQVzwq.js';
 import { ThemePreference } from '../theme/theme-store.js';
-import './data-table-labels.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -25,7 +29,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -33,11 +36,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -56,14 +55,20 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
 import 'zustand/middleware';
 import 'zustand';
 

package/dist/components/share-card.d.ts

@@ -1,23 +1,24 @@
 import 'react';
 import './account-chips.js';
 import './dialog-frame.js';
-export { U as DEFAULT_SHARE_CARD_LABELS, aR as ShareAddRequest, aS as ShareCandidate, aT as ShareCard, aU as ShareCardLabels, aV as ShareCardProps, aW as ShareDialog, aX as ShareDialogProps, aY as ShareGrantee, aZ as SharePanel, a_ as SharePanelProps, a$ as SharePendingGrant, b0 as ShareRole } from '../kit-labels-D1J2_jyD.js';
+export { ad as DEFAULT_SHARE_CARD_LABELS, bx as ShareAddRequest, by as ShareCandidate, bz as ShareCard, bA as ShareCardLabels, bB as ShareCardProps, bC as ShareDialog, bD as ShareDialogProps, bE as ShareGrantee, bF as SharePanel, bG as SharePanelProps, bH as SharePendingGrant, bI as ShareRole } from '../feedback-BxeQVzwq.js';
 import 'lucide-react';
 import '../lib/format.js';
 import './chip.js';
-import '../data-table-3mi2R3so.js';
+import '../data-table-labels-B7OdnM0S.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
-import './data-table-labels.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -31,16 +32,11 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -62,3 +58,12 @@ import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';

package/dist/components/sign-chip.d.ts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+
+/** The words a {@link SignChip} says — the `signChip` namespace of
+ *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */
+interface SignChipLabels {
+    /** The chip's text while the figure is negative — money going out. */
+    outflow: string;
+    /** The chip's text while the figure is positive — money coming in. */
+    inflow: string;
+    /** The chip's accessible name and its tooltip: the state it is in, and what a press
+     *  turns it into — `current` and `next` are the two words above. The other option is
+     *  nowhere on screen to be read, so the name has to say both. */
+    direction: (current: string, next: string) => string;
+}
+declare const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels;
+interface SignChipProps {
+    /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s
+     *  `negative` is, so one state feeds both: `<AmountInput negative={neg}
+     *  onNegativeChange={setNeg} />` and `<SignChip negative={neg}
+     *  onNegativeChange={setNeg} />`. */
+    negative: boolean;
+    /** A press: the other direction. */
+    onNegativeChange: (negative: boolean) => void;
+    disabled?: boolean;
+    /** Per-chip overrides of the `signChip` namespace. */
+    labels?: Partial<SignChipLabels>;
+    /** On the chip. Place it in its row from here — keksdose's form passes `self-end`
+     *  to sit it on the display figure's baseline strip. */
+    className?: string;
+}
+/**
+ * The SIGN of an amount, as one chip that shows only the state it is in — keksdose
+ * K15, its `DirectionToggle` (feedback #417, #430, #431, dev#434) made a kit piece,
+ * so the figure and its direction come from one package and wear one palette.
+ *
+ * WHY A CHIP, NOT A SEGMENTED CONTROL. A two-option toggle spends half its width
+ * telling you what the figure is NOT, and at a phone's width it was the widest thing on
+ * the form after the figure itself (#417). This sits beside the amount and reads as one
+ * phrase with it — "−42,50 Outflow" — and a press flips it. Hiding the alternative costs
+ * discoverability, so two things pay it back: the ± glyph and the swap arrows say "this
+ * is a control", not a badge; and the name and tooltip spell out both the current state
+ * and what a press will do.
+ *
+ * NOT A PRESSED/UNPRESSED TOGGLE. A {@link Chip} toggle has a FIXED label naming its
+ * on-state, with `aria-pressed` carrying the state. Here the word IS the state, so it
+ * is an action button with no `aria-pressed`: "Direction: Inflow, not pressed" would
+ * name no on-state for "not pressed" to be the absence of. The name changing under
+ * focus is the echo.
+ *
+ * THE COLOUR is the money pairing — the chip's `expense` / `income` tones, the same
+ * `--money-expense` / `--money-income` that {@link AmountInput}'s `tone` paints the
+ * figure with (dev#434): only the text and the border carry the tint, on a neutral
+ * surface, because a filled pill next to a tinted figure reads as one smear.
+ *
+ * SIZE. `lg` on a phone — the 44px touch target beside a display figure that has no
+ * field height to match — and from `md` up exactly a labelled field's 42px, so it never
+ * stands taller than the fields in its grid row (#431).
+ *
+ * An exported chip rather than an `AmountInput signControl` slot: the slot would have
+ * to own the row the two share, and every form lays that row out differently (beside
+ * the figure on a phone, in a grid column on a desktop). The chip is the part that was
+ * being re-written; the row stays the form's.
+ */
+declare function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps): react.JSX.Element;
+
+export { DEFAULT_SIGN_CHIP_LABELS, SignChip, type SignChipLabels, type SignChipProps };

package/dist/components/sign-chip.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpDown, Minus, Plus } from "lucide-react";
+import { Chip } from "./chip.js";
+import { Tooltip } from "./tooltip.js";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_SIGN_CHIP_LABELS = {
+  outflow: "Outflow",
+  inflow: "Inflow",
+  direction: (current, next) => `Direction: ${current} \u2014 switch to ${next}`
+};
+function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }) {
+  const labels = useKitLabels("signChip", DEFAULT_SIGN_CHIP_LABELS, labelsProp);
+  const current = negative ? labels.outflow : labels.inflow;
+  const next = negative ? labels.inflow : labels.outflow;
+  const name = labels.direction(current, next);
+  return /* @__PURE__ */ jsx(Tooltip, { label: name, lazy: true, children: /* @__PURE__ */ jsxs(
+    Chip,
+    {
+      size: "lg",
+      tone: negative ? "expense" : "income",
+      icon: negative ? Minus : Plus,
+      onClick: () => onNegativeChange(!negative),
+      disabled,
+      "aria-label": name,
+      className: cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", className),
+      children: [
+        current,
+        /* @__PURE__ */ jsx(ArrowUpDown, { className: "ms-1.5 inline size-3.5 align-[-0.2em] opacity-60", "aria-hidden": true })
+      ]
+    }
+  ) });
+}
+export {
+  DEFAULT_SIGN_CHIP_LABELS,
+  SignChip
+};
+//# sourceMappingURL=sign-chip.js.map

package/dist/components/sign-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sign-chip.tsx"],"sourcesContent":["import { ArrowUpDown, Minus, Plus } from \"lucide-react\";\nimport { Chip } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words a {@link SignChip} says — the `signChip` namespace of\n *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */\nexport interface SignChipLabels {\n  /** The chip's text while the figure is negative — money going out. */\n  outflow: string;\n  /** The chip's text while the figure is positive — money coming in. */\n  inflow: string;\n  /** The chip's accessible name and its tooltip: the state it is in, and what a press\n   *  turns it into — `current` and `next` are the two words above. The other option is\n   *  nowhere on screen to be read, so the name has to say both. */\n  direction: (current: string, next: string) => string;\n}\n\nexport const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {\n  outflow: \"Outflow\",\n  inflow: \"Inflow\",\n  direction: (current, next) => `Direction: ${current} — switch to ${next}`,\n};\n\nexport interface SignChipProps {\n  /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s\n   *  `negative` is, so one state feeds both: `<AmountInput negative={neg}\n   *  onNegativeChange={setNeg} />` and `<SignChip negative={neg}\n   *  onNegativeChange={setNeg} />`. */\n  negative: boolean;\n  /** A press: the other direction. */\n  onNegativeChange: (negative: boolean) => void;\n  disabled?: boolean;\n  /** Per-chip overrides of the `signChip` namespace. */\n  labels?: Partial<SignChipLabels>;\n  /** On the chip. Place it in its row from here — keksdose's form passes `self-end`\n   *  to sit it on the display figure's baseline strip. */\n  className?: string;\n}\n\n/**\n * The SIGN of an amount, as one chip that shows only the state it is in — keksdose\n * K15, its `DirectionToggle` (feedback #417, #430, #431, dev#434) made a kit piece,\n * so the figure and its direction come from one package and wear one palette.\n *\n * WHY A CHIP, NOT A SEGMENTED CONTROL. A two-option toggle spends half its width\n * telling you what the figure is NOT, and at a phone's width it was the widest thing on\n * the form after the figure itself (#417). This sits beside the amount and reads as one\n * phrase with it — \"−42,50 Outflow\" — and a press flips it. Hiding the alternative costs\n * discoverability, so two things pay it back: the ± glyph and the swap arrows say \"this\n * is a control\", not a badge; and the name and tooltip spell out both the current state\n * and what a press will do.\n *\n * NOT A PRESSED/UNPRESSED TOGGLE. A {@link Chip} toggle has a FIXED label naming its\n * on-state, with `aria-pressed` carrying the state. Here the word IS the state, so it\n * is an action button with no `aria-pressed`: \"Direction: Inflow, not pressed\" would\n * name no on-state for \"not pressed\" to be the absence of. The name changing under\n * focus is the echo.\n *\n * THE COLOUR is the money pairing — the chip's `expense` / `income` tones, the same\n * `--money-expense` / `--money-income` that {@link AmountInput}'s `tone` paints the\n * figure with (dev#434): only the text and the border carry the tint, on a neutral\n * surface, because a filled pill next to a tinted figure reads as one smear.\n *\n * SIZE. `lg` on a phone — the 44px touch target beside a display figure that has no\n * field height to match — and from `md` up exactly a labelled field's 42px, so it never\n * stands taller than the fields in its grid row (#431).\n *\n * An exported chip rather than an `AmountInput signControl` slot: the slot would have\n * to own the row the two share, and every form lays that row out differently (beside\n * the figure on a phone, in a grid column on a desktop). The chip is the part that was\n * being re-written; the row stays the form's.\n */\nexport function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps) {\n  const labels = useKitLabels(\"signChip\", DEFAULT_SIGN_CHIP_LABELS, labelsProp);\n  const current = negative ? labels.outflow : labels.inflow;\n  const next = negative ? labels.inflow : labels.outflow;\n  const name = labels.direction(current, next);\n  return (\n    <Tooltip label={name} lazy>\n      <Chip\n        size=\"lg\"\n        tone={negative ? \"expense\" : \"income\"}\n        icon={negative ? Minus : Plus}\n        onClick={() => onNegativeChange(!negative)}\n        disabled={disabled}\n        aria-label={name}\n        // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every\n        // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the\n        // hairline border is the 42px a labelled field measures (#431).\n        className={cn(\"shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5\", className)}\n      >\n        {current}\n        {/* The swap arrows after the word, in the label's own row: decoration (the\n            name already says what a press does), set a little apart from the word. */}\n        <ArrowUpDown className=\"ms-1.5 inline size-3.5 align-[-0.2em] opacity-60\" aria-hidden />\n      </Chip>\n    </Tooltip>\n  );\n}\n"],"mappings":";AAmFM,SAeE,KAfF;AAnFN,SAAS,aAAa,OAAO,YAAY;AACzC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAiBtB,MAAM,2BAA2C;AAAA,EACtD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW,CAAC,SAAS,SAAS,cAAc,OAAO,qBAAgB,IAAI;AACzE;AAmDO,SAAS,SAAS,EAAE,UAAU,kBAAkB,UAAU,QAAQ,YAAY,UAAU,GAAkB;AAC/G,QAAM,SAAS,aAAa,YAAY,0BAA0B,UAAU;AAC5E,QAAM,UAAU,WAAW,OAAO,UAAU,OAAO;AACnD,QAAM,OAAO,WAAW,OAAO,SAAS,OAAO;AAC/C,QAAM,OAAO,OAAO,UAAU,SAAS,IAAI;AAC3C,SACE,oBAAC,WAAQ,OAAO,MAAM,MAAI,MACxB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM,WAAW,YAAY;AAAA,MAC7B,MAAM,WAAW,QAAQ;AAAA,MACzB,SAAS,MAAM,iBAAiB,CAAC,QAAQ;AAAA,MACzC;AAAA,MACA,cAAY;AAAA,MAIZ,WAAW,GAAG,4EAA4E,SAAS;AAAA,MAElG;AAAA;AAAA,QAGD,oBAAC,eAAY,WAAU,oDAAmD,eAAW,MAAC;AAAA;AAAA;AAAA,EACxF,GACF;AAEJ;","names":[]}

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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { TileSize } from './tile-radio.js';
 
 interface SwatchPickerLabels {
@@ -27,7 +27,23 @@ interface SwatchOption<T extends string> {
     /** A remark read after the name and shown under it in the bubble ("used by
      *  Groceries"). The tile wears a dot while it has one. */
     note?: string;
+    /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a
+     *  `disabledReason` the tile stays reachable instead and says why. */
     disabled?: boolean;
+    /**
+     * Why THIS colour cannot be chosen right now — the whole picker's `disabledReason`,
+     * one tile at a time (the kit's later list after keksdose K3: a colour another
+     * category already wears, a flag only an owner may set). {@link Button}'s rule: a tile
+     * that is merely `disabled` is a dead square a keyboard never lands on, so nobody
+     * learns why it is dimmed.
+     *
+     * The tile looks disabled but is `aria-disabled`, not `disabled`: Tab and the arrow
+     * keys still reach it, its bubble shows the reason under its name, and the reason
+     * describes it. Choosing it — a click, Space or Enter, or an arrow under automatic
+     * activation — does nothing: the focus moves onto it and the checked colour stays
+     * where it was, as under the whole-picker lock. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
 }
 /**
  * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's
@@ -62,6 +78,31 @@ interface SwatchPickerProps<T extends string> extends Omit<ComponentPropsWithout
     tileClassName?: string;
     disabled?: boolean;
     labels?: Partial<SwatchPickerLabels>;
+    /**
+     * An 11px static label in a strip over the swatches, named by it (keksdose K2): the
+     * transaction row's flag picker stands between labelled fields and hand-builds this
+     * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.
+     * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the
+     * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a
+     * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an
+     * explicit `aria-label` / `aria-labelledby` still names the group instead.
+     */
+    label?: ReactNode;
+    /** A {@link FieldHint} beside the label. Only with `label`. */
+    hint?: ReactNode;
+    /**
+     * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for
+     * a picker that saves itself on change (keksdose K3, the flag picker in a row a
+     * read-only viewer may see). The swatches stay reachable and the arrow keys still
+     * walk them, but nothing reaches `onChange`; the reason is shown in the kit
+     * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and
+     * describes the group. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
+    /** 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;
 }
 /**
  * A row of colour swatches that is one radio group.
@@ -75,6 +116,6 @@ interface SwatchPickerProps<T extends string> extends Omit<ComponentPropsWithout
  * choose as they go; Home and End jump to the ends. Left and right follow the page's
  * direction.
  */
-declare function SwatchPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, size, tileClassName, disabled, labels, className, ...rest }: SwatchPickerProps<T>): react.JSX.Element;
+declare function SwatchPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, size, tileClassName, disabled, labels, label, hint, disabledReason: ownDisabledReason, commit, className, ...rest }: SwatchPickerProps<T>): react.JSX.Element;
 
 export { DEFAULT_SWATCH_PICKER_LABELS, type SwatchOption, SwatchPicker, type SwatchPickerLabels, type SwatchPickerProps };

package/dist/components/swatch-picker.js

@@ -1,9 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio.js";
+import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
+import { hasContent, LabelStrip } from "./field-parts.js";
 const DEFAULT_SWATCH_PICKER_LABELS = {
   none: "No colour",
   mixed: "Mixed: the selected items have different colours"
@@ -19,56 +22,101 @@ function SwatchPicker({
   tileClassName,
   disabled = false,
   labels,
+  label,
+  hint,
+  disabledReason: ownDisabledReason,
+  commit,
   className,
   ...rest
 }) {
   const text = useKitLabels("swatchPicker", DEFAULT_SWATCH_PICKER_LABELS, labels);
   const mixedId = useId();
+  const labelId = useId();
+  const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
+  const locked = hasContent(disabledReason);
+  const labelled = hasContent(label);
   const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
   const items = [
     ...allowNone ? [{ key: null, label: text.none }] : [],
-    ...options.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled }))
+    ...options.map((o) => ({
+      key: o.value,
+      label: o.label,
+      note: o.note,
+      disabled: o.disabled,
+      disabledReason: o.disabledReason
+    }))
   ];
-  return /* @__PURE__ */ jsxs(
+  const tiles = /* @__PURE__ */ jsx(
+    TileRadioGroup,
+    {
+      items,
+      checked: mixed ? void 0 : value,
+      onSelect: (next) => {
+        if (!locked && !hasContent(next === null ? void 0 : byValue.get(next)?.disabledReason)) onChange(next);
+      },
+      activation,
+      disabled: disabled && !locked,
+      size,
+      tileClassName: tileClassName || locked ? (_item, selected) => cn(
+        // The disabled tile's look, without its `disabled`: dimmed, a
+        // not-allowed cursor, and no hover offer on a tile that cannot be
+        // chosen. Not on the selected tile, whose frame IS its state.
+        locked && "cursor-not-allowed opacity-50",
+        locked && !selected && "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]",
+        tileClassName
+      ) : void 0,
+      renderTile: (item) => {
+        const opt = item.key === null ? void 0 : byValue.get(item.key);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15",
+              TILE_SIZE[size].swatch,
+              opt?.swatchClassName
+            ),
+            style: { background: opt?.color }
+          }
+        );
+      }
+    }
+  );
+  const group = /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
       role: "radiogroup",
-      "aria-disabled": disabled || void 0,
-      "aria-describedby": [rest["aria-describedby"], mixed && mixedId].filter(Boolean).join(" ") || void 0,
-      className: cn("flex flex-wrap items-center gap-1.5", className),
+      "aria-labelledby": labelled && rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0 ? labelId : rest["aria-labelledby"],
+      "aria-disabled": disabled || locked || void 0,
+      "aria-describedby": [rest["aria-describedby"], mixed && mixedId, locked && reasonId].filter(Boolean).join(" ") || void 0,
+      className: cn("flex flex-wrap items-center gap-1.5", !labelled && className),
       children: [
-        /* @__PURE__ */ jsx(
-          TileRadioGroup,
-          {
-            items,
-            checked: mixed ? void 0 : value,
-            onSelect: onChange,
-            activation,
-            disabled,
-            size,
-            tileClassName: tileClassName ? () => tileClassName : void 0,
-            renderTile: (item) => {
-              const opt = item.key === null ? void 0 : byValue.get(item.key);
-              return /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: cn(
-                    "rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15",
-                    TILE_SIZE[size].swatch,
-                    opt?.swatchClassName
-                  ),
-                  style: { background: opt?.color }
-                }
-              );
+        locked ? (
+          // Inside the group, round the tiles — not round the group, whose box is the
+          // caller's row item. This row inherits the group's gap, wrap and alignment, so
+          // the tiles sit exactly where they sit unlocked. Below the row: each tile's own
+          // bubble (its colour's name) is above it.
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              label: disabledReason,
+              side: "bottom",
+              className: "flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]",
+              children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                tiles,
+                /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+              ] })
             }
-          }
-        ),
+          )
+        ) : tiles,
         mixed && /* @__PURE__ */ jsx("span", { id: mixedId, hidden: true, children: text.mixed })
       ]
     }
   );
+  if (!labelled) return group;
+  return /* @__PURE__ */ jsx(LabelStrip, { labelId, label, hint, disabled: disabled || locked, pad: "clear", className, children: group });
 }
 export {
   DEFAULT_SWATCH_PICKER_LABELS,