@antadesign/anta 0.3.27 → 0.3.29

package/dist/components/Panel.js

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

package/dist/components/Progress.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { hasChildren, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { hasChildren, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Progress = ({ value, max = 100, tone, size, round, label, hint, className, style, children, ...rest }) => {
   const indeterminate = value == null || value === false;
   const numericValue = typeof value === "number" ? value : 0;
@@ -11,7 +11,7 @@ const Progress = ({ value, max = 100, tone, size, round, label, hint, className,
     {
       value: indeterminate ? false : numericValue,
       max,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       role: "progressbar",

package/dist/components/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps, OptionPresentationProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps, ToneScope } from "../general_types";
 /** The element's `statechange` payload. `next`/`prev` are values (`null` = nothing
  *  selected); `reason` distinguishes a user pick from a form reset / bfcache restore. */
 type StateReason = "user" | "reset" | "restore";
@@ -21,14 +21,15 @@ export interface RadioOption extends OptionPresentationProps {
     value: string;
     /** The visible label. */
     label?: React.ReactNode;
-    /** Secondary text under the label — explanatory copy, like `Input`'s hint. */
+    /** Secondary text under the label and exposed as this radio option's
+     *  accessible description. */
     hint?: React.ReactNode;
     /** Disable just this option (skipped by keyboard, dropped from the tab order). */
     disabled?: boolean;
     /** Override this one option's mark tone (defaults to the group's `tone`). */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
-    /** Override this one option's `toneSelected` (defaults to the group's). */
-    toneSelected?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Override this option's tone scope. The group scope is inherited when omitted. */
+    toneScope?: ToneScope;
     /** Override this one option's size (defaults to the group's `size`). */
     size?: "small" | "medium" | "large";
 }
@@ -78,18 +79,17 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
      *  @defaultValue 'neutral' */
     status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
     /** Mark tone applied to every option (an option's own `tone` wins), or any literal
-     *  CSS color for a one-off custom tone. Colors the selected-ring fill + dot *and*
-     *  the unselected ring border. Named tones track light/dark mode. Use `toneSelected`
-     *  instead to tone only the selected option and leave the rest neutral. The option
+     *  CSS color for a one-off custom tone. In the default `all` scope it colors the
+     *  selected-ring fill + dot and the unselected ring border. Named tones track
+     *  light/dark mode. Set `toneScope="selected"` to tone only the selected option
+     *  and leave the rest neutral. The option
      *  text stays neutral — recolor it in plain CSS via the `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
-    /** Like `tone`, but colored onto the **selected option only** — every unselected
-     *  ring stays neutral grey. Applied to every option (an option's own `toneSelected`
-     *  wins). Prefer this over `tone` when a resting tinted border would read as a
-     *  validation state.
-     *  @defaultValue 'neutral' */
-    toneSelected?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Apply `tone` to every state, or only to the selected option so unselected
+     *  rings stay neutral. An option's own `toneScope` wins.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Size applied to every option (an option's own `size` wins).
      *  @defaultValue 'medium' */
     size?: "small" | "medium" | "large";
@@ -116,5 +116,5 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
  *
  * Requires `@antadesign/anta/elements` (client-side only).
  */
-export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneSelected, size, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
+export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneScope, size, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
 export {};

package/dist/components/RadioGroup.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useId, useState } from "../jsx-runtime";
-import { nativeStateChange, optionPresentationAttrs, toneStyle } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle } from "../anta_helpers";
 const radioAttrsOf = (el) => ({
   value: el?.value ?? null,
   name: el?.getAttribute?.("name") ?? void 0
@@ -19,7 +19,7 @@ const RadioGroup = ({
   hint,
   status,
   tone,
-  toneSelected,
+  toneScope,
   size,
   disabled,
   orientation,
@@ -63,8 +63,8 @@ const RadioGroup = ({
       "default-state": !controlled ? defaultValue : void 0,
       name,
       status: status && status !== "neutral" ? status : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected || void 0,
+      tone: neutralToneAttr(tone),
+      "tone-scope": toneScope && toneScope !== "all" ? toneScope : void 0,
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
@@ -73,15 +73,7 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(
-        toneSelected,
-        "--radio-tone-source",
-        toneStyle(
-          tone,
-          "--radio-off-tone-source",
-          toneSelected == null ? toneStyle(tone, "--radio-tone-source", style) : style
-        )
-      ),
+      style: toneStyle(tone, "--radio-tone-source", toneStyle(tone, "--radio-off-tone-source", style)),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
@@ -97,19 +89,11 @@ const RadioGroup = ({
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
               tone: o.tone || void 0,
-              "tone-selected": o.toneSelected || void 0,
+              "tone-scope": o.toneScope ?? (o.tone ? toneScope : void 0),
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
               class: optionClassName,
-              style: toneStyle(
-                o.toneSelected,
-                "--radio-tone-source",
-                toneStyle(
-                  o.tone,
-                  "--radio-off-tone-source",
-                  o.toneSelected == null ? toneStyle(o.tone, "--radio-tone-source", optionStyle) : optionStyle
-                )
-              ),
+              style: toneStyle(o.tone, "--radio-tone-source", toneStyle(o.tone, "--radio-off-tone-source", optionStyle)),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Select.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps, OptionPresentationProps } from '../general_types';
+import type { BaseProps, OptionPresentationProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
@@ -30,6 +30,9 @@ export interface SelectOption<V extends OptionValue = string> extends OptionPres
     /** 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 & {});
+    /** Override where this option applies its tone. The Select scope is inherited
+     *  when omitted. */
+    toneScope?: ToneScope;
     /** 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`
@@ -160,37 +163,39 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
     indicator?: 'none' | 'check' | 'radio';
     /** Text shown when nothing is selected. */
     placeholder?: string;
-    /** Leading icon shown at the left of the field (the default trigger's `Input`
-     *  `leading` slot). With a custom `renderTrigger`, it's passed through as
+    /** Leading icon shown at the left of the field. With a custom
+     *  `renderTrigger`, it's passed through as
      *  `state.icon` instead — the consumer places it. */
     icon?: IconShape;
-    /** Content for the default trigger's `leading` slot, such as a key prefix
+    /** Content before the default trigger's value, such as a key prefix
      *  before the value. It replaces the icon derived from `icon`. Include an
      *  `<Icon>` in this content when both are needed. Ignored by `renderTrigger`. */
     leading?: React.ReactNode;
-    /** Field label, above the trigger (Input's `label`). */
+    /** Field label, above the trigger. */
     label?: string;
-    /** Helper text under the field (Input's `hint`). */
+    /** Helper text under the field. */
     hint?: string;
     /** Field size.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Validation/feedback tone for the field (Input's `status`).
+    /** Validation/feedback tone for the field.
      *  @defaultValue neutral */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
-    /** Glyph shown before the `hint` when `status` is set (Input's `statusIcon`).
+    /** Glyph shown before the `hint` when `status` is set.
      *  Each status has a default; pass a shape to override, or `false` to drop it. */
     statusIcon?: IconShape | (string & {}) | false;
     /** Round the field corners — `true` for fully round, or a number / CSS length. */
     round?: boolean | number | string;
     /** Disable the whole select. */
     disabled?: boolean;
-    /** Tone applied to the **selected** row(s) — the whole row takes this tone
-     *  (label, icon, indicator, and the background tint), like passing `tone` to just
-     *  the chosen option. A named tone or a custom CSS color. Most visible with the
-     *  tint-based marks (`indicator` `'none'` / `'check'`); with `'radio'` /
-     *  `'checkbox'` it tones the label + indicator (those modes have no row tint). */
-    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Default option-row tone. An option's own `tone` wins. A named tone or a
+     *  custom CSS color. Most visible with tint-based marks (`indicator` `'none'` /
+     *  `'check'`); with `'radio'` / `'checkbox'` it also tones the indicator. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply the default row tone in every state, or only to selected rows. An
+     *  option's own `toneScope` wins.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Add a search field at the top of the menu that filters the options as you
      *  type. `true` uses the built-in matcher — a case-insensitive substring of the
      *  option's **value / label / hint**. Pass a **function** `(option, query) =>
@@ -229,7 +234,7 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  A, B, C` (labels comma-joined) in place of the bare `3 selected`. Applies
      *  to the multi-count case only: `All` stays `All`, a single pick stays its
      *  own label, and an empty selection stays the `placeholder`. The list flows
-     *  into the read-only field, so it ellipsizes at the field's width when long
+     *  into the Button label, so it ellipsizes at the field's width when long
      *  (`3 selected: Engineering, Des… `). `renderSummary` overrides this. */
     verbose?: boolean;
     /** `multiple` only: build the trigger's selection summary text yourself,
@@ -237,7 +242,7 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  the resolved selected options (`selected.length` is the count) and runs only
      *  while something is selected — an empty selection still shows the
      *  `placeholder`. Return a **string**: it flows into the default trigger's
-     *  read-only field, so a long summary ellipsizes at the field's width just
+     *  Button label, so a long summary ellipsizes at the field's width just
      *  like a long value (`Engineering, Design, … `). Return `undefined` to fall
      *  back to the default for that case (e.g. customize only the count, keeping
      *  the single-label case built-in). For rich content (chips, multiple nodes)
@@ -248,9 +253,9 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  one focusable element, such as an Anta `Button`. The menu is positioned
      *  relative to that element and opens when it is clicked. Do not return a
      *  fragment, multiple siblings, or a non-focusable wrapper. Add
-     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
-     *  role that supports them (an Anta `Button` already carries `role="button"`;
-     *  otherwise add `role="combobox"`).
+     *  `aria-haspopup={filter ? 'dialog' : 'menu'}` and
+     *  `aria-expanded={state.open}` to the returned button. An Anta `Button`
+     *  already carries the correct role.
      *  Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
      *  `className` / `style` apply only to the default field. Add styling and
      *  attributes to the returned element instead. */
@@ -347,8 +352,8 @@ export type SelectedItem<V extends OptionValue = string> = SelectedOption<V> | S
  */
 export declare function optionsWithSelection<V extends OptionValue = string>(options: SelectItem<V>[], values: V | V[] | undefined): SelectedItem<V>[];
 /**
- * `<Select>` lets people choose one or more options from a dropdown. It uses an
- * `<Input>` as its read-only trigger and a `<Menu>` for its options. `selection` sets behavior:
+ * `<Select>` lets people choose one or more options from a dropdown. It uses a
+ * `<Button>` as its trigger and a `<Menu>` for its options. `selection` sets behavior:
  * `'single'` (default; `value` is a string, menu closes on pick) or `'multiple'`
  * (checkboxes, `value` is a string array, menu stays open while toggling, the
  * field shows an "N selected" count). For single-select, `indicator` picks the

package/dist/components/Select.js

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

package/dist/components/SelectFaceted.d.ts

@@ -1,6 +1,6 @@
-import type { BaseProps } from '../general_types';
+import type { BaseProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-import type { OptionValue, SelectItem, SelectOption } from './Select';
+import type { OptionState, OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
 interface FacetBase {
@@ -28,6 +28,11 @@ export interface SelectFacetSingle extends FacetBase {
     options: SelectItem<OptionValue>[];
     /** Add a search field atop this facet's flyout that filters its options. */
     filter?: FacetFilter;
+    /** Replace the option's label, hint, and icon layout in the flyout and global
+     *  search results. Receives the option and its value, selected, and disabled
+     *  state. The row retains selection handling and its indicator. Filtering and
+     *  summaries still use the option data. Return null to use the default layout. */
+    renderOption?: (option: SelectOption<OptionValue>, state: OptionState<OptionValue>) => React.ReactNode;
 }
 /** Pick **any number** of options. Value: an array of the chosen `value`s
  *  (empty array clears the facet). Options are the same `SelectItem`s as `single`,
@@ -38,6 +43,11 @@ export interface SelectFacetMultiple extends FacetBase {
     options: SelectItem<OptionValue>[];
     /** Add a search field atop this facet's flyout that filters its options. */
     filter?: FacetFilter;
+    /** Replace the option's label, hint, and icon layout in the flyout and global
+     *  search results. Receives the option and its value, selected, and disabled
+     *  state. The row retains selection handling and its indicator. Filtering and
+     *  summaries still use the option data. Return null to use the default layout. */
+    renderOption?: (option: SelectOption<OptionValue>, state: OptionState<OptionValue>) => React.ReactNode;
     /** A "Select all" row that toggles every option. On by default — set `false`
      *  to drop it.
      *  @defaultValue true */
@@ -142,10 +152,12 @@ 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
-     *  color, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
-    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Default option-row tone in facet flyouts. An option's own `tone` wins. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply the default row tone in every state, or only to selected rows. An
+     * option's own `toneScope` wins.
+     * @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Adds a search field at the top of the root menu. It searches the options of
      *  every `single` and `multiple` facet in one list. For example, "alice" can
      *  appear under application-defined Assignee and Owner facets. `text` and
@@ -164,11 +176,12 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     /** Replaces the default `Button` with a trigger returned from this function.
      *  Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
      *  the menu is positioned relative to that element and opens when it is clicked.
-     *  Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
-     *  element, on a role that supports them (an Anta `Button` already carries
-     *  `role="button"`; otherwise add `role="combobox"`). `className`, `style`, and
-     *  other trigger props apply only to the default Button, so add styling and
-     *  attributes to the returned element. */
+     *  Add `aria-haspopup={searchable ? 'dialog' : 'menu'}` and
+     *  `aria-expanded={state.open}` to the returned element, on a role that
+     *  supports them (an Anta `Button` already carries `role="button"`; otherwise
+     *  add `role="combobox"`). `className`, `style`, and other trigger props apply
+     *  only to the default Button, so add styling and attributes to the returned
+     *  element. */
     renderTrigger?: (state: SelectFacetedTriggerState) => React.ReactNode;
 }
 /**