sinwan-ui-core 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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
+
+- `ToggleGroupRoot` (`controls`) forwards `aria-*` attributes to its `role="group"` element. Before, an `aria-label` such as "Billing period" was dropped, so screen readers announced an unnamed group. Values stay live when driven by a signal or getter.
+
 ## [1.1.0]
 
 ### Added

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-3zrktrd2.js → chunk-33f19xws.js}

@@ -80,9 +80,9 @@ function writeDomPalette(next) {
   document.documentElement.setAttribute("data-palette", next);
 }
 var ThemeProvider2 = cc((props) => {
-  const allowedPalettes = (props.palettes === undefined ? DEFAULT_PALETTES : props.palettes).length > 0 ? props.palettes === undefined ? DEFAULT_PALETTES : props.palettes : DEFAULT_PALETTES;
+  const allowedPalettes = () => (props.palettes === undefined ? DEFAULT_PALETTES : props.palettes).length > 0 ? props.palettes === undefined ? DEFAULT_PALETTES : props.palettes : DEFAULT_PALETTES;
   const initialTheme = props.forcedTheme ?? readStoredTheme(props.storageKey === undefined ? "sinwan-ui-theme" : props.storageKey, props.defaultTheme === undefined ? "system" : props.defaultTheme);
-  const initialPalette = props.forcedPalette ?? readStoredPalette(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, props.defaultPalette === undefined ? "credit-blue" : props.defaultPalette, allowedPalettes);
+  const initialPalette = props.forcedPalette ?? readStoredPalette(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, props.defaultPalette === undefined ? "credit-blue" : props.defaultPalette, allowedPalettes());
   const theme = signal(initialTheme);
   const palette = signal(initialPalette);
   const resolved = signal(initialTheme === "system" ? getSystemTheme() : initialTheme);
@@ -131,7 +131,7 @@ var ThemeProvider2 = cc((props) => {
   const setPalette = (value) => {
     if (props.forcedPalette)
       return;
-    if (!allowedPalettes.includes(value))
+    if (!allowedPalettes().includes(value))
       return;
     try {
       localStorage.setItem(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, value);
@@ -159,7 +159,7 @@ var ThemeProvider2 = cc((props) => {
     themes: (props.enableSystem === undefined ? true : props.enableSystem) ? ["light", "dark", "system"] : ["light", "dark"],
     palette,
     setPalette,
-    palettes: allowedPalettes
+    palettes: allowedPalettes()
   });
   computed(() => resolved.value);
   computed(() => palette.value);

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

@@ -1,11 +1,20 @@
 import {
   Presence2
 } from "./chunk-ejwby1pn.js";
+import {
+  DirectionKey2
+} from "./chunk-f6hw8ash.js";
 
 // src/controls.tsx
 import { _$createTemplate } from "sinwan/renderer/web";
 import { unwrap as _$unwrap } from "sinwan/reactivity";
-import { cc, inject, provide } from "sinwan/component";
+import {
+  cc,
+  getRawProps,
+  inject,
+  onUnmounted,
+  provide
+} from "sinwan/component";
 import { For as For2, Show as Show2 } from "sinwan/control-flow";
 import { computed, signal } from "sinwan/reactivity";
 import { jsx } from "sinwan/jsx-runtime";
@@ -98,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" }
   ]
 };
@@ -121,18 +133,6 @@ var _$tmpl_10 = {
   ]
 };
 var _$tmpl_11 = {
-  html: '<div data-slot="toggle-group" role="group" style="" data-variant="" data-size="" data-spacing="" data-orientation=""></div>',
-  slots: [
-    { path: [], type: "attr", name: "class" },
-    { path: [], type: "attr", name: "style" },
-    { path: [], type: "attr", name: "data-variant" },
-    { path: [], type: "attr", name: "data-size" },
-    { path: [], type: "attr", name: "data-spacing" },
-    { path: [], type: "attr", name: "data-orientation" },
-    { path: [], type: "child" }
-  ]
-};
-var _$tmpl_12 = {
   html: '<button type="button" data-slot="toggle-group-item" data-variant="" data-size="" data-spacing="" data-state="" disabled=""></button>',
   slots: [
     { path: [], type: "attr", name: "data-variant" },
@@ -342,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;
@@ -349,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
   ]);
 });
@@ -399,6 +456,7 @@ var ToggleRoot2 = cc((props) => {
 var ToggleGroupKey2 = Symbol("sinwan-ui.toggle-group");
 var ToggleGroupRoot2 = cc((props) => {
   const type = () => props.type ?? "single";
+  const ariaProps = Object.fromEntries(Object.entries(getRawProps(props)).filter(([key]) => key.startsWith("aria-")));
   const valueLocal = signal(toValueList(props.defaultValue));
   const value = "value" in props ? computed(() => toValueList(props.value)) : valueLocal;
   const set = (next) => {
@@ -419,19 +477,22 @@ var ToggleGroupRoot2 = cc((props) => {
       props.onValueChange?.(type() === "single" ? next[0] ?? "" : next);
     }
   });
-  return _$createTemplate(_$tmpl_11, [
-    () => _$unwrap(props).class,
-    () => _$unwrap(props).style,
-    () => props["data-variant"],
-    () => props["data-size"],
-    () => props["data-spacing"],
-    () => props["data-orientation"],
-    () => _$unwrap(props).children
-  ]);
+  return /* @__PURE__ */ jsx("div", {
+    "data-slot": "toggle-group",
+    role: "group",
+    class: () => _$unwrap(props).class,
+    style: () => _$unwrap(props).style,
+    "data-variant": () => props["data-variant"],
+    "data-size": () => props["data-size"],
+    "data-spacing": () => props["data-spacing"],
+    "data-orientation": () => props["data-orientation"],
+    ...ariaProps,
+    children: () => _$unwrap(props).children
+  });
 });
 var ToggleGroupItem2 = cc((props) => {
   const api = inject(ToggleGroupKey2);
-  return _$createTemplate(_$tmpl_12, [
+  return _$createTemplate(_$tmpl_11, [
     () => props["data-variant"],
     () => props["data-size"],
     () => props["data-spacing"],

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;
@@ -117,6 +129,7 @@ export declare const ToggleGroupKey: InjectionKey<{
     toggle: (v: string) => void;
 }>;
 export declare const ToggleGroupRoot: import("sinwan/component").SinwanComponent<{
+    [key: `aria-${string}`]: string | boolean | undefined;
     children?: SinwanNode;
     type?: "single" | "multiple";
     value?: string | string[];

package/dist/controls.js

@@ -21,7 +21,8 @@ import {
   ToggleGroupKey2,
   ToggleGroupRoot2,
   ToggleGroupItem2
-} from "./chunks/chunk-te52bwb8.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-te52bwb8.js";
-import {
-  DirectionKey2,
-  DirectionProvider2,
-  useDirection2
-} from "./chunks/chunk-f6hw8ash.js";
+} from "./chunks/chunk-s03me75x.js";
 import {
   isDismissExemptPointerTarget2
 } from "./chunks/chunk-9whagkb6.js";
@@ -89,7 +89,7 @@ import {
   ThemeProvider2,
   useTheme2,
   ThemeToggle2
-} from "./chunks/chunk-3zrktrd2.js";
+} from "./chunks/chunk-33f19xws.js";
 export {
   AccordionContent2 as AccordionContent,
   AccordionItem2 as AccordionItem,

package/dist/theme.js

@@ -3,7 +3,7 @@ import {
   ThemeProvider2,
   useTheme2,
   ThemeToggle2
-} from "./chunks/chunk-3zrktrd2.js";
+} from "./chunks/chunk-33f19xws.js";
 export {
   ThemeKey2 as ThemeKey,
   ThemeProvider2 as ThemeProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sinwan-ui-core",
-  "version": "1.1.0",
+  "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",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "bun-plugin-sinwan": "1.0.0",
+    "bun-plugin-sinwan": "^1.0.1",
     "happy-dom": "^20.14.5",
     "sinwan": "^2.0.3",
     "typescript": "^5.9.3"
@@ -115,4 +115,4 @@
   "peerDependencies": {
     "sinwan": ">=2.0.3 <3.0.0"
   }
-}
+}