@antadesign/anta 0.3.0 → 0.3.2

package/dist/anta_helpers.d.ts

@@ -1,4 +1,14 @@
 export declare function hasChildren(children: React.ReactNode): boolean;
+/**
+ * Normalize a wrapper's label content the way `Button` / `Tabs` do: a bare string
+ * or number becomes a `<tag>` — the ellipsis-capable label part (`a-button-label`,
+ * `a-tab-label`, …) that carries the optical baseline nudge and truncates cleanly;
+ * empty / whitespace strings and `NaN` carry no content and are dropped; a JSX
+ * element is the consumer's own structure, passed through unwrapped (so an icon-only
+ * child keeps its layout). Shared so the rule lives in one place — don't re-implement
+ * it per component.
+ */
+export declare function wrapLabel(kids: React.ReactNode, tag: string): React.ReactNode;
 /**
  * Unwrap a `statechange` (or any) `CustomEvent` a renderer may deliver wrapped:
  * React hands a synthetic event with the real one on `.nativeEvent`; Preact passes

package/dist/anta_helpers.js

@@ -1,6 +1,17 @@
+import { jsx } from "./jsx-runtime";
 function hasChildren(children) {
   return Array.isArray(children) ? children.length > 0 : children != null;
 }
+function wrapLabel(kids, tag) {
+  if (kids == null) return kids;
+  const arr = Array.isArray(kids) ? kids : [kids];
+  return arr.map((child, i) => {
+    if (typeof child === "string") return child.trim() === "" ? null : jsx(tag, { children: child }, i);
+    if (typeof child === "number") return Number.isNaN(child) ? null : jsx(tag, { children: child }, i);
+    if (child == null || typeof child === "boolean") return null;
+    return child;
+  });
+}
 function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
@@ -33,5 +44,6 @@ export {
   NAMED_TONES,
   hasChildren,
   nativeStateChange,
-  toneStyle
+  toneStyle,
+  wrapLabel
 };

package/dist/components/Button.js

@@ -1,19 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
-const wrapChildren = (kids) => {
-  if (kids == null) return kids;
-  const arr = Array.isArray(kids) ? kids : [kids];
-  return arr.map((child, i) => {
-    if (typeof child === "string") {
-      return child.trim() === "" ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
-    }
-    if (typeof child === "number") {
-      return Number.isNaN(child) ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
-    }
-    if (child == null || typeof child === "boolean") return null;
-    return child;
-  });
-};
+import { toneStyle, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -38,6 +24,12 @@ const Button = ({
   const computedStyle = toneStyle(toneAttr, "--button-tone-source", style);
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
+    // `<a-button>` is a custom element with no implicit ARIA role, so AT would
+    // announce it as a generic clickable — and `aria-pressed` below is only
+    // valid on a button/switch role. Publish `role="button"` from the wrapper
+    // (ARIA lives in the wrapper) for both the element and the `<a href>` path;
+    // a consumer's own `role` in `...rest` still wins by spread order.
+    role: "button",
     priority,
     tone: toneAttr,
     underline,
@@ -68,7 +60,7 @@ const Button = ({
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
     label != null && /* @__PURE__ */ jsx("a-button-label", { children: label }),
-    wrapChildren(children),
+    wrapLabel(children, "a-button-label"),
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
   ] });
   if (href != null) {
@@ -76,7 +68,6 @@ const Button = ({
       "a",
       {
         href,
-        role: "button",
         ...sharedAttrs,
         ...rest,
         children: inner

package/dist/components/Checkbox.d.ts

@@ -11,9 +11,9 @@ type StateDetail = {
     prev: CheckboxState;
 };
 type StateChangeEvent = CustomEvent<StateDetail>;
-/** Snapshot passed as the 2nd argument to `onAnyChange` — the new value plus
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new value plus
  *  form-relevant fields, so you don't poke at `event.target`. Mirrors `Input`'s
- *  `onAnyChange` convention. */
+ *  `onValueChange` convention. */
 export interface CheckboxChangeAttrs {
     checked: boolean;
     indeterminate: boolean;
@@ -48,21 +48,22 @@ export interface CheckboxProps extends BaseProps {
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Colour variant, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`)
-     *  for a one-off custom tone. Tints fill, label, hint, and the unselected box
-     *  border. Named tones track light/dark mode automatically via the theme-aware
-     *  role tokens; a custom colour keeps its hue + chroma and pins lightness to the
-     *  fill curve.
+    /** Colour of the **mark** — the checked-box fill and the unselected box border.
+     *  A named tone or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a
+     *  one-off custom tone. Named tones track light/dark mode automatically via the
+     *  theme-aware role tokens; a custom colour keeps its hue + chroma and pins
+     *  lightness to the fill curve. The label + hint stay neutral — use `toneText`
+     *  to recolour those.
      *  @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Colour of the **text** — the label and hint — independent of `tone`. A named
+     *  tone or any literal CSS color. Named tones track light/dark via the theme-aware
+     *  `--text-*` role tokens. Omit to leave the text neutral.
+     *  @defaultValue 'neutral' */
+    toneText?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px box.
      *  @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` fills the checked box with the tone colour and
-     *  draws a white checkmark; `secondary` keeps the box unfilled and draws the
-     *  border + checkmark in the tone colour (an outlined look).
-     *  @defaultValue 'primary' */
-    priority?: 'primary' | 'secondary';
     /** Fired on click / Space *before* the element applies any change. Event-first
      *  so `event.preventDefault()` is the synchronous veto (uncontrolled mode);
      *  `detail` carries `{ next, prev }`. In controlled mode the element never
@@ -77,8 +78,8 @@ export interface CheckboxProps extends BaseProps {
     onChange?: (event: Event) => void;
     /** Like `onChange`, but with a `{ checked, indeterminate, name, value }` snapshot
      *  as the 2nd argument — the ergonomic "just give me the new value" callback
-     *  (mirrors `Input`'s `onAnyChange`). */
-    onAnyChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
+     *  (mirrors `Input`'s `onValueChange`). */
+    onValueChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
 }
 /**
  * Checkbox. Renders an `<a-checkbox>` web component that owns the visual
@@ -93,5 +94,5 @@ export interface CheckboxProps extends BaseProps {
  * <Checkbox defaultChecked label="Remember me" hint="On this device" />
  * ```
  */
-export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, size, priority, onStateChange, onChange, onAnyChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
+export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneText, size, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
 export {};

package/dist/components/Checkbox.js

@@ -13,11 +13,11 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   tone,
+  toneText,
   size,
-  priority,
   onStateChange,
   onChange,
-  onAnyChange,
+  onValueChange,
   label,
   hint,
   className,
@@ -26,7 +26,11 @@ const Checkbox = ({
   tabIndex,
   ...rest
 }) => {
-  const computedStyle = toneStyle(tone, "--checkbox-tone-source", style);
+  const computedStyle = toneStyle(
+    toneText,
+    "--checkbox-tone-text-source",
+    toneStyle(tone, "--checkbox-tone-source", style)
+  );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
   const onstatechange = onStateChange ? (e) => {
@@ -37,9 +41,9 @@ const Checkbox = ({
       prev: stateToValue(detail.prev)
     });
   } : void 0;
-  const onchange = onChange || onAnyChange ? (e) => {
+  const onchange = onChange || onValueChange ? (e) => {
     onChange?.(e);
-    onAnyChange?.(e, checkboxAttrsOf(e.currentTarget));
+    onValueChange?.(e, checkboxAttrsOf(e.currentTarget));
   } : void 0;
   const stateAttr = checked !== void 0 ? valueToState(checked) : void 0;
   const defaultStateAttr = checked === void 0 && defaultChecked !== void 0 ? valueToState(defaultChecked) : void 0;
@@ -55,8 +59,8 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      "tone-text": toneText && toneText !== "neutral" ? toneText : void 0,
       size: size && size !== "medium" ? size : void 0,
-      priority: priority && priority !== "primary" ? priority : void 0,
       tabIndex: disabled ? -1 : tabIndex ?? 0,
       onstatechange,
       onchange,

package/dist/components/Input.d.ts

@@ -1,6 +1,6 @@
 import type { BaseProps, DOMEventHandlers } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-/** Convenience snapshot passed as the 2nd argument to `onAnyChange`. */
+/** Convenience snapshot passed as the 2nd argument to `onValueChange`. */
 export interface InputChangeAttrs {
     /** Current value. */
     value: string;
@@ -114,7 +114,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     onInput?: (e: any) => void;
     /** Fires on **commit** (blur / Enter) — the platform `change` semantics, **not**
      *  React's per-keystroke `onChange`. This is a web component, so `onChange` keeps
-     *  the native meaning; reach for `onInput` (every keystroke) or `onAnyChange`
+     *  the native meaning; reach for `onInput` (every keystroke) or `onValueChange`
      *  (both) for live updates. Read `e.target.value`. */
     onChange?: (e: any) => void;
     /** Unified value-change handler — the easy path for state. Fires on `input`
@@ -123,7 +123,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  you can do `setForm(s => ({ ...s, [attrs.name]: attrs.value }))` without
      *  digging into the event. Use `event.type` to tell a live edit (`input`) from
      *  a commit (`change`); read `id` / `type` / `className` off `event.target`. */
-    onAnyChange?: (event: any, attrs: InputChangeAttrs) => void;
+    onValueChange?: (event: any, attrs: InputChangeAttrs) => void;
     /** Fires when the built-in clear button (`clearable`) is clicked, *before*
      *  the field is cleared. Call `e.preventDefault()` to keep the current value
      *  — the clear is cancelled and `onClearInput` won't fire. Backed by the
@@ -156,4 +156,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onAnyChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -62,7 +62,7 @@ const Input = ({
   step,
   onInput,
   onChange,
-  onAnyChange,
+  onValueChange,
   onClearClick,
   onClearInput,
   children,
@@ -100,13 +100,13 @@ const Input = ({
       max,
       step,
       "aria-invalid": status === "critical" ? "true" : void 0,
-      oninput: onInput || onAnyChange ? (e) => {
+      oninput: onInput || onValueChange ? (e) => {
         onInput?.(e);
-        onAnyChange?.(e, attrsOf(e));
+        onValueChange?.(e, attrsOf(e));
       } : void 0,
-      onchange: onChange || onAnyChange ? (e) => {
+      onchange: onChange || onValueChange ? (e) => {
         onChange?.(e);
-        onAnyChange?.(e, attrsOf(e));
+        onValueChange?.(e, attrsOf(e));
       } : void 0,
       onclearclick: onClearClick ? (e) => onClearClick(nativeStateChange(e).event) : void 0,
       onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,

package/dist/components/Menu.d.ts

@@ -13,9 +13,12 @@ export interface MenuProps extends BaseProps {
      *  Pairs naturally with `context`; on its own it positions a left-click
      *  menu at the cursor. */
     coord?: boolean;
-    /** For a submenu (a `<Menu>` nested inside a `MenuItem`): also open it on
-     *  hover (with intent timing), not only on click. No effect on a root menu. */
-    hover?: boolean;
+    /** Submenu-only (a `<Menu>` nested inside a `MenuItem`); ignored on a root
+     *  menu. Submenus open on hover by default (with intent timing) as well as on
+     *  click — set `nohover` to make this submenu click-only. Hover-intent is
+     *  mouse-only regardless: on touch (and pen) a submenu always opens on tap and
+     *  stays open until dismissed. */
+    nohover?: boolean;
     /** Gap in pixels between the trigger and the menu.
      *  @defaultValue 4 */
     offset?: number;
@@ -67,4 +70,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, hover, offset, open, onStateChange, className, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, open, onStateChange, className, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -4,7 +4,7 @@ const Menu = ({
   placement,
   context,
   coord,
-  hover,
+  nohover,
   offset,
   open,
   onStateChange,
@@ -18,7 +18,7 @@ const Menu = ({
       placement: placement && placement !== "bottom-start" ? placement : void 0,
       context: context ? "" : void 0,
       coord: coord ? "" : void 0,
-      hover: hover ? "" : void 0,
+      nohover: nohover ? "" : void 0,
       offset: offset != null ? String(offset) : void 0,
       state: open === void 0 ? void 0 : open ? "open" : "closed",
       onstatechange: onStateChange ? (e) => {

package/dist/components/MenuItem.d.ts

@@ -7,8 +7,9 @@ export interface MenuItemProps extends BaseProps {
     label?: string;
     /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
     kbd?: string;
-    /** A trailing icon (ignored when `submenu` is set — the chevron takes its
-     *  place). */
+    /** A trailing icon. On a `submenu` item this **overrides** the default
+     *  chevron (omit it to keep the chevron); on a normal item it's the trailing
+     *  glyph (omit for none). */
     iconTrailing?: IconShape;
     /** Disable the item: greyed out, not focusable for activation, no close. */
     disabled?: boolean;
@@ -20,9 +21,19 @@ export interface MenuItemProps extends BaseProps {
      *  `aria-haspopup="menu"`, and an `aria-expanded` baseline (kept in sync by
      *  the nested menu). Nest the flyout as a `<Menu>` child. */
     submenu?: boolean;
-    /** Convenience activation handler — fires on click / Enter / Space unless
-     *  the item is disabled. (Mapped to the underlying click.) */
-    onSelect?: (e: any) => void;
+    /** An opaque value identifying this item, handed back in `onSelect`'s detail
+     *  so a shared handler can tell which row was chosen without a per-item
+     *  closure. */
+    value?: string | number;
+    /** Activation handler — fires when *this* item is chosen (click / Enter /
+     *  Space), unless it's `disabled`. It does **not** fire for a submenu parent
+     *  (clicking that opens the flyout, which isn't a selection) nor for a
+     *  selection bubbling up from a nested submenu. Receives the event plus a
+     *  `{ value, label }` detail. */
+    onSelect?: (event: any, detail: {
+        value?: string | number;
+        label?: string;
+    }) => void;
     /** Item content. With `label` set, children are extra content — most
      *  notably the nested `<Menu>` for a submenu parent. */
     children?: React.ReactNode;
@@ -41,10 +52,10 @@ export interface MenuItemProps extends BaseProps {
  * <MenuItem icon="copy" label="Duplicate" kbd="⌘D" onSelect={dup} />
  * <MenuItem label="Word wrap" data-menu-open onSelect={toggleWrap} />
  * <MenuItem label="Share" submenu>
- *   <Menu hover>
+ *   <Menu>
  *     <MenuItem label="Copy link" onSelect={copyLink} />
  *   </Menu>
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, kbd, iconTrailing, disabled, tone, submenu, onSelect, className, children, ...rest }: MenuItemProps) => any;
+export declare const MenuItem: ({ icon, label, kbd, iconTrailing, disabled, tone, submenu, value, onSelect, className, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -7,6 +7,7 @@ const MenuItem = ({
   disabled,
   tone,
   submenu,
+  value,
   onSelect,
   className,
   children,
@@ -23,14 +24,22 @@ const MenuItem = ({
       "aria-haspopup": submenu ? "menu" : void 0,
       "aria-expanded": submenu ? "false" : void 0,
       "aria-disabled": disabled ? "true" : void 0,
-      onClick: disabled ? void 0 : onSelect,
+      onClick: disabled || !onSelect ? void 0 : (e) => {
+        if (submenu) return;
+        const t = e.target;
+        if (t?.closest?.("a-menu-item") !== e.currentTarget) return;
+        onSelect(e, { value, label });
+      },
       class: className,
       ...rest,
       children: [
         icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
         label != null && /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
         kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
-        submenu ? /* @__PURE__ */ jsx("a-icon", { shape: "chevron-right", "aria-hidden": "true" }) : iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" }),
+        /* @__PURE__ */ (() => {
+          const trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
+          return trailing ? /* @__PURE__ */ jsx("a-icon", { shape: trailing, "aria-hidden": "true" }) : null;
+        })(),
         children
       ]
     }

package/dist/components/RadioGroup.d.ts

@@ -8,7 +8,7 @@ type StateDetail = {
     reason: StateReason;
 };
 type StateChangeEvent = CustomEvent<StateDetail>;
-/** Snapshot passed as the 2nd argument to `onAnyChange` — the new value plus the
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new value plus the
  *  field name, so you don't poke at `event.target`. Mirrors `Input`/`Checkbox`. */
 export interface RadioChangeAttrs {
     value: string | null;
@@ -25,12 +25,12 @@ export interface RadioOption {
     hint?: React.ReactNode;
     /** Disable just this option (skipped by keyboard, dropped from the tab order). */
     disabled?: boolean;
-    /** Override this one option's tone (defaults to the group's `tone`). */
+    /** Override this one option's mark tone (defaults to the group's `tone`). */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Override this one option's text tone (defaults to the group's `toneText`). */
+    toneText?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
     /** Override this one option's size (defaults to the group's `size`). */
     size?: "small" | "medium" | "large";
-    /** Override this one option's priority (defaults to the group's `priority`). */
-    priority?: "primary" | "secondary";
 }
 /** Public props for `<RadioGroup>` — the single-select container. */
 export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"> {
@@ -58,7 +58,7 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
     onChange?: (event: Event) => void;
     /** Like `onChange`, but with a `{ value, name }` snapshot as the 2nd argument —
      *  the ergonomic "just give me the new value" callback (mirrors `Input`). */
-    onAnyChange?: (event: Event, attrs: RadioChangeAttrs) => void;
+    onValueChange?: (event: Event, attrs: RadioChangeAttrs) => void;
     /** Fired when focus enters the group (any option) — wired to `focusin`, since
      *  focus lands on an individual option, not the group element itself. */
     onFocus?: (event: FocusEvent) => void;
@@ -78,20 +78,20 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
      *  the neutral default.
      *  @defaultValue 'neutral' */
     status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
-    /** Tone applied to every option (an option's own `tone` wins), or any literal
-     *  CSS color for a one-off custom tone. Tints fill, label, hint, and the
-     *  unselected ring border. Named tones track light/dark mode.
+    /** Mark tone applied to every option (an option's own `tone` wins), or any literal
+     *  CSS color for a one-off custom tone. Colours the selected-ring fill + dot and
+     *  the unselected ring border. Named tones track light/dark mode. The option text
+     *  stays neutral — use `toneText` for that.
      *  @defaultValue 'neutral' */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Text tone applied to every option's label + hint (an option's own `toneText`
+     *  wins), independent of `tone`. A named tone or any literal CSS color. Omit to
+     *  leave the text neutral.
+     *  @defaultValue 'neutral' */
+    toneText?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
     /** Size applied to every option (an option's own `size` wins).
      *  @defaultValue 'medium' */
     size?: "small" | "medium" | "large";
-    /** Visual priority applied to every option (an option's own `priority` wins).
-     *  `primary` fills the selected ring with the tone colour and draws a white dot;
-     *  `secondary` keeps the ring unfilled and draws the border + dot in the tone
-     *  colour (an outlined look).
-     *  @defaultValue 'primary' */
-    priority?: "primary" | "secondary";
     /** Disable the whole group. */
     disabled?: boolean;
     /** Layout + arrow-key axis.
@@ -115,5 +115,5 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
  *
  * Requires `@antadesign/anta/elements` (client-side only).
  */
-export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onAnyChange, onFocus, onBlur, name, label, hint, status, tone, size, priority, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
+export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneText, size, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
 export {};

package/dist/components/RadioGroup.js

@@ -11,7 +11,7 @@ const RadioGroup = ({
   defaultValue,
   onStateChange,
   onChange,
-  onAnyChange,
+  onValueChange,
   onFocus,
   onBlur,
   name,
@@ -19,8 +19,8 @@ const RadioGroup = ({
   hint,
   status,
   tone,
+  toneText,
   size,
-  priority,
   disabled,
   orientation,
   className,
@@ -47,9 +47,9 @@ const RadioGroup = ({
     if (detail.reason === "user" && event.defaultPrevented) return;
     setInternalValue(detail.next ?? void 0);
   };
-  const onchange = onChange || onAnyChange ? (e) => {
+  const onchange = onChange || onValueChange ? (e) => {
     onChange?.(e);
-    onAnyChange?.(e, radioAttrsOf(e.currentTarget));
+    onValueChange?.(e, radioAttrsOf(e.currentTarget));
   } : void 0;
   return /* @__PURE__ */ jsxs(
     "a-radio-group",
@@ -64,8 +64,8 @@ const RadioGroup = ({
       name,
       status: status && status !== "neutral" ? status : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      "tone-text": toneText && toneText !== "neutral" ? toneText : void 0,
       size: size && size !== "medium" ? size : void 0,
-      priority: priority && priority !== "primary" ? priority : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
       onstatechange,
@@ -73,7 +73,7 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(tone, "--radio-tone-source", style),
+      style: toneStyle(toneText, "--radio-tone-text-source", toneStyle(tone, "--radio-tone-source", style)),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
@@ -87,10 +87,10 @@ const RadioGroup = ({
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
               tone: o.tone && o.tone !== "neutral" ? o.tone : void 0,
+              "tone-text": o.toneText && o.toneText !== "neutral" ? o.toneText : void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
-              priority: o.priority && o.priority !== "primary" ? o.priority : void 0,
               disabled: o.disabled ? "" : void 0,
-              style: toneStyle(o.tone, "--radio-tone-source"),
+              style: toneStyle(o.toneText, "--radio-tone-text-source", toneStyle(o.tone, "--radio-tone-source")),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Tab.d.ts

@@ -0,0 +1,34 @@
+import type { IconShape } from "../elements/a-icon.shapes";
+/** One tab in a `<Tabs>` strip. A **config component**: `Tabs` reads these props to
+ *  render the underlying `<a-tab>` (`tabindex`, `role`, `aria-controls`, and
+ *  selection are all `Tabs`' job), so `<Tab>` renders nothing on its own. */
+export interface TabProps {
+    /** This tab's identity — pairs it with the `<TabPanel value="…">` of the same
+     *  value, and the value reported by `onStateChange` / `onChange`. Unique per strip. */
+    value: string;
+    /** Visible label. Alternatively pass `children`. */
+    label?: React.ReactNode;
+    /** Tab content when you need more than a string — used if `label` is omitted. */
+    children?: React.ReactNode;
+    /** Leading icon shape, rendered before the label. */
+    icon?: IconShape;
+    /** Trailing icon shape, rendered after the label. */
+    iconTrailing?: IconShape;
+    /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colours this one tab's
+     *  label + icons (all priorities/modes, named or custom colour) and, when it's the
+     *  active tab, its indicator. For a **custom literal colour** the sliding indicator can't
+     *  adopt it (the shared moving element can't read a descendant's colour), so a custom tone
+     *  colours the label everywhere and the indicator only in `noslide`; the six **named**
+     *  tones colour both in every mode. Overrides the strip's `tone` for this tab.
+     *  @defaultValue inherits the strip's `tone` */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
+     *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
+    disabled?: boolean;
+}
+/**
+ * A tab inside `<Tabs>`. Configuration only — `Tabs` reads its props and renders the
+ * real `<a-tab>`, so this component itself produces no DOM. Use it as a direct child
+ * of `<Tabs>`; rendering it elsewhere does nothing.
+ */
+export declare const Tab: (_props: TabProps) => null;

package/dist/components/Tab.js

@@ -0,0 +1,4 @@
+const Tab = (_props) => null;
+export {
+  Tab
+};

package/dist/components/TabPanel.d.ts

@@ -0,0 +1,22 @@
+import type { TabsMounting } from "./Tabs";
+/** A panel paired to the `<Tab>` of the same `value`. A **config component**: `Tabs`
+ *  reads these props and renders the underlying `<a-tabpanel>` (id wiring, show/hide,
+ *  `inert`, and the mounting strategy are all `Tabs`' job). */
+export interface TabPanelProps {
+    /** Pairs this panel with the `<Tab value="…">` of the same value. */
+    value: string;
+    /** Panel content — arbitrary React/Preact. */
+    children?: React.ReactNode;
+    /** Override the `<Tabs mounting>` strategy for just this panel. See `TabsMounting`. */
+    mounting?: TabsMounting;
+    /** CSS class on the rendered `<a-tabpanel>`. */
+    className?: string;
+    /** Inline style on the rendered `<a-tabpanel>`. */
+    style?: React.CSSProperties;
+}
+/**
+ * A tab panel inside `<Tabs>`. Configuration only — `Tabs` reads its props and renders
+ * the real `<a-tabpanel>`, so this component itself produces no DOM. Use it as a direct
+ * child of `<Tabs>`; rendering it elsewhere does nothing.
+ */
+export declare const TabPanel: (_props: TabPanelProps) => null;

package/dist/components/TabPanel.js

@@ -0,0 +1,4 @@
+const TabPanel = (_props) => null;
+export {
+  TabPanel
+};