@antadesign/anta 0.3.5 → 0.3.7

package/dist/anta_helpers.d.ts

@@ -22,6 +22,16 @@ export declare function nativeStateChange<D>(e: CustomEvent<D> | {
     event: CustomEvent<D>;
     detail?: D;
 };
+export declare const IS_MAC: boolean;
+/** Default row hint teaching the Alt/⌥-click "select only this" accelerator on
+ *  bulk-select rows (`Select` multiple, `SelectFaceted` multiple facets). Shared
+ *  so the wording stays identical across both. */
+export declare const ISOLATE_HINT: string;
+/** Parse an open/closed `state` / `default-state` attribute — the shared
+ *  open-state vocabulary (`a-dialog`, `a-expander`, …). Anything but the literal
+ *  `'open'` is `'closed'`, so an absent / malformed attribute reads closed. Kept
+ *  here so the two elements can't drift on how the token is parsed. */
+export declare function parseOpenState(v: string | null): 'open' | 'closed';
 /** The six named tones every toned component shares. Anything else is a literal
  *  CSS colour the element resolves through its `--{component}-tone-source` var. */
 export declare const NAMED_TONES: Set<string>;

package/dist/anta_helpers.js

@@ -16,6 +16,11 @@ function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
 }
+const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
+const ISOLATE_HINT = IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this";
+function parseOpenState(v) {
+  return v === "open" ? "open" : "closed";
+}
 const NAMED_TONES = /* @__PURE__ */ new Set([
   "brand",
   "neutral",
@@ -105,6 +110,8 @@ class SelectableChildElement extends HTMLElementBase {
 }
 export {
   HTMLElementBase,
+  ISOLATE_HINT,
+  IS_MAC,
   NAMED_TONES,
   SelectableChildElement,
   anchorRect,
@@ -112,6 +119,7 @@ export {
   isInsideOpenMenu,
   isMenuOpen,
   nativeStateChange,
+  parseOpenState,
   roundStyle,
   setMenuPresence,
   toneStyle,

package/dist/components/Card.d.ts

@@ -0,0 +1,86 @@
+import type { BaseProps } from "../general_types";
+export interface CardProps extends BaseProps {
+    /** Header content, rendered in the top zone with the default title
+     *  typography. A string is respected as-is; pass a `<Title>` (or `<h2>`–`<h6>`)
+     *  for real heading semantics in the document outline. Omit for no header. */
+    header?: React.ReactNode;
+    /** Footer content, usually action buttons. Rendered as a **left-aligned** row
+     *  (wraps under pressure) — the opposite of `Dialog`'s right-aligned footer. */
+    footer?: React.ReactNode;
+    /** Controls rendered at the top-right of the header row, OUTSIDE the header
+     *  (e.g. a "more" button, a tag) — the same slot as `Expander`'s `actions`. */
+    actions?: React.ReactNode;
+    /** Media (image, illustration) rendered full-bleed to the card edge, clipped to
+     *  its corners. Position it with `mediaPosition`. */
+    media?: React.ReactNode;
+    /** Which edge the `media` bleeds to.
+     *  @defaultValue 'top' */
+    mediaPosition?: "top" | "bottom" | "left" | "right";
+    /** The card body. A string renders with the default `<Text>`-like typography;
+     *  scopes the color hierarchy for any nested content. */
+    children?: React.ReactNode;
+    /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for
+     *  a one-off custom tone. Named tones re-point the surface + text; a custom
+     *  color keeps its hue while lightness/chroma are pinned. `'neutral'` (the
+     *  default) is the same as omitting it.
+     *  @defaultValue 'neutral' */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Surface emphasis. `primary` (the default) is a clean sheet; `secondary` is a
+     *  subtle fill; `tertiary` is a frosted, semi-transparent panel with a backdrop
+     *  blur.
+     *  @defaultValue 'primary' */
+    priority?: "primary" | "secondary" | "tertiary";
+    /** Size variant — scales the padding.
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Selected / chosen state — draws an inset ring in the tone color, for
+     *  choice-card / plan-picker patterns. */
+    selected?: boolean;
+    /** Loading state — dims the card with a skeleton pulse, sets `aria-busy`, and (in
+     *  link mode) blocks navigation. */
+    loading?: boolean;
+    /** Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
+     *  `number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit for
+     *  the default `--card-radius`. */
+    round?: boolean | number | string;
+    /** Turn the whole card into a link. The card renders a focusable anchor and its
+     *  accessible name comes from `header` → body → this URL (override with
+     *  `aria-label`). A link card is display content — don't nest interactive
+     *  controls inside it. */
+    href?: string;
+    /** Anchor target (only with `href`). */
+    target?: string;
+    /** Anchor rel (only with `href`). */
+    rel?: string;
+    /** Space-separated URLs the browser pings on navigation (only with `href`). */
+    ping?: string;
+}
+/**
+ * A surface container: a bordered, toned box laying out an optional `media`
+ * region plus a `header` / body / `footer` stack. Pass `href` to turn the whole
+ * card into a link.
+ *
+ * Renders an `<a-card>` web component. A pure, stateless pass-through — the
+ * element owns layout, the link, and the accessible name — so the wrapper only
+ * maps props to attributes and projects content into the `media` / `header` /
+ * `actions` / body / `footer` slots. Header / body / footer are respected as
+ * passed; the element supplies their default typography.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom element.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Card header="Deployment ready" footer={<Button priority="primary" label="Deploy" />}>
+ *   Your build passed all checks and is ready to ship.
+ * </Card>
+ * ```
+ *
+ * @example Link card
+ * ```tsx
+ * <Card href="/docs/ci" header="CI integration guide">
+ *   Wire Antithesis into your pipeline in a few minutes.
+ * </Card>
+ * ```
+ */
+export declare const Card: ({ header, footer, actions, media, mediaPosition, tone, priority, size, selected, loading, round, href, target, rel, ping, className, style, children, ...rest }: CardProps) => any;

package/dist/components/Card.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { toneStyle, roundStyle } from "../anta_helpers";
+const Card = ({
+  header,
+  footer,
+  actions,
+  media,
+  mediaPosition,
+  tone,
+  priority,
+  size,
+  selected,
+  loading,
+  round,
+  href,
+  target,
+  rel,
+  ping,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const toneAttr = tone || void 0;
+  const computedStyle = roundStyle(
+    round,
+    "--card-round",
+    toneStyle(toneAttr, "--card-tone-source", style)
+  );
+  return /* @__PURE__ */ jsxs(
+    "a-card",
+    {
+      tone: toneAttr,
+      priority: priority && priority !== "primary" ? priority : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      "media-position": mediaPosition && mediaPosition !== "top" ? mediaPosition : void 0,
+      selected: selected ? "" : void 0,
+      loading: loading ? "" : void 0,
+      round: round ? "" : void 0,
+      href,
+      target: href ? target : void 0,
+      rel: href ? rel : void 0,
+      ping: href ? ping : void 0,
+      class: className,
+      style: computedStyle,
+      ...rest,
+      children: [
+        media != null && /* @__PURE__ */ jsx("div", { slot: "media", children: media }),
+        header != null && // A plain-string (or number) header imitates a `<Title>`: the element's
+        // header slot supplies the level-4 type scale, and this div adds the
+        // matching 8px bottom padding (inside the box — no margin-collapse). A
+        // *node* header brings its own margin (a slotted `<Title>` keeps its
+        // bottom margin; the element zeroes only the top), so it gets no wrapper
+        // padding — otherwise the gap would double.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            slot: "header",
+            style: typeof header === "string" || typeof header === "number" ? { paddingBlockEnd: "8px" } : void 0,
+            children: header
+          }
+        ),
+        actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", style: { display: "contents" }, children: actions }),
+        children,
+        footer != null && /* @__PURE__ */ jsx("span", { slot: "footer", style: { display: "contents" }, children: footer })
+      ]
+    }
+  );
+};
+export {
+  Card
+};

package/dist/components/Dialog.d.ts

@@ -0,0 +1,92 @@
+import type { BaseProps } from "../general_types";
+/** Public props for the `<Dialog>` modal / drawer. `header` and `footer` are the
+ *  chrome zones; `children` is the (scrollable) body. */
+export interface DialogProps extends Omit<BaseProps, "title"> {
+    /** Header content: a title, or any node. Rendered in the top zone. Omit for a
+     *  chromeless dialog with only a body. */
+    header?: React.ReactNode;
+    /** Footer content, usually the action buttons. Rendered in the bottom zone as
+     *  a right-aligned row (wraps under pressure). Omit for none. */
+    footer?: React.ReactNode;
+    /** The dialog body. Scrolls when it overflows the available height. */
+    children?: React.ReactNode;
+    /** Placement. `center` (the default) is a centered modal; `left` / `right` /
+     *  `top` / `bottom` turn it into an edge drawer (full height for left/right,
+     *  full width for top/bottom); `fullscreen` fills the whole viewport with no
+     *  edge gap or corner radius.
+     *  @defaultValue 'center' */
+    position?: "center" | "left" | "right" | "top" | "bottom" | "fullscreen";
+    /** Whether the top-right ✕ button is present. It's one way to close the dialog,
+     *  alongside Esc, the backdrop, a `data-dialog-close` / footer action, and your
+     *  own code; `false` just removes the ✕, it doesn't make the dialog un-closable.
+     *  @defaultValue true */
+    closable?: boolean;
+    /** Turn off light-dismiss: a backdrop click and Esc no longer close the dialog.
+     *  It stays closable through explicit controls (the ✕ when `closable`, a footer
+     *  action, your own code); `persistent` isn't "un-closable", it stops an
+     *  accidental click or stray Esc from dismissing. For an alert / confirm that
+     *  should be answered deliberately. Omit for the default dismissible behavior. */
+    persistent?: boolean;
+    /** Corner radius. A side keyword — `'top'` / `'right'` / `'bottom'` / `'left'` —
+     *  rounds only that edge's two corners (at `--dialog-radius`), which pairs with
+     *  a drawer's exposed edge (a bottom sheet → `'top'`, a right drawer → `'left'`).
+     *  A `number` (px) or CSS string rounds all corners at that value; the string
+     *  may be a full `border-radius` shorthand (`'12px 12px 0 0'`). `true` rounds all
+     *  corners at `--dialog-radius`. Omit for the position default: `center` is
+     *  rounded, drawers and `fullscreen` are square. */
+    round?: boolean | number | "top" | "right" | "bottom" | "left" | (string & {});
+    /** Controlled open state. When provided, the consumer owns open/close: the
+     *  dialog only follows this prop, and every user dismiss (Esc, backdrop, close
+     *  button) *requests* a change via `onStateChange` (reject by not updating).
+     *  Leave undefined for uncontrolled. */
+    open?: boolean;
+    /** Initial open state for the uncontrolled case (read once on mount). */
+    defaultOpen?: boolean;
+    /** Uncontrolled trigger name. Any element with `data-dialog-open="{name}"`
+     *  opens this dialog, `data-dialog-close="{name}"` closes it. A convenience for
+     *  triggers rendered elsewhere; ignored in controlled mode. */
+    name?: string;
+    /** Fired before the open state changes, on every user open or dismiss.
+     *  `event` is the cancelable `statechange`: call `event.preventDefault()` to
+     *  veto an *uncontrolled* transition. `detail.next` is the requested open
+     *  state, `detail.prev` the current one (booleans). In controlled mode, apply
+     *  `detail.next` to `open` to accept, or do nothing to reject. */
+    onStateChange?: (event: CustomEvent, detail: {
+        next: boolean;
+        prev: boolean;
+    }) => void;
+}
+/**
+ * `<Dialog>` — a modal dialog (or edge drawer, via `position`), built on a
+ * native `<dialog>` inside `<a-dialog>` — so the top layer, focus trap, focus
+ * return, backdrop, and Esc all come from the platform.
+ *
+ * A pure, stateless pass-through: the element owns all interaction (open/close,
+ * dismiss, focus), so the wrapper holds no state and grabs no ref — it only maps
+ * props to attributes and drops content into the `header` / body / `footer` /
+ * `close` slots.
+ *
+ * Uncontrolled (`defaultOpen`, or the `name` trigger convenience): the element
+ * owns open/close. Controlled (`open` + `onStateChange`): the wrapper emits
+ * `state="open"|"closed"`; the element treats the attribute as the source of
+ * truth, and every user dismiss only *requests* a change (a consumer can reject
+ * it). See STATEFUL-COMPONENTS.md.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom element.
+ *
+ * @example Controlled
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * <Button onClick={() => setOpen(true)}>Open</Button>
+ * <Dialog
+ *   open={open}
+ *   onStateChange={(_e, { next }) => setOpen(next)}
+ *   header="Delete project?"
+ *   footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button priority="primary" tone="critical">Delete</Button></>}
+ * >
+ *   This action cannot be undone.
+ * </Dialog>
+ * ```
+ */
+export declare const Dialog: ({ header, footer, position, closable, persistent, round, open, defaultOpen, name, onStateChange, className, style, children, ...rest }: DialogProps) => any;

package/dist/components/Dialog.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange, roundStyle } from "../anta_helpers";
+import { Button } from "./Button";
+const ROUND_SIDES = /* @__PURE__ */ new Set(["top", "right", "bottom", "left"]);
+const Dialog = ({
+  header,
+  footer,
+  position,
+  closable,
+  persistent,
+  round,
+  open,
+  defaultOpen,
+  name,
+  onStateChange,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const controlled = open !== void 0;
+  const roundSide = typeof round === "string" && ROUND_SIDES.has(round) ? round : void 0;
+  return /* @__PURE__ */ jsxs(
+    "a-dialog",
+    {
+      state: controlled ? open ? "open" : "closed" : void 0,
+      "default-state": !controlled && defaultOpen ? "open" : void 0,
+      position: position && position !== "center" ? position : void 0,
+      persistent: persistent ? "" : void 0,
+      round: roundSide ?? (round ? "" : void 0),
+      name: !controlled ? name : void 0,
+      onstatechange: onStateChange ? (e) => {
+        const { event, detail } = nativeStateChange(e);
+        if (detail)
+          onStateChange(event, {
+            next: detail.next === "open",
+            prev: detail.prev === "open"
+          });
+      } : void 0,
+      class: className,
+      style: roundStyle(roundSide ? void 0 : round, "--dialog-round", style),
+      ...rest,
+      children: [
+        closable !== false && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in the
+        // element's `close` slot. It fires the bubbling `closerequest` event via
+        // a-button's global listener, so closing works even without framework
+        // hydration; the element turns that into a close request.
+        // CONTRACT: `data-custom-event` below MUST match `CLOSE_TRIGGER` in the
+        // element (src/elements/a-dialog.ts). Duplicated, not shared — importing
+        // the element module here would self-register it and break the
+        // wrapper/element decoupling. Rename in both places.
+        /* @__PURE__ */ jsx("span", { slot: "close", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            priority: "tertiary",
+            size: "large",
+            icon: "x",
+            "aria-label": "Close",
+            "data-custom-event": "closerequest"
+          }
+        ) }),
+        header != null && /* @__PURE__ */ jsx("div", { slot: "header", children: header }),
+        children,
+        footer != null && /* @__PURE__ */ jsx("span", { slot: "footer", style: { display: "contents" }, children: footer })
+      ]
+    }
+  );
+};
+export {
+  Dialog
+};

package/dist/components/Input.d.ts

@@ -146,6 +146,9 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     onFocus?: (e: any) => void;
     /** 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. */
+    role?: string;
 }
 /**
  * `<Input>` — a text field. Renders an `<a-input>` web component whose real

package/dist/components/InputAutocomplete.d.ts

@@ -0,0 +1,69 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { SelectOption } from './Select';
+export interface InputAutocompleteProps extends Omit<BaseProps, 'children'> {
+    /** The suggestions: bare strings or `SelectOption`s (`value` / `label` / `hint` /
+     *  `icon` / `tone` / `disabled`). A flat list; picking one fills the field. */
+    suggestions: (string | SelectOption)[];
+    /** Controlled value: the field's text, a **free** string not constrained to a
+     *  suggestion. Leave undefined for uncontrolled. */
+    value?: string;
+    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    defaultValue?: string;
+    /** Fires as the text changes (typing, picking a suggestion, or clearing) with
+     *  the new field text. */
+    onValueChange?: (value: string) => void;
+    /** Fires only when a suggestion is chosen, with that option. */
+    onSelect?: (option: SelectOption) => void;
+    /** How suggestions match the text. `true` uses the built-in case-insensitive
+     *  substring match on `value` / `label` / `hint`; a function `(option, query) =>
+     *  boolean` does custom matching; `false` shows `suggestions` verbatim so you
+     *  can filter them yourself (async / remote).
+     *  @defaultValue true */
+    filter?: boolean | ((option: SelectOption, query: string) => boolean);
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Field size.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Validation status. */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Status icon override, or `false` to drop it. */
+    statusIcon?: IconShape | (string & {}) | false;
+    /** Custom accent colour — a named tone or any CSS colour. */
+    tone?: string;
+    /** Show a clear button while the field has text. */
+    clearable?: boolean;
+    /** Form field name. */
+    name?: string;
+    /** Disable the field. */
+    disabled?: boolean;
+    /** Field label. */
+    label?: React.ReactNode;
+    /** Hint under the field. */
+    hint?: React.ReactNode;
+    /** Leading adornment inside the field. */
+    leading?: React.ReactNode;
+    /** Trailing adornment inside the field. */
+    trailing?: React.ReactNode;
+}
+/**
+ * `<InputAutocomplete>` — a text field whose value is a free string, with a
+ * suggestion dropdown that assists without constraining. Typing something not in
+ * the list is valid and stays the value; picking a suggestion just fills the
+ * field. For a value that MUST be one of the options, use `Select` with `filter`.
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @example
+ * ```tsx
+ * <InputAutocomplete
+ *   label="City"
+ *   suggestions={['Berlin', 'Bogotá', 'Boston']}
+ *   value={city}
+ *   onValueChange={setCity}
+ * />
+ * ```
+ */
+export declare const InputAutocomplete: (props: InputAutocompleteProps) => any;

package/dist/components/InputAutocomplete.js

@@ -0,0 +1,95 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState, useMemo, useId } from "../jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
+import { Input } from "./Input";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+const InputAutocomplete = (props) => {
+  const {
+    suggestions,
+    value,
+    defaultValue,
+    onValueChange,
+    onSelect,
+    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;
+  const visible = custom ? options.filter((o) => filter(o, text)) : options.filter((o) => matchesQuery(o, queryRe));
+  const menuOpen = open && visible.length > 0;
+  const setText = (next) => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const pick = (opt) => {
+    setText(opt.value);
+    onSelect?.(opt);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        value: text,
+        "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);
+          setOpen(true);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") setOpen(false);
+        }
+      }
+    ),
+    /* @__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) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            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,
+            tone: opt.tone,
+            disabled: opt.disabled,
+            value: opt.value,
+            onMouseDown: (e) => e.preventDefault(),
+            onSelect: () => pick(opt)
+          },
+          `${rid}-${opt.value}-${i}`
+        ))
+      }
+    )
+  ] });
+};
+export {
+  InputAutocomplete
+};

package/dist/components/InputDate.js

@@ -136,9 +136,8 @@ const InputDate = ({
         },
         onChange: (e) => resolve(e.currentTarget.value),
         onKeyDown: (e) => {
-          if (e.key === "ArrowDown" && !disabled) {
+          if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !disabled) {
             e.preventDefault();
-            if (!open) e.currentTarget.click();
             setFocusNonce((n) => n + 1);
           }
           if (e.key === "Enter" && !disabled) {

package/dist/components/Menu.d.ts

@@ -58,6 +58,9 @@ export interface MenuProps extends BaseProps {
     onactivedescendant?: (e: CustomEvent<{
         id: string | null;
     }>) => void;
+    /** ARIA role of the menu surface.
+     *  @defaultValue menu */
+    role?: string;
     /** The menu's contents: `MenuItem`, `MenuSeparator`, `MenuGroup`, or any
      *  custom element. */
     children?: React.ReactNode;
@@ -88,4 +91,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, open, onStateChange, round, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, open, onStateChange, round, role, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -10,6 +10,7 @@ const Menu = ({
   open,
   onStateChange,
   round,
+  role = "menu",
   className,
   style,
   children,
@@ -34,7 +35,7 @@ const Menu = ({
           });
       } : void 0,
       round: round ? "" : void 0,
-      role: "menu",
+      role,
       "aria-orientation": "vertical",
       class: className,
       style: roundStyle(round, "--menu-round", style),

package/dist/components/MenuItem.d.ts

@@ -75,6 +75,14 @@ export interface MenuItemProps extends BaseProps {
         value?: string | number;
         label?: React.ReactNode;
     }) => void;
+    /** Raw `mousedown` on the row. Mainly to `preventDefault()` so the row doesn't
+     *  take focus on a mouse press — e.g. a combobox option keeping focus in its
+     *  input field while the click still selects. */
+    onMouseDown?: (event: any) => void;
+    /** ARIA role override. Defaults to the role implied by `selectionIndicator`
+     *  (`menuitem` / `menuitemcheckbox` / `menuitemradio`); set it to reparent the
+     *  row under a different container role — e.g. `option` inside a `listbox`. */
+    role?: string;
     /** Item content. With `label` set, children are extra content — most
      *  notably the nested `<Menu>` for a submenu parent. */
     children?: React.ReactNode;
@@ -99,4 +107,4 @@ export interface MenuItemProps extends BaseProps {
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, className, style, children, ...rest }: MenuItemProps) => any;
+export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -16,6 +16,7 @@ const MenuItem = ({
   submenu,
   value,
   onSelect,
+  role: roleOverride,
   className,
   style,
   children,
@@ -30,7 +31,7 @@ const MenuItem = ({
   return /* @__PURE__ */ jsxs(
     "a-menu-item",
     {
-      role,
+      role: roleOverride ?? role,
       tabIndex: 0,
       disabled: disabled ? "" : void 0,
       selected: keepTint ? "" : void 0,

package/dist/components/Select.d.ts

@@ -176,9 +176,12 @@ export interface SelectCommonProps extends Omit<BaseProps, 'children'> {
      *  option's **value / label / hint**. Pass a **function** `(option, query) =>
      *  boolean` for custom matching (called per option; return `true` to keep it). */
     filter?: boolean | ((option: SelectOption, query: string) => boolean);
-    /** `multiple` only: add a "Select all" row at the top that toggles every enabled
+    /** `multiple` only: a "Select all" row at the top that toggles every enabled
      *  option (the currently-visible ones when a `filter` query is active); its box
-     *  shows the mixed state when only some are selected. */
+     *  shows the mixed state when only some are selected. On by default in
+     *  `multiple` mode — set `false` to drop the row (and with it the Alt/⌥-click
+     *  isolate accelerator it gates).
+     *  @defaultValue true */
     selectAll?: boolean;
     /** Label for the `selectAll` row.
      *  @defaultValue Select all */