@antadesign/anta 0.3.2 → 0.3.3

package/dist/elements/a-tooltip.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, anchorRect, isMenuOpen, isInsideOpenMenu } from "../anta_helpers";
 import { debounce } from "es-toolkit";
 import "./a-tooltip.css";
 const MARGIN = 4;
@@ -164,10 +164,10 @@ class ATooltipElement extends HTMLElementBase {
     this.bubble.setAttribute("part", "bubble");
     this.container.append(this.bubble);
     this.container.addEventListener("mouseenter", () => {
-      if (this.isInteractive) this.cancelHide();
+      if (this.#isInteractive) this.cancelHide();
     });
     this.container.addEventListener("mouseleave", () => {
-      if (this.isInteractive && this.shown) this.scheduleHide();
+      if (this.#isInteractive && this.shown) this.scheduleHide();
     });
     shadow.append(style, this.container);
   }
@@ -197,23 +197,23 @@ class ATooltipElement extends HTMLElementBase {
    *  onto an anchor after the tooltip was dismissed re-arms it. */
   makeDebouncedShow() {
     this.debouncedShow?.cancel();
-    this.debouncedShow = debounce((e) => this.show(e), this.delay);
+    this.debouncedShow = debounce((e) => this.show(e), this.#delay);
   }
-  get isInteractive() {
+  get #isInteractive() {
     return this.hasAttribute("interactive");
   }
   /** Pinned under the anchor (no cursor-following) — the DEFAULT. Following the
    *  cursor is opt-in via the `follow` attribute. `interactive` (you can't move
    *  into a bubble that chases the cursor) and a touch long-press (a finger
    *  can't track one) force pinned regardless of `follow`. */
-  get isPinned() {
-    if (this.isInteractive || this.touchOpen) return true;
+  get #isPinned() {
+    if (this.#isInteractive || this.touchOpen) return true;
     return !this.hasAttribute("follow");
   }
-  get prefersTop() {
+  get #prefersTop() {
     return this.getAttribute("placement") === "top";
   }
-  get delay() {
+  get #delay() {
     const attr = this.getAttribute("delay");
     if (attr == null) return DEFAULT_DELAY;
     const n = parseInt(attr, 10);
@@ -222,7 +222,7 @@ class ATooltipElement extends HTMLElementBase {
   // --- truncated-only gating (UI-thread layout READS — no mutation) ---
   /** When set, the tooltip only shows if its resolved target is actually
    *  truncated/clipped; a fitting label gets no tooltip. */
-  get truncatedOnly() {
+  get #truncatedOnly() {
     return this.hasAttribute("truncated-only");
   }
   /** The element whose overflow decides whether the tooltip shows: a
@@ -294,10 +294,10 @@ class ATooltipElement extends HTMLElementBase {
   positionToTarget = () => {
     this.schedulePosition(() => {
       if (!this.anchor || !this.shown) return;
-      const a = this.anchor.getBoundingClientRect();
+      const a = anchorRect(this.anchor);
       const box = this.container.getBoundingClientRect();
       const { innerWidth: vw, innerHeight: vh } = this.view;
-      const top = this.flipVertical(a.top - box.height - MARGIN, a.bottom + MARGIN, box.height, vh, this.prefersTop || this.touchOpen);
+      const top = this.flipVertical(a.top - box.height - MARGIN, a.bottom + MARGIN, box.height, vh, this.#prefersTop || this.touchOpen);
       this.place(a.left, top, box.width, vw);
     });
   };
@@ -306,12 +306,12 @@ class ATooltipElement extends HTMLElementBase {
       if (!this.shown && !this.fading) return;
       const box = this.container.getBoundingClientRect();
       const { innerWidth: vw, innerHeight: vh } = this.view;
-      const top = this.flipVertical(e.clientY - box.height - MARGIN * 2, e.clientY + CURSOR_SIZE, box.height, vh, this.prefersTop);
+      const top = this.flipVertical(e.clientY - box.height - MARGIN * 2, e.clientY + CURSOR_SIZE, box.height, vh, this.#prefersTop);
       this.place(e.clientX - PADDING_X, top, box.width, vw);
     });
   };
   position(e) {
-    if (!this.isPinned && e) this.positionToMouse(e);
+    if (!this.#isPinned && e) this.positionToMouse(e);
     else this.positionToTarget();
   }
   /** Opacity for the inner bubble from the cursor's distance to the anchor rect
@@ -319,7 +319,7 @@ class ATooltipElement extends HTMLElementBase {
    *  Cursor-follow only — drives the "fade as you move away" behaviour. */
   proximityOpacity(e) {
     if (!this.anchor) return 1;
-    const r = this.anchor.getBoundingClientRect();
+    const r = anchorRect(this.anchor);
     const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right);
     const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom);
     const dist = Math.hypot(dx, dy);
@@ -330,8 +330,9 @@ class ATooltipElement extends HTMLElementBase {
   // --- show / hide ---
   show = (e) => {
     if (!this.anchor) return;
+    if (isMenuOpen() && !isInsideOpenMenu(this.anchor)) return;
     if (this.isEmpty()) return;
-    if (this.truncatedOnly && !this.isTargetTruncated()) return;
+    if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     this.cancelHide();
     if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
       return;
@@ -408,7 +409,7 @@ class ATooltipElement extends HTMLElementBase {
       this.cleanup();
       return;
     }
-    if (!(this.shown || this.fading) || this.isPinned) return;
+    if (!(this.shown || this.fading) || this.#isPinned) return;
     this.lastMouse = e;
     const o = this.proximityOpacity(e);
     if (o === 0) {
@@ -444,7 +445,7 @@ class ATooltipElement extends HTMLElementBase {
    *  show with the latest cursor event. */
   trigger(e) {
     if (this.isEmpty()) return;
-    if (this.truncatedOnly && !this.isTargetTruncated()) return;
+    if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     if (isHot()) {
       this.debouncedShow?.cancel();
       this.show(e);
@@ -466,7 +467,7 @@ class ATooltipElement extends HTMLElementBase {
       if (e.pointerType !== "mouse") return;
       this.lastMouse = e;
       if (this.shown) {
-        if (!this.isPinned) this.positionToMouse(e);
+        if (!this.#isPinned) this.positionToMouse(e);
       } else {
         this.trigger(e);
       }

package/dist/elements/index.d.ts

@@ -21,6 +21,7 @@ export { ACheckboxElement, register_a_checkbox } from './a-checkbox';
 export { AExpanderElement, register_a_expander } from './a-expander';
 export { ATooltipElement, register_a_tooltip } from './a-tooltip';
 export { AInputElement, register_a_input } from './a-input';
+export { ACalendarElement, register_a_calendar } from './a-calendar';
 export { ARadioElement, register_a_radio } from './a-radio';
 export { ARadioGroupElement, register_a_radio_group } from './a-radio-group';
 export { AMenuElement, register_a_menu } from './a-menu';

package/dist/elements/index.js

@@ -6,6 +6,7 @@ import { ACheckboxElement, register_a_checkbox } from "./a-checkbox";
 import { AExpanderElement, register_a_expander } from "./a-expander";
 import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import { AInputElement, register_a_input } from "./a-input";
+import { ACalendarElement, register_a_calendar } from "./a-calendar";
 import { ARadioElement, register_a_radio } from "./a-radio";
 import { ARadioGroupElement, register_a_radio_group } from "./a-radio-group";
 import { AMenuElement, register_a_menu } from "./a-menu";
@@ -19,6 +20,7 @@ import "./a-tag.css";
 import "./a-tabpanel.css";
 export {
   AButtonElement,
+  ACalendarElement,
   ACheckboxElement,
   AExpanderElement,
   AIconElement,
@@ -35,6 +37,7 @@ export {
   ATextElement,
   ATooltipElement,
   register_a_button,
+  register_a_calendar,
   register_a_checkbox,
   register_a_expander,
   register_a_icon,

package/dist/general_types.d.ts

@@ -13,6 +13,9 @@ export interface BaseProps {
     title?: string;
     /** Tab order. Set to `-1` to skip the element when tabbing. */
     tabIndex?: number;
+    /** React/Preact reconciliation key when rendered inside a list. Consumed by the
+     *  JSX runtime (not forwarded as a DOM attribute). */
+    key?: string | number | null;
     /** Any `data-*` attribute is forwarded to the rendered element. */
     [key: `data-${string}`]: unknown;
     /** Any `aria-*` attribute is forwarded to the rendered element. */
@@ -145,6 +148,9 @@ export interface AProgressAttributes extends BaseAttributes {
     /** Colour variant, or any literal CSS colour for a custom tone (derived in
      *  oklch). Named tones track light/dark automatically. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Fully-round track (`border-radius: 999px`), or a custom radius via a length
+     *  value (`round="6px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** ARIA role — the JSX wrapper sets this to `'progressbar'`. */
     role?: string;
     /** ARIA value-now (current). */
@@ -165,8 +171,9 @@ export interface AProgressAttributes extends BaseAttributes {
 export interface ATextAttributes extends BaseAttributes {
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
+     *  the others apply the matching `--text-{N}-{tone}` palette. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Type scale. `small` = 13/16, `medium` (default) = 15/20, `large` = 17/24. */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block. */
@@ -198,8 +205,9 @@ export interface ATitleAttributes extends BaseAttributes {
     level?: string;
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
+     *  the others apply the matching `--text-{N}-{tone}` palette. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** ARIA role — the JSX wrapper sets this to `'heading'`. */
     role?: string;
     /** ARIA heading level — the JSX wrapper sets this to match `level`. */
@@ -224,9 +232,9 @@ export interface ATagAttributes extends BaseAttributes {
     /** Size variant. `small` = 16px tall, `medium` (default) = 20px,
      *  `large` = 24px. */
     size?: 'small' | 'medium' | 'large';
-    /** Render in normal case instead of the default uppercase.
+    /** Render in all-caps instead of the default normal (mixed) case.
      *  Presence-based (`''` on, omit off). */
-    nocaps?: boolean | '';
+    allcaps?: boolean | '';
 }
 /**
  * Attributes for the `<a-expander>` collapsible disclosure.
@@ -258,6 +266,11 @@ export interface AExpanderAttributes extends BaseAttributes {
     /** Disables the header: not clickable or focusable, hover affordance
      *  off, text dimmed. The open state freezes as-is. Presence-based. */
     disabled?: boolean | '';
+    /** Round corners sized to half the folded (header) height — a pill when folded,
+     *  the same radius when expanded (the element measures the header and publishes
+     *  `--_expander-round-radius`). A length value (`round="12px"`) is a fixed radius
+     *  that overrides the measurement. Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Semantic tone, or any literal CSS color for a one-off custom tone.
      *  Named tones re-point the text + filled surface palette; a custom
      *  color keeps its hue with lightness/chroma pinned. `'neutral'` is the
@@ -326,6 +339,9 @@ export interface ATooltipAttributes extends BaseAttributes {
      *  nearest Anta ellipsizing label part (`a-tab-label` / `a-button-label`) in the
      *  anchor, then the anchor itself. Presence-based (`''` on, omit off). */
     'truncated-only'?: boolean | '';
+    /** Round the bubble (20px radius), or a custom radius via a length value
+     *  (`round="12px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** CSS selector (resolved within the anchor) for the element whose overflow a
      *  `truncated-only` tooltip measures. */
     'truncated-selector'?: string;
@@ -343,15 +359,15 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Mark colour (checked fill + unselected box border), or any literal CSS color
-     *  for a one-off custom tone. Named tones track light/dark mode automatically via
-     *  the theme-aware role tokens. `'neutral'` is the default (same as omitting it).
-     *  The label + hint stay neutral — use `tone-text` for those. */
+    /** Mark colour in every state — checked fill *and* unselected box border — or any
+     *  literal CSS color for a one-off custom tone. Named tones track light/dark mode
+     *  automatically. `'neutral'` is the default (same as omitting it). The label + hint
+     *  stay neutral — recolour them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
-     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
-     *  (or `'neutral'`) to leave the text neutral. */
-    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the checked mark only — the empty box stays
+     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
+     *  off-state border and `tone-selected` the checked fill. */
+    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `small` = 14px, `medium` (default) = 16px, `large` = 18px box. */
     size?: 'small' | 'medium' | 'large';
     /** Controlled state — the element reflects changes to this attribute. Use this
@@ -363,6 +379,9 @@ export interface ACheckboxAttributes extends BaseAttributes {
     'default-state'?: 'checked' | 'unchecked' | 'indeterminate';
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
+    /** Round the mark to a circle (`::before` `border-radius: 999px`), or a rounded
+     *  square via a length value (`round="5px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Form field name — the key this checkbox submits under inside a `<form>`. */
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`. */
@@ -423,6 +442,9 @@ export interface AInputAttributes extends BaseAttributes {
     /** Dim the leading/trailing adornments at rest (0.6); they brighten to full
      *  when the field is hovered or focused. Presence-based. */
     'dim-actions'?: boolean | '';
+    /** Fully-round field (`border-radius: 999px`), or a custom radius via a length
+     *  value (`round="10px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Size variant. small=24px, medium (default)=28px, large=32px. */
     size?: 'small' | 'medium' | 'large';
     /** Single-line input type (ignored when multiline). `search` is intentionally
@@ -456,6 +478,60 @@ export interface AInputAttributes extends BaseAttributes {
     'aria-invalid'?: 'true' | 'false' | boolean;
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-calendar>` custom element — a **light-DOM,
+ * form-associated** month grid, and the **interaction authority** for it. The
+ * element is the grid (a flat 7-column CSS grid whose children are the weekday
+ * headers + day cells), owns the submitted form value, and **dispatches the
+ * selection (`statechange` / `change`) and navigation (`navigate`) events** plus
+ * manages keyboard focus — so it works for a vanilla consumer, not only via the
+ * wrapper. It does **not** build or mutate its own contents: whoever renders into
+ * it (the `Calendar` JSX wrapper, or a vanilla consumer using the exported
+ * `buildMonth` engine) fills it with day cells and *re-renders on its events* —
+ * the `<a-radio-group>` model. Controlled by the presence of `value` (a pick only
+ * *requests* a change); uncontrolled with `defaultvalue` (a pick self-applies).
+ * For the typed, batteries-included wrapper use `Calendar` from `@antadesign/anta`.
+ *
+ * `:state(filled)` is the styling hook for "has a selection".
+ */
+export interface ACalendarAttributes extends BaseAttributes {
+    /** Controlled selected date — ISO `YYYY-MM-DD`. Present → controlled (a pick
+     *  only requests a change). Mirrored to the owning form via `ElementInternals`. */
+    value?: string;
+    /** Uncontrolled initial date / reset baseline — ISO `YYYY-MM-DD`. */
+    defaultvalue?: string;
+    /** Form field name — the selected ISO date submits under this key. */
+    name?: string;
+    /** Disable the whole calendar. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Focus signal — `"<iso>#<nonce>"`. When it changes, the element focuses the
+     *  day cell whose `data-date` matches `<iso>` (set by the renderer after a
+     *  month-changing keyboard move). */
+    'data-focus'?: string;
+    /** Cancelable, bubbling `statechange` fired BEFORE a pick applies. `detail` is
+     *  `{ next, prev, reason }` — ISO strings (or `null`); `reason` ∈
+     *  `'user' | 'reset' | 'restore'`. `preventDefault()` vetoes a `'user'` pick in
+     *  uncontrolled mode. */
+    onstatechange?: (e: CustomEvent<{
+        next: string | null;
+        prev: string | null;
+        reason: 'user' | 'reset' | 'restore';
+    }>) => void;
+    /** Native `change`, fired AFTER a selection applies (uncontrolled) and on
+     *  reset/restore. */
+    onchange?: (e: Event) => void;
+    /** Keyboard navigation request — the element handles arrow / Home / End /
+     *  PageUp / PageDown, focuses the target cell when it's rendered, and emits this
+     *  bubbling `navigate` `CustomEvent` (`detail: { date }`, ISO) so the renderer can
+     *  move the roving tab stop and flip the displayed month when needed. */
+    onnavigate?: (e: CustomEvent<{
+        date: string;
+    }>) => void;
+    /** ARIA — `role="group"` and the accessible name are set by the renderer (the
+     *  `Calendar` wrapper wires `aria-labelledby` to the month heading). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
 /**
  * Attributes for the `<a-menu>` custom element. Placed immediately after the
  * trigger it anchors to (root menu), or nested inside an `<a-menu-item>`
@@ -476,6 +552,10 @@ export interface AMenuAttributes extends BaseAttributes {
      *  default; this opts out, making the submenu click-only. Presence-based
      *  (`''` on, omit off). */
     nohover?: boolean | '';
+    /** Round: container softens to a 20px radius and its items go fully round. A
+     *  length value (`round="12px"`) tunes the container radius only (items stay
+     *  pills). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Gap in pixels between the trigger and the menu. Defaults to 4. */
     offset?: number | string;
     /** Controlled open state (`'open'` / `'closed'`). Omit for uncontrolled;
@@ -503,9 +583,15 @@ export interface AMenuAttributes extends BaseAttributes {
 export interface AMenuItemAttributes extends BaseAttributes {
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
-    /** Semantic tone. Colors the label, icon, and hover tint. `'neutral'`
-     *  (the default) is the same as omitting it. */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Marks the item as selected — a persistent background tint (the same
+     *  resting look a pressed row shows), for building single- / multi-select
+     *  menus. Presence-based (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Semantic tone. Colors the label, icon, and hover/selected tint. A named tone,
+     *  or any literal CSS color for a one-off custom tone (resolved through
+     *  `--menu-item-tone-source`, hue/chroma kept, lightness pinned to the brand
+     *  text). `'neutral'` (the default) is the same as omitting it. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Keep the menu open after this item is chosen (toggles / multi-select),
      *  instead of the default close-on-select. Presence-based (`''` on, omit
      *  off). The universal form is `data-menu-open` (works on any element). */
@@ -554,6 +640,9 @@ export interface AButtonAttributes extends BaseAttributes {
     disabled?: boolean | '';
     /** Toggled-on / pressed state. Presence-based (`''` on, omit off). */
     selected?: boolean | '';
+    /** Fully-round (pill / circle) — `border-radius: 999px` — or a custom radius via
+     *  a length value (`round="20px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Submit/reset semantics. */
     type?: 'button' | 'submit' | 'reset';
     /** Associate with a form by id when not nested inside it. */
@@ -574,15 +663,15 @@ export interface AButtonAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Mark colour (selected ring fill + dot, unselected ring border), or any literal
-     *  CSS color for a one-off custom tone. Named tones track light/dark mode via the
-     *  theme-aware role tokens. `'neutral'` is the default. The label + hint stay
-     *  neutral — use `tone-text` for those. */
+    /** Mark colour in every state — selected ring fill + dot *and* unselected ring
+     *  border — or any literal CSS color for a one-off custom tone. Named tones track
+     *  light/dark mode. `'neutral'` is the default. The label + hint stay neutral —
+     *  recolour them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
-     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
-     *  (or `'neutral'`) to leave the text neutral. */
-    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the selected mark only — an unselected ring stays
+     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
+     *  off-state border and `tone-selected` the selected fill. */
+    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px control. */
     size?: 'small' | 'medium' | 'large';
     /** Disabled state. Presence-based (`''` on, omit off). */
@@ -625,13 +714,13 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     /** Form field name — the group submits `name=value`. */
     name?: string;
     /** Mark tone cascaded to children that don't set their own, or any literal CSS
-     *  color for a one-off custom tone. Inherits through CSS so every child
-     *  `<a-radio>` picks up the same fill curve. The option text stays neutral —
-     *  use `tone-text`. */
+     *  color for a one-off custom tone. Colours every child's ring fill + dot *and*
+     *  unselected border. The option text stays neutral — recolour it in plain CSS via
+     *  the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Text tone cascaded to children's label + hint, independent of `tone`. A named
-     *  tone or any literal CSS color. Omit (or `'neutral'`) to leave the text neutral. */
-    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the selected option only — every unselected ring
+     *  stays neutral grey. Cascaded to children that don't set their own. */
+    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
@@ -691,6 +780,9 @@ export interface ATabAttributes extends BaseAttributes {
     selected?: boolean | '';
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
+    /** Fully-round this tab's box (`--tab-radius: 999px`). `<a-tabs round>` sets it
+     *  strip-wide instead. Presence-based (`''` on, omit off) — no custom value. */
+    round?: boolean | '';
     /** ARIA — `role="tab"` is set by the consumer (`Tabs` on each tab, or a hand-author),
      *  and `aria-controls` points at the paired panel. `aria-selected` is published by
      *  the element through `ElementInternals` (off the DOM), driven by the `selected`
@@ -740,6 +832,10 @@ export interface ATabsAttributes extends BaseAttributes {
     noslide?: boolean | '';
     /** Disable the whole strip. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
+    /** Fully-round tabs + sliding indicator (via `--tab-radius: 999px`) and the primary
+     *  track well. A length value (`round="10px"`) applies to the top-level track well
+     *  only (pills + indicator stay full). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Fires whenever the active tab changes. `detail` carries `{ next, prev }` (values;
      *  `null` = none). Cancelable: a synchronous `preventDefault()` vetoes the pick in
      *  uncontrolled mode. All-lowercase to bind across both renderers (like

package/dist/index.d.ts

@@ -19,7 +19,7 @@
 export { Progress } from './components/Progress';
 export type { ProgressProps } from './components/Progress';
 export { Text } from './components/Text';
-export type { TextProps } from './components/Text';
+export type { TextProps, ExpandMode } from './components/Text';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';
@@ -45,8 +45,16 @@ export { Expander } from './components/Expander';
 export type { ExpanderProps } from './components/Expander';
 export { Input } from './components/Input';
 export type { InputProps, InputChangeAttrs } from './components/Input';
+export { Calendar } from './components/Calendar';
+export type { CalendarProps, CalendarChangeAttrs } from './components/Calendar';
+export { InputDate } from './components/InputDate';
+export type { InputDateProps, InputDateChangeAttrs } from './components/InputDate';
+export { buildMonth, getWeekdays, firstDayOfWeek, clampDate, isOutOfRange, parseISODate, parseDateInput, formatDateInput, dateFormatPattern, parseTimeInput, parseDateTimeInput, formatDateTimeInput, dateTimeFormatPattern, usesHour12, } from './calendar-core';
+export type { CalendarDay, CalendarWeekday, CalendarMonth, BuildMonthOptions, ParseDateOptions, } from './calendar-core';
 export { RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
+export { Select } from './components/Select';
+export type { SelectProps, SelectCommonProps, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, } from './components/Select';
 export { Tabs } from './components/Tabs';
 export type { TabsProps, TabsMounting, TabsChangeAttrs } from './components/Tabs';
 export { Tab } from './components/Tab';

package/dist/index.js

@@ -13,25 +13,47 @@ import { MenuSeparator } from "./components/MenuSeparator";
 import { MenuGroup } from "./components/MenuGroup";
 import { Expander } from "./components/Expander";
 import { Input } from "./components/Input";
+import { Calendar } from "./components/Calendar";
+import { InputDate } from "./components/InputDate";
+import {
+  buildMonth,
+  getWeekdays,
+  firstDayOfWeek,
+  clampDate,
+  isOutOfRange,
+  parseISODate,
+  parseDateInput,
+  formatDateInput,
+  dateFormatPattern,
+  parseTimeInput,
+  parseDateTimeInput,
+  formatDateTimeInput,
+  dateTimeFormatPattern,
+  usesHour12
+} from "./calendar-core";
 import { RadioGroup } from "./components/RadioGroup";
+import { Select } from "./components/Select";
 import { Tabs } from "./components/Tabs";
 import { Tab } from "./components/Tab";
 import { TabPanel } from "./components/TabPanel";
 import { configure } from "./jsx-runtime";
 export {
   Button,
+  Calendar,
   Checkbox,
   Expander,
   ICON_SHAPES,
   ICON_SYNONYMS,
   Icon,
   Input,
+  InputDate,
   Menu,
   MenuGroup,
   MenuItem,
   MenuSeparator,
   Progress,
   RadioGroup,
+  Select,
   Tab,
   TabPanel,
   Tabs,
@@ -39,5 +61,19 @@ export {
   Text,
   Title,
   Tooltip,
-  configure
+  buildMonth,
+  clampDate,
+  configure,
+  dateFormatPattern,
+  dateTimeFormatPattern,
+  firstDayOfWeek,
+  formatDateInput,
+  formatDateTimeInput,
+  getWeekdays,
+  isOutOfRange,
+  parseDateInput,
+  parseDateTimeInput,
+  parseISODate,
+  parseTimeInput,
+  usesHour12
 };

package/dist/jsx-runtime.d.ts

@@ -3,10 +3,11 @@ type ComponentType = string | Function | symbol;
 type JsxFunction = {
     h(type: ComponentType, props: Record<string, unknown> | null, ...children: unknown[]): unknown;
 }['h'];
-/** The two hooks the stateful wrappers (currently only `RadioGroup`) need. Typed
- *  loosely to stay renderer-agnostic — any React-compatible hook implementation. */
+/** The hooks the stateful wrappers need. Typed loosely to stay renderer-agnostic —
+ *  any React-compatible hook implementation. */
 type UseState = <S>(initial: S | (() => S)) => [S, (next: S | ((prev: S) => S)) => void];
 type UseId = () => string;
+type UseMemo = <T>(factory: () => T, deps: unknown[]) => T;
 declare let _Fragment: ComponentType;
 /**
  * Swap the underlying JSX factory (and, optionally, the hooks) used by all anta
@@ -15,32 +16,37 @@ declare let _Fragment: ComponentType;
  * Not needed for React or Preact-with-compat — those work automatically. Call this
  * before rendering any anta components when using Preact without compat aliasing,
  * or a custom JSX runtime. Pass `hooks` when your runtime's hooks don't resolve via
- * the `react` specifier (the stateful wrappers — `RadioGroup` — need `useState` /
- * `useId`); omit it and they default to whatever `react` resolves to.
+ * the `react` specifier (the stateful wrappers — `RadioGroup`, `Calendar`,
+ * `InputDate` — need `useState` / `useId` / `useMemo`); omit it and they default
+ * to whatever `react` resolves to.
  *
  * @example Preact without compat
  * ```ts
  * import { configure } from '@antadesign/anta'
  * import { h, Fragment } from 'preact'
- * import { useState, useId } from 'preact/hooks'
- * configure(h, Fragment, { useState, useId })
+ * import { useState, useId, useMemo } from 'preact/hooks'
+ * configure(h, Fragment, { useState, useId, useMemo })
  * ```
  */
 export declare function configure(jsx: JsxFunction, Fragment?: ComponentType, hooks?: {
     useState?: UseState;
     useId?: UseId;
+    useMemo?: UseMemo;
 }): void;
 /** Hooks indirection so wrappers depend on the configured renderer, not a hard
  *  `import … from 'react'`. Call these exactly like the React hooks. */
 export declare function useState<S>(initial: S | (() => S)): [S, (next: S | ((prev: S) => S)) => void];
 export declare function useId(): string;
+export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
+    interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {
+    }
 }
 export interface AntaIntrinsicElements {
     'a-progress': AProgressAttributes;
@@ -64,6 +70,7 @@ export interface AntaIntrinsicElements {
     'a-checkbox-hint': BaseAttributes;
     'a-tooltip': ATooltipAttributes;
     'a-input': AInputAttributes;
+    'a-calendar': ACalendarAttributes;
     'a-radio': ARadioAttributes;
     'a-radio-group': ARadioGroupAttributes;
     'a-radio-group-label': BaseAttributes;
@@ -74,6 +81,8 @@ export interface AntaIntrinsicElements {
     'a-menu': AMenuAttributes;
     'a-menu-item': AMenuItemAttributes;
     'a-menu-item-label': BaseAttributes;
+    'a-menu-item-hint': BaseAttributes;
+    'a-menu-item-text': BaseAttributes;
     'a-menu-separator': BaseAttributes;
     'a-menu-group': AMenuGroupAttributes;
     'a-menu-group-label': BaseAttributes;