@antadesign/anta 0.3.1 → 0.3.3

package/dist/components/Button.d.ts

@@ -20,6 +20,10 @@ export type BaseButtonProps = {
     disabled?: boolean;
     /** Toggled-on / pressed state, e.g. for filter chips. */
     selected?: boolean;
+    /** Fully-round corners — a pill for text buttons, a circle for icon-only ones
+     *  (`border-radius: 999px`, clamped to the element's height). Pass a `number`
+     *  (px) or a CSS length string (`'1rem'`) for a custom radius instead. */
+    round?: boolean | number | string;
     /** Click handler. */
     onClick?: (e: any) => void;
     /** Tab order. The button is keyboard-focusable by default (`0`) and
@@ -29,6 +33,10 @@ export type BaseButtonProps = {
      *  fire it mid-flight.
      *  @defaultValue 0 */
     tabIndex?: number;
+    /** ARIA role override (e.g. `'gridcell'` when a button is a cell in a grid).
+     *  Forwarded to the underlying element.
+     *  @defaultValue button */
+    role?: string;
 };
 /** Content axis — slots render in this order inside the button:
  *  `icon` → `label` → `children` → `iconTrailing`. Pass `icon` alone
@@ -113,4 +121,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, href, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, href, type, form, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -1,19 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
-const wrapChildren = (kids) => {
-  if (kids == null) return kids;
-  const arr = Array.isArray(kids) ? kids : [kids];
-  return arr.map((child, i) => {
-    if (typeof child === "string") {
-      return child.trim() === "" ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
-    }
-    if (typeof child === "number") {
-      return Number.isNaN(child) ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
-    }
-    if (child == null || typeof child === "boolean") return null;
-    return child;
-  });
-};
+import { toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -26,6 +12,7 @@ const Button = ({
   loading,
   disabled,
   selected,
+  round,
   href,
   type,
   form,
@@ -35,9 +22,15 @@ const Button = ({
   ...rest
 }) => {
   const toneAttr = tone || void 0;
-  const computedStyle = toneStyle(toneAttr, "--button-tone-source", style);
+  const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
+    // `<a-button>` is a custom element with no implicit ARIA role, so AT would
+    // announce it as a generic clickable — and `aria-pressed` below is only
+    // valid on a button/switch role. Publish `role="button"` from the wrapper
+    // (ARIA lives in the wrapper) for both the element and the `<a href>` path;
+    // a consumer's own `role` in `...rest` still wins by spread order.
+    role: "button",
     priority,
     tone: toneAttr,
     underline,
@@ -49,6 +42,7 @@ const Button = ({
     // presence (`[disabled]`, not `[disabled="true"]`), so any present form
     // works. (ARIA attributes below stay string-valued — ARIA needs "true".)
     paddingless: paddingless ? "" : void 0,
+    round: round ? "" : void 0,
     loading: loading ? "" : void 0,
     disabled: disabled ? "" : void 0,
     selected: selected ? "" : void 0,
@@ -68,7 +62,7 @@ const Button = ({
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
     label != null && /* @__PURE__ */ jsx("a-button-label", { children: label }),
-    wrapChildren(children),
+    wrapLabel(children, "a-button-label"),
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
   ] });
   if (href != null) {
@@ -76,7 +70,7 @@ const Button = ({
       "a",
       {
         href,
-        role: "button",
+        "data-anta": "",
         ...sharedAttrs,
         ...rest,
         children: inner

package/dist/components/Calendar.d.ts

@@ -0,0 +1,80 @@
+import type { BaseProps } from "../general_types";
+type StateReason = "user" | "reset" | "restore";
+type StateDetail = {
+    next: string | null;
+    prev: string | null;
+    reason: StateReason;
+};
+type StateChangeEvent = CustomEvent<StateDetail>;
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO date plus
+ *  the field name (mirrors `Input` / `RadioGroup`). */
+export interface CalendarChangeAttrs {
+    value: string | null;
+    name?: string;
+}
+/** Public props for `<Calendar>` — the single-date month grid. */
+export interface CalendarProps extends Omit<BaseProps, "children" | "onChange"> {
+    /** Controlled selected date — ISO `YYYY-MM-DD`. When provided, the consumer owns
+     *  selection: the grid follows this prop and a pick only *requests* a change via
+     *  `onStateChange`. Leave undefined for uncontrolled. */
+    value?: string;
+    /** Initial selected date for the uncontrolled case (ISO `YYYY-MM-DD`). */
+    defaultValue?: string;
+    /** Earliest selectable date (ISO `YYYY-MM-DD`) — earlier days render disabled. */
+    min?: string;
+    /** Latest selectable date (ISO `YYYY-MM-DD`) — later days render disabled. */
+    max?: string;
+    /** BCP-47 locale tag driving first-day-of-week, weekday, and month names.
+     *  @defaultValue navigator.language */
+    locale?: string;
+    /** Form field name — the selected ISO date submits under this key. */
+    name?: string;
+    /** Size of the whole calendar — scales the day cells, the chevrons, and the
+     *  weekday / month-heading type together (uses Button's `small` / `medium` /
+     *  `large` scale).
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Disable the whole calendar (not focusable or selectable). */
+    disabled?: boolean;
+    /** Accessible name for the grid (defaults to the visible month heading). */
+    "aria-label"?: string;
+    /** Fired whenever the selection changes — event-first. `detail` is
+     *  `{ next, prev, reason }`: `next` / `prev` are ISO date strings (`null` = none);
+     *  `reason` is `'user'` | `'reset'` | `'restore'`. A `'user'` pick fires *before*
+     *  applying and is **cancelable** — `event.preventDefault()` vetoes it
+     *  (uncontrolled), or in controlled mode answer by updating `value`. `'reset'` /
+     *  `'restore'` are not cancelable. */
+    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
+    /** Fired *after* the selection changes (post-apply). Not cancelable; for a
+     *  controlled calendar it fires once you've updated `value`. */
+    onChange?: (event: Event) => void;
+    /** Like `onChange`, but with a `{ value, name }` snapshot — the ergonomic
+     *  "just give me the new date" callback (mirrors `Input`). */
+    onValueChange?: (event: Event, attrs: CalendarChangeAttrs) => void;
+}
+/**
+ * `<Calendar>` — a single-date month grid you pick a day from, **composed from
+ * Anta components in light DOM** (nothing is hidden in a shadow root): days and
+ * the prev/next chevrons are `<Button>`s, so they inherit the design system's
+ * states for free — a selected day is literally a `secondary` Button in its
+ * `selected` state. All date math runs on the Temporal engine
+ * (`@antadesign/anta` exports `buildMonth` & friends), and the value is an ISO
+ * `YYYY-MM-DD` string.
+ *
+ * The grid lives in a form-associated `<a-calendar>` element (which owns the
+ * submitted value + reset/restore); the wrapper owns view-month, selection,
+ * keyboard, and roving `tabindex` — the `RadioGroup` model. The month switcher
+ * is a sibling rendered *outside* the grid, so it can be extended (month/year
+ * pickers) independently.
+ *
+ * Controlled (`value` + `onStateChange`) or uncontrolled (`defaultValue`).
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @remarks Not SSR-safe. It reads the current date (`Temporal.Now`) and locale
+ * (`navigator.language`) at render, so a server render and the client render
+ * disagree on the highlighted "today" and on localized labels, causing a
+ * 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 {};

package/dist/components/Calendar.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import cn from "clsx";
+import { Temporal } from "temporal-polyfill";
+import { useId, useMemo, useState } from "../jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+import { Button } from "./Button";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { Tooltip } from "./Tooltip";
+import { buildMonth, clampDate, parseISODate } from "../calendar-core";
+const Calendar = ({
+  value,
+  defaultValue,
+  min,
+  max,
+  locale,
+  name,
+  size,
+  disabled,
+  onStateChange,
+  onChange,
+  onValueChange,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const controlled = value !== void 0;
+  const resolvedLocale = locale || (typeof navigator !== "undefined" ? navigator.language : "en-US");
+  const minD = parseISODate(min);
+  const maxD = parseISODate(max);
+  const today = Temporal.Now.plainDateISO();
+  const [internalSelected, setInternalSelected] = useState(
+    () => parseISODate(defaultValue)
+  );
+  const selected = controlled ? parseISODate(value) : internalSelected;
+  const [cursor, setCursor] = useState(
+    () => clampDate(parseISODate(value ?? defaultValue) ?? today, minD, maxD)
+  );
+  const [focusReq, setFocusReq] = useState(null);
+  const [jumpOpen, setJumpOpen] = useState(false);
+  const headingId = useId();
+  const month = buildMonth({ anchor: cursor, locale: resolvedLocale, min: minD, max: maxD, selected, today });
+  const cursorIso = cursor.toString();
+  const minYear = minD ? minD.year : today.year - 3;
+  const maxYear = maxD ? maxD.year : today.year + 3;
+  const years = [];
+  for (let y = minYear; y <= maxYear; y++) years.push(y);
+  const monthNames = useMemo(
+    () => Array.from(
+      { length: 12 },
+      (_, i) => Temporal.PlainDate.from({ year: 2e3, month: i + 1, day: 1 }).toLocaleString(resolvedLocale, {
+        month: "long"
+      })
+    ),
+    [resolvedLocale]
+  );
+  const monthOutOfRange = (y, m) => minD != null && (y < minD.year || y === minD.year && m < minD.month) || maxD != null && (y > maxD.year || y === maxD.year && m > maxD.month);
+  const moveCursorByMonth = (delta) => {
+    if (disabled) return;
+    setCursor((c) => clampDate(c.add({ months: delta }), minD, maxD));
+  };
+  const pickMonth = (y, m) => {
+    if (disabled) return;
+    setCursor((c) => clampDate(c.with({ year: y, month: m }), minD, maxD));
+  };
+  const jumpItems = useMemo(() => {
+    const monthItem = (y, i) => {
+      const m = i + 1;
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          label: monthNames[i],
+          selectionIndicator: "check",
+          selected: y === cursor.year && m === cursor.month,
+          disabled: monthOutOfRange(y, m) || void 0,
+          "data-menu-open": "",
+          onSelect: () => {
+            pickMonth(y, m);
+            setJumpOpen(false);
+          }
+        },
+        `${y}-${m}`
+      );
+    };
+    return years.length === 1 ? monthNames.map((_, i) => monthItem(years[0], i)) : years.map((y) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, label: String(y), selected: y === cursor.year, children: [
+      y === cursor.year && /* @__PURE__ */ jsx("span", { className: "year-dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(Menu, { children: monthNames.map((_, i) => monthItem(y, i)) })
+    ] }, y));
+  }, [monthNames, cursor.year, cursor.month, minYear, maxYear, min, max, disabled]);
+  const onElementStateChange = (raw) => {
+    const { event, detail } = nativeStateChange(raw);
+    if (!detail) return;
+    onStateChange?.(event, detail);
+    if (detail.reason === "user" && (controlled || event.defaultPrevented)) return;
+    const next = parseISODate(detail.next);
+    if (!controlled) setInternalSelected(next);
+    setCursor(clampDate(next ?? cursor, minD, maxD));
+  };
+  const onElementChange = (raw) => {
+    const e = "nativeEvent" in raw ? raw.nativeEvent : raw;
+    onChange?.(e);
+    onValueChange?.(e, { value: e?.target?.value || null, name });
+  };
+  const onNavigate = (raw) => {
+    if (disabled) return;
+    const { detail } = nativeStateChange(raw);
+    const next = parseISODate(detail?.date ?? null);
+    if (!next) return;
+    const clamped = clampDate(next, minD, maxD);
+    setCursor(clamped);
+    setFocusReq((p) => ({ iso: clamped.toString(), n: (p?.n ?? 0) + 1 }));
+  };
+  const prevDisabled = disabled || minD != null && Temporal.PlainDate.compare(cursor.with({ day: 1 }).subtract({ days: 1 }), minD) < 0;
+  const nextDisabled = disabled || maxD != null && Temporal.PlainDate.compare(cursor.with({ day: 1 }).add({ months: 1 }), maxD) > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("anta-calendar", className),
+      "data-size": size && size !== "medium" ? size : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-part": "header", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              priority: "tertiary",
+              icon: "chevron-left",
+              size,
+              "aria-label": "Previous month",
+              disabled: prevDisabled,
+              onClick: () => moveCursorByMonth(-1)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: headingId,
+              "data-part": "heading",
+              priority: "tertiary",
+              size,
+              "aria-live": "polite",
+              "aria-label": `${month.heading} \u2014 choose month and year`,
+              disabled: disabled || prevDisabled && nextDisabled,
+              children: month.heading
+            }
+          ),
+          /* @__PURE__ */ jsx(Menu, { placement: "bottom", open: jumpOpen, onStateChange: (_e, { next }) => setJumpOpen(next), children: jumpItems }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              priority: "tertiary",
+              icon: "chevron-right",
+              size,
+              "aria-label": "Next month",
+              disabled: nextDisabled,
+              onClick: () => moveCursorByMonth(1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "a-calendar",
+          {
+            role: "group",
+            "aria-labelledby": headingId,
+            "aria-label": ariaLabel,
+            name,
+            value: controlled ? value : void 0,
+            defaultvalue: !controlled ? defaultValue : void 0,
+            disabled: disabled ? "" : void 0,
+            "data-focus": focusReq ? `${focusReq.iso}#${focusReq.n}` : void 0,
+            onstatechange: onElementStateChange,
+            onchange: onElementChange,
+            onnavigate: onNavigate,
+            children: [
+              month.weekdays.map((w, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-part": "weekday",
+                  "data-weekend": w.weekend ? "" : void 0,
+                  "aria-hidden": "true",
+                  children: w.narrow
+                },
+                `wd${i}`
+              )),
+              month.weeks.flat().map((d) => {
+                const variant = d.today && !d.selected ? { priority: "secondary" } : { priority: "tertiary", selected: d.selected };
+                return /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    ...variant,
+                    size,
+                    disabled: disabled || d.disabled,
+                    tabIndex: d.iso === cursorIso ? 0 : -1,
+                    "aria-label": d.label,
+                    "aria-current": d.today ? "date" : void 0,
+                    "data-part": "day-cell",
+                    "data-date": d.iso,
+                    "data-today": d.today ? "" : void 0,
+                    "data-outside": d.outside ? "" : void 0,
+                    children: [
+                      d.day,
+                      d.today && /* @__PURE__ */ jsx(Tooltip, { children: "Today" })
+                    ]
+                  },
+                  d.iso
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Calendar
+};

package/dist/components/Checkbox.d.ts

@@ -11,9 +11,9 @@ type StateDetail = {
     prev: CheckboxState;
 };
 type StateChangeEvent = CustomEvent<StateDetail>;
-/** Snapshot passed as the 2nd argument to `onAnyChange` — the new value plus
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new value plus
  *  form-relevant fields, so you don't poke at `event.target`. Mirrors `Input`'s
- *  `onAnyChange` convention. */
+ *  `onValueChange` convention. */
 export interface CheckboxChangeAttrs {
     checked: boolean;
     indeterminate: boolean;
@@ -42,27 +42,33 @@ export interface CheckboxProps extends BaseProps {
     defaultChecked?: CheckboxValue;
     /** Disable the checkbox (no interaction, dropped from the tab order). */
     disabled?: boolean;
+    /** Round the checkbox mark to a circle (`border-radius: 999px` on the box). Pass
+     *  a `number` (px) or a CSS length string for a rounded-square mark instead. */
+    round?: boolean | number | string;
     /** Form field name. Inside a `<form>` the checkbox submits under this name,
      *  contributing `value` when checked — like a native checkbox. */
     name?: string;
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Colour variant, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`)
-     *  for a one-off custom tone. Tints fill, label, hint, and the unselected box
-     *  border. Named tones track light/dark mode automatically via the theme-aware
-     *  role tokens; a custom colour keeps its hue + chroma and pins lightness to the
-     *  fill curve.
+    /** Colour of the **mark** in every state — the checked-box fill *and* the
+     *  unselected box border. A named tone or any literal CSS color (`'#ff1493'`,
+     *  `'rebeccapurple'`) for a one-off custom tone. Named tones track light/dark mode
+     *  automatically; a custom colour keeps its hue + chroma and pins lightness to the
+     *  fill curve. Use `toneSelected` instead to tone only the checked mark and leave
+     *  the empty box neutral. The label + hint stay neutral — recolour them in plain
+     *  CSS via the theme-aware `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the **checked mark only** — the empty box stays
+     *  neutral grey until it's checked. Prefer this over `tone` when a resting tinted
+     *  border would read as a validation state. Same value set as `tone`; if both are
+     *  set, `tone` governs the off-state border and `toneSelected` the checked fill.
+     *  @defaultValue 'neutral' */
+    toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px box.
      *  @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` fills the checked box with the tone colour and
-     *  draws a white checkmark; `secondary` keeps the box unfilled and draws the
-     *  border + checkmark in the tone colour (an outlined look).
-     *  @defaultValue 'primary' */
-    priority?: 'primary' | 'secondary';
     /** Fired on click / Space *before* the element applies any change. Event-first
      *  so `event.preventDefault()` is the synchronous veto (uncontrolled mode);
      *  `detail` carries `{ next, prev }`. In controlled mode the element never
@@ -77,8 +83,8 @@ export interface CheckboxProps extends BaseProps {
     onChange?: (event: Event) => void;
     /** Like `onChange`, but with a `{ checked, indeterminate, name, value }` snapshot
      *  as the 2nd argument — the ergonomic "just give me the new value" callback
-     *  (mirrors `Input`'s `onAnyChange`). */
-    onAnyChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
+     *  (mirrors `Input`'s `onValueChange`). */
+    onValueChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
 }
 /**
  * Checkbox. Renders an `<a-checkbox>` web component that owns the visual
@@ -93,5 +99,5 @@ export interface CheckboxProps extends BaseProps {
  * <Checkbox defaultChecked label="Remember me" hint="On this device" />
  * ```
  */
-export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, size, priority, onStateChange, onChange, onAnyChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
+export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneSelected, size, round, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
 export {};

package/dist/components/Checkbox.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";
 const valueToState = (v) => v === "indeterminate" ? "indeterminate" : v ? "checked" : "unchecked";
 const stateToValue = (s) => s === "indeterminate" ? "indeterminate" : s === "checked";
 const checkboxAttrsOf = (el) => ({
@@ -13,11 +13,12 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   tone,
+  toneSelected,
   size,
-  priority,
+  round,
   onStateChange,
   onChange,
-  onAnyChange,
+  onValueChange,
   label,
   hint,
   className,
@@ -26,7 +27,15 @@ const Checkbox = ({
   tabIndex,
   ...rest
 }) => {
-  const computedStyle = toneStyle(tone, "--checkbox-tone-source", style);
+  const computedStyle = roundStyle(
+    round,
+    "--checkbox-round",
+    toneStyle(
+      toneSelected,
+      "--checkbox-tone-source",
+      toneStyle(tone, "--checkbox-tone-source", style)
+    )
+  );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
   const onstatechange = onStateChange ? (e) => {
@@ -37,9 +46,9 @@ const Checkbox = ({
       prev: stateToValue(detail.prev)
     });
   } : void 0;
-  const onchange = onChange || onAnyChange ? (e) => {
+  const onchange = onChange || onValueChange ? (e) => {
     onChange?.(e);
-    onAnyChange?.(e, checkboxAttrsOf(e.currentTarget));
+    onValueChange?.(e, checkboxAttrsOf(e.currentTarget));
   } : void 0;
   const stateAttr = checked !== void 0 ? valueToState(checked) : void 0;
   const defaultStateAttr = checked === void 0 && defaultChecked !== void 0 ? valueToState(defaultChecked) : void 0;
@@ -55,8 +64,9 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
       size: size && size !== "medium" ? size : void 0,
-      priority: priority && priority !== "primary" ? priority : void 0,
+      round: round ? "" : void 0,
       tabIndex: disabled ? -1 : tabIndex ?? 0,
       onstatechange,
       onchange,

package/dist/components/Expander.d.ts

@@ -38,6 +38,12 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
      *  expander keeps it open. `actions` stay live; disable them
      *  separately if needed. */
     disabled?: boolean;
+    /** Round corners sized to half the folded (header) height: a pill when folded,
+     *  and — when expanded — the same corner radius rather than a bigger stadium.
+     *  The element measures the header, so it tracks custom header content. Pass a
+     *  `number` (px) or CSS length string for a *fixed* radius that overrides the
+     *  measurement (and skips it) in both states. */
+    round?: boolean | number | string;
     /** Controlled open state. When provided, the consumer owns open/close:
      *  the expander only follows this prop, and clicking the summary just
      *  requests a change via `onStateChange` (so a toggle can be rejected by
@@ -71,4 +77,4 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
  * giving real controlled semantics (a consumer can reject a toggle). See
  * STATEFUL-COMPONENTS.md.
  */
-export declare const Expander: ({ title, level, tone, priority, outdent, actions, disabled, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;
+export declare const Expander: ({ title, level, tone, priority, outdent, actions, disabled, round, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;

package/dist/components/Expander.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";
 const Expander = ({
   title,
   level,
@@ -8,6 +8,7 @@ const Expander = ({
   outdent,
   actions,
   disabled,
+  round,
   open,
   defaultOpen,
   onStateChange,
@@ -17,7 +18,7 @@ const Expander = ({
   ...rest
 }) => {
   const controlled = open !== void 0;
-  const computedStyle = toneStyle(tone, "--expander-tone-source", style);
+  const computedStyle = roundStyle(round, "--expander-round", toneStyle(tone, "--expander-tone-source", style));
   const titleNode = typeof title === "object" && title !== null ? /* @__PURE__ */ jsx("span", { slot: "title", style: { display: "contents" }, children: title }) : /* @__PURE__ */ jsx("a-expander-summary", { slot: "title", children: title });
   return /* @__PURE__ */ jsxs(
     "a-expander",
@@ -28,6 +29,7 @@ const Expander = ({
       tone: tone && tone !== "neutral" ? tone : void 0,
       priority: priority && priority !== "secondary" ? priority : void 0,
       outdent: outdent ? "" : void 0,
+      round: round ? "" : void 0,
       disabled: disabled ? "" : void 0,
       onstatechange: onStateChange ? (e) => {
         const { event, detail } = nativeStateChange(e);

package/dist/components/Input.d.ts

@@ -1,6 +1,6 @@
 import type { BaseProps, DOMEventHandlers } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-/** Convenience snapshot passed as the 2nd argument to `onAnyChange`. */
+/** Convenience snapshot passed as the 2nd argument to `onValueChange`. */
 export interface InputChangeAttrs {
     /** Current value. */
     value: string;
@@ -47,7 +47,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     tone?: string;
     /** Size variant. small=24px, medium=28px, large=32px tall; the type scale and
      *  icon track the size (small 13/16 + 14px icon · medium 15/20 + 16px ·
-     *  large 17/24 + 18px).
+     *  large 17/22 + 18px).
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
     /** Controlled value. Pair with `onChange` / `onInput`. */
@@ -74,10 +74,14 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Content pinned to the end of the field (e.g. icons, buttons), after the
      *  clear button when `clearable`. */
     trailing?: React.ReactNode;
-    /** Single-line input type. Ignored when `multiline`. (`search` is omitted
-     *  deliberately — it triggers browser-injected clear/search affordances.)
+    /** Single-line input type. Ignored when `multiline`. `search` is a
+     *  **wrapper-only** shorthand: it defaults a leading search icon and a clear
+     *  button (both overridable — pass your own `leading`, or `clearable={false}`)
+     *  and sets `inputmode="search"`, but the DOM input stays `type="text"`. The
+     *  native `search` type never reaches the element, so the browser's own
+     *  clear/search affordances never appear — Anta owns that chrome.
      *  @defaultValue text */
-    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number';
+    type?: 'text' | 'search' | 'email' | 'password' | 'tel' | 'url' | 'number';
     /** Native autocomplete token. Overrides the value derived from `type`
      *  (`email` / `tel` / `url`) — set it for the cases `type` can't express, e.g.
      *  `username`, `current-password`, `new-password`, `one-time-code`, or `off`. */
@@ -98,6 +102,10 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  when the field is hovered or focused (a quiet-until-engaged affordance for
      *  trailing actions). */
     dimActions?: boolean;
+    /** Fully-round the field (`border-radius: 999px`). Pass a `number` (px) or a CSS
+     *  length string for a custom radius. The `clearable` × button always rounds to
+     *  a circle to match (it isn't sized by a custom field value). */
+    round?: boolean | number | string;
     /** Toggle native spell-checking. */
     spellCheck?: boolean;
     /** Max input length. */
@@ -114,7 +122,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     onInput?: (e: any) => void;
     /** Fires on **commit** (blur / Enter) — the platform `change` semantics, **not**
      *  React's per-keystroke `onChange`. This is a web component, so `onChange` keeps
-     *  the native meaning; reach for `onInput` (every keystroke) or `onAnyChange`
+     *  the native meaning; reach for `onInput` (every keystroke) or `onValueChange`
      *  (both) for live updates. Read `e.target.value`. */
     onChange?: (e: any) => void;
     /** Unified value-change handler — the easy path for state. Fires on `input`
@@ -123,7 +131,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  you can do `setForm(s => ({ ...s, [attrs.name]: attrs.value }))` without
      *  digging into the event. Use `event.type` to tell a live edit (`input`) from
      *  a commit (`change`); read `id` / `type` / `className` off `event.target`. */
-    onAnyChange?: (event: any, attrs: InputChangeAttrs) => void;
+    onValueChange?: (event: any, attrs: InputChangeAttrs) => void;
     /** Fires when the built-in clear button (`clearable`) is clicked, *before*
      *  the field is cleared. Call `e.preventDefault()` to keep the current value
      *  — the clear is cancelled and `onClearInput` won't fire. Backed by the
@@ -156,4 +164,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onAnyChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;