@antadesign/anta 0.3.3 → 0.3.4

package/dist/anta_helpers.d.ts

@@ -22,10 +22,6 @@ export declare function nativeStateChange<D>(e: CustomEvent<D> | {
     event: CustomEvent<D>;
     detail?: D;
 };
-export declare const TABS_KIND: unique symbol;
-export declare function markTabsKind<F>(component: F & {
-    [TABS_KIND]?: "tab" | "panel";
-}, kind: "tab" | "panel"): F;
 /** 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,11 +16,6 @@ function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
 }
-const TABS_KIND = Symbol.for("@antadesign/anta/tabs.kind");
-function markTabsKind(component, kind) {
-  component[TABS_KIND] = kind;
-  return component;
-}
 const NAMED_TONES = /* @__PURE__ */ new Set([
   "brand",
   "neutral",
@@ -112,12 +107,10 @@ export {
   HTMLElementBase,
   NAMED_TONES,
   SelectableChildElement,
-  TABS_KIND,
   anchorRect,
   hasChildren,
   isInsideOpenMenu,
   isMenuOpen,
-  markTabsKind,
   nativeStateChange,
   roundStyle,
   setMenuPresence,

package/dist/components/Calendar.d.ts

@@ -36,6 +36,11 @@ export interface CalendarProps extends Omit<BaseProps, "children" | "onChange">
     size?: "small" | "medium" | "large";
     /** Disable the whole calendar (not focusable or selectable). */
     disabled?: boolean;
+    /** Move keyboard focus onto the active day. Change this to a new value (e.g.
+     *  increment a counter) to focus the cursor cell — `InputDate` bumps it when
+     *  the calendar is opened from the field by keyboard (ArrowDown), so focus
+     *  lands in the grid. The initial value never focuses; only a change does. */
+    focusSignal?: number;
     /** Accessible name for the grid (defaults to the visible month heading). */
     "aria-label"?: string;
     /** Fired whenever the selection changes — event-first. `detail` is
@@ -76,5 +81,5 @@ export interface CalendarProps extends Omit<BaseProps, "children" | "onChange">
  * hydration mismatch. Render it client-side only (Astro `client:only`, or a
  * dynamic import inside `useEffect`).
  */
-export declare const Calendar: ({ value, defaultValue, min, max, locale, name, size, disabled, onStateChange, onChange, onValueChange, className, style, "aria-label": ariaLabel, ...rest }: CalendarProps) => any;
+export declare const Calendar: ({ value, defaultValue, min, max, locale, name, size, disabled, focusSignal, onStateChange, onChange, onValueChange, className, style, "aria-label": ariaLabel, ...rest }: CalendarProps) => any;
 export {};

package/dist/components/Calendar.js

@@ -17,6 +17,7 @@ const Calendar = ({
   name,
   size,
   disabled,
+  focusSignal,
   onStateChange,
   onChange,
   onValueChange,
@@ -42,6 +43,11 @@ const Calendar = ({
   const headingId = useId();
   const month = buildMonth({ anchor: cursor, locale: resolvedLocale, min: minD, max: maxD, selected, today });
   const cursorIso = cursor.toString();
+  const [lastFocusSignal, setLastFocusSignal] = useState(focusSignal);
+  if (focusSignal !== lastFocusSignal) {
+    setLastFocusSignal(focusSignal);
+    if (focusSignal !== void 0) setFocusReq({ iso: cursorIso, n: focusSignal });
+  }
   const minYear = minD ? minD.year : today.year - 3;
   const maxYear = maxD ? maxD.year : today.year + 3;
   const years = [];

package/dist/components/InputDate.d.ts

@@ -45,7 +45,8 @@ export interface InputDateProps extends Omit<BaseProps, 'children'> {
     round?: boolean | number | string;
     /** Show a clear button once the field has a value. */
     clearable?: boolean;
-    /** Leading icon at the start of the field. */
+    /** Leading icon at the start of the field — the calendar affordance.
+     *  @defaultValue calendar-days */
     icon?: IconShape;
     /** Include a time. The value becomes ISO `YYYY-MM-DDTHH:mm`, the field parses a
      *  trailing time after a space (`06/15/2026 14:30`, `… 2:30pm`), and the menu
@@ -67,10 +68,11 @@ export interface InputDateProps extends Omit<BaseProps, 'children'> {
  * `Menu` + `Calendar` (no `a-inputdate` element; the wrapper is the coordinator).
  * The field accepts free text and resolves it on commit (blur / Enter) with a
  * lenient, locale-aware parser, then rewrites the entry to the canonical format;
- * an unrecognized entry marks the field `critical` and keeps the text. The trailing
- * calendar button opens a `Calendar` in a menu (a field click just types); with
- * `time`, a time row sits under the grid. The value is an ISO `YYYY-MM-DD` string,
- * or `YYYY-MM-DDTHH:mm` with `time`.
+ * an unrecognized entry marks the field `critical` and keeps the text. Clicking the
+ * field (or pressing ArrowDown) opens a `Calendar` in a menu; a leading calendar
+ * icon marks the affordance. Mouse-open keeps focus in the field so you can keep
+ * typing; ArrowDown moves focus into the grid. With `time`, a time row sits under
+ * the grid. The value is an ISO `YYYY-MM-DD` string, or `YYYY-MM-DDTHH:mm` with `time`.
  *
  * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
  * Requires `@antadesign/anta/elements` (client-side only).

package/dist/components/InputDate.js

@@ -72,6 +72,7 @@ const InputDate = ({
   const [text, setText] = useState(() => fmt(current));
   const [open, setOpen] = useState(false);
   const [invalid, setInvalid] = useState(false);
+  const [focusNonce, setFocusNonce] = useState(0);
   const [hourText, setHourText] = useState(curHourShown);
   const [minuteText, setMinuteText] = useState(curM);
   const meridiem = curMer;
@@ -147,127 +148,121 @@ const InputDate = ({
         round,
         disabled,
         clearable,
-        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        leading: /* @__PURE__ */ jsx(Icon, { shape: icon ?? "calendar-days" }),
         value: text,
         placeholder: pattern,
         inputMode: time ? "text" : "numeric",
         autoComplete: "off",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open ? "true" : "false",
         onInput: (e) => {
           setText(e.currentTarget.value);
           if (invalid) setInvalid(false);
         },
-        onChange: (e) => {
-          if (e.target !== e.currentTarget) return;
-          resolve(e.currentTarget.value);
+        onChange: (e) => resolve(e.currentTarget.value),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" && !disabled) {
+            e.preventDefault();
+            if (!open) e.currentTarget.click();
+            setFocusNonce((n) => n + 1);
+          }
         },
         className: cn(styles.dateField, className),
         style,
-        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        open,
+        placement: "bottom-start",
+        className: styles.calendarMenu,
+        onStateChange: (_e, { next }) => setOpen(next),
+        children: /* @__PURE__ */ jsxs("div", { "data-menu-open": "", children: [
           /* @__PURE__ */ jsx(
-            Button,
+            Calendar,
             {
-              priority: "tertiary",
+              value: dateISO,
+              min,
+              max,
+              locale,
               size,
-              icon: "calendar-days",
-              "aria-label": "Open calendar",
-              "aria-haspopup": "dialog",
-              disabled
+              disabled,
+              focusSignal: focusNonce,
+              onStateChange: (_e, { next, reason }) => {
+                if (reason !== "user") return;
+                const d = next ?? "";
+                apply(time && d ? withTime(d) : d);
+                if (!time) setOpen(false);
+              }
             }
           ),
-          /* @__PURE__ */ jsx(
-            Menu,
-            {
-              open,
-              placement: "bottom-end",
-              className: styles.calendarMenu,
-              onStateChange: (_e, { next }) => setOpen(next),
-              children: /* @__PURE__ */ jsxs("div", { "data-menu-open": "", children: [
-                /* @__PURE__ */ jsx(
-                  Calendar,
-                  {
-                    value: dateISO,
-                    min,
-                    max,
-                    locale,
-                    size,
-                    disabled,
-                    onStateChange: (_e, { next, reason }) => {
-                      if (reason !== "user") return;
-                      const d = next ?? "";
-                      apply(time && d ? withTime(d) : d);
-                      if (!time) setOpen(false);
-                    }
-                  }
-                ),
-                time && /* @__PURE__ */ jsxs("div", { className: styles.timeRow, children: [
-                  /* @__PURE__ */ jsxs("div", { className: styles.time, role: "group", "aria-label": "Time", children: [
-                    /* @__PURE__ */ jsx(Icon, { shape: "clock", "aria-hidden": "true", className: styles.clock }),
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        size,
-                        className: styles.timeField,
-                        value: hourText,
-                        placeholder: "HH",
-                        type: "number",
-                        inputMode: "numeric",
-                        "aria-label": "Hours",
-                        disabled,
-                        onInput: (e) => setHourText(e.currentTarget.value.replace(/\D/g, "").slice(0, 2)),
-                        onChange: (e) => commitTime(e.currentTarget.value, minuteText, meridiem)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }),
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        size,
-                        className: styles.timeField,
-                        value: minuteText,
-                        placeholder: "MM",
-                        type: "number",
-                        inputMode: "numeric",
-                        "aria-label": "Minutes",
-                        disabled,
-                        onInput: (e) => setMinuteText(e.currentTarget.value.replace(/\D/g, "").slice(0, 2)),
-                        onChange: (e) => commitTime(hourText, e.currentTarget.value, meridiem)
-                      }
-                    ),
-                    twelveHour && /* @__PURE__ */ jsx(
-                      Tabs,
-                      {
-                        className: styles.meridiem,
-                        size,
-                        priority: "primary",
-                        "aria-label": "AM or PM",
-                        options: [
-                          { value: "AM", label: "AM" },
-                          { value: "PM", label: "PM" }
-                        ],
-                        value: meridiem,
-                        onStateChange: (_e, { next }) => {
-                          if (next === "AM" || next === "PM") commitTime(hourText, minuteText, next);
-                        },
-                        disabled
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      priority: "tertiary",
-                      size,
-                      icon: "check",
-                      "aria-label": "Done",
-                      onClick: () => setOpen(false)
-                    }
-                  )
-                ] })
-              ] })
-            }
-          )
-        ] }),
-        ...rest
+          time && /* @__PURE__ */ jsxs("div", { className: styles.timeRow, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.time, role: "group", "aria-label": "Time", children: [
+              /* @__PURE__ */ jsx(Icon, { shape: "clock", "aria-hidden": "true", className: styles.clock }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size,
+                  className: styles.timeField,
+                  value: hourText,
+                  placeholder: "HH",
+                  type: "number",
+                  inputMode: "numeric",
+                  "aria-label": "Hours",
+                  disabled,
+                  onInput: (e) => setHourText(e.currentTarget.value.replace(/\D/g, "").slice(0, 2)),
+                  onChange: (e) => commitTime(e.currentTarget.value, minuteText, meridiem)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size,
+                  className: styles.timeField,
+                  value: minuteText,
+                  placeholder: "MM",
+                  type: "number",
+                  inputMode: "numeric",
+                  "aria-label": "Minutes",
+                  disabled,
+                  onInput: (e) => setMinuteText(e.currentTarget.value.replace(/\D/g, "").slice(0, 2)),
+                  onChange: (e) => commitTime(hourText, e.currentTarget.value, meridiem)
+                }
+              ),
+              twelveHour && /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  className: styles.meridiem,
+                  size,
+                  priority: "primary",
+                  "aria-label": "AM or PM",
+                  options: [
+                    { value: "AM", label: "AM" },
+                    { value: "PM", label: "PM" }
+                  ],
+                  value: meridiem,
+                  onStateChange: (_e, { next }) => {
+                    if (next === "AM" || next === "PM") commitTime(hourText, minuteText, next);
+                  },
+                  disabled
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                priority: "tertiary",
+                size,
+                icon: "check",
+                "aria-label": "Done",
+                onClick: () => setOpen(false)
+              }
+            )
+          ] })
+        ] })
       }
     ),
     name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null

package/dist/components/Menu.d.ts

@@ -44,6 +44,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;

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;
 }
@@ -113,7 +120,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
@@ -204,11 +216,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 +232,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,
@@ -47,6 +73,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 +89,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 +131,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);
@@ -124,7 +163,10 @@ const Select = (props) => {
     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 +181,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
     );
@@ -246,8 +291,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 +310,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)
             }
           ) }),
@@ -286,5 +336,6 @@ const Select = (props) => {
   ] });
 };
 export {
-  Select
+  Select,
+  optionsWithSelection
 };