@antadesign/anta 0.3.1 → 0.3.3

package/dist/components/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -20,7 +20,8 @@ const INPUTMODE_BY_TYPE = {
   email: "email",
   tel: "tel",
   url: "url",
-  number: "numeric"
+  number: "numeric",
+  search: "search"
 };
 const STATUS_ICON = {
   critical: "warning-diamond",
@@ -36,6 +37,7 @@ const Input = ({
   statusIcon,
   tone,
   size,
+  round,
   value,
   defaultValue,
   multiline,
@@ -62,7 +64,7 @@ const Input = ({
   step,
   onInput,
   onChange,
-  onAnyChange,
+  onValueChange,
   onClearClick,
   onClearInput,
   children,
@@ -72,10 +74,15 @@ const Input = ({
 }) => {
   const statusTone = status && status !== "neutral" ? status : void 0;
   const glyph = statusIcon === void 0 ? statusTone ? STATUS_ICON[statusTone] : void 0 : statusIcon;
+  const isSearch = type === "search";
+  const nativeType = isSearch ? void 0 : type;
+  const resolvedLeading = leading ?? (isSearch ? /* @__PURE__ */ jsx(Icon, { shape: "search" }) : void 0);
+  const resolvedClearable = isSearch ? clearable ?? true : clearable;
   return /* @__PURE__ */ jsxs(
     "a-input",
     {
       size: size && size !== "medium" ? size : void 0,
+      round: round ? "" : void 0,
       value,
       defaultvalue: defaultValue,
       multiline: presence(multiline || rows != null),
@@ -83,7 +90,7 @@ const Input = ({
       maxrows: maxRows != null ? String(maxRows) : void 0,
       status: statusTone,
       tone: tone || void 0,
-      type: !multiline && rows == null ? type : void 0,
+      type: !multiline && rows == null ? nativeType : void 0,
       name,
       placeholder,
       disabled: presence(disabled),
@@ -100,23 +107,23 @@ const Input = ({
       max,
       step,
       "aria-invalid": status === "critical" ? "true" : void 0,
-      oninput: onInput || onAnyChange ? (e) => {
+      oninput: onInput || onValueChange ? (e) => {
         onInput?.(e);
-        onAnyChange?.(e, attrsOf(e));
+        onValueChange?.(e, attrsOf(e));
       } : void 0,
-      onchange: onChange || onAnyChange ? (e) => {
+      onchange: onChange || onValueChange ? (e) => {
         onChange?.(e);
-        onAnyChange?.(e, attrsOf(e));
+        onValueChange?.(e, attrsOf(e));
       } : void 0,
       onclearclick: onClearClick ? (e) => onClearClick(nativeStateChange(e).event) : void 0,
       onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,
       class: className,
-      style: toneStyle(tone, "--input-tone-source", style),
+      style: roundStyle(round, "--input-round", toneStyle(tone, "--input-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 })),
-        leading != null && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: leading }),
-        clearable && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in
+        resolvedLeading != null && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: resolvedLeading }),
+        resolvedClearable && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in
         // the element's `clear` slot — the element owns its visibility (shown
         // only when filled + editable). It fires the bubbling `clearrequest`
         // event via a-button's global listener, so clearing works even without
@@ -130,6 +137,7 @@ const Input = ({
           {
             priority: "tertiary",
             size,
+            round: !!round,
             icon: "x",
             "aria-label": "Clear",
             "data-custom-event": "clearrequest"

package/dist/components/InputDate.d.ts

@@ -0,0 +1,87 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO value
+ *  (`''` when cleared) plus the field name (mirrors `Input` / `Calendar`). */
+export interface InputDateChangeAttrs {
+    value: string;
+    name?: string;
+}
+/** `<InputDate>` props — `Calendar`'s date surface plus `Input`'s field surface. */
+export interface InputDateProps extends Omit<BaseProps, 'children'> {
+    /** Controlled value — ISO `YYYY-MM-DD` (or `YYYY-MM-DDTHH:mm` with `time`), `''`
+     *  for empty. Pair with `onValueChange`; the field and calendar follow it and a
+     *  pick only *requests* a change. */
+    value?: string;
+    /** Initial value for the uncontrolled case. */
+    defaultValue?: string;
+    /** Earliest selectable date (ISO). Earlier days disable, and a typed date before
+     *  it stays uncommitted. */
+    min?: string;
+    /** Latest selectable date (ISO). */
+    max?: string;
+    /** BCP-47 locale driving the display format, the placeholder mask, parsing order,
+     *  and the calendar.
+     *  @defaultValue navigator.language */
+    locale?: string;
+    /** Form field name — the ISO value submits under this key. */
+    name?: string;
+    /** Field size. Also sizes the calendar and the time row.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Disable the field and the calendar. */
+    disabled?: boolean;
+    /** Field label, above the control. */
+    label?: React.ReactNode;
+    /** Helper text under the field. Replaced by a format hint while the entry is
+     *  unrecognized. */
+    hint?: React.ReactNode;
+    /** Placeholder shown when empty.
+     *  @defaultValue the locale's format mask (e.g. `MM/DD/YYYY`, `MM/DD/YYYY HH:MM` with `time`) */
+    placeholder?: string;
+    /** Validation/feedback tone. An unrecognized entry forces `critical` until fixed.
+     *  @defaultValue neutral */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Round the field corners — `true` for fully round, or a number / CSS length. */
+    round?: boolean | number | string;
+    /** Show a clear button once the field has a value. */
+    clearable?: boolean;
+    /** Leading icon at the start of the field. */
+    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
+     *  shows a time row (hours : minutes, an AM/PM toggle in 12-hour locales, then a
+     *  Done button) under the calendar. Picking a day keeps the menu open so you can
+     *  set the time. */
+    time?: boolean;
+    /** Force the time cycle when `time` is on: `true` for 12-hour (AM/PM), `false`
+     *  for 24-hour. Omit to follow the locale (`en-US` → 12-hour, most others → 24). */
+    hour12?: boolean;
+    /** Fired after the value resolves (a recognized entry, a calendar pick, a time
+     *  change, or a clear), with the new ISO value (`''` when cleared) and a
+     *  `{ value, name }` snapshot. An unrecognized entry does not fire it. */
+    onValueChange?: (value: string, attrs: InputDateChangeAttrs) => void;
+}
+/**
+ * `<InputDate>` — a date (or date-time) field that replaces the native
+ * `type="date"` / `type="datetime-local"` input, **composed** from `Input` +
+ * `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`.
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @remarks Not SSR-safe (it embeds `Calendar`): it reads the current date
+ * (`Temporal.Now`) and locale (`navigator.language`) at render, so server and
+ * client output diverge and hydration mismatches. Render it client-side only.
+ *
+ * @example
+ * ```tsx
+ * <InputDate label="Starts" time defaultValue="2026-06-15T09:00" onValueChange={(v) => save(v)} />
+ * ```
+ */
+export declare const InputDate: ({ value, defaultValue, min, max, locale, name, size, disabled, label, hint, placeholder, status, round, clearable, icon, time, hour12, onValueChange, className, style, ...rest }: InputDateProps) => any;

package/dist/components/InputDate.js

@@ -0,0 +1,278 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import cn from "clsx";
+import { useMemo, useState } from "../jsx-runtime";
+import { Temporal } from "temporal-polyfill";
+import {
+  parseISODate,
+  parseDateInput,
+  formatDateInput,
+  dateFormatPattern,
+  parseDateTimeInput,
+  formatDateTimeInput,
+  dateTimeFormatPattern,
+  usesHour12
+} from "../calendar-core";
+import { Input } from "./Input";
+import { Menu } from "./Menu";
+import { Calendar } from "./Calendar";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { Tabs } from "./Tabs";
+import styles from "./InputDate.module.css";
+const InputDate = ({
+  value,
+  defaultValue,
+  min,
+  max,
+  locale,
+  name,
+  size,
+  disabled,
+  label,
+  hint,
+  placeholder,
+  status,
+  round,
+  clearable,
+  icon,
+  time,
+  hour12,
+  onValueChange,
+  className,
+  style,
+  ...rest
+}) => {
+  const resolvedLocale = locale || (typeof navigator !== "undefined" ? navigator.language : "en-US");
+  const minD = parseISODate(min);
+  const maxD = parseISODate(max);
+  const twelveHour = time ? hour12 ?? usesHour12(resolvedLocale) : false;
+  const pattern = useMemo(
+    () => placeholder ?? (time ? dateTimeFormatPattern(resolvedLocale, twelveHour) : dateFormatPattern(resolvedLocale)),
+    [placeholder, time, resolvedLocale, twelveHour]
+  );
+  const fmt = (iso) => {
+    if (!iso) return "";
+    const d = parseISODate(iso.slice(0, 10));
+    if (!d) return "";
+    if (!time) return formatDateInput(d, resolvedLocale);
+    const hasT = iso.length >= 16 && iso[10] === "T";
+    const dt = d.toPlainDateTime(Temporal.PlainTime.from(hasT ? iso.slice(11, 16) : "00:00"));
+    return formatDateTimeInput(dt, resolvedLocale, twelveHour);
+  };
+  const normalize = (iso) => !iso || !time ? iso : iso.length <= 10 ? `${iso}T00:00` : iso.slice(0, 16);
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(() => normalize(defaultValue));
+  const current = controlled ? value : internal;
+  const dateISO = current ? current.slice(0, 10) : "";
+  const hasTime = !!current && current.length >= 16 && current[10] === "T";
+  const h24 = hasTime ? parseInt(current.slice(11, 13), 10) || 0 : 0;
+  const curM = hasTime ? current.slice(14, 16) : "00";
+  const curMer = h24 < 12 ? "AM" : "PM";
+  const curHourShown = twelveHour ? String((h24 + 11) % 12 + 1).padStart(2, "0") : String(h24).padStart(2, "0");
+  const [text, setText] = useState(() => fmt(current));
+  const [open, setOpen] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const [hourText, setHourText] = useState(curHourShown);
+  const [minuteText, setMinuteText] = useState(curM);
+  const meridiem = curMer;
+  const [lastValue, setLastValue] = useState(current);
+  if (current !== lastValue) {
+    setLastValue(current);
+    setText(fmt(current));
+    setInvalid(false);
+  }
+  const [lastTime, setLastTime] = useState(`${h24}:${curM}`);
+  if (time && `${h24}:${curM}` !== lastTime) {
+    setLastTime(`${h24}:${curM}`);
+    setHourText(curHourShown);
+    setMinuteText(curM);
+  }
+  const commit = (iso) => {
+    if (!controlled) setInternal(iso || void 0);
+    onValueChange?.(iso, { value: iso, name });
+  };
+  const clampPad = (v, hi) => String(Math.min(Math.max(parseInt(String(v || "0"), 10) || 0, 0), hi)).padStart(2, "0");
+  const resolveHour = (raw, mer) => {
+    let n = parseInt(String(raw || "0"), 10) || 0;
+    if (!twelveHour) {
+      const h = Math.min(Math.max(n, 0), 23);
+      return { h24: h, shown: String(h).padStart(2, "0"), mer };
+    }
+    if (n === 0) return { h24: 0, shown: "12", mer: "AM" };
+    if (n > 23) n = 23;
+    if (n > 12) return { h24: n, shown: String(n - 12).padStart(2, "0"), mer: "PM" };
+    return { h24: mer === "AM" ? n % 12 : n % 12 + 12, shown: String(n).padStart(2, "0"), mer };
+  };
+  const withTime = (d) => {
+    const { h24: h } = resolveHour(hourText, meridiem);
+    return `${d}T${String(h).padStart(2, "0")}:${clampPad(minuteText, 59)}`;
+  };
+  const apply = (iso) => {
+    setInvalid(false);
+    if (iso === (current ?? "")) setText(fmt(iso));
+    else commit(iso);
+  };
+  const resolve = (raw) => {
+    const t = raw.trim();
+    if (!t) {
+      setInvalid(false);
+      if (current) commit("");
+      else setText("");
+      return;
+    }
+    const parsed = time ? parseDateTimeInput(t, resolvedLocale, { min: minD, max: maxD }) : parseDateInput(t, resolvedLocale, { min: minD, max: maxD });
+    if (!parsed) {
+      setInvalid(true);
+      return;
+    }
+    const iso = time ? parsed.toString({ smallestUnit: "minute" }) : parsed.toString();
+    apply(iso);
+  };
+  const commitTime = (hRaw, mRaw, mer) => {
+    const { h24: h, shown } = resolveHour(hRaw, mer);
+    const mm = clampPad(mRaw, 59);
+    setHourText(shown);
+    setMinuteText(mm);
+    const base = dateISO || Temporal.Now.plainDateISO().toString();
+    commit(`${base}T${String(h).padStart(2, "0")}:${mm}`);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        hint: invalid ? `Unrecognized date. Try ${pattern}.` : hint,
+        status: invalid ? "critical" : status,
+        size,
+        round,
+        disabled,
+        clearable,
+        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        value: text,
+        placeholder: pattern,
+        inputMode: time ? "text" : "numeric",
+        autoComplete: "off",
+        onInput: (e) => {
+          setText(e.currentTarget.value);
+          if (invalid) setInvalid(false);
+        },
+        onChange: (e) => {
+          if (e.target !== e.currentTarget) return;
+          resolve(e.currentTarget.value);
+        },
+        className: cn(styles.dateField, className),
+        style,
+        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              priority: "tertiary",
+              size,
+              icon: "calendar-days",
+              "aria-label": "Open calendar",
+              "aria-haspopup": "dialog",
+              disabled
+            }
+          ),
+          /* @__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
+      }
+    ),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null
+  ] });
+};
+export {
+  InputDate
+};

package/dist/components/InputDate.module.css

@@ -0,0 +1 @@
+.calendarMenu{--menu-padding: 8px}.timeRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}.time{display:flex;align-items:center;gap:4px}.clock{flex:none;color:var(--text-5);margin-inline-end:2px}.sep{color:var(--text-3);user-select:none}.timeField{width:2.25rem}.timeField[size=small]{width:2rem}.timeField[size=large]{width:2.5rem}.timeField::part(input){text-align:center;font-variant-numeric:tabular-nums;font-weight:500}.meridiem{margin-inline-start:4px;--tab-padding-x: 6px;--tabs-gap: 0px;--tab-padding-y: max(0px, calc((10px - var(--_pb)) / 2 - 2px))}.meridiem a-tab{font-weight:400}.dateField::part(input){text-overflow:ellipsis}

package/dist/components/Menu.d.ts

@@ -29,6 +29,10 @@ export interface MenuProps extends BaseProps {
      *  in response. Submenus are always uncontrolled regardless of this. See
      *  STATEFUL-COMPONENTS.md. */
     open?: boolean;
+    /** Round the menu: the container softens to a 20px radius and its items go
+     *  fully round. A `number` (px) or CSS length string tunes the container radius
+     *  only — items stay full pills. */
+    round?: boolean | number | string;
     /** Fired before the open state changes — on open, and on every dismiss (Esc,
      *  outside-click, scroll, selecting an item). `event` is the cancelable
      *  `statechange`; `detail.next`/`detail.prev` are the requested/previous open
@@ -70,4 +74,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, open, onStateChange, className, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, open, onStateChange, round, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { nativeStateChange, roundStyle } from "../anta_helpers";
 const Menu = ({
   placement,
   context,
@@ -8,7 +8,9 @@ const Menu = ({
   offset,
   open,
   onStateChange,
+  round,
   className,
+  style,
   children,
   ...rest
 }) => {
@@ -23,15 +25,17 @@ const Menu = ({
       state: open === void 0 ? void 0 : open ? "open" : "closed",
       onstatechange: onStateChange ? (e) => {
         const { event, detail } = nativeStateChange(e);
-        if (detail)
+        if (detail && (detail.next === "open" || detail.next === "closed"))
           onStateChange(event, {
             next: detail.next === "open",
             prev: detail.prev === "open"
           });
       } : void 0,
+      round: round ? "" : void 0,
       role: "menu",
       "aria-orientation": "vertical",
       class: className,
+      style: roundStyle(round, "--menu-round", style),
       ...rest,
       children
     }

package/dist/components/MenuItem.d.ts

@@ -3,8 +3,14 @@ import type { IconShape } from '../elements/a-icon.shapes';
 export interface MenuItemProps extends BaseProps {
     /** Leading icon shape. */
     icon?: IconShape;
-    /** The item's text. Omit and pass `children` for richer content. */
-    label?: string;
+    /** The item's text. Usually a string, but any node is accepted — e.g. a filtered
+     *  `Select` bolds the matched substring. Omit and pass `children` for richer
+     *  content. */
+    label?: React.ReactNode;
+    /** Secondary text under the label — explanatory copy, like `RadioGroup`'s
+     *  option `hint`. Requires `label` (it stacks in a column beneath it). Muted
+     *  (`--text-3`) and tracks the row's `tone`. A string, or any node. */
+    hint?: React.ReactNode;
     /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
     kbd?: string;
     /** A trailing icon. On a `submenu` item this **overrides** the default
@@ -13,10 +19,45 @@ export interface MenuItemProps extends BaseProps {
     iconTrailing?: IconShape;
     /** Disable the item: greyed out, not focusable for activation, no close. */
     disabled?: boolean;
-    /** Semantic tone — colors the label, icon, and hover tint. `critical` is the
-     *  destructive action; `neutral` (the default) is the standard gray.
+    /** Mark the item as selected. On a plain row (no `selectionIndicator`) this is
+     *  a persistent background tint, the same resting fill a pressed row shows. On a
+     *  checkable row (`selectionIndicator` set) it instead drives the leading
+     *  `checkbox` / `radio` indicator and the row's `aria-checked`. */
+    selected?: boolean;
+    /** Turn the row into a checkable item, driven by `selected` (the row stays the
+     *  control and carries `aria-checked`):
+     *  - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>`
+     *    (before `icon`); the tint is dropped (the box carries state).
+     *  - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped.
+     *  - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected
+     *    row *and* the background tint (the canonical single-select look).
+     *  Omit for a plain row (the default). */
+    selectionIndicator?: 'checkbox' | 'radio' | 'check';
+    /** Only meaningful with `selectionIndicator="checkbox"`: render the box in the
+     *  mixed state (`aria-checked="mixed"`) — e.g. a "Select all" row when some but
+     *  not all of its options are selected. */
+    indeterminate?: boolean;
+    /** Replace the built-in selection-indicator *visual* with your own node,
+     *  rendered at the **leading** edge (where the checkbox / radio sit). Pair with
+     *  `selectionIndicator` to keep the semantics — the row stays the control and
+     *  carries `role` + `aria-checked`; only the drawn mark changes. Suppresses the
+     *  built-in checkbox / radio and the trailing `check` glyph. The node is made
+     *  passive (aria-hidden, no pointer events) so the row owns the click. */
+    indicator?: React.ReactNode;
+    /** Semantic tone — colors the label, icon, and hover/selected tint (and the
+     *  `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal
+     *  CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose
+     *  hue + chroma are kept while the lightness is pinned to match the brand text.
+     *  `critical` is the destructive action; `neutral` (the default) is the standard
+     *  gray.
      *  @defaultValue neutral */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but applied only while the row is `selected` — an unselected row
+     *  stays neutral. The whole selected row (label, icon, tint, and the `checkbox` /
+     *  `radio` indicator) takes the tone. Same value set as `tone`; on a selected row
+     *  `toneSelected` wins over `tone` when both are set.
+     *  @defaultValue neutral */
+    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Marks this item as a submenu parent: adds the trailing chevron,
      *  `aria-haspopup="menu"`, and an `aria-expanded` baseline (kept in sync by
      *  the nested menu). Nest the flyout as a `<Menu>` child. */
@@ -32,7 +73,7 @@ export interface MenuItemProps extends BaseProps {
      *  `{ value, label }` detail. */
     onSelect?: (event: any, detail: {
         value?: string | number;
-        label?: string;
+        label?: React.ReactNode;
     }) => void;
     /** Item content. With `label` set, children are extra content — most
      *  notably the nested `<Menu>` for a submenu parent. */
@@ -58,4 +99,4 @@ export interface MenuItemProps extends BaseProps {
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, kbd, iconTrailing, disabled, tone, submenu, value, onSelect, className, children, ...rest }: MenuItemProps) => any;
+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;