@antadesign/anta 0.3.27 → 0.3.29

package/dist/elements/focus.js

@@ -0,0 +1,41 @@
+import { isFocusable, tabbable } from "tabbable";
+const options = { getShadowRoot: true };
+function activeFocus(doc) {
+  let active = doc.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+function focusParent(node) {
+  if (node.nodeType === 1 && node.assignedSlot) return node.assignedSlot;
+  const parent = node.parentNode;
+  return parent?.nodeType === 11 && "host" in parent ? parent.host : parent;
+}
+function containsFocus(scope, node) {
+  while (node) {
+    if (node === scope) return true;
+    node = focusParent(node);
+  }
+  return false;
+}
+function canFocus(node) {
+  return !!node && "focus" in node && isFocusable(node, options);
+}
+function tabStops(scope) {
+  return tabbable(scope, options);
+}
+function cycleFocus(nodes, current, backward, fallback) {
+  const index = nodes.indexOf(current);
+  const next = index < 0 ? backward ? nodes.length - 1 : 0 : (index + (backward ? -1 : 1) + nodes.length) % nodes.length;
+  const target = nodes[next] ?? fallback;
+  if (!target) return false;
+  target.focus();
+  return true;
+}
+export {
+  activeFocus,
+  canFocus,
+  containsFocus,
+  cycleFocus,
+  focusParent,
+  tabStops
+};

package/dist/elements/index.d.ts

@@ -19,6 +19,7 @@ export { ALoaderElement, register_a_loader } from './a-loader';
 export { ATextElement, register_a_text } from './a-text';
 export { ABoxElement, register_a_box } from './a-box';
 export { ACaptureElement, register_a_capture } from './a-capture';
+export { APanelElement, register_a_panel } from './a-panel';
 export { AIconElement, register_a_icon } from './a-icon';
 export { AButtonElement, register_a_button } from './a-button';
 export { ACopyElement, register_a_copy } from './a-copy';

package/dist/elements/index.js

@@ -4,6 +4,7 @@ import { ALoaderElement, register_a_loader } from "./a-loader";
 import { ATextElement, register_a_text } from "./a-text";
 import { ABoxElement, register_a_box } from "./a-box";
 import { ACaptureElement, register_a_capture } from "./a-capture";
+import { APanelElement, register_a_panel } from "./a-panel";
 import { AIconElement, register_a_icon } from "./a-icon";
 import { AButtonElement, register_a_button } from "./a-button";
 import { ACopyElement, register_a_copy } from "./a-copy";
@@ -51,6 +52,7 @@ export {
   AMenuGroupElement,
   AMenuItemElement,
   AMenuSeparatorElement,
+  APanelElement,
   AProgressElement,
   ARadioElement,
   ARadioGroupElement,
@@ -82,6 +84,7 @@ export {
   register_a_menu_group,
   register_a_menu_item,
   register_a_menu_separator,
+  register_a_panel,
   register_a_progress,
   register_a_radio,
   register_a_radio_group,

package/dist/elements/panel-focus.d.ts

@@ -0,0 +1,10 @@
+export { activeFocus } from './focus';
+/** One active Panel scope per document; later scopes suspend earlier ones. */
+export declare class PanelFocusScope {
+    #private;
+    constructor(surface: HTMLSlotElement);
+    activate(previous: Element | null): void;
+    focusInside(preferred?: Element | null): void;
+    /** Remove listeners before hiding the popover, then restore focus after layout. */
+    deactivate(): () => void;
+}

package/dist/elements/panel-focus.js

@@ -0,0 +1,86 @@
+import { activeFocus, canFocus, containsFocus, cycleFocus, tabStops } from "./focus";
+import { activeFocus as activeFocus2 } from "./focus";
+const scopes = /* @__PURE__ */ new WeakMap();
+class PanelFocusScope {
+  #stack;
+  #doc;
+  #surface;
+  #previous = null;
+  #lastInside = null;
+  #active = false;
+  #redirecting = false;
+  constructor(surface) {
+    this.#surface = surface;
+    this.#doc = surface.ownerDocument;
+    this.#stack = scopes.get(this.#doc) ?? [];
+    scopes.set(this.#doc, this.#stack);
+  }
+  get #ownsFocus() {
+    return this.#stack.at(-1) === this && this.#surface.matches(":popover-open");
+  }
+  activate(previous) {
+    if (this.#active) return;
+    this.#active = true;
+    this.#previous = previous;
+    this.#lastInside = containsFocus(this.#surface, previous) ? previous : null;
+    this.#stack.push(this);
+    this.#doc.addEventListener("focusin", this.#onFocus, true);
+    this.#doc.addEventListener("keydown", this.#onKeyDown);
+  }
+  focusInside(preferred = this.#lastInside) {
+    if (!this.#ownsFocus) return;
+    const target = containsFocus(this.#surface, preferred) && canFocus(preferred) ? preferred : tabStops(this.#surface)[0] ?? this.#surface;
+    target.focus({ preventScroll: true });
+  }
+  /** Remove listeners before hiding the popover, then restore focus after layout. */
+  deactivate() {
+    if (!this.#active) return () => {
+    };
+    const current = activeFocus(this.#doc);
+    const restore = this.#stack.at(-1) === this && containsFocus(this.#surface, current);
+    const previous = this.#previous;
+    const target = previous && !containsFocus(this.#surface, previous) ? previous : current;
+    this.#active = false;
+    const index = this.#stack.indexOf(this);
+    if (index >= 0) this.#stack.splice(index, 1);
+    this.#doc.removeEventListener("focusin", this.#onFocus, true);
+    this.#doc.removeEventListener("keydown", this.#onKeyDown);
+    this.#previous = this.#lastInside = null;
+    return () => {
+      if (!restore) return;
+      if (canFocus(target)) target.focus({ preventScroll: true });
+      else if (canFocus(current)) current.focus({ preventScroll: true });
+      else if (canFocus(previous)) previous.focus({ preventScroll: true });
+      else this.#stack.at(-1)?.focusInside();
+    };
+  }
+  #inModal(path) {
+    for (const node of path) {
+      if (node === this.#surface) return false;
+      if (node instanceof Element && node.matches(":modal")) return true;
+    }
+    return false;
+  }
+  #onFocus = (event) => {
+    if (!this.#ownsFocus || this.#redirecting) return;
+    const path = event.composedPath();
+    if (this.#inModal(path)) return;
+    if (path.includes(this.#surface)) {
+      this.#lastInside = activeFocus(this.#doc);
+      return;
+    }
+    this.#redirecting = true;
+    this.focusInside();
+    this.#redirecting = false;
+  };
+  #onKeyDown = (event) => {
+    if (!this.#ownsFocus || event.defaultPrevented || event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (this.#inModal(event.composedPath())) return;
+    event.preventDefault();
+    cycleFocus(tabStops(this.#surface), activeFocus(this.#doc), event.shiftKey, this.#surface);
+  };
+}
+export {
+  PanelFocusScope,
+  activeFocus2 as activeFocus
+};

package/dist/elements/shadow-aria.d.ts

@@ -0,0 +1,10 @@
+/** Standard semantic attributes that a shadow-hosted control may consume from
+ * its custom-element host. Keeping the public spelling standard lets raw HTML,
+ * React, Preact, and custom JSX runtimes use the same API. */
+export declare const SHADOW_ARIA_ATTRIBUTES: readonly ["role", "aria-activedescendant", "aria-atomic", "aria-autocomplete", "aria-braillelabel", "aria-brailleroledescription", "aria-busy", "aria-checked", "aria-colcount", "aria-colindex", "aria-colspan", "aria-controls", "aria-current", "aria-description", "aria-describedby", "aria-details", "aria-disabled", "aria-dropeffect", "aria-errormessage", "aria-expanded", "aria-flowto", "aria-grabbed", "aria-haspopup", "aria-hidden", "aria-invalid", "aria-keyshortcuts", "aria-label", "aria-labelledby", "aria-level", "aria-live", "aria-modal", "aria-multiline", "aria-multiselectable", "aria-orientation", "aria-owns", "aria-placeholder", "aria-posinset", "aria-pressed", "aria-readonly", "aria-relevant", "aria-required", "aria-roledescription", "aria-rowcount", "aria-rowindex", "aria-rowspan", "aria-selected", "aria-setsize", "aria-sort", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"];
+export type ShadowAriaAttribute = (typeof SHADOW_ARIA_ATTRIBUTES)[number];
+export declare const SHADOW_ARIA_ATTRIBUTE_SET: Set<string>;
+export declare function ariaAttributeProperty(name: ShadowAriaAttribute): string;
+/** Apply one consumed host attribute to a shadow control. ID-reference ARIA
+ * uses element reflection so a shadow control can reference the host's tree. */
+export declare function applyShadowAria(host: Element, target: Element, name: ShadowAriaAttribute, value: string | null): void;

package/dist/elements/shadow-aria.js

@@ -0,0 +1,155 @@
+const SHADOW_ARIA_ATTRIBUTES = [
+  "role",
+  "aria-activedescendant",
+  "aria-atomic",
+  "aria-autocomplete",
+  "aria-braillelabel",
+  "aria-brailleroledescription",
+  "aria-busy",
+  "aria-checked",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colspan",
+  "aria-controls",
+  "aria-current",
+  "aria-description",
+  "aria-describedby",
+  "aria-details",
+  "aria-disabled",
+  "aria-dropeffect",
+  "aria-errormessage",
+  "aria-expanded",
+  "aria-flowto",
+  "aria-grabbed",
+  "aria-haspopup",
+  "aria-hidden",
+  "aria-invalid",
+  "aria-keyshortcuts",
+  "aria-label",
+  "aria-labelledby",
+  "aria-level",
+  "aria-live",
+  "aria-modal",
+  "aria-multiline",
+  "aria-multiselectable",
+  "aria-orientation",
+  "aria-owns",
+  "aria-placeholder",
+  "aria-posinset",
+  "aria-pressed",
+  "aria-readonly",
+  "aria-relevant",
+  "aria-required",
+  "aria-roledescription",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowspan",
+  "aria-selected",
+  "aria-setsize",
+  "aria-sort",
+  "aria-valuemax",
+  "aria-valuemin",
+  "aria-valuenow",
+  "aria-valuetext"
+];
+const SHADOW_ARIA_ATTRIBUTE_SET = new Set(SHADOW_ARIA_ATTRIBUTES);
+const SHADOW_ARIA_PROPERTIES = {
+  role: "role",
+  "aria-activedescendant": "ariaActiveDescendant",
+  "aria-atomic": "ariaAtomic",
+  "aria-autocomplete": "ariaAutoComplete",
+  "aria-braillelabel": "ariaBrailleLabel",
+  "aria-brailleroledescription": "ariaBrailleRoleDescription",
+  "aria-busy": "ariaBusy",
+  "aria-checked": "ariaChecked",
+  "aria-colcount": "ariaColCount",
+  "aria-colindex": "ariaColIndex",
+  "aria-colspan": "ariaColSpan",
+  "aria-controls": "ariaControls",
+  "aria-current": "ariaCurrent",
+  "aria-description": "ariaDescription",
+  "aria-describedby": "ariaDescribedBy",
+  "aria-details": "ariaDetails",
+  "aria-disabled": "ariaDisabled",
+  "aria-dropeffect": "ariaDropEffect",
+  "aria-errormessage": "ariaErrorMessage",
+  "aria-expanded": "ariaExpanded",
+  "aria-flowto": "ariaFlowTo",
+  "aria-grabbed": "ariaGrabbed",
+  "aria-haspopup": "ariaHasPopup",
+  "aria-hidden": "ariaHidden",
+  "aria-invalid": "ariaInvalid",
+  "aria-keyshortcuts": "ariaKeyShortcuts",
+  "aria-label": "ariaLabel",
+  "aria-labelledby": "ariaLabelledBy",
+  "aria-level": "ariaLevel",
+  "aria-live": "ariaLive",
+  "aria-modal": "ariaModal",
+  "aria-multiline": "ariaMultiLine",
+  "aria-multiselectable": "ariaMultiSelectable",
+  "aria-orientation": "ariaOrientation",
+  "aria-owns": "ariaOwns",
+  "aria-placeholder": "ariaPlaceholder",
+  "aria-posinset": "ariaPosInSet",
+  "aria-pressed": "ariaPressed",
+  "aria-readonly": "ariaReadOnly",
+  "aria-relevant": "ariaRelevant",
+  "aria-required": "ariaRequired",
+  "aria-roledescription": "ariaRoleDescription",
+  "aria-rowcount": "ariaRowCount",
+  "aria-rowindex": "ariaRowIndex",
+  "aria-rowspan": "ariaRowSpan",
+  "aria-selected": "ariaSelected",
+  "aria-setsize": "ariaSetSize",
+  "aria-sort": "ariaSort",
+  "aria-valuemax": "ariaValueMax",
+  "aria-valuemin": "ariaValueMin",
+  "aria-valuenow": "ariaValueNow",
+  "aria-valuetext": "ariaValueText"
+};
+function ariaAttributeProperty(name) {
+  return SHADOW_ARIA_PROPERTIES[name];
+}
+const ELEMENT_REFERENCE_PROPERTIES = {
+  "aria-activedescendant": "ariaActiveDescendantElement",
+  "aria-controls": "ariaControlsElements",
+  "aria-describedby": "ariaDescribedByElements",
+  "aria-details": "ariaDetailsElements",
+  "aria-errormessage": "ariaErrorMessageElements",
+  "aria-flowto": "ariaFlowToElements",
+  "aria-labelledby": "ariaLabelledByElements",
+  "aria-owns": "ariaOwnsElements"
+};
+function referencedElements(host, value) {
+  const root = host.getRootNode();
+  if (!("getElementById" in root)) return [];
+  return value.trim().split(/\s+/).filter(Boolean).map((id) => root.getElementById(id)).filter((element) => element != null);
+}
+function applyShadowAria(host, target, name, value) {
+  const property = ELEMENT_REFERENCE_PROPERTIES[name];
+  if (!property) {
+    if (value == null) target.removeAttribute(name);
+    else target.setAttribute(name, value);
+    return;
+  }
+  const reflected = target;
+  const elements = value == null ? [] : referencedElements(host, value);
+  try {
+    if (!(property in reflected)) throw new Error("ARIA element reflection is unavailable");
+    if (name === "aria-activedescendant") {
+      reflected.ariaActiveDescendantElement = elements[0] ?? null;
+    } else {
+      ;
+      reflected[property] = elements;
+    }
+  } catch {
+    if (value == null) target.removeAttribute(name);
+    else target.setAttribute(name, value);
+  }
+}
+export {
+  SHADOW_ARIA_ATTRIBUTES,
+  SHADOW_ARIA_ATTRIBUTE_SET,
+  applyShadowAria,
+  ariaAttributeProperty
+};

package/dist/general_types.d.ts

@@ -29,6 +29,9 @@ export interface BaseProps {
     /** Any `aria-*` attribute is forwarded to the rendered element. */
     [key: `aria-${string}`]: unknown;
 }
+/** Where a stateful component applies its tone. `all` colors both resting and
+ * selected chrome; `selected` keeps resting chrome neutral. */
+export type ToneScope = 'all' | 'selected';
 /** Safe presentation attributes for a data-rendered option. They land on the
  * option's rendered row, rather than on the enclosing control. Menu-based
  * components reserve `data-menu-*` for their own selection and focus behavior. */
@@ -269,6 +272,22 @@ export interface ATextAttributes extends BaseAttributes {
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
+/** Panel presentation state. Normal panels remain visible in their parent layout. */
+export type PanelState = 'normal' | 'maximized';
+/** Attributes for the persistent viewport-capable container. */
+export interface APanelAttributes extends BaseAttributes {
+    state?: PanelState;
+    'default-state'?: PanelState;
+    onstatechange?: (event: CustomEvent<{
+        next: PanelState;
+        prev: PanelState;
+    }> | {
+        nativeEvent: CustomEvent<{
+            next: PanelState;
+            prev: PanelState;
+        }>;
+    }) => void;
+}
 /** Attributes for the opt-in light-DOM capture surface. */
 export interface ACaptureAttributes extends BaseAttributes {
     /** Space-separated accepted wheel directions. Bare means all; `none` preserves settling while declining input. */
@@ -315,20 +334,28 @@ export interface ABoxAttributes extends BaseAttributes {
      *  typed `attr()` read it from `--box-gap` in the host's inline style
      *  instead, which is what the JSX wrapper always sets. */
     gap?: boolean | '' | number | string;
+    /** CSS padding shorthand (`padding="8px 16px"`). Without typed `attr()`
+     * support, set `--box-padding` as well. The JSX wrapper supplies it. */
+    padding?: boolean | '' | number | string;
+    /** CSS margin shorthand (`margin="0 auto"`). Without typed `attr()`
+     * support, set `--box-margin` as well. The JSX wrapper supplies it. */
+    margin?: boolean | '' | number | string;
     /** Masks every edge that currently hides clipped content. */
     fade?: boolean | '';
-    /** What the box watches. `size` reports geometry and overflow through
-     *  `measurechange` and the CSS states; `context` reports the rendering
-     *  environment through `contextchange`; `all`, or a bare `observe`, does both.
-     *  A box without it (and without `fade`) runs no observers, so a listener
-     *  alone reports nothing. The JSX wrapper sets it from `observe` and from the
-     *  handlers you pass. */
-    observe?: 'size' | 'context' | 'all' | '';
+    /** Space-separated selections: `width`, `height`, `size`, `context`,
+     * `overflow`, `edges`, `scroll`, or `all`, in any order. `size` selects
+     * width and height; `edges` selects edge transitions. A bare
+     * attribute means `all`. Omission runs no observers unless `fade` is set;
+     * a native event listener alone does not enable observation. */
+    observe?: string;
+    /** Minimum interval between measurement events in milliseconds. Omit or
+     * pass `0` for frame-based reporting. Invalid or negative values use `0`. */
+    throttle?: number | string;
     /** Depth of that mask, as a length value (`fade-size="2rem"`). Engines
      *  without typed `attr()` read it from `--box-fade-size` in the host's
      *  inline style instead, which is what the JSX wrapper always sets. */
     'fade-size'?: number | string;
-    /** Native event fired when geometry or overflow changes. */
+    /** Native event fired when a selected measurement field changes. */
     onmeasurechange?: (event: CustomEvent<BoxMeasurementChange> | {
         nativeEvent: CustomEvent<BoxMeasurementChange>;
     }) => void;
@@ -517,7 +544,7 @@ export interface ATooltipAttributes extends BaseAttributes {
     /** Show delay in milliseconds. Never use `0` — use ~`50`. Defaults to 300. */
     delay?: number | string;
     /** Preferred side; auto-flips when there's no room. Defaults to `'bottom'`. */
-    placement?: 'top' | 'bottom';
+    placement?: 'top' | 'bottom' | 'left';
     /** Follow the cursor instead of pinning under the anchor (pinned is the
      *  default). Presence-based (`''` on, omit off). */
     follow?: boolean | '';
@@ -549,15 +576,13 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Mark color in every state — checked fill *and* unselected box border — or any
-     *  literal CSS color for a one-off custom tone. Named tones track light/dark mode
-     *  automatically. `'neutral'` is the default (same as omitting it). The label + hint
+    /** Mark color, or any literal CSS color for a one-off custom tone. Named tones
+     *  track light/dark mode automatically. Its scope is controlled by `tone-scope`. `'neutral'` is the
+     *  default (same as omitting it). The label + hint
      *  stay neutral — recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the checked mark only — the empty box stays
-     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
-     *  off-state border and `tone-selected` the checked fill. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state (`all`, the default) or only while checked. */
+    'tone-scope'?: ToneScope;
     /** Size variant. `small` = 14px, `medium` (default) = 16px, `large` = 18px box. */
     size?: 'small' | 'medium' | 'large';
     /** Controlled state — the element reflects changes to this attribute. Use this
@@ -603,10 +628,10 @@ export interface ACheckboxAttributes extends BaseAttributes {
  * wrapper supplies both.
  */
 export interface ASwitchAttributes extends BaseAttributes {
-    /** Track and thumb color. A tinted tone also colors the unchecked chrome. */
+    /** Track and thumb color. Its scope is controlled by `tone-scope`. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Checked-track-only color. The unchecked track and thumb stay neutral. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state (`all`, the default) or only while checked. */
+    'tone-scope'?: ToneScope;
     /** Size variant. `small` = 26×16px, `medium` (default) = 30×18px, `large` = 34×20px. */
     size?: 'small' | 'medium' | 'large';
     /** Fully round the thumb and track, or pass a custom track radius via a length
@@ -646,6 +671,9 @@ export interface ASwitchAttributes extends BaseAttributes {
  * for styling, and `:state(filled)` / `:state(invalid)` as CSS hooks.
  */
 export interface AInputAttributes extends BaseAttributes {
+    /** Standard ARIA attributes describe the native input/textarea in the shadow
+     * tree and are delegated there when the element upgrades. */
+    [key: `aria-${string}`]: unknown;
     /** Controlled value (string). Reflected to the shadow control only when it
      *  differs, so the caret survives re-renders. */
     value?: string;
@@ -668,6 +696,8 @@ export interface AInputAttributes extends BaseAttributes {
     disabled?: boolean | '';
     /** Read-only state. Presence-based. */
     readonly?: boolean | '';
+    /** Render a native button inside the field surface. Presence-based. */
+    button?: boolean | '';
     /** Required — drives native validity. Presence-based. */
     required?: boolean | '';
     /** Dim the leading/trailing adornments at rest (0.6); they brighten to full
@@ -766,6 +796,9 @@ export interface ASliderAttributes extends BaseAttributes {
 /** Attributes for the `<a-input-time>` custom element — a segmented wall-clock
  *  time field (hour / minute / AM-PM native text-input sections in one box). */
 export interface AInputTimeAttributes extends BaseAttributes {
+    /** Standard naming/description ARIA describes the complete segmented field;
+     * invalid/error state is delegated to its focusable segments. */
+    [key: `aria-${string}`]: unknown;
     /** Controlled value — 24-hour `"HH:mm"`, `''` when incomplete. */
     value?: string;
     /** Focus this field when its containing `a-dialog` opens. Presence-based. */
@@ -911,11 +944,9 @@ export interface AMenuAttributes extends BaseAttributes {
         next: 'open' | 'closed';
         prev: 'open' | 'closed';
     }>) => void;
-    /** Combobox-mode cursor report — fired when the active option changes (arrow
-     *  keys, or the list re-filtering), with `detail.id` the active option's `id`
-     *  (`null` when none). The element owns the keyboard cursor but must NOT write
-     *  `aria-activedescendant` on the (light-DOM) filter field itself; the reactive
-     *  layer that owns the field (e.g. `Select`) listens here and reflects it.
+    /** Combobox-mode cursor report for custom fields and observers. Fires when
+     *  the active option changes, with `detail.id` containing an authored option
+     *  ID or `null`. Built-in Anta Inputs receive a direct ARIA element relation.
      *  All-lowercase so React/Preact bind it to the CustomEvent. */
     onactivedescendant?: (e: CustomEvent<{
         id: string | null;
@@ -1066,15 +1097,13 @@ export interface ACopyAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Mark color in every state — selected ring fill + dot *and* unselected ring
-     *  border — or any literal CSS color for a one-off custom tone. Named tones track
-     *  light/dark mode. `'neutral'` is the default. The label + hint stay neutral —
+    /** Mark color, or any literal CSS color for a one-off custom tone. Named tones track
+     *  light/dark mode; `tone-scope` controls whether unselected chrome is tinted.
+     *  `'neutral'` is the default. The label + hint stay neutral —
      *  recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the selected mark only — an unselected ring stays
-     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
-     *  off-state border and `tone-selected` the selected fill. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state (`all`, the default) or only while selected. */
+    'tone-scope'?: ToneScope;
     /** Size variant. small=14px, medium=16px, large=18px control. */
     size?: 'small' | 'medium' | 'large';
     /** Disabled state. Presence-based (`''` on, omit off). */
@@ -1117,13 +1146,13 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     /** Form field name — the group submits `name=value`. */
     name?: string;
     /** Mark tone cascaded to children that don't set their own, or any literal CSS
-     *  color for a one-off custom tone. Colors every child's ring fill + dot *and*
-     *  unselected border. The option text stays neutral — recolor it in plain CSS via
-     *  the `--text-N-{tone}` tokens. */
+     *  color for a one-off custom tone. In `all` scope it colors every child's ring
+     *  fill, dot, and unselected border. The option text stays neutral — recolor it
+     *  in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the selected option only — every unselected ring
-     *  stays neutral grey. Cascaded to children that don't set their own. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply the cascaded `tone` to every state (`all`, the default) or only to the
+     * selected option. A child's explicit scope overrides the group. */
+    'tone-scope'?: ToneScope;
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
@@ -1266,11 +1295,10 @@ export interface ATabsAttributes extends BaseAttributes {
 /**
  * Attributes for the `<a-tabpanel>` styled tag.
  *
- * `<a-tabpanel>` has no JS — it's a CSS-only styled element. The `Tabs` wrapper renders
- * it, pairs it to its tab via id, and toggles visibility declaratively: `hidden`
- * (display:none) or `data-hide="visibility"` (keeps the layout box), plus `inert` while
- * hidden. Low-level attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`)
- * from `@antadesign/anta`.
+ * `<a-tabpanel>` finds its sibling `<a-tabs>`, exposes its active state through
+ * `ElementInternals`, and points its accessible label at the matching tab. Low-level
+ * attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`) from
+ * `@antadesign/anta`.
  */
 export interface ATabpanelAttributes extends BaseAttributes {
     /** Pairs the panel with the tab of the same value. The element reads its

package/dist/generate-icons.mjs

@@ -65,6 +65,9 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
   const cssLines = [
     '/* Auto-generated by @antadesign/anta. Do not edit by hand. */',
     '',
+    '@layer base, anta, components, utilities;',
+    '@layer anta.reset, anta.components, anta.theme;',
+    '',
     '@layer anta.components {',
     '',
   ]

package/dist/index.d.ts

@@ -30,8 +30,11 @@ export { Box } from './components/Box';
 export type { BoxProps } from './components/Box';
 export { Capture } from './components/Capture';
 export type { CaptureProps } from './components/Capture';
+export { Panel } from './components/Panel';
+export type { PanelProps } from './components/Panel';
+export type { PanelState } from './general_types';
 export type { CaptureInputCancelReason, CaptureInputDirection, CaptureInputDirections, CaptureInputGeometry, CaptureInputModifier, CapturePan, CapturePanInertia, CapturePanInput, CapturePointerActivationReason, CapturePointerCapture, CapturePointerInput, CapturePointerStart, CapturePointerType, CaptureWheelActivation, CaptureWheelActivationReason, CaptureWheelInput, CaptureWheelSettle, SerializedMouseEvent, SerializedPointerEvent, SerializedWheelEvent, } from './capture-types';
-export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
+export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxObservation, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';
@@ -98,7 +101,7 @@ export { Banner } from './components/Banner';
 export type { BannerProps } from './components/Banner';
 export { Toaster, createToaster } from './components/Toaster';
 export type { ToasterProps, ToasterManager, ToastOptions, ToastPlacement, ToastContent, ToastRender, } from './components/Toaster';
-export type { BaseProps, BaseAttributes } from './general_types';
+export type { BaseProps, BaseAttributes, ToneScope } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';
 /**

package/dist/index.js

@@ -17,6 +17,7 @@ import { Loader } from "./components/Loader";
 import { Text } from "./components/Text";
 import { Box } from "./components/Box";
 import { Capture } from "./components/Capture";
+import { Panel } from "./components/Panel";
 import { Title } from "./components/Title";
 import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
@@ -93,6 +94,7 @@ export {
   MenuItem,
   MenuItemCopy,
   MenuSeparator,
+  Panel,
   Progress,
   RadioGroup,
   Select,

package/dist/jsx-runtime.d.ts

@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ACaptureAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
+import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ACaptureAttributes, APanelAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -62,6 +62,7 @@ export interface AntaIntrinsicElements {
     'a-text': ATextAttributes;
     'a-box': ABoxAttributes;
     'a-capture': ACaptureAttributes;
+    'a-panel': APanelAttributes;
     'a-title': ATitleAttributes;
     'a-tag': ATagAttributes;
     'a-tag-label': BaseAttributes;
@@ -101,6 +102,14 @@ export interface AntaIntrinsicElements {
     'a-menu-separator': BaseAttributes;
     'a-menu-header': BaseAttributes;
     'a-menu-footer': BaseAttributes;
+    'a-select-field': BaseAttributes & {
+        size?: string;
+        status?: string;
+        disabled?: boolean | '';
+    };
+    'a-select-label': BaseAttributes;
+    'a-select-hint': BaseAttributes;
+    'a-select-leading': BaseAttributes;
     'a-select-header': BaseAttributes;
     'a-select-footer': BaseAttributes;
     'a-select-chevron': BaseAttributes & {