@dloizides/ui-forms 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.15.0
+
+**`FormSwitch` now emits `aria-checked` / `aria-disabled` on web; `ChipSelector` gained an option icon slot and opt-in radio semantics.**
+
+`FormSwitch` (A11Y-ARIA-CHECKED-1): react-native-web 0.21 emits nothing from `accessibilityState` on web, so the
+switch wrapper rendered `role="switch"` with no `aria-checked` - an invalid switch that announced no state. The
+state is now passed as literal `aria-checked` (always) and `aria-disabled` (only when disabled) web props;
+`accessibilityState` also carries `disabled` for native.
+
+`ChipSelector`:
+- `ChipOption.icon?: React.ReactNode` - rendered before the label inside the chip, wrapped `aria-hidden`. Options
+  without an icon render the exact same tree as before.
+- `singleSelectRole?: 'button' | 'radio'` (type `ChipSingleSelectRole`). Default `button` = unchanged. With
+  `radio` and `multiple` unset, the group is `role="radiogroup"` and each chip `role="radio"` + `aria-checked`.
+  Ignored for multi-select. Trade-off: RN-web renders a radio chip as a `<div>`, which activates on Enter but not
+  Space and has no arrow-key roving focus.
+
+**Additive and backward-compatible.** No prop set = identical DOM for every existing consumer.
+
 ## 1.14.0
 
 **`FormField` gained an opt-in `recentKey` — remember the last N submitted values and offer them on focus.**

package/dist/index.d.mts

@@ -525,27 +525,24 @@ declare function useRecentValues(key: string, max?: number): RecentValues;
 declare const DEFAULT_MAX_RECENTS = 10;
 
 /**
- * Chip/pill selector for selecting one or multiple options.
- *
- * Two visual variants (both fully theme-driven):
- *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
- *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
- *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
- *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
- *    Hover (web) lifts the border/ink to the primary colour.
- *
- * The label row, the error line and the container spacing come from the shared `Field` wrapper —
- * NOT from a local `<Text>`. Its own label used to drift from `Field` on three of four axes
- * (`marginBottom: 8` vs 4, no `fontSize` at all so ~14 vs 13, `colors.text` vs `textSecondary`),
- * so a `ChipSelector` next to a `FormField` in a row/grid started a different distance down the
- * column and read as a different weight of text. Now there is exactly one label implementation.
+ * Public + internal types for ChipSelector. Split out of `ChipSelector.tsx` so the component, its
+ * two chip variants and the radio keyboard hook can share them without a circular import.
  */
 
 /** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
 type ChipVariant = 'solid' | 'outline';
+/**
+ * Role of a SINGLE-select chip. `button` (default) = today's semantics; `radio` = opt-in
+ * `radiogroup` of `radio` chips carrying `aria-checked`. Ignored when `multiple` is set.
+ * A string union rather than a `const enum` to match `ChipVariant`: a const enum does not
+ * survive the package boundary for consumers compiled with `isolatedModules`.
+ */
+type ChipSingleSelectRole = 'button' | 'radio';
 interface ChipOption<T> {
     value: T;
     label: string;
+    /** Optional decorative icon rendered before the label; hidden from assistive tech. */
+    icon?: React.ReactNode;
 }
 interface ChipSelectorProps<T> {
     /** Optional — with no label, no label row is rendered (no phantom gap above the chips). */
@@ -585,8 +582,37 @@ interface ChipSelectorProps<T> {
      * consumers keep their current announcement.
      */
     optionAccessibilityHint?: string;
+    /**
+     * Opt-in radio semantics for a SINGLE-select group: the group becomes `role="radiogroup"` and
+     * each chip `role="radio"` + `aria-checked`, with the WAI-ARIA radio group keyboard pattern
+     * (Space activates, arrow keys move focus + selection with wrap, one roving tab stop).
+     * Defaults to `button` (unchanged behaviour). Ignored when `multiple` is set — a multi chip
+     * stays a toggle button with `aria-pressed`.
+     */
+    singleSelectRole?: ChipSingleSelectRole;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, spacing, required, error, testID, chipTestIDPrefix, optionAccessibilityHint, }: ChipSelectorProps<T>) => React.ReactElement;
+
+/**
+ * Chip/pill selector for selecting one or multiple options.
+ *
+ * Two visual variants (both fully theme-driven):
+ *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
+ *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
+ *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
+ *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
+ *    Hover (web) lifts the border/ink to the primary colour.
+ *
+ * The label row, the error line and the container spacing come from the shared `Field` wrapper —
+ * NOT from a local `<Text>`. Its own label used to drift from `Field` on three of four axes
+ * (`marginBottom: 8` vs 4, no `fontSize` at all so ~14 vs 13, `colors.text` vs `textSecondary`),
+ * so a `ChipSelector` next to a `FormField` in a row/grid started a different distance down the
+ * column and read as a different weight of text. Now there is exactly one label implementation.
+ *
+ * Structure: chip variants in `components/`, the radio keyboard wiring in `hooks/`, and the pure
+ * resolvers (`chipIdentity`, colours, radio key logic) in `utils/`.
+ */
+
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, spacing, required, error, testID, chipTestIDPrefix, optionAccessibilityHint, singleSelectRole, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.
@@ -944,4 +970,4 @@ declare function suggestOptions(options: readonly ControlOption[], query: string
 /** True when `text` is non-empty yet matches no option's value or label exactly (case-insensitive). */
 declare function isUnmatched(options: readonly ControlOption[], text: string): boolean;
 
-export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, isUnmatched, suggestOptions, useRecentValues, useThemedInput };
+export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, isUnmatched, suggestOptions, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -525,27 +525,24 @@ declare function useRecentValues(key: string, max?: number): RecentValues;
 declare const DEFAULT_MAX_RECENTS = 10;
 
 /**
- * Chip/pill selector for selecting one or multiple options.
- *
- * Two visual variants (both fully theme-driven):
- *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
- *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
- *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
- *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
- *    Hover (web) lifts the border/ink to the primary colour.
- *
- * The label row, the error line and the container spacing come from the shared `Field` wrapper —
- * NOT from a local `<Text>`. Its own label used to drift from `Field` on three of four axes
- * (`marginBottom: 8` vs 4, no `fontSize` at all so ~14 vs 13, `colors.text` vs `textSecondary`),
- * so a `ChipSelector` next to a `FormField` in a row/grid started a different distance down the
- * column and read as a different weight of text. Now there is exactly one label implementation.
+ * Public + internal types for ChipSelector. Split out of `ChipSelector.tsx` so the component, its
+ * two chip variants and the radio keyboard hook can share them without a circular import.
  */
 
 /** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
 type ChipVariant = 'solid' | 'outline';
+/**
+ * Role of a SINGLE-select chip. `button` (default) = today's semantics; `radio` = opt-in
+ * `radiogroup` of `radio` chips carrying `aria-checked`. Ignored when `multiple` is set.
+ * A string union rather than a `const enum` to match `ChipVariant`: a const enum does not
+ * survive the package boundary for consumers compiled with `isolatedModules`.
+ */
+type ChipSingleSelectRole = 'button' | 'radio';
 interface ChipOption<T> {
     value: T;
     label: string;
+    /** Optional decorative icon rendered before the label; hidden from assistive tech. */
+    icon?: React.ReactNode;
 }
 interface ChipSelectorProps<T> {
     /** Optional — with no label, no label row is rendered (no phantom gap above the chips). */
@@ -585,8 +582,37 @@ interface ChipSelectorProps<T> {
      * consumers keep their current announcement.
      */
     optionAccessibilityHint?: string;
+    /**
+     * Opt-in radio semantics for a SINGLE-select group: the group becomes `role="radiogroup"` and
+     * each chip `role="radio"` + `aria-checked`, with the WAI-ARIA radio group keyboard pattern
+     * (Space activates, arrow keys move focus + selection with wrap, one roving tab stop).
+     * Defaults to `button` (unchanged behaviour). Ignored when `multiple` is set — a multi chip
+     * stays a toggle button with `aria-pressed`.
+     */
+    singleSelectRole?: ChipSingleSelectRole;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, spacing, required, error, testID, chipTestIDPrefix, optionAccessibilityHint, }: ChipSelectorProps<T>) => React.ReactElement;
+
+/**
+ * Chip/pill selector for selecting one or multiple options.
+ *
+ * Two visual variants (both fully theme-driven):
+ *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
+ *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
+ *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
+ *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
+ *    Hover (web) lifts the border/ink to the primary colour.
+ *
+ * The label row, the error line and the container spacing come from the shared `Field` wrapper —
+ * NOT from a local `<Text>`. Its own label used to drift from `Field` on three of four axes
+ * (`marginBottom: 8` vs 4, no `fontSize` at all so ~14 vs 13, `colors.text` vs `textSecondary`),
+ * so a `ChipSelector` next to a `FormField` in a row/grid started a different distance down the
+ * column and read as a different weight of text. Now there is exactly one label implementation.
+ *
+ * Structure: chip variants in `components/`, the radio keyboard wiring in `hooks/`, and the pure
+ * resolvers (`chipIdentity`, colours, radio key logic) in `utils/`.
+ */
+
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, spacing, required, error, testID, chipTestIDPrefix, optionAccessibilityHint, singleSelectRole, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.
@@ -944,4 +970,4 @@ declare function suggestOptions(options: readonly ControlOption[], query: string
 /** True when `text` is non-empty yet matches no option's value or label exactly (case-insensitive). */
 declare function isUnmatched(options: readonly ControlOption[], text: string): boolean;
 
-export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, isUnmatched, suggestOptions, useRecentValues, useThemedInput };
+export { AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, isUnmatched, suggestOptions, useRecentValues, useThemedInput };

package/dist/index.js

@@ -952,56 +952,19 @@ var FormField = ({
     }
   }
 );
+
+// src/ChipSelector/constants.ts
 var TRANSPARENT_COLOR = "transparent";
-var WHITE_COLOR = "#fff";
+var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
+var CHIP_GUTTER = 8;
+var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
 var SOLID_RADIUS = 20;
 var OUTLINE_RADIUS = 999;
 var OUTLINE_PAD_H = 12;
 var OUTLINE_PAD_V = 5;
 var OUTLINE_FONT_SIZE = 13;
-var OUTLINE_TINT_ALPHA = 0.1;
-var HEX_SHORT_LENGTH2 = 3;
-var HEX_RADIX2 = 16;
-var RGB_R_START = 0;
-var RGB_R_END = 2;
-var RGB_G_END = 4;
-var RGB_B_END = 6;
-var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
-var CHIP_GUTTER = 8;
-var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
-var ON_BRAND_SCALE = "onBrand";
-var MAIN_STEP = "500";
-function onBrandInk(palette) {
-  const scales = palette;
-  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
-}
-function withAlpha2(hex, alpha) {
-  const normalized = hex.replace("#", "");
-  const isShort = normalized.length === HEX_SHORT_LENGTH2;
-  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
-  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
-  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
-  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
-  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
-  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
-}
-var styles5 = reactNative.StyleSheet.create({
-  chipContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    // `gap`, NOT per-chip margins plus a compensating negative container margin.
-    //
-    // The old form was `chipWrapper { marginRight: 8, marginBottom: 8 }` with
-    // `chipContainer { marginBottom: -8 }`. Its comment blamed `Field`'s 16px container margin —
-    // that was WRONG, and worth recording: F3 was briefed on the belief that the -8 compensated for
-    // `Field` and had to move in lockstep with it. It did not. -8 cancelled the CHIP's own gutter
-    // hanging off the last row, identically whether `Field` contributed 16, 0, or anything else.
-    //
-    // The pair is still the wrong tool: it holds only while the two constants agree, and it leaves
-    // a real negative margin any measuring parent inherits. `gap` produces the byte-identical box
-    // and is correct under BOTH of `Field`'s spacing models, not just the one it was tuned against.
-    gap: CHIP_GUTTER
-  },
+var CHIP_ICON_GAP = 6;
+var chipStyles = reactNative.StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
@@ -1015,28 +978,21 @@ var styles5 = reactNative.StyleSheet.create({
     borderRadius: OUTLINE_RADIUS,
     borderWidth: 1
   },
+  chipContent: { flexDirection: "row", alignItems: "center", gap: CHIP_ICON_GAP },
   chipText: {},
   chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
-function chipIdentity(option, selected, config) {
-  return {
-    testID: `${config.prefix}-${String(option.value)}`,
-    // The English default is retained verbatim: erevna/katalogos assert the exact string
-    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
-    accessibilityHint: config.hint ?? `Selects ${option.label}`,
-    ariaPressed: config.multiple ? selected : void 0
-  };
+function ChipContent({ icon, label, textStyle }) {
+  const text = /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, children: label });
+  if (icon === void 0 || icon === null)
+    return text;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: chipStyles.chipContent, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { "aria-hidden": true, children: icon }),
+    text
+  ] });
 }
-function OutlineChip({
-  option,
-  selected,
-  disabled,
-  colors,
-  testID,
-  accessibilityHint,
-  ariaPressed,
-  onPress
-}) {
+function OutlineChip(props) {
+  const { option, selected, disabled, colors, testID, accessibilityHint, onPress } = props;
   const [hovered, setHovered] = React2__default.default.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
@@ -1045,49 +1001,179 @@ function OutlineChip({
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
+      ref: props.hostRef,
       accessibilityHint,
       accessibilityLabel: option.label,
-      accessibilityRole: "button",
+      accessibilityRole: props.accessibilityRole,
       accessibilityState: { selected, disabled },
-      "aria-pressed": ariaPressed,
+      "aria-checked": props.ariaChecked,
+      "aria-pressed": props.ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
+      tabIndex: props.tabIndex,
       testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.chipText, styles5.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [chipStyles.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(
+        ChipContent,
+        {
+          icon: option.icon,
+          label: option.label,
+          textStyle: [chipStyles.chipText, chipStyles.chipTextOutline, { color: textColor }]
+        }
+      ) })
     }
   );
 }
-function SolidChip({
-  option,
-  selected,
-  disabled,
-  colors,
-  testID,
-  accessibilityHint,
-  ariaPressed,
-  onPress
-}) {
+function SolidChip(props) {
+  const { option, selected, disabled, colors, testID, accessibilityHint, onPress } = props;
   const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
   const textColor = selected ? colors.onPrimary : colors.textStrong;
+  const rovingTabStop = { tabIndex: props.tabIndex };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TouchableOpacity,
     {
+      ref: props.hostRef,
       accessibilityHint,
       accessibilityLabel: option.label,
-      accessibilityRole: "button",
+      accessibilityRole: props.accessibilityRole,
       accessibilityState: { selected, disabled },
-      "aria-pressed": ariaPressed,
+      "aria-checked": props.ariaChecked,
+      "aria-pressed": props.ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
       testID,
       onPress,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.chipText, { color: textColor }], children: option.label }) })
+      ...rovingTabStop,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [chipStyles.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(ChipContent, { icon: option.icon, label: option.label, textStyle: [chipStyles.chipText, { color: textColor }] }) })
     }
   );
 }
+
+// src/ChipSelector/utils/radioKeyboard.ts
+var SPACE_KEYS = [" ", "Spacebar"];
+var NEXT_KEYS = ["ArrowRight", "ArrowDown"];
+var PREVIOUS_KEYS = ["ArrowLeft", "ArrowUp"];
+var ROVING_TAB_STOP = 0;
+var ROVING_SKIPPED = -1;
+function radioKeyTarget(key, index, count) {
+  const isOutOfRange = index < 0 || index >= count;
+  if (isOutOfRange)
+    return null;
+  if (SPACE_KEYS.includes(key))
+    return index;
+  const isArrow = NEXT_KEYS.includes(key) || PREVIOUS_KEYS.includes(key);
+  if (!isArrow || count === 1)
+    return null;
+  const step = NEXT_KEYS.includes(key) ? 1 : -1;
+  return (index + step + count) % count;
+}
+function radioTabIndex(index, selectedIndex, disabled) {
+  if (disabled)
+    return ROVING_SKIPPED;
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  return index === tabStop ? ROVING_TAB_STOP : ROVING_SKIPPED;
+}
+
+// src/ChipSelector/hooks/useRadioKeyboard.ts
+var NO_GROUP_PROPS = {};
+function useRadioKeyboard(config) {
+  const { enabled, disabled, values, selectedIndex, onChange } = config;
+  const nodes = React2__default.default.useRef([]);
+  const chipRef = React2__default.default.useCallback((index) => (node) => {
+    nodes.current[index] = node;
+  }, []);
+  const onKeyDown = (event) => {
+    if (disabled)
+      return;
+    const index = nodes.current.indexOf(event.target);
+    const target = radioKeyTarget(event.key, index, values.length);
+    const nextValue = target === null ? void 0 : values[target];
+    if (target === null || nextValue === void 0)
+      return;
+    event.preventDefault();
+    if (target !== index)
+      nodes.current[target]?.focus?.();
+    onChange(nextValue);
+  };
+  return {
+    chipRef,
+    tabIndexFor: (index) => enabled ? radioTabIndex(index, selectedIndex, disabled) : void 0,
+    // `onKeyDown` is a web-only View prop RN's types do not declare; RNW forwards it to the DOM.
+    groupProps: enabled ? { onKeyDown } : NO_GROUP_PROPS
+  };
+}
+
+// src/ChipSelector/utils/chipColors.ts
+var WHITE_COLOR = "#fff";
+var OUTLINE_TINT_ALPHA = 0.1;
+var HEX_SHORT_LENGTH2 = 3;
+var HEX_RADIX2 = 16;
+var RGB_R_START = 0;
+var RGB_R_END = 2;
+var RGB_G_END = 4;
+var RGB_B_END = 6;
+var ON_BRAND_SCALE = "onBrand";
+var MAIN_STEP = "500";
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
+}
+function withAlpha2(hex, alpha) {
+  const normalized = hex.replace("#", "");
+  const isShort = normalized.length === HEX_SHORT_LENGTH2;
+  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
+  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
+  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
+  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
+  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
+  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
+}
+function buildChipColors(colors, palette) {
+  const primary = palette.primary[500];
+  return {
+    border: colors.border,
+    textStrong: colors.text,
+    textMuted: colors.textSecondary,
+    primary,
+    onPrimary: onBrandInk(palette),
+    muted: colors.background,
+    tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
+  };
+}
+
+// src/ChipSelector/utils/chipIdentity.ts
+function chipIdentity(option, selected, config) {
+  const isRadio = config.radio === true && !config.multiple;
+  return {
+    testID: `${config.prefix}-${String(option.value)}`,
+    // The English default is retained verbatim: erevna/katalogos assert the exact string
+    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
+    accessibilityHint: config.hint ?? `Selects ${option.label}`,
+    ariaPressed: config.multiple ? selected : void 0,
+    accessibilityRole: isRadio ? "radio" : "button",
+    ariaChecked: isRadio ? selected : void 0
+  };
+}
+var styles5 = reactNative.StyleSheet.create({
+  chipContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    // `gap`, NOT per-chip margins plus a compensating negative container margin.
+    //
+    // The old form was `chipWrapper { marginRight: 8, marginBottom: 8 }` with
+    // `chipContainer { marginBottom: -8 }`. Its comment blamed `Field`'s 16px container margin —
+    // that was WRONG, and worth recording: F3 was briefed on the belief that the -8 compensated for
+    // `Field` and had to move in lockstep with it. It did not. -8 cancelled the CHIP's own gutter
+    // hanging off the last row, identically whether `Field` contributed 16, 0, or anything else.
+    //
+    // The pair is still the wrong tool: it holds only while the two constants agree, and it leaves
+    // a real negative margin any measuring parent inherits. `gap` produces the byte-identical box
+    // and is correct under BOTH of `Field`'s spacing models, not just the one it was tuned against.
+    gap: CHIP_GUTTER
+  }
+});
 var ChipSelector = ({
   label,
   options,
@@ -1102,28 +1188,26 @@ var ChipSelector = ({
   error,
   testID,
   chipTestIDPrefix = DEFAULT_CHIP_TESTID_PREFIX,
-  optionAccessibilityHint
+  optionAccessibilityHint,
+  singleSelectRole = "button"
 }) => {
+  const isRadioGroup = !multiple && singleSelectRole === "radio";
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const chipColors = React2__default.default.useMemo(() => {
-    const primary = palette.primary["500"];
-    return {
-      border: colors.border,
-      textStrong: colors.text,
-      textMuted: colors.textSecondary,
-      primary,
-      onPrimary: onBrandInk(palette),
-      muted: colors.background,
-      tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
-    };
-  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette]);
+  const chipColors = React2__default.default.useMemo(() => buildChipColors(colors, palette), [colors, palette]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
-  function renderChip(option) {
+  const radio = useRadioKeyboard({
+    enabled: isRadioGroup,
+    disabled,
+    values: options.map((option) => option.value),
+    selectedIndex: options.findIndex((option) => isSelected(option.value)),
+    onChange
+  });
+  function renderChip(option, index) {
     const selected = isSelected(option.value);
     const chipProps = {
       colors: chipColors,
@@ -1133,8 +1217,13 @@ var ChipSelector = ({
       ...chipIdentity(option, selected, {
         prefix: chipTestIDPrefix,
         hint: optionAccessibilityHint,
-        multiple
+        multiple,
+        radio: isRadioGroup
       }),
+      // Radio mode only: roving tab stop + host node for arrow-key focus moves. Both stay
+      // `undefined` otherwise, so button / multi chips keep their existing tab order.
+      tabIndex: radio.tabIndexFor(index),
+      hostRef: isRadioGroup ? radio.chipRef(index) : void 0,
       onPress: () => onChange(option.value)
     };
     const key = String(option.value);
@@ -1149,7 +1238,16 @@ var ChipSelector = ({
       required,
       spacing,
       testID,
-      children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.chipContainer, ...webFieldA11y({ describedById, hasError }), children: options.map(renderChip) })
+      children: ({ describedById, hasError }) => /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
+          style: styles5.chipContainer,
+          ...webFieldA11y({ describedById, hasError }),
+          ...radio.groupProps,
+          children: options.map(renderChip)
+        }
+      )
     }
   );
 };
@@ -1207,8 +1305,7 @@ var FormSwitch = ({
           {
             accessibilityHint: accessibilityHint ?? label,
             accessibilityLabel: label,
-            accessibilityRole: "switch",
-            accessibilityState: { checked: value },
+            accessibilityState: { checked: value, disabled },
             disabled,
             testID,
             value,