sinwan-ui-core 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this package are documented in this file. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this package uses [Semantic Versioning](https://semver.org/).
 
+## [1.2.0]
+
+### Added
+
+- `RadioGroupRoot` / `RadioGroupItem` (`controls`) follow the WAI-ARIA radio group keyboard pattern. The group has a single tab stop: the checked radio, or the first enabled one when nothing is checked. ArrowDown/ArrowRight select and focus the next enabled radio, and ArrowUp/ArrowLeft the previous one. Both wrap and skip disabled radios, and ArrowLeft/ArrowRight swap inside a right-to-left `DirectionProvider`. Click and Space are unchanged. Before, every radio was its own tab stop and arrow keys did nothing.
+- `RadioGroupKey` gains `register`, `tabStop` and `move`, and the `RadioGroupEntry` type is exported. Code that only reads `value` and `setValue` is unaffected.
+
 ## [1.1.1]
 
 ### Fixed

package/README.md

@@ -24,7 +24,7 @@ Import from the root barrel or from a subpath (subpaths keep bundles small):
 | --- | --- |
 | `sinwan-ui-core/core` | `Presence` (keeps content mounted through CSS exit), `UiPortal`, `useControllableState`, `getFocusableElements`, `trapFocus`; re-exports the positioning helpers from `floating` |
 | `sinwan-ui-core/overlay` | Dialog, Collapsible, Popover and Tooltip primitives (`DialogRoot`, `DialogTrigger`, `DialogOverlay`, `DialogContent`, `PopoverRoot`, …), their injection keys and `OpenApi` |
-| `sinwan-ui-core/controls` | Tabs, Accordion, Checkbox, Switch, RadioGroup, Toggle and ToggleGroup primitives with injection keys |
+| `sinwan-ui-core/controls` | Tabs, Accordion, Checkbox, Switch, RadioGroup (WAI-ARIA arrow keys and a single tab stop), Toggle and ToggleGroup primitives with injection keys |
 | `sinwan-ui-core/floating` | `useAnchorPosition`, `usePointPosition`, `computePosition`, `estimatePosition` and placement helpers (Floating UI based) |
 | `sinwan-ui-core/dismiss` | `isDismissExemptPointerTarget` for outside-press handling across portaled layers |
 | `sinwan-ui-core/menu-sub` | `createMenuSubApi` (closes with its `parentOpen`), `createMenuSubTriggerHandlers`, `isInsideMenuSubContent`, `MenuSubContentLayer` for nested menus |

package/dist/chunks/{chunk-2sw6berz.js → chunk-s03me75x.js}

@@ -1,6 +1,9 @@
 import {
   Presence2
 } from "./chunk-ejwby1pn.js";
+import {
+  DirectionKey2
+} from "./chunk-f6hw8ash.js";
 
 // src/controls.tsx
 import { _$createTemplate } from "sinwan/renderer/web";
@@ -9,6 +12,7 @@ import {
   cc,
   getRawProps,
   inject,
+  onUnmounted,
   provide
 } from "sinwan/component";
 import { For as For2, Show as Show2 } from "sinwan/control-flow";
@@ -103,14 +107,17 @@ var _$tmpl_8 = {
   ]
 };
 var _$tmpl_9 = {
-  html: '<button type="button" role="radio" id="" data-slot="radio-group-item" data-state="" aria-checked="" disabled=""></button>',
+  html: '<button type="button" role="radio" id="" data-slot="radio-group-item" data-state="" aria-checked="" tabIndex="" disabled=""></button>',
   slots: [
+    { path: [], type: "ref", name: "ref" },
     { path: [], type: "attr", name: "id" },
     { path: [], type: "attr", name: "data-state" },
     { path: [], type: "attr", name: "aria-checked" },
+    { path: [], type: "attr", name: "tabIndex" },
     { path: [], type: "attr", name: "disabled" },
     { path: [], type: "attr", name: "class" },
     { path: [], type: "event", name: "onclick" },
+    { path: [], type: "event", name: "onkeydown" },
     { path: [], type: "child" }
   ]
 };
@@ -335,6 +342,10 @@ var SwitchRoot2 = cc((props) => {
   ]);
 });
 var RadioGroupKey2 = Symbol("sinwan-ui.radio-group");
+var DOCUMENT_POSITION_FOLLOWING = 4;
+function inDocumentOrder(a, b) {
+  return a.el.compareDocumentPosition(b.el) & DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
 var RadioGroupRoot2 = cc((props) => {
   const valueLocal = signal(props.defaultValue ?? "");
   const value = "value" in props ? computed(() => props.value ?? "") : valueLocal;
@@ -342,28 +353,81 @@ var RadioGroupRoot2 = cc((props) => {
     if (!("value" in props))
       valueLocal.value = next;
   };
+  const setValue = (v) => {
+    set(v);
+    props.onValueChange?.(v);
+  };
+  const entries = signal([]);
+  const enabled = () => entries.value.filter((entry) => !entry.disabled());
+  const tabStop = computed(() => {
+    const list = enabled();
+    return (list.find((entry) => entry.value() === value.value) ?? list[0])?.value();
+  });
   provide(RadioGroupKey2, {
     value,
     name: props.name,
-    setValue: (v) => {
-      set(v);
-      props.onValueChange?.(v);
+    setValue,
+    register: (entry) => {
+      entries.value = [...entries.value, entry];
+      return () => {
+        entries.value = entries.value.filter((other) => other !== entry);
+      };
+    },
+    tabStop,
+    move: (from, step) => {
+      const list = enabled().sort(inDocumentOrder);
+      if (list.length === 0)
+        return;
+      const index = list.findIndex((entry) => entry.value() === from);
+      const next = index === -1 ? list[step === 1 ? 0 : list.length - 1] : list[(index + step + list.length) % list.length];
+      next.el.focus();
+      setValue(next.value());
     }
   });
   return _$createTemplate(_$tmpl_8, [() => _$unwrap(props).class, () => _$unwrap(props).children]);
 });
+var LTR = { dir: { value: "ltr" } };
+function radioStep(key, dir) {
+  const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+  const backward = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+  if (key === "ArrowDown" || key === forward)
+    return 1;
+  if (key === "ArrowUp" || key === backward)
+    return -1;
+  return 0;
+}
 var RadioGroupItem2 = cc((props) => {
   const api = inject(RadioGroupKey2);
+  const direction = inject(DirectionKey2, LTR);
+  let unregister;
+  onUnmounted(() => unregister?.());
   return _$createTemplate(_$tmpl_9, [
+    (el) => {
+      if (el && !unregister) {
+        unregister = api.register({
+          value: () => props.value,
+          disabled: () => Boolean(props.disabled),
+          el
+        });
+      }
+    },
     () => _$unwrap(props).id,
     () => api.value.value === _$unwrap(props).value ? "checked" : "unchecked",
     () => api.value.value === _$unwrap(props).value,
+    () => api.tabStop.value === _$unwrap(props).value ? 0 : -1,
     () => _$unwrap(props).disabled,
     () => _$unwrap(props).class,
     () => {
       if (!props.disabled)
         api.setValue(props.value);
     },
+    (event) => {
+      const step = radioStep(event.key, direction.dir.value);
+      if (step === 0)
+        return;
+      event.preventDefault();
+      api.move(props.value, step);
+    },
     () => _$unwrap(props).children
   ]);
 });

package/dist/controls.d.ts

@@ -83,10 +83,22 @@ export declare const SwitchRoot: import("sinwan/component").SinwanComponent<{
     children?: SinwanNode;
     "data-size"?: string;
 }>;
+/** A radio registered with its group for roving focus. */
+export type RadioGroupEntry = {
+    value: () => string;
+    disabled: () => boolean;
+    el: HTMLElement;
+};
 export declare const RadioGroupKey: InjectionKey<{
     value: Signal<string> | Computed<string>;
     setValue: (v: string) => void;
     name?: string;
+    /** Adds a radio to the group's keyboard order; returns its removal. */
+    register: (entry: RadioGroupEntry) => () => void;
+    /** Value of the one radio that is in the tab order. */
+    tabStop: Computed<string | undefined>;
+    /** Moves focus and selection `step` enabled radios from `from`, wrapping. */
+    move: (from: string, step: 1 | -1) => void;
 }>;
 export declare const RadioGroupRoot: import("sinwan/component").SinwanComponent<{
     children?: SinwanNode;

package/dist/controls.js

@@ -21,7 +21,8 @@ import {
   ToggleGroupKey2,
   ToggleGroupRoot2,
   ToggleGroupItem2
-} from "./chunks/chunk-2sw6berz.js";
+} from "./chunks/chunk-s03me75x.js";
+import"./chunks/chunk-f6hw8ash.js";
 import {
   Slot2
 } from "./chunks/chunk-bw9vp0y9.js";

package/dist/index.js

@@ -26,6 +26,11 @@ import {
   getFocusableElements2,
   trapFocus2
 } from "./chunks/chunk-ejwby1pn.js";
+import {
+  DirectionKey2,
+  DirectionProvider2,
+  useDirection2
+} from "./chunks/chunk-f6hw8ash.js";
 import {
   For2,
   TabsKey2,
@@ -48,12 +53,7 @@ import {
   ToggleGroupKey2,
   ToggleGroupRoot2,
   ToggleGroupItem2
-} from "./chunks/chunk-2sw6berz.js";
-import {
-  DirectionKey2,
-  DirectionProvider2,
-  useDirection2
-} from "./chunks/chunk-f6hw8ash.js";
+} from "./chunks/chunk-s03me75x.js";
 import {
   isDismissExemptPointerTarget2
 } from "./chunks/chunk-9whagkb6.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sinwan-ui-core",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Headless behaviour primitives for Sinwan UI components: overlays, floating positioning, dismiss layers, controls, slots, theme and direction.",
   "author": "Mohammed Ben Cheikh",
   "license": "MIT",