@antadesign/anta 0.3.27 → 0.3.29

package/dist/components/Banner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 const Banner = ({
   message,
@@ -29,7 +29,7 @@ const Banner = ({
     {
       state: controlled ? dismissed ? "closed" : "open" : void 0,
       "default-state": !controlled ? defaultDismissed ? "closed" : "open" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       align: align === "center" ? "center" : void 0,
       round: roundAttr(round),
       role,

package/dist/components/Box.d.ts

@@ -1,9 +1,9 @@
-import type { BoxContextChange, BoxDisplay, BoxMeasurementChange } from '../box-types';
+import type { BoxContextChange, BoxDisplay, BoxMeasurementChange, BoxObservation } from '../box-types';
 import type { BaseProps } from '../general_types';
 /** JSX props for the observing light-DOM `<a-box>` container. */
 export interface BoxProps extends BaseProps {
-    /** Layout model for the host. All other layout, sizing, mask, and shadow
-     * properties stay ordinary `className` / `style` CSS on the Box itself.
+    /** Layout model for the host. Sizing, alignment, mask, and shadow properties
+     * stay ordinary `className` / `style` CSS on the Box itself.
      * @defaultValue block */
     display?: BoxDisplay;
     /** Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
@@ -14,12 +14,28 @@ export interface BoxProps extends BaseProps {
      * pixels; a string is any CSS length or two-value gap (`'1rem'`,
      * `'8px 16px'`). Applies while the Box is a flex or grid container. */
     gap?: number | string;
-    /** What the Box watches, when a handler is not what turns it on. `'size'`
-     * keeps the overflow CSS states (`:state(clipped-x)`, `:state(scrollable-y)`,
-     * …) current — reach for it when your own CSS is the only reader. `'context'`
-     * and `'all'` are there for symmetry; passing `onMeasureChange` or
-     * `onContextChange` already turns the matching half on. */
-    observe?: 'size' | 'context' | 'all';
+    /** Inner spacing, matching CSS `padding`. Numbers are pixels; strings accept
+     * CSS shorthand, percentages, and custom properties. Omission adds no style. */
+    padding?: number | string;
+    /** Outer spacing, matching CSS `margin`. Numbers are pixels; strings accept
+     * CSS shorthand, `auto`, negative lengths, and custom properties.
+     * Omission adds no style. */
+    margin?: number | string;
+    /** One selection or an array of selections, in any order. `'size'` watches width
+     * and height; `'context'` watches rendering context; `'overflow'` watches
+     * content dimensions and clipping. `'edges'` reports which edges hide content;
+     * `'scroll'` reports offsets, potentially every frame; `'all'` selects everything.
+     * Selections are independent: use `['size', 'edges']` to combine them.
+     * A measurement handler implies `'size'` when no measurement is selected;
+     * a context handler adds `'context'`. Size skips content and scroll observers;
+     * overflow adds content observation; hidden edges and scroll add scroll reads.
+     * Without handlers or `fade`, omission stays idle. */
+    observe?: BoxObservation | readonly BoxObservation[];
+    /** Minimum interval between measurement events, in milliseconds. The first
+     * report has no added delay; a trailing report delivers the latest values.
+     * Active observers and CSS clipping states are not throttled.
+     * @defaultValue 0 */
+    throttle?: number;
     /** Fades out every edge that currently hides clipped content, and drops the
      * fade from an edge once the reader scrolls to it. */
     fade?: boolean;
@@ -27,8 +43,8 @@ export interface BoxProps extends BaseProps {
      * length.
      * @defaultValue 24 */
     fadeSize?: number | string;
-    /** Fired after Box geometry or its content-overflow state changes. `detail`
-     * contains the changed fields and a full current snapshot. */
+    /** Fired when a selected measurement field changes. `detail` contains all
+     * fields changed since the last event and a full current snapshot. */
     onMeasureChange?: (event: CustomEvent<BoxMeasurementChange>, detail: BoxMeasurementChange) => void;
     /** Fired after Box's browser and local rendering context changes. `detail`
      * contains the changed fields and a full current snapshot. */
@@ -49,4 +65,4 @@ export interface BoxProps extends BaseProps {
  * </Box>
  * ```
  */
-export declare const Box: ({ display, round, gap, observe, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;
+export declare const Box: ({ display, round, gap, padding, margin, observe, throttle, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;

package/dist/components/Box.js

@@ -6,19 +6,22 @@ import {
   roundAttr,
   roundStyle
 } from "../anta_helpers";
+import { boxObservation } from "../box-observation";
 function observeAttr(observe, onMeasureChange, onContextChange) {
-  const size = observe === "size" || observe === "all" || onMeasureChange != null;
-  const context = observe === "context" || observe === "all" || onContextChange != null;
-  if (size && context) return "all";
-  if (size) return "size";
-  if (context) return "context";
-  return void 0;
+  const tokens = [...new Set(observe == null ? [] : typeof observe === "string" ? [observe] : observe)];
+  const { fields, context } = boxObservation(tokens.join(" ") || null);
+  if (onMeasureChange != null && fields.size === 0) tokens.push("size");
+  if (onContextChange != null && !context) tokens.push("context");
+  return tokens.join(" ") || void 0;
 }
 const Box = ({
   display,
   round,
   gap,
+  padding,
+  margin,
   observe,
+  throttle,
   fade,
   fadeSize,
   onMeasureChange,
@@ -28,23 +31,27 @@ const Box = ({
   children,
   ...rest
 }) => {
+  let boxStyle = roundStyle(round, "--box-round", style);
+  boxStyle = lengthStyle(gap, "--box-gap", boxStyle);
+  boxStyle = lengthStyle(padding, "--box-padding", boxStyle);
+  boxStyle = lengthStyle(margin, "--box-margin", boxStyle);
+  boxStyle = lengthStyle(fade ? fadeSize : void 0, "--box-fade-size", boxStyle);
   return /* @__PURE__ */ jsx(
     "a-box",
     {
       display: display === "block" ? void 0 : display,
       round: roundAttr(round),
       gap: gap != null ? "" : void 0,
+      padding: padding != null ? "" : void 0,
+      margin: margin != null ? "" : void 0,
       observe: observeAttr(observe, onMeasureChange, onContextChange),
+      throttle,
       fade: fade ? "" : void 0,
       "fade-size": fade && fadeSize != null ? cssLength(fadeSize) : void 0,
       onmeasurechange: customEventHandler(onMeasureChange),
       oncontextchange: customEventHandler(onContextChange),
       class: className,
-      style: lengthStyle(
-        fade ? fadeSize : void 0,
-        "--box-fade-size",
-        lengthStyle(gap, "--box-gap", roundStyle(round, "--box-round", style))
-      ),
+      style: boxStyle,
       ...rest,
       children
     }

package/dist/components/Breadcrumbs.css

@@ -1 +1 @@
-@layer anta.components{a-breadcrumbs{--breadcrumb-gap: 1px;--breadcrumb-separator-color: var(--text-5);--breadcrumb-separator-icon-size: 16px;--breadcrumb-separator-font-size: 15px;display:flex;align-items:center;gap:var(--breadcrumb-gap);width:max-content;min-width:100%;max-width:100%;overflow-x:auto}a-breadcrumbs[data-size=small]{--breadcrumb-separator-icon-size: 14px;--breadcrumb-separator-font-size: 13px}a-breadcrumbs[data-size=large]{--breadcrumb-separator-icon-size: 18px;--breadcrumb-separator-font-size: 17px}a-breadcrumbs[data-paddingless]{--breadcrumb-gap: .75ch}a-breadcrumbs[data-separator-icon]{--breadcrumb-gap: 0}a-breadcrumbs>*{flex:none}a-breadcrumb-separator{display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--breadcrumb-separator-color);font-family:var(--sans-serif);font-size:var(--breadcrumb-separator-font-size);line-height:1;user-select:none}a-breadcrumb-separator>a-icon{--icon-size: var(--breadcrumb-separator-icon-size)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-breadcrumbs{--breadcrumb-gap: 1px;--breadcrumb-separator-color: var(--text-5);--breadcrumb-separator-icon-size: 16px;--breadcrumb-separator-font-size: 15px;display:flex;align-items:center;gap:var(--breadcrumb-gap);width:max-content;min-width:100%;max-width:100%}a-breadcrumbs[data-size=small]{--breadcrumb-separator-icon-size: 14px;--breadcrumb-separator-font-size: 13px}a-breadcrumbs[data-size=large]{--breadcrumb-separator-icon-size: 18px;--breadcrumb-separator-font-size: 17px}a-breadcrumbs[data-paddingless]{--breadcrumb-gap: .75ch}a-breadcrumbs[data-separator-icon]{--breadcrumb-gap: 0}a-breadcrumbs>*{flex:none}a-breadcrumb-separator{display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--breadcrumb-separator-color);font-family:var(--sans-serif);font-size:var(--breadcrumb-separator-font-size);line-height:1;user-select:none}a-breadcrumb-separator>a-icon{--icon-size: var(--breadcrumb-separator-icon-size)}}

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -27,7 +27,7 @@ const Button = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const unavailable = disabled || loading;
   const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;

package/dist/components/Calendar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import cn from "clsx";
 import { Temporal } from "temporal-polyfill";
-import { useId, useMemo, useState } from "../jsx-runtime";
+import { useMemo, useState } from "../jsx-runtime";
 import { nativeStateChange } from "../anta_helpers";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
@@ -50,7 +50,6 @@ const Calendar = ({
   }
   const [focusReq, setFocusReq] = useState(null);
   const [jumpOpen, setJumpOpen] = useState(false);
-  const headingId = useId();
   const month = buildMonth({ anchor: effectiveCursor, locale: resolvedLocale, min: minD, max: maxD, selected, today });
   const cursorIso = effectiveCursor.toString();
   const [lastFocusSignal, setLastFocusSignal] = useState(focusSignal);
@@ -154,7 +153,6 @@ const Calendar = ({
           /* @__PURE__ */ jsx(
             Button,
             {
-              id: headingId,
               "data-part": "heading",
               priority: "tertiary",
               size,
@@ -181,8 +179,7 @@ const Calendar = ({
           "a-calendar",
           {
             role: "group",
-            "aria-labelledby": headingId,
-            "aria-label": ariaLabel,
+            "aria-label": ariaLabel ?? month.heading,
             name,
             value: controlled ? value : void 0,
             defaultvalue: !controlled ? defaultValue : void 0,
@@ -212,6 +209,7 @@ const Calendar = ({
                     disabled: disabled || d.disabled,
                     tabIndex: d.iso === cursorIso ? 0 : -1,
                     "aria-label": d.label,
+                    "aria-hidden": d.outside ? "true" : void 0,
                     "aria-current": d.today ? "date" : void 0,
                     "data-part": "day-cell",
                     "data-date": d.iso,

package/dist/components/Card.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Title } from "./Title";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
@@ -25,7 +25,7 @@ const Card = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = roundStyle(
     round,
     "--card-round",

package/dist/components/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, ToneScope } from "../general_types";
 /** The wrapper-level checked value: a boolean for the binary axis, the string
  *  `'indeterminate'` for the third state. Mirrors Radix's `Checkbox.Root`. */
 export type CheckboxValue = boolean | 'indeterminate';
@@ -27,8 +27,8 @@ export interface CheckboxProps extends BaseProps {
      *  renders first. Required unless `children` or `aria-label` is provided
      *  (a `role="checkbox"` takes its name from the author, not the markup). */
     label?: string;
-    /** Secondary text rendered under the label — explanatory copy, like
-     *  Input's hint. Not part of the accessible name. */
+    /** Secondary text rendered under the label and exposed as the checkbox's
+     *  accessible description. Not part of the accessible name. */
     hint?: React.ReactNode;
     /** Controlled checked state. When provided the checkbox is controlled — it
      *  renders exactly this and never self-applies; `onStateChange` is a *request*
@@ -51,21 +51,20 @@ export interface CheckboxProps extends BaseProps {
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Color of the **mark** in every state — the checked-box fill *and* the
-     *  unselected box border. A named tone or any literal CSS color (`'#ff1493'`,
+    /** Color of the **mark**. In the default `all` scope this colors the checked-box
+     *  fill and 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; a custom color keeps its hue + chroma and pins lightness to the
-     *  fill curve. Use `toneSelected` instead to tone only the checked mark and leave
+     *  fill curve. Set `toneScope="selected"` to tone only the checked mark and leave
      *  the empty box neutral. The label + hint stay neutral — recolor them in plain
      *  CSS via the theme-aware `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the **checked mark only** — the empty box stays
-     *  neutral grey until it's checked. Prefer this over `tone` when a resting tinted
-     *  border would read as a validation state. Same value set as `tone`; if both are
-     *  set, `tone` governs the off-state border and `toneSelected` the checked fill.
-     *  @defaultValue 'neutral' */
-    toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state, or only while checked so the empty box stays
+     *  neutral. `selected` is useful when a tinted resting border would read as a
+     *  validation state.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Size variant. small=14px, medium=16px, large=18px box.
      *  @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
@@ -98,5 +97,5 @@ export interface CheckboxProps extends BaseProps {
  * <Checkbox defaultChecked label="Remember me" hint="On this device" />
  * ```
  */
-export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneSelected, size, round, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
+export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneScope, size, round, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
 export {};

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const valueToState = (v) => v === "indeterminate" ? "indeterminate" : v ? "checked" : "unchecked";
 const stateToValue = (s) => s === "indeterminate" ? "indeterminate" : s === "checked";
 const checkboxAttrsOf = (el) => ({
@@ -13,7 +13,7 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   tone,
-  toneSelected,
+  toneScope,
   size,
   round,
   onStateChange,
@@ -30,15 +30,7 @@ const Checkbox = ({
   const computedStyle = roundStyle(
     round,
     "--checkbox-round",
-    toneStyle(
-      toneSelected,
-      "--checkbox-tone-source",
-      toneStyle(
-        tone,
-        "--checkbox-off-tone-source",
-        toneSelected == null ? toneStyle(tone, "--checkbox-tone-source", style) : style
-      )
-    )
+    toneStyle(tone, "--checkbox-tone-source", toneStyle(tone, "--checkbox-off-tone-source", style))
   );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
@@ -67,8 +59,8 @@ const Checkbox = ({
       state: stateAttr,
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected || void 0,
+      tone: neutralToneAttr(tone),
+      "tone-scope": toneScope && toneScope !== "all" ? toneScope : void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       tabIndex: disabled ? -1 : tabIndex ?? 0,

package/dist/components/Expander.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Expander = ({
   title,
   level,
@@ -26,7 +26,7 @@ const Expander = ({
       state: controlled ? open ? "open" : "closed" : void 0,
       "default-state": !controlled && defaultOpen ? "open" : void 0,
       level: level != null ? String(level) : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       priority: priority && priority !== "secondary" ? priority : void 0,
       outdent: outdent ? "" : void 0,
       round: roundAttr(round),

package/dist/components/Input.d.ts

@@ -102,6 +102,10 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     disabled?: boolean;
     /** Make the field read-only. */
     readOnly?: boolean;
+    /** Render the field surface with a native button as its focus target. This is
+     *  available for Input-styled popup triggers; the value becomes
+     *  the button text and the placeholder is shown while it is empty. */
+    button?: boolean;
     /** Mark the field required (drives native validity). */
     required?: boolean;
     /** Dim the `leading` / `trailing` adornments at rest; they brighten to full
@@ -153,7 +157,9 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Fires when the field loses focus. */
     onBlur?: (e: any) => void;
     /** ARIA `role` for the field — e.g. `combobox` when the input drives a
-     *  suggestion `listbox` (see `InputAutocomplete`). Left unset by default. */
+     *  suggestion `listbox` (see `InputAutocomplete`). The custom element
+     *  delegates it, together with standard `aria-*` props, to the focused native
+     *  shadow control. Left unset by default. */
     role?: string;
 }
 /**
@@ -173,4 +179,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, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, button, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, role, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -55,6 +55,7 @@ const Input = ({
   truncate = true,
   disabled,
   readOnly,
+  button,
   required,
   dimActions,
   spellCheck,
@@ -64,6 +65,7 @@ const Input = ({
   min,
   max,
   step,
+  role,
   onInput,
   onChange,
   onValueChange,
@@ -91,13 +93,14 @@ const Input = ({
       rows: rows != null ? String(rows) : void 0,
       maxrows: maxRows != null ? String(maxRows) : void 0,
       status: statusTone,
-      tone: tone || void 0,
+      tone: neutralToneAttr(tone),
       type: !multiline && rows == null ? nativeType : void 0,
       name,
       placeholder,
       truncate: presence(truncate),
       disabled: presence(disabled),
       readonly: presence(readOnly),
+      button: presence(button),
       required: presence(required),
       "dim-actions": presence(dimActions),
       autocomplete: autoComplete ?? (!multiline && rows == null && type ? AUTOCOMPLETE_BY_TYPE[type] : void 0),
@@ -111,6 +114,7 @@ const Input = ({
       max,
       step,
       "aria-invalid": status === "critical" ? "true" : void 0,
+      role: role ?? (isSearch ? "searchbox" : void 0),
       oninput: onInput || onValueChange ? (e) => {
         onInput?.(e);
         onValueChange?.(e, attrsOf(e));

package/dist/components/InputAutocomplete.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { useState, useMemo, useId } from "../jsx-runtime";
-import { nativeStateChange, optionPresentationAttrs } from "../anta_helpers";
+import { useState, useMemo } from "../jsx-runtime";
+import { optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Menu } from "./Menu";
@@ -15,12 +15,10 @@ const InputAutocomplete = (props) => {
     filter = true,
     ...rest
   } = props;
-  const rid = useId();
   const controlled = value !== void 0;
   const [internal, setInternal] = useState(defaultValue ?? "");
   const text = controlled ? value : internal;
   const [open, setOpen] = useState(false);
-  const [activeId, setActiveId] = useState(null);
   const options = useMemo(() => suggestions.map(normalizeOpt), [suggestions]);
   const custom = typeof filter === "function";
   const queryRe = filter !== false && !custom ? matchQueryRegex(text) : null;
@@ -44,10 +42,8 @@ const InputAutocomplete = (props) => {
         "data-menu-search": "",
         role: "combobox",
         "aria-haspopup": "listbox",
-        "aria-controls": `${rid}-list`,
         "aria-expanded": menuOpen ? "true" : "false",
         "aria-autocomplete": "list",
-        "aria-activedescendant": menuOpen && activeId ? activeId : void 0,
         onFocus: () => setOpen(true),
         onInput: (e) => {
           setText(e.currentTarget.value);
@@ -61,23 +57,18 @@ const InputAutocomplete = (props) => {
     /* @__PURE__ */ jsx(
       Menu,
       {
-        id: `${rid}-list`,
         role: "listbox",
         open: menuOpen,
         onStateChange: (_e, { next }) => {
           setOpen(next);
-          if (!next) setActiveId(null);
         },
-        onactivedescendant: (e) => setActiveId(nativeStateChange(e).detail?.id ?? null),
         children: visible.map((opt, i) => {
           const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
           return /* @__PURE__ */ jsx(
             MenuItem,
             {
               ...optionAttrs,
-              id: `${rid}-o${i}`,
               role: "option",
-              "aria-selected": activeId === `${rid}-o${i}` ? "true" : "false",
               icon: opt.icon,
               label: highlight(opt.label ?? opt.value, queryRe),
               hint: opt.hint ? highlight(opt.hint, queryRe) : opt.hint,
@@ -89,7 +80,7 @@ const InputAutocomplete = (props) => {
               className: optionClassName,
               style: optionStyle
             },
-            `${rid}-${opt.value}-${i}`
+            `${opt.value}-${i}`
           );
         })
       }

package/dist/components/InputDate.css

@@ -1 +1 @@
-@layer anta.components{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}

package/dist/components/InputDate.js

@@ -156,6 +156,8 @@ const InputDate = ({
     /* @__PURE__ */ jsx(
       Menu,
       {
+        role: "dialog",
+        "aria-label": time ? "Choose date and time" : "Choose date",
         open,
         placement: placement ?? "bottom-start",
         offset,

package/dist/components/InputTime.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -65,7 +65,7 @@ const InputTime = ({
       min,
       max,
       status: statusTone,
-      tone: tone || void 0,
+      tone: neutralToneAttr(tone),
       name,
       disabled: presence(disabled),
       required: presence(required),

package/dist/components/Loader.js

@@ -1,4 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
+import { neutralToneAttr } from "../anta_helpers";
 const Loader = ({ tone, value, max = 100, size, speed, label, className, style, ...rest }) => {
   const determinate = typeof value === "number" && Number.isFinite(value);
   const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
@@ -20,7 +21,7 @@ const Loader = ({ tone, value, max = 100, size, speed, label, className, style,
   return /* @__PURE__ */ jsx(
     "a-loader",
     {
-      tone,
+      tone: neutralToneAttr(tone),
       ...determinate ? { value: clampedValue } : {},
       class: className,
       style: computedStyle,

package/dist/components/Menu.d.ts

@@ -61,10 +61,10 @@ export interface MenuProps extends BaseProps {
     }) => void;
     /** Combobox-mode cursor report (raw element event). Fires when the active
      *  option changes as arrow keys move the cursor while focus stays in a
-     *  `[data-menu-search]` filter field; `detail.id` is the active option's `id`
-     *  (`null` when none). The reactive layer that renders the field reflects this
-     *  onto its `aria-activedescendant` — the element can't write that light-DOM
-     *  attribute itself. Passed straight through to the element. */
+     *  `[data-menu-search]` filter field; `detail.id` is an authored option `id`,
+     *  or `null`. Built-in Anta Inputs receive the active option through a direct
+     *  ARIA element relationship; this remains available to custom fields and
+     *  observers. Passed straight through to the element. */
     onactivedescendant?: (e: CustomEvent<{
         id: string | null;
     }>) => void;

package/dist/components/Menu.js

@@ -39,7 +39,7 @@ const Menu = ({
       round: roundAttr(round),
       "stop-propagation": stopPropagation === void 0 || stopPropagation === false ? void 0 : stopPropagation === true ? "" : Array.isArray(stopPropagation) ? stopPropagation.join(" ") : stopPropagation,
       role,
-      "aria-orientation": "vertical",
+      "aria-orientation": role === "menu" || role === "listbox" ? "vertical" : void 0,
       class: className,
       style: lengthStyle(inset, "--menu-padding", roundStyle(round, "--menu-round", style)),
       ...rest,

package/dist/components/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from '../general_types';
+import type { BaseProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 /** Props shared by every menu item, link or not. */
 export interface MenuItemCommonProps extends BaseProps {
@@ -39,12 +39,11 @@ export interface MenuItemCommonProps extends BaseProps {
      *  gray.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but applied only while the row is `selected` — an unselected row
-     *  stays neutral. The whole selected row (label, icon, tint, and the `checkbox` /
-     *  `radio` indicator) takes the tone. Same value set as `tone`; on a selected row
-     *  `toneSelected` wins over `tone` when both are set.
-     *  @defaultValue neutral */
-    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every row state, or only while the row is selected. In
+     *  `selected` scope, an unselected row and its checkbox/radio indicator stay
+     *  neutral.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** 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. */
@@ -139,4 +138,4 @@ export type MenuItemProps = MenuItemCommonProps & (MenuItemLinkMode | MenuItemAc
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, href, target, rel, download, ping, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;
+export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneScope, submenu, value, onSelect, href, target, rel, download, ping, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 const SHORTCUT_KEYS = {
   "\u2318": "Meta",
   cmd: "Meta",
@@ -77,7 +77,7 @@ const MenuItem = ({
   indeterminate,
   indicator,
   tone,
-  toneSelected,
+  toneScope,
   submenu,
   value,
   onSelect,
@@ -97,8 +97,8 @@ const MenuItem = ({
   const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
   const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
   const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
-  const effectiveTone = selected && toneSelected || tone;
-  const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
+  const effectiveTone = toneScope === "selected" && !selected ? void 0 : tone;
+  const toneAttr = neutralToneAttr(effectiveTone);
   const declaredShortcuts = rest["aria-keyshortcuts"];
   const keyShortcuts = kbd ? shortcutLabel(kbd) : void 0;
   const kbdNode = kbd ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": declaredShortcuts ?? keyShortcuts ? "true" : void 0, children: kbd }) : null;

package/dist/components/Panel.d.ts

@@ -0,0 +1,17 @@
+import type { BaseProps, DOMEventHandlers } from '../general_types';
+export interface PanelProps extends BaseProps, DOMEventHandlers {
+    /** Fill the browser viewport and contain keyboard focus within the panel.
+     * When supplied, the application owns the state. */
+    maximized?: boolean;
+    /** Initial viewport maximization for an uncontrolled panel, read once on connect. */
+    defaultMaximized?: boolean;
+    /** Requested maximization change. Update `maximized` to accept a controlled
+     * request, or prevent the event to veto an uncontrolled request. */
+    onStateChange?: (event: CustomEvent, detail: {
+        next: boolean;
+        prev: boolean;
+    }) => void;
+}
+/** A scroll container that fills its parent and can maximize to the viewport.
+ * Percentage height requires a parent with a defined height. */
+export declare const Panel: ({ maximized, defaultMaximized, onStateChange, className, children, ...rest }: PanelProps) => any;