@antadesign/anta 0.3.28 → 0.3.29

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/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/Checkbox.d.ts

@@ -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*

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

@@ -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,
@@ -98,6 +100,7 @@ const Input = ({
       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/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/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;

package/dist/components/Panel.js

@@ -0,0 +1,22 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+const Panel = ({ maximized, defaultMaximized, onStateChange, className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "a-panel",
+  {
+    state: maximized === void 0 ? void 0 : maximized ? "maximized" : "normal",
+    "default-state": maximized === void 0 && defaultMaximized ? "maximized" : void 0,
+    onstatechange: onStateChange ? (event) => {
+      const { event: native, detail, isOwn } = nativeStateChange(event);
+      if (isOwn && detail) onStateChange(native, {
+        next: detail.next === "maximized",
+        prev: detail.prev === "maximized"
+      });
+    } : void 0,
+    class: className,
+    ...rest,
+    children
+  }
+);
+export {
+  Panel
+};

package/dist/components/RadioGroup.d.ts

@@ -21,7 +21,8 @@ export interface RadioOption extends OptionPresentationProps {
     value: string;
     /** The visible label. */
     label?: React.ReactNode;
-    /** Secondary text under the label — explanatory copy, like `Input`'s hint. */
+    /** Secondary text under the label and exposed as this radio option's
+     *  accessible description. */
     hint?: React.ReactNode;
     /** Disable just this option (skipped by keyboard, dropped from the tab order). */
     disabled?: boolean;

package/dist/components/Select.d.ts

@@ -163,25 +163,25 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
     indicator?: 'none' | 'check' | 'radio';
     /** Text shown when nothing is selected. */
     placeholder?: string;
-    /** Leading icon shown at the left of the field (the default trigger's `Input`
-     *  `leading` slot). With a custom `renderTrigger`, it's passed through as
+    /** Leading icon shown at the left of the field. With a custom
+     *  `renderTrigger`, it's passed through as
      *  `state.icon` instead — the consumer places it. */
     icon?: IconShape;
-    /** Content for the default trigger's `leading` slot, such as a key prefix
+    /** Content before the default trigger's value, such as a key prefix
      *  before the value. It replaces the icon derived from `icon`. Include an
      *  `<Icon>` in this content when both are needed. Ignored by `renderTrigger`. */
     leading?: React.ReactNode;
-    /** Field label, above the trigger (Input's `label`). */
+    /** Field label, above the trigger. */
     label?: string;
-    /** Helper text under the field (Input's `hint`). */
+    /** Helper text under the field. */
     hint?: string;
     /** Field size.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Validation/feedback tone for the field (Input's `status`).
+    /** Validation/feedback tone for the field.
      *  @defaultValue neutral */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
-    /** Glyph shown before the `hint` when `status` is set (Input's `statusIcon`).
+    /** Glyph shown before the `hint` when `status` is set.
      *  Each status has a default; pass a shape to override, or `false` to drop it. */
     statusIcon?: IconShape | (string & {}) | false;
     /** Round the field corners — `true` for fully round, or a number / CSS length. */
@@ -234,7 +234,7 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  A, B, C` (labels comma-joined) in place of the bare `3 selected`. Applies
      *  to the multi-count case only: `All` stays `All`, a single pick stays its
      *  own label, and an empty selection stays the `placeholder`. The list flows
-     *  into the read-only field, so it ellipsizes at the field's width when long
+     *  into the Button label, so it ellipsizes at the field's width when long
      *  (`3 selected: Engineering, Des… `). `renderSummary` overrides this. */
     verbose?: boolean;
     /** `multiple` only: build the trigger's selection summary text yourself,
@@ -242,7 +242,7 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  the resolved selected options (`selected.length` is the count) and runs only
      *  while something is selected — an empty selection still shows the
      *  `placeholder`. Return a **string**: it flows into the default trigger's
-     *  read-only field, so a long summary ellipsizes at the field's width just
+     *  Button label, so a long summary ellipsizes at the field's width just
      *  like a long value (`Engineering, Design, … `). Return `undefined` to fall
      *  back to the default for that case (e.g. customize only the count, keeping
      *  the single-label case built-in). For rich content (chips, multiple nodes)
@@ -253,9 +253,9 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  one focusable element, such as an Anta `Button`. The menu is positioned
      *  relative to that element and opens when it is clicked. Do not return a
      *  fragment, multiple siblings, or a non-focusable wrapper. Add
-     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
-     *  role that supports them (an Anta `Button` already carries `role="button"`;
-     *  otherwise add `role="combobox"`).
+     *  `aria-haspopup={filter ? 'dialog' : 'menu'}` and
+     *  `aria-expanded={state.open}` to the returned button. An Anta `Button`
+     *  already carries the correct role.
      *  Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
      *  `className` / `style` apply only to the default field. Add styling and
      *  attributes to the returned element instead. */
@@ -352,8 +352,8 @@ export type SelectedItem<V extends OptionValue = string> = SelectedOption<V> | S
  */
 export declare function optionsWithSelection<V extends OptionValue = string>(options: SelectItem<V>[], values: V | V[] | undefined): SelectedItem<V>[];
 /**
- * `<Select>` lets people choose one or more options from a dropdown. It uses an
- * `<Input>` as its read-only trigger and a `<Menu>` for its options. `selection` sets behavior:
+ * `<Select>` lets people choose one or more options from a dropdown. It uses a
+ * `<Button>` as its trigger and a `<Menu>` for its options. `selection` sets behavior:
  * `'single'` (default; `value` is a string, menu closes on pick) or `'multiple'`
  * (checkboxes, `value` is a string array, menu stays open while toggling, the
  * field shows an "N selected" count). For single-select, `indicator` picks the

package/dist/components/Select.js

@@ -1,8 +1,9 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { useState, useId } from "../jsx-runtime";
-import { ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
+import { useState } from "../jsx-runtime";
+import { ISOLATE_HINT, ISOLATE_HINT_DELAY, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
+import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
@@ -81,8 +82,7 @@ const Select = (props) => {
   const currentRaw = controlled ? value : internal;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
-  const [activeId, setActiveId] = useState(null);
-  const uid = useId();
+  const popupLabel = `${label ?? rest["aria-label"] ?? "Select"} options`;
   const isSubmenu = (it) => typeof it === "object" && Array.isArray(it.submenu);
   const isGroup = (it) => typeof it === "object" && Array.isArray(it.options);
   const collectLeaves = (items, group, disabled2, out) => {
@@ -177,7 +177,6 @@ const Select = (props) => {
       MenuItem,
       {
         ...optionAttrs,
-        id: `${uid}-opt-${o.value}`,
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
         indicator: customMark ?? void 0,
@@ -194,7 +193,7 @@ const Select = (props) => {
         style: optionStyle,
         children: [
           custom,
-          tip && /* @__PURE__ */ jsx(Tooltip, { follow: true, ...hintOnly ? { delay: 700 } : {}, children: tip })
+          tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { delay: ISOLATE_HINT_DELAY, placement: "left" } : { follow: true }, children: tip })
         ]
       },
       String(o.value)
@@ -255,48 +254,36 @@ const Select = (props) => {
     }
     return out;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderTrigger ? renderTrigger({ open, value: currentRaw, selected: selectedOptions, disabled: !!disabled, icon }) : /* @__PURE__ */ jsx(
-      Input,
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger ? renderTrigger({ open, value: currentRaw, selected: selectedOptions, disabled: !!disabled, icon }) : /* @__PURE__ */ jsxs(
+      Button,
       {
-        label,
-        hint,
-        placeholder,
-        value: display,
-        readOnly: true,
-        dimActions: true,
         disabled,
-        leading: leading ?? (icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0),
         size,
-        status,
-        statusIcon,
         round,
-        role: "combobox",
-        "aria-haspopup": "menu",
+        "aria-label": typeof label === "string" || typeof label === "number" ? String(label) : void 0,
+        "aria-invalid": status === "critical" ? "true" : void 0,
+        "aria-haspopup": filtering ? "dialog" : "menu",
         "aria-expanded": open ? "true" : "false",
-        trailing: (
-          // The named tag applies the Select-specific rotation while the icon remains
-          // a normal currentColor glyph.
-          /* @__PURE__ */ jsx("a-select-chevron", { open: open ? "" : void 0, style: statusColor ? { color: statusColor } : void 0, children: /* @__PURE__ */ jsx(Icon, { shape: "chevron-down" }) })
-        ),
-        className,
-        style,
-        ...rest
+        ...rest,
+        children: [
+          (leading ?? icon) && /* @__PURE__ */ jsx("a-select-leading", { "aria-hidden": "true", children: leading ?? /* @__PURE__ */ jsx(Icon, { shape: icon }) }),
+          /* @__PURE__ */ jsx("a-button-label", { "data-placeholder": !display ? "" : void 0, children: display || placeholder }),
+          /* @__PURE__ */ jsx("a-select-chevron", { open: open ? "" : void 0, "aria-hidden": "true", style: statusColor ? { color: statusColor } : void 0, children: /* @__PURE__ */ jsx(Icon, { shape: "chevron-down" }) })
+        ]
       }
     ),
     /* @__PURE__ */ jsxs(
       Menu,
       {
+        role: filtering ? "dialog" : void 0,
+        "aria-label": filtering ? popupLabel : void 0,
         placement,
         offset,
         onStateChange: (_e, { next }) => {
           setOpen(next);
-          if (!next) {
-            setQuery("");
-            setActiveId(null);
-          }
+          if (!next) setQuery("");
         },
-        onactivedescendant: (e) => setActiveId((e.nativeEvent ?? e).detail?.id ?? null),
         children: [
           filtering && // `slot="header"` pins the field in the Menu's fixed header region (above
           // the scrolling options); `data-menu-search` puts the menu in combobox
@@ -310,7 +297,6 @@ const Select = (props) => {
               placeholder: "Filter\u2026",
               "aria-label": "Filter options",
               "aria-autocomplete": "list",
-              "aria-activedescendant": open && activeId ? activeId : void 0,
               onInput: (e) => setQuery(e.currentTarget.value)
             }
           ) }),
@@ -333,12 +319,38 @@ const Select = (props) => {
           clearable && selectedValues.length > 0 && // Pinned in the footer so it never scrolls away in a long / filtered list.
           /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(MenuSeparator, { slot: "footer" }),
-            /* @__PURE__ */ jsx("a-select-footer", { slot: "footer", children: /* @__PURE__ */ jsx(MenuItem, { icon: "x", label: clearLabel, "data-menu-open": "", onSelect: clear }) })
+            /* @__PURE__ */ jsx("a-select-footer", { slot: "footer", children: /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: "x",
+                label: clearLabel,
+                role: filtering ? "button" : void 0,
+                "data-menu-open": "",
+                onSelect: clear
+              }
+            ) })
           ] })
         ]
       }
     )
   ] });
+  if (renderTrigger) return content;
+  const statusGlyph = {
+    brand: "circle-small-solid",
+    info: "info",
+    success: "circle-check",
+    warning: "warning-triangle",
+    critical: "warning-diamond"
+  };
+  const glyph = statusIcon === void 0 ? status ? statusGlyph[status] : void 0 : statusIcon;
+  return /* @__PURE__ */ jsxs("a-select-field", { size, status, disabled: disabled ? "" : void 0, class: className, style, children: [
+    label != null && /* @__PURE__ */ jsx("a-select-label", { children: label }),
+    content,
+    hint != null && /* @__PURE__ */ jsxs("a-select-hint", { children: [
+      glyph && /* @__PURE__ */ jsx(Icon, { shape: glyph, "aria-hidden": "true" }),
+      hint
+    ] })
+  ] });
 };
 export {
   Select,