@antadesign/anta 0.3.3 → 0.3.5

package/dist/components/InputTime.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+const presence = (on) => on ? "" : void 0;
+const isStringish = (n) => typeof n === "string" || typeof n === "number";
+const attrsOf = (e) => {
+  const el = e?.target ?? {};
+  const value = el.value ?? "";
+  return {
+    value,
+    name: el.getAttribute?.("name") ?? void 0,
+    empty: !value,
+    valid: el.validity ? el.validity.valid : void 0,
+    validationMessage: el.validationMessage ?? ""
+  };
+};
+const STATUS_ICON = {
+  critical: "warning-diamond",
+  warning: "warning-triangle",
+  success: "circle-check",
+  info: "info",
+  brand: "circle-small-solid"
+};
+const InputTime = ({
+  label,
+  hint,
+  status,
+  statusIcon,
+  tone,
+  size,
+  round,
+  value,
+  defaultValue,
+  locale,
+  hour12,
+  min,
+  max,
+  name,
+  disabled,
+  required,
+  icon,
+  clearable,
+  dimActions,
+  trailing,
+  onValueChange,
+  onClearInput,
+  children,
+  className,
+  style,
+  ...rest
+}) => {
+  const statusTone = status && status !== "neutral" ? status : void 0;
+  const glyph = statusIcon === void 0 ? statusTone ? STATUS_ICON[statusTone] : void 0 : statusIcon;
+  return /* @__PURE__ */ jsxs(
+    "a-input-time",
+    {
+      size: size && size !== "medium" ? size : void 0,
+      round: round ? "" : void 0,
+      value,
+      defaultvalue: defaultValue,
+      locale,
+      hour12: hour12 === void 0 ? void 0 : hour12 ? "true" : "false",
+      min,
+      max,
+      status: statusTone,
+      tone: tone || void 0,
+      name,
+      disabled: presence(disabled),
+      required: presence(required),
+      "dim-actions": presence(dimActions),
+      "aria-invalid": status === "critical" ? "true" : void 0,
+      oninput: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
+      onchange: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
+      onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,
+      class: className,
+      style: roundStyle(round, "--input-time-round", toneStyle(tone, "--input-time-tone-source", style)),
+      ...rest,
+      children: [
+        label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
+        icon !== false && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: /* @__PURE__ */ jsx(Icon, { shape: icon ?? "clock" }) }),
+        clearable && // Real <a-button> in the element's `clear` slot; the element owns its
+        // visibility (shown only when filled). It fires `clearrequest`, which the
+        // element turns into clear(). CONTRACT: `data-custom-event` MUST match
+        // CLEAR_TRIGGER in src/elements/a-input-time.ts (string duplicated, not
+        // shared, to keep the wrapper/element decoupled).
+        /* @__PURE__ */ jsx("span", { slot: "clear", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            priority: "tertiary",
+            size,
+            round: !!round,
+            icon: "x",
+            "aria-label": "Clear",
+            "data-custom-event": "clearrequest"
+          }
+        ) }),
+        trailing != null && /* @__PURE__ */ jsx("span", { slot: "trailing", style: { display: "contents" }, children: trailing }),
+        hint != null && /* @__PURE__ */ jsxs("span", { slot: "hint", style: { display: "contents" }, children: [
+          glyph && /* @__PURE__ */ jsx(Icon, { shape: glyph, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: hint })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  InputTime
+};

package/dist/components/Menu.d.ts

@@ -22,6 +22,11 @@ export interface MenuProps extends BaseProps {
     /** Gap in pixels between the trigger and the menu.
      *  @defaultValue 4 */
     offset?: number;
+    /** Size the menu to its content instead of flooring its width to the trigger.
+     *  A root menu is never narrower than its trigger by default; set this for a
+     *  content menu under a wide trigger (e.g. a calendar below a full-width field)
+     *  so it wraps its content and left-aligns under the trigger. */
+    autoWidth?: boolean;
     /** Controlled open state. Omit for the default **uncontrolled** menu (it
      *  opens/closes itself via its triggers). Pass a boolean to **control** it:
      *  the menu's visibility follows `open`, and user dismiss (Esc, outside-click,
@@ -44,6 +49,15 @@ export interface MenuProps extends BaseProps {
         next: boolean;
         prev: boolean;
     }) => 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 owns the field reflects this
+     *  onto its `aria-activedescendant` — the element can't write that light-DOM
+     *  attribute itself. Passed straight through to the element. */
+    onactivedescendant?: (e: CustomEvent<{
+        id: string | null;
+    }>) => void;
     /** The menu's contents: `MenuItem`, `MenuSeparator`, `MenuGroup`, or any
      *  custom element. */
     children?: React.ReactNode;
@@ -74,4 +88,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, open, onStateChange, round, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, open, onStateChange, round, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -6,6 +6,7 @@ const Menu = ({
   coord,
   nohover,
   offset,
+  autoWidth,
   open,
   onStateChange,
   round,
@@ -22,6 +23,7 @@ const Menu = ({
       coord: coord ? "" : void 0,
       nohover: nohover ? "" : void 0,
       offset: offset != null ? String(offset) : void 0,
+      autowidth: autoWidth ? "" : void 0,
       state: open === void 0 ? void 0 : open ? "open" : "closed",
       onstatechange: onStateChange ? (e) => {
         const { event, detail } = nativeStateChange(e);

package/dist/components/MenuItem.js

@@ -39,14 +39,8 @@ const MenuItem = ({
       style: toneStyle(effectiveTone, "--menu-item-tone-source", style),
       submenu: submenu ? "" : void 0,
       "aria-haspopup": submenu ? "menu" : void 0,
-      "aria-expanded": submenu ? "false" : void 0,
       "aria-disabled": disabled ? "true" : void 0,
-      onClick: disabled || !onSelect ? void 0 : (e) => {
-        if (submenu) return;
-        const t = e.target;
-        if (t?.closest?.("a-menu-item") !== e.currentTarget) return;
-        onSelect(e, { value, label });
-      },
+      onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
       class: className,
       ...rest,
       children: [

package/dist/components/Select.d.ts

@@ -5,7 +5,9 @@ import type { IconShape } from '../elements/a-icon.shapes';
  *  arbitrary fields (a `ranAt` date, a `status`, …) and read them back in
  *  `renderOption`; the built-in filter still matches on `value`/`label`/`hint`. */
 export interface SelectOption {
-    /** The option's value — its identity and what `onValueChange` reports. */
+    /** The option's value — its identity, what `value` / `defaultValue` name, and what
+     *  `onValueChange` reports. Unique across the whole `options` tree (selection is
+     *  value-keyed and global across groups / submenus). */
     value: string;
     /** Visible label. Defaults to `value`. */
     label?: string;
@@ -18,6 +20,11 @@ export interface SelectOption {
     /** Tone for this option's row (label, icon, hint, selected tint, and the
      *  checkbox/radio indicator). A named tone or a custom CSS color. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Tooltip for this option's row — a string or any node. In a `multiple`
+     *  select with `selectAll`, a row with no `tooltip` falls back to a default
+     *  hint for the Alt/Option-click "select only this" accelerator; set `tooltip`
+     *  to override that, or `''` to suppress it. */
+    tooltip?: React.ReactNode;
     /** Your own data — attach anything and read it in `renderOption`. */
     [key: string]: unknown;
 }
@@ -90,8 +97,10 @@ export interface TriggerState {
 }
 /** Snapshot passed as the 2nd argument to `onValueChange` — describes *what*
  *  changed, alongside the new full value in the 1st argument. A discriminated
- *  union: a row toggle carries `value` + `option`; the "Select all" row carries
- *  `all: true` instead. Narrow on `'all' in attrs` before reading `option`. */
+ *  union: a row toggle carries `value` + `option`; a bulk change (the "Select all"
+ *  row, or the `clearable` "Clear" footer) carries `all: true` instead. **Always
+ *  narrow on `'all' in attrs` before reading `option`** — the `all` variant fires
+ *  for single-select too (via `clearable`), not just multiple. */
 export type SelectChangeAttrs = {
     /** The option value that changed — the chosen value (single) or the toggled
      *  row (multiple). */
@@ -101,9 +110,11 @@ export type SelectChangeAttrs = {
     /** Multiple only: whether the change turned selection **on** (true) or off. */
     selected?: boolean;
 } | {
-    /** Marks the change as coming from the "Select all" row (multiple only). */
+    /** Marks the change as a bulk one with no single `option`: the "Select all"
+     *  row (multiple), or the `clearable` "Clear" footer (single or multiple). */
     all: true;
-    /** Whether Select-all turned everything **on** (true) or cleared it. */
+    /** Whether the bulk change turned everything **on** (true) or cleared it
+     *  (false — always false for a "Clear"). */
     selected: boolean;
 };
 /** Props shared by both selection modes, intersected into `SelectProps`. Exported
@@ -113,7 +124,12 @@ export interface SelectCommonProps extends Omit<BaseProps, 'children'> {
     /** The options to choose from — bare strings, `SelectOption` objects, `SelectGroup`s
      *  (inline titled sections), or `SelectSubmenu`s (flyout branches). Groups and
      *  submenus nest and mix with plain options. Selection stays global (one `value`,
-     *  leaf options only); a filter query flattens the tree into grouped results. */
+     *  leaf options only); a filter query flattens the tree into grouped results.
+     *
+     *  Each leaf `value` is the option's identity and must be **unique across the whole
+     *  tree** — selection is value-keyed, so a value repeated in two sections is one
+     *  logical pick (both rows toggle together; the trigger resolves to the last). Dev
+     *  builds `console.warn` on a duplicate. */
     options: SelectItem[];
     /** The per-row mark for **single**-select: `'none'` (a tint-only highlight),
      *  `'check'` (a trailing checkmark on the selected row, keeping the tint — the
@@ -127,6 +143,11 @@ export interface SelectCommonProps extends Omit<BaseProps, 'children'> {
      *  `leading` slot). With a custom `renderTrigger`, it's passed through as
      *  `state.icon` instead — the consumer places it. */
     icon?: IconShape;
+    /** Arbitrary content for the default trigger's leading slot (piped straight to
+     *  `Input`'s `leading`) — e.g. a key prefix before the value. Overrides the
+     *  `icon`-derived glyph when both are set; include your own `<Icon>` if you want
+     *  one alongside. Ignored with a custom `renderTrigger`. */
+    leading?: React.ReactNode;
     /** Field label, above the trigger (Input's `label`). */
     label?: string;
     /** Helper text under the field (Input's `hint`). */
@@ -162,6 +183,13 @@ export interface SelectCommonProps extends Omit<BaseProps, 'children'> {
     /** Label for the `selectAll` row.
      *  @defaultValue Select all */
     selectAllLabel?: string;
+    /** Add a "Clear" row pinned in the menu **footer** that empties the selection
+     *  (single → none, multiple → `[]`). Shown only while something is selected, so
+     *  it never scrolls away in a long or filtered list. */
+    clearable?: boolean;
+    /** Label for the `clearable` footer row.
+     *  @defaultValue Clear */
+    clearLabel?: string;
     /** Render the **content** of each option row yourself, replacing the built-in
      *  `label`/`hint`/`icon` layout. Select still supplies the row box, click, ARIA,
      *  and the selection indicator — you return only what goes *inside*. Read extra
@@ -182,8 +210,10 @@ export interface SelectCommonProps extends Omit<BaseProps, 'children'> {
      *  the menu anchors to it (its own previous DOM sibling) and opens it on click,
      *  so a fragment, multiple siblings, or a non-focusable wrapper will misanchor
      *  (the menu warns in the console if the trigger has no focusable element). Give
-     *  the element `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The field
-     *  props (`label`, `hint`, `size`, `status`, `placeholder`, `round`) don't apply. */
+     *  the element `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The custom
+     *  trigger owns its own styling: the field props (`label`, `hint`, `size`, `status`,
+     *  `placeholder`, `round`) and `className` / `style` apply to the *default* trigger
+     *  only — put your own on the element you return. */
     renderTrigger?: (state: TriggerState) => React.ReactNode;
     /** Render content in the menu body when the (filtered) option list is empty —
      *  a "no results" message, a loading indicator (gated on your own external
@@ -204,11 +234,13 @@ export type SelectProps = SelectCommonProps & ({
      *  array value.
      *  @defaultValue single */
     selection?: 'single';
-    /** Controlled value. When provided, the consumer owns selection: the field
-     *  follows this prop and a pick only *requests* a change via `onValueChange`
-     *  (reject by not updating). Leave undefined for uncontrolled. */
+    /** Controlled value — the `value` string of the selected option. When
+     *  provided, the consumer owns selection: the field follows this prop and a
+     *  pick only *requests* a change via `onValueChange` (reject by not updating).
+     *  Leave undefined for uncontrolled. */
     value?: string;
-    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    /** Initial value (an option's `value` string) for the uncontrolled case — the
+     *  wrapper then owns it. */
     defaultValue?: string;
     /** Fires after the selection changes, with the new value and a
      *  `{ value, option }` snapshot. Select has no discrete element state, so
@@ -218,15 +250,65 @@ export type SelectProps = SelectCommonProps & ({
     /** Multi-select: checkboxes on every row, the menu stays open while
      *  toggling, the field shows an "N selected" count, and `value` is an array. */
     selection: 'multiple';
-    /** Controlled values (see the single-select `value` note). */
+    /** Controlled values — the `value` strings of the selected options (see the
+     *  single-select `value` note). */
     value?: string[];
-    /** Initial values for the uncontrolled case. */
+    /** Initial values (option `value` strings) for the uncontrolled case. */
     defaultValue?: string[];
     /** Fires after any toggle, with the new value array and a `{ value, option,
      *  selected }` snapshot of the row that changed (or `{ all: true }` for the
      *  Select-all row). */
     onValueChange?: (value: string[], attrs: SelectChangeAttrs) => void;
 });
+/** Rolled-up selection of a group / submenu subtree: `'none'` / `'all'` of the
+ *  descendant leaves selected, or `'some'` in between. On `SelectedGroup` /
+ *  `SelectedSubmenu`, for a section indicator or custom styling. */
+export type SelectionState = 'none' | 'some' | 'all';
+/** A leaf option annotated with its current selection — a `SelectOption` plus
+ *  `selected`. Returned by {@link optionsWithSelection}. */
+export type SelectedOption = SelectOption & {
+    selected: boolean;
+};
+/** A group with its descendants annotated and a rolled-up `selectionState`.
+ *  Returned by {@link optionsWithSelection}. */
+export interface SelectedGroup extends Omit<SelectGroup, 'options'> {
+    options: SelectedItem[];
+    selectionState: SelectionState;
+}
+/** A submenu with its descendants annotated and a rolled-up `selectionState`.
+ *  Returned by {@link optionsWithSelection}. */
+export interface SelectedSubmenu extends Omit<SelectSubmenu, 'submenu'> {
+    submenu: SelectedItem[];
+    selectionState: SelectionState;
+}
+/** One node of the tree from {@link optionsWithSelection}: a leaf `SelectedOption`
+ *  (with `selected`), or a `SelectedGroup` / `SelectedSubmenu` (annotated children
+ *  + rolled-up `selectionState`). Mirrors `SelectItem` minus the bare-string
+ *  shorthand — strings are normalized to `SelectedOption`. */
+export type SelectedItem = SelectedOption | SelectedGroup | SelectedSubmenu;
+/**
+ * Project a `Select` `options` tree onto a set of selected values: returns a mirror
+ * of the tree with every leaf marked `selected` and every group / submenu carrying a
+ * rolled-up `selectionState` (`'none'` / `'some'` / `'all'` of its descendant leaves).
+ * Bare-string options are normalized to `{ value, label }`; structure and order are
+ * preserved.
+ *
+ * A pure function of `(options, values)` — it needs no `Select` instance and reads
+ * nothing off the change event, so it behaves identically in controlled and
+ * uncontrolled code. Pass the current `value` (a string, an array, or `undefined`)
+ * and render a grouped summary, drive section indicators, or diff picks.
+ *
+ * A value that appears under more than one section marks the leaf in *every* place it
+ * occurs (selection is value-keyed), mirroring how the menu itself renders it.
+ *
+ * @example
+ * ```tsx
+ * const tree = optionsWithSelection(options, values)
+ * // tree[1] === { label: 'Engineering', selectionState: 'some', options: [
+ * //   { value: 'eng-fe', label: 'Frontend', selected: false }, … ] }
+ * ```
+ */
+export declare function optionsWithSelection(options: SelectItem[], values: string | string[] | undefined): SelectedItem[];
 /**
  * `<Select>` — a single- or multi-select dropdown, composed from `<Input>` (a
  * read-only trigger) and `<Menu>` (the options). `selection` sets behaviour:

package/dist/components/Select.js

@@ -6,8 +6,34 @@ import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
 import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
+import { Tooltip } from "./Tooltip";
 import styles from "./Select.module.css";
+const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
 const normalize = (o) => typeof o === "string" ? { value: o, label: o } : o;
+function optionsWithSelection(options, values) {
+  const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
+  const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";
+  const walk = (items) => items.map((raw) => {
+    if (typeof raw !== "string" && Array.isArray(raw.submenu)) {
+      const sm = raw;
+      const children = walk(sm.submenu);
+      const on = children.reduce((n, c) => n + c.on, 0);
+      const total = children.reduce((n, c) => n + c.total, 0);
+      return { node: { ...sm, submenu: children.map((c) => c.node), selectionState: state(on, total) }, on, total };
+    }
+    if (typeof raw !== "string" && Array.isArray(raw.options)) {
+      const g = raw;
+      const children = walk(g.options);
+      const on = children.reduce((n, c) => n + c.on, 0);
+      const total = children.reduce((n, c) => n + c.total, 0);
+      return { node: { ...g, options: children.map((c) => c.node), selectionState: state(on, total) }, on, total };
+    }
+    const o = normalize(raw);
+    const selected = set.has(o.value);
+    return { node: { ...o, selected }, on: selected ? 1 : 0, total: 1 };
+  });
+  return walk(options).map((c) => c.node);
+}
 const Select = (props) => {
   const {
     options,
@@ -18,6 +44,7 @@ const Select = (props) => {
     onValueChange,
     placeholder,
     icon,
+    leading,
     label,
     hint,
     size,
@@ -29,6 +56,8 @@ const Select = (props) => {
     filter,
     selectAll,
     selectAllLabel = "Select all",
+    clearable,
+    clearLabel = "Clear",
     renderOption,
     renderIndicator,
     renderTrigger,
@@ -47,6 +76,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 isSubmenu = (it) => typeof it === "object" && Array.isArray(it.submenu);
   const isGroup = (it) => typeof it === "object" && Array.isArray(it.options);
@@ -62,6 +92,12 @@ const Select = (props) => {
   };
   const allLeaves = [];
   collectLeaves(options, void 0, false, allLeaves);
+  const seenValues = /* @__PURE__ */ new Set();
+  for (const l of allLeaves) {
+    if (seenValues.has(l.opt.value))
+      console.warn(`[anta] <Select> duplicate option value=${JSON.stringify(l.opt.value)} \u2014 values must be unique.`);
+    seenValues.add(l.opt.value);
+  }
   const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
   const filtering = filter !== void 0 && filter !== false;
   const q = query.trim();
@@ -98,8 +134,14 @@ const Select = (props) => {
     const o = byValue.get(currentRaw);
     display = o ? o.label ?? o.value : "";
   }
-  const choose = (o) => {
+  const choose = (o, e) => {
     if (multiple) {
+      if (selectAll && e?.altKey) {
+        const next2 = [o.value];
+        if (!controlled) setInternal(next2);
+        emit?.(next2, { value: o.value, option: o, selected: true });
+        return;
+      }
       const has = selectedValues.includes(o.value);
       const next = has ? selectedValues.filter((v) => v !== o.value) : [...selectedValues, o.value];
       if (!controlled) setInternal(next);
@@ -119,12 +161,20 @@ const Select = (props) => {
     if (!controlled) setInternal(next);
     emit?.(next, { all: true, selected: !allSelected });
   };
+  const clear = () => {
+    const next = multiple ? [] : void 0;
+    if (!controlled) setInternal(next);
+    emit?.(next, { all: true, selected: false });
+  };
   const renderOptionRow = (o, disabled2) => {
     const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
     const custom = renderOption?.(o, optState);
     const customMark = renderIndicator?.(optState);
     const ariaSelectable = !multiple && mark === "none" ? { role: "menuitemradio", "aria-checked": isSelected(o.value) ? "true" : "false" } : void 0;
-    return /* @__PURE__ */ jsx(
+    const isolateHint = multiple && selectAll && !disabled2 ? IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this" : void 0;
+    const tip = o.tooltip ?? isolateHint;
+    const hintOnly = o.tooltip == null && isolateHint != null;
+    return /* @__PURE__ */ jsxs(
       MenuItem,
       {
         id: `${uid}-opt-${o.value}`,
@@ -139,8 +189,11 @@ const Select = (props) => {
         selected: isSelected(o.value),
         disabled: disabled2 || void 0,
         "data-menu-open": multiple ? "" : void 0,
-        onSelect: () => choose(o),
-        children: custom
+        onSelect: (e) => choose(o, e),
+        children: [
+          custom,
+          tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { follow: true, delay: 700 } : {}, children: tip })
+        ]
       },
       o.value
     );
@@ -211,7 +264,7 @@ const Select = (props) => {
         readOnly: true,
         dimActions: true,
         disabled,
-        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        leading: leading ?? (icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0),
         size,
         status,
         statusIcon,
@@ -246,8 +299,12 @@ const Select = (props) => {
       {
         onStateChange: (_e, { next }) => {
           setOpen(next);
-          if (!next) setQuery("");
+          if (!next) {
+            setQuery("");
+            setActiveId(null);
+          }
         },
+        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
@@ -261,6 +318,7 @@ 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)
             }
           ) }),
@@ -279,12 +337,15 @@ const Select = (props) => {
             ),
             /* @__PURE__ */ jsx(MenuSeparator, {})
           ] }),
-          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false)
+          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false),
+          clearable && selectedValues.length > 0 && // Pinned in the footer so it never scrolls away in a long / filtered list.
+          /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(MenuItem, { icon: "x", label: clearLabel, "data-menu-open": "", onSelect: clear }) })
         ]
       }
     )
   ] });
 };
 export {
-  Select
+  Select,
+  optionsWithSelection
 };

package/dist/components/Select.module.css

@@ -1 +1 @@
-.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}
+.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}