@antadesign/anta 0.3.5 → 0.3.6

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

package/dist/components/Select.js

@@ -1,5 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useId } from "../jsx-runtime";
+import { ISOLATE_HINT } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Icon } from "./Icon";
 import { Menu } from "./Menu";
@@ -8,8 +10,6 @@ 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";
@@ -28,7 +28,7 @@ function optionsWithSelection(options, values) {
       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 o = normalizeOpt(raw);
     const selected = set.has(o.value);
     return { node: { ...o, selected }, on: selected ? 1 : 0, total: 1 };
   });
@@ -54,7 +54,7 @@ const Select = (props) => {
     disabled,
     toneSelected,
     filter,
-    selectAll,
+    selectAll = true,
     selectAllLabel = "Select all",
     clearable,
     clearLabel = "Clear",
@@ -85,7 +85,7 @@ const Select = (props) => {
       if (typeof raw !== "string" && isSubmenu(raw)) collectLeaves(raw.submenu, raw.label, disabled2 || !!raw.disabled, out);
       else if (typeof raw !== "string" && isGroup(raw)) collectLeaves(raw.options, raw.label, disabled2 || !!raw.disabled, out);
       else {
-        const o = normalize(raw);
+        const o = normalizeOpt(raw);
         out.push({ opt: o, disabled: disabled2 || !!o.disabled, group });
       }
     }
@@ -101,28 +101,11 @@ const Select = (props) => {
   const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
   const filtering = filter !== void 0 && filter !== false;
   const q = query.trim();
-  const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const queryRe = filtering && typeof filter !== "function" && q ? new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i") : null;
-  const matches = (o) => typeof filter === "function" ? filter(o, q) : !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+  const queryRe = filtering && typeof filter !== "function" ? matchQueryRegex(q) : null;
+  const matches = (o) => typeof filter === "function" ? filter(o, q) : matchesQuery(o, queryRe);
   const prune = typeof filter === "function" || filtering && !!q;
   const visibleLeaves = prune ? allLeaves.filter((l) => matches(l.opt)) : allLeaves;
   const flattening = filtering && !!q;
-  const highlight = (text) => {
-    if (!queryRe) return text;
-    const re = new RegExp(queryRe.source, "gi");
-    const out = [];
-    let last = 0;
-    let m;
-    while ((m = re.exec(text)) !== null) {
-      if (m.index > last) out.push(text.slice(last, m.index));
-      out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
-      last = m.index + m[0].length;
-      if (m[0].length === 0) re.lastIndex++;
-    }
-    if (out.length === 0) return text;
-    if (last < text.length) out.push(text.slice(last));
-    return out;
-  };
   const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
   const isSelected = (v) => selectedValues.includes(v);
   const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
@@ -171,7 +154,7 @@ 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;
-    const isolateHint = multiple && selectAll && !disabled2 ? IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this" : void 0;
+    const isolateHint = multiple && selectAll && !disabled2 ? ISOLATE_HINT : void 0;
     const tip = o.tooltip ?? isolateHint;
     const hintOnly = o.tooltip == null && isolateHint != null;
     return /* @__PURE__ */ jsxs(
@@ -181,8 +164,8 @@ const Select = (props) => {
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
         indicator: customMark ?? void 0,
-        label: custom ? void 0 : queryRe ? highlight(o.label ?? o.value) : o.label ?? o.value,
-        hint: custom ? void 0 : queryRe && o.hint ? highlight(o.hint) : o.hint,
+        label: custom ? void 0 : highlight(o.label ?? o.value, queryRe),
+        hint: custom ? void 0 : o.hint ? highlight(o.hint, queryRe) : o.hint,
         icon: custom ? void 0 : o.icon,
         tone: o.tone,
         toneSelected,
@@ -227,7 +210,7 @@ const Select = (props) => {
         if (inner.length) out.push(/* @__PURE__ */ jsx(MenuGroup, { label: raw.label, children: inner }, `grp-${i}-${raw.label}`));
         return;
       }
-      const o = normalize(raw);
+      const o = normalizeOpt(raw);
       if (typeof filter === "function" && !matches(o)) return;
       out.push(renderOptionRow(o, disabled2 || !!o.disabled));
     });

package/dist/components/SelectFaceted.d.ts

@@ -36,7 +36,9 @@ export interface SelectFacetMultiple extends FacetBase {
     options: SelectItem[];
     /** Add a search field atop this facet's flyout that filters its options. */
     filter?: FacetFilter;
-    /** Add a "Select all" row that toggles every option. */
+    /** A "Select all" row that toggles every option. On by default — set `false`
+     *  to drop it.
+     *  @defaultValue true */
     selectAll?: boolean;
     /** Label for the `selectAll` row.
      *  @defaultValue Select all */
@@ -129,6 +131,10 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     priority?: 'primary' | 'secondary';
     /** Disable the whole control. */
     disabled?: boolean;
+    /** Tone applied to a selected option row in the facet flyouts (label, selected
+     *  tint, and the check / checkbox indicator). A named tone or a custom CSS
+     *  colour, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
+    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Add a single search field to the top of the root menu that flattens every
      *  `single` / `multiple` facet's options into one list and searches across them
      *  — typing "alice" surfaces it under both an Assignee and an Owner facet, each