@antadesign/anta 0.3.31 → 0.3.32

package/dist/elements/a-expander.js

@@ -17,15 +17,25 @@ const SHADOW_STYLE = `
     align-items: stretch;
   }
 
+  :host([indicator-placement="end"]) .header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto var(--_expander-indicator-track);
+  }
+
   slot[name="actions"] { display: none; }
   .header.has-actions slot[name="actions"] {
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: var(--_expander-actions-gap);
     flex-shrink: 0;
-    margin-inline-start: 8px;
+    margin-inline-start: var(--_expander-actions-start);
     /* Inset from the right edge (the host has no padding of its own). */
-    margin-inline-end: 4px;
+    margin-inline-end: var(--_expander-actions-end);
+  }
+  :host([indicator-placement="end"]) .header.has-actions slot[name="actions"] {
+    grid-column: 2;
+    grid-row: 1;
+    z-index: 1;
   }
 
   button {
@@ -34,14 +44,11 @@ const SHADOW_STYLE = `
     background: none;
     border: none;
     margin: 0;
-    /* The button is the full-bleed header: it spans the host's width (flex: 1)
-       and height (.header stretch). The title is inset by --expander-gutter
-       (the chevron lives absolutely inside that gutter, below \u2014 it never pushes
-       the title), so the title + the body share one inset value; 6px block
-       gives the header a touch more height. Restyle it edge-to-edge via
-       ::part(summary). */
+    /* The default button fills the header beside its actions. The title and
+       body share --expander-gutter, and the indicator hangs inside that gutter.
+       End placement switches to the header's subgrid. */
     position: relative;
-    padding: 6px 4px 6px var(--expander-gutter);
+    padding: var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter);
     flex: 1;
     min-width: 0;
     font: inherit;
@@ -58,49 +65,108 @@ const SHADOW_STYLE = `
     outline: none;
   }
 
+  :host([indicator-placement="end"]) button {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    display: grid;
+    grid-template-columns: subgrid;
+    padding: var(--_expander-header-padding-block) 0;
+  }
+  :host([indicator-placement="end"]) slot[name="title"] {
+    grid-column: 1;
+    display: block;
+    min-width: 0;
+    margin-inline-start: var(--expander-gutter);
+  }
+
   button:focus-visible {
     outline: 1px solid var(--focus-ring);
     outline-offset: 0px;
   }
 
-  /* The chevron sits absolutely INSIDE the gutter \u2014 out of flow, so it never
-     pushes the title. Its right edge lands 2px before the gutter (left = gutter
-     - 16px - 2px), leaving a 2px gap before the title; at the default 24px
-     gutter the chevron box is [6px, 22px], and on outdent (gutter 0) it
-     auto-hangs at -18px in the negative gutter. One var drives the title inset,
-     the body inset, and the chevron position. */
-  button::before {
-    content: '';
+  .indicator {
     position: absolute;
-    left: calc(var(--expander-gutter) - 16px - 2px);
+    inset-inline-start: var(--_expander-indicator-start);
     top: 50%;
-    width: 16px;
-    height: 16px;
+    width: var(--_expander-indicator-size);
+    height: var(--_expander-indicator-size);
+    pointer-events: none;
+    opacity: 0.6;
+    transform: translateY(-50%);
+    transition: transform 150ms ease, opacity 150ms ease;
+  }
+  .indicator slot { display: grid; place-items: center; width: 100%; height: 100%; }
+  .indicator slot::slotted(*) { pointer-events: none; }
+  .indicator .glyph {
+    display: block;
+    width: var(--_expander-indicator-size);
+    height: var(--_expander-indicator-size);
     background-color: currentColor;
-    -webkit-mask-image: var(--_expander-chevron);
-            mask-image: var(--_expander-chevron);
+    -webkit-mask-image: var(--_expander-indicator-mask);
+            mask-image: var(--_expander-indicator-mask);
     -webkit-mask-size: contain;
             mask-size: contain;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
     -webkit-mask-position: center;
             mask-position: center;
-    opacity: 0.6;
-    /* translateY centers it; the open state adds rotate (same transform so the
-       transition animates only the rotation). */
-    transform: translateY(-50%);
-    transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease;
   }
-  button:enabled:hover::before { opacity: 1; }
-  button[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg); opacity: 1; }
+  :host([indicator="plus"]) .indicator .glyph { position: relative; background: none; mask: none; -webkit-mask: none; }
+  :host([indicator="plus"]) .indicator .glyph::before,
+  :host([indicator="plus"]) .indicator .glyph::after {
+    content: '';
+    position: absolute;
+    background: currentColor;
+    border-radius: calc(var(--_expander-indicator-stroke) / 2);
+  }
+  :host([indicator="plus"]) .indicator .glyph::before {
+    width: calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));
+    height: var(--_expander-indicator-stroke);
+    left: var(--_expander-indicator-stroke);
+    top: calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);
+  }
+  :host([indicator="plus"]) .indicator .glyph::after {
+    width: var(--_expander-indicator-stroke);
+    height: calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));
+    left: calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);
+    top: var(--_expander-indicator-stroke);
+    transition: transform 150ms ease;
+  }
+  button:enabled:hover .indicator { opacity: 1; }
+  button[aria-expanded="true"] .indicator { transform: translateY(-50%) rotate(90deg); opacity: 1; }
+  :host([indicator="plus"]) button[aria-expanded="true"] .indicator,
+  button[aria-expanded="true"] .indicator.has-pair { transform: translateY(-50%); }
+  :host([indicator="plus"]) button[aria-expanded="true"] .glyph::after { transform: scaleY(0); }
+  button[aria-expanded="false"] slot[name="indicator"]::slotted([data-when="open"]),
+  button[aria-expanded="true"] slot[name="indicator"]::slotted([data-when="closed"]) { display: none; }
+
+  :host([indicator-placement="end"]) .indicator {
+    position: static;
+    grid-column: 3;
+    grid-row: 1;
+    justify-self: end;
+    align-self: center;
+    margin-inline-end: var(--_expander-indicator-edge);
+    transform: rotate(90deg);
+  }
+  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator { transform: rotate(270deg); }
+  :host([indicator-placement="end"]) .indicator.has-custom,
+  :host([indicator-placement="end"]) .indicator.has-pair { transform: none; }
+  :host([indicator-placement="end"][indicator="plus"]) .indicator { transform: none; }
+  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator.has-custom { transform: rotate(180deg); }
+  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator.has-pair,
+  :host([indicator-placement="end"][indicator="plus"]) button[aria-expanded="true"] .indicator { transform: none; }
 
   button:enabled:hover { color: var(--expander-text-hover); }
   :host([priority="tertiary"]) button:enabled:hover { --_summary-underline: underline; }
   button:enabled:active { color: var(--expander-text); }
   button:disabled { cursor: default; }
-  button:enabled:not([aria-expanded="true"]):active::before {
+  button:enabled:not([aria-expanded="true"]):active .indicator {
     opacity: 0.6;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .indicator, :host([indicator="plus"]) .indicator .glyph::after { transition: none; }
+  }
 
   .region {
     display: grid;
@@ -109,11 +175,8 @@ const SHADOW_STYLE = `
   }
   .header:has(button[aria-expanded="true"]) + .region { grid-template-rows: 1fr; }
 
-  /* Outdent flush correction: the host keeps its 1px (transparent) border for
-     cross-priority box stability, which insets the content-box by 1px. Pull the
-     header + region back by that 1px so the title and body land exactly on the
-     surrounding content (the chevron, absolutely positioned inside the header,
-     rides along). Logical start so it follows RTL. */
+  /* The transparent tertiary border still insets the content by 1px. Pull the
+     header and region back so outdent lands flush with surrounding content. */
   :host([priority="tertiary"][outdent]) .header,
   :host([priority="tertiary"][outdent]) .region {
     margin-inline-start: -1px;
@@ -145,8 +208,7 @@ class AExpanderElement extends HTMLElementBase {
   // including custom header content. Guarded for engines without ResizeObserver.
   roundObserver;
   // ElementInternals exposes the open/closed state as a custom state
-  // (`:state(open)`) for consumer styling — e.g. rotating a chevron that lives
-  // in `actions`, or matching an open header to a design. It's NOT a host
+  // (`:state(open)`) for consumer styling, including the indicator. It's NOT a host
   // attribute (declarative-DOM safe: no host mutation, no reconciliation
   // churn), just element-internal state the browser exposes for CSS matching.
   // Guarded for engines without attachInternals / CustomStateSet (no-op there).
@@ -164,7 +226,24 @@ class AExpanderElement extends HTMLElementBase {
     const titleSlot = document.createElement("slot");
     titleSlot.name = "title";
     this.titleSlot = titleSlot;
-    this.summary.append(titleSlot);
+    const indicator = document.createElement("span");
+    indicator.className = "indicator";
+    indicator.setAttribute("part", "indicator");
+    indicator.setAttribute("aria-hidden", "true");
+    indicator.inert = true;
+    const indicatorSlot = document.createElement("slot");
+    indicatorSlot.name = "indicator";
+    const glyph = document.createElement("span");
+    glyph.className = "glyph";
+    indicatorSlot.append(glyph);
+    indicatorSlot.addEventListener("slotchange", () => {
+      const assigned = indicatorSlot.assignedElements();
+      const hasPair = assigned.some((el) => el.hasAttribute("data-when"));
+      indicator.classList.toggle("has-custom", assigned.length > 0 && !hasPair);
+      indicator.classList.toggle("has-pair", hasPair);
+    });
+    indicator.append(indicatorSlot);
+    this.summary.append(titleSlot, indicator);
     this.summary.addEventListener("click", this.onSummaryClick);
     const header = document.createElement("div");
     header.className = "header";

package/dist/elements/a-menu.js

@@ -22,9 +22,20 @@ const openStack = [];
 let docBound = false;
 let boundDoc = null;
 let boundView = null;
+let mouseX = null;
+let mouseY = 0;
+function trackMouse(e) {
+  mouseX = e.pointerType === "mouse" ? e.clientX : null;
+  if (mouseX !== null) mouseY = e.clientY;
+}
+function mouseInside(rect) {
+  return mouseX !== null && mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom;
+}
 function bindDocListeners(doc, view) {
   if (docBound) return;
   doc.addEventListener("pointerdown", onDocPointerDown, true);
+  doc.addEventListener("pointermove", trackMouse, { capture: true, passive: true });
+  doc.addEventListener("pointerleave", clearMouse);
   doc.addEventListener("keydown", onDocKeyDown, true);
   doc.addEventListener("keyup", onDocKeyUp, true);
   doc.addEventListener("contextmenu", onDocContextMenu, true);
@@ -36,6 +47,8 @@ function bindDocListeners(doc, view) {
 function unbindDocListeners() {
   if (!docBound) return;
   boundDoc?.removeEventListener("pointerdown", onDocPointerDown, true);
+  boundDoc?.removeEventListener("pointermove", trackMouse, true);
+  boundDoc?.removeEventListener("pointerleave", clearMouse);
   boundDoc?.removeEventListener("keydown", onDocKeyDown, true);
   boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
   boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
@@ -43,6 +56,10 @@ function unbindDocListeners() {
   boundDoc = null;
   boundView = null;
   docBound = false;
+  mouseX = null;
+}
+function clearMouse() {
+  mouseX = null;
 }
 function menuIndexForEvent(e, primaryClick = false) {
   const path = e.composedPath();
@@ -75,6 +92,7 @@ setMenuPresence({
   contains: nodeHitsMenus
 });
 function onDocPointerDown(e) {
+  trackMouse(e);
   if (!openStack.length) return;
   const index = menuIndexForEvent(e, e.button === 0);
   openStack[index + 1]?.requestClose(e);
@@ -145,6 +163,7 @@ class AMenuElement extends HTMLElementBase {
   // Submenu hover-intent timers.
   openTimer;
   closeTimer;
+  #holdHoverClose = false;
   // Typeahead state (root navigation).
   typeBuffer = "";
   typeTimer;
@@ -307,7 +326,10 @@ class AMenuElement extends HTMLElementBase {
     this.surface.append(header, scroll, footer);
     this.surface.addEventListener("pointerenter", (e) => {
       if (e.pointerType !== "mouse") return;
-      if (this.isSubmenu) this.cancelCloseTimer();
+      if (this.isSubmenu) {
+        this.#holdHoverClose = false;
+        this.cancelCloseTimer();
+      }
     });
     this.surface.addEventListener("pointerleave", (e) => {
       if (e.pointerType !== "mouse") return;
@@ -850,6 +872,7 @@ class AMenuElement extends HTMLElementBase {
   _doShow(coord, instant = false) {
     if (this.surface.isConnected && !this._shown) this.surface.showPopover();
     this._shown = true;
+    this.#holdHoverClose = false;
     this._dismissNotified = false;
     this.reflectOpen(true);
     this.hideAnchorTooltip();
@@ -866,9 +889,18 @@ class AMenuElement extends HTMLElementBase {
   }
   /** Shadow-only hide. */
   _doHide() {
+    const parent = this.parentElement?.closest("a-menu");
+    if (this._shown && parent && mouseX !== null && mouseInside(this.surface.getBoundingClientRect())) {
+      for (let ancestor = parent; ancestor; ancestor = ancestor.parentElement?.closest("a-menu")) {
+        if (!ancestor.isSubmenu || !ancestor.#isHover || !ancestor._shown || ancestor.surface.matches(":hover")) continue;
+        ancestor.#holdHoverClose = true;
+        ancestor.cancelCloseTimer();
+      }
+    }
     this.#stopAnchorTracking();
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
+    this.#holdHoverClose = false;
     this.reflectOpen(false);
     this.cancelOpenTimer();
     this.cancelCloseTimer();
@@ -1242,7 +1274,9 @@ class AMenuElement extends HTMLElementBase {
       let onLeave;
       if (this.#isHover) {
         onEnter = (e) => {
-          if (e.pointerType === "mouse") this.scheduleOpen();
+          if (e.pointerType !== "mouse") return;
+          this.#holdHoverClose = false;
+          this.scheduleOpen();
         };
         onLeave = (e) => {
           if (e.pointerType === "mouse") this.scheduleClose();
@@ -1320,9 +1354,12 @@ class AMenuElement extends HTMLElementBase {
   scheduleClose() {
     this.cancelOpenTimer();
     if (!this._shown) return;
+    if (this.#holdHoverClose) return;
     if (this.#hasKeyboardFocusInside) return;
-    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor))))
+    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor)))) {
+      this.cancelCloseTimer();
       return;
+    }
     this.cancelCloseTimer();
     this.closeTimer = setTimeout(() => {
       this.closeTimer = void 0;

package/dist/general_types.d.ts

@@ -334,6 +334,10 @@ export interface ABoxAttributes extends BaseAttributes {
      *  typed `attr()` read it from `--box-gap` in the host's inline style
      *  instead, which is what the JSX wrapper always sets. */
     gap?: boolean | '' | number | string;
+    /** Adds matching descendant rects to each measurement snapshot. With
+     * `observe="scroll"`, use `throttle` when many descendants match: rects are
+     * read for each emitted event, and CSS state updates follow the interval. */
+    'include-rects-for'?: string;
     /** CSS padding shorthand (`padding="8px 16px"`). Without typed `attr()`
      * support, set `--box-padding` as well. The JSX wrapper supplies it. */
     padding?: boolean | '' | number | string;
@@ -348,8 +352,12 @@ export interface ABoxAttributes extends BaseAttributes {
      * attribute means `all`. Omission runs no observers unless `fade` is set;
      * a native event listener alone does not enable observation. */
     observe?: string;
-    /** Minimum interval between measurement events in milliseconds. Omit or
-     * pass `0` for frame-based reporting. Invalid or negative values use `0`. */
+    /** Keeps measurement observation active outside the viewport when `observe`
+     * or `fade` selects measurement. */
+    'observe-offscreen'?: boolean | '';
+    /** Minimum interval between measurement reads, CSS state updates, and
+     * events in milliseconds. The initial read is immediate. Omit or pass `0`
+     * for frame-based updates. Invalid or negative values use `0`. */
     throttle?: number | string;
     /** Depth of that mask, as a length value (`fade-size="2rem"`). Engines
      *  without typed `attr()` read it from `--box-fade-size` in the host's
@@ -423,6 +431,11 @@ export interface ATagAttributes extends BaseAttributes {
  * use `Expander` from `@antadesign/anta`.
  */
 export interface AExpanderAttributes extends BaseAttributes {
+    /** Built-in disclosure mark. Custom visuals use `slot="indicator"`.
+     *  Defaults to `chevron`. */
+    indicator?: 'chevron' | 'triangle' | 'plus';
+    /** Logical side for the disclosure mark. Defaults to `start`. */
+    'indicator-placement'?: 'start' | 'end';
     /** Controlled open state (`'open'` / `'closed'`). Present → controlled: the
      *  attribute is the source of truth, clicks only dispatch the cancelable
      *  `statechange` event, and the consumer answers by updating it. Absent →
@@ -434,10 +447,9 @@ export interface AExpanderAttributes extends BaseAttributes {
     /** Surface emphasis. `secondary` (default) is a subtle fill; `primary`
      *  is a stronger raised fill; `tertiary` is transparent. */
     priority?: 'primary' | 'secondary' | 'tertiary';
-    /** Outdent the chevron into the left gutter so the title + body sit
-     *  flush with surrounding content (the docs-header layout). Tertiary
-     *  only — a no-op on the filled priorities, where the container edge
-     *  has to bound the chevron. Presence-based. */
+    /** Align the title and body with surrounding content on a tertiary
+     *  expander. The start indicator hangs in the gutter; an end indicator
+     *  stays inside its edge. Presence-based. */
     outdent?: boolean | '';
     /** Disables the header: not clickable or focusable, hover affordance
      *  off, text dimmed. The open state freezes as-is. Presence-based. */

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { Panel } from './components/Panel';
 export type { PanelProps } from './components/Panel';
 export type { PanelState } from './general_types';
 export type { CaptureInputCancelReason, CaptureInputDirection, CaptureInputDirections, CaptureInputGeometry, CaptureInputModifier, CapturePan, CapturePanInertia, CapturePanInput, CapturePointerActivationReason, CapturePointerCapture, CapturePointerInput, CapturePointerStart, CapturePointerType, CaptureWheelActivation, CaptureWheelActivationReason, CaptureWheelInput, CaptureWheelSettle, SerializedMouseEvent, SerializedPointerEvent, SerializedWheelEvent, } from './capture-types';
-export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxObservation, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
+export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxObservation, BoxRect, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';

package/docs/changelog.md

@@ -3,6 +3,40 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.32 — September 25, 2026
+
+### Added
+
+- [Expander indicators](/expander/#indicator) can sit after header actions and
+  use built-in chevron, triangle, or plus visuals. Custom indicators can rotate
+  as one node or switch between closed and open nodes.
+- [Box measurements](/box/#measurements) can include
+  descendant rects with `includeRectsFor`, including positions relative to the
+  Box, width, and height. Changed rects appear in `detail.changed.rects` when
+  another observed field triggers a report.
+- [Box measurements](/box/#measurements) can stay active outside the viewport
+  with `observeOffscreen` when a virtualized layout needs updates there.
+
+### Changed
+
+- [Box layout](/box/#display) now uses `position: relative` by default, so
+  absolutely positioned descendants use the Box as their containing block. Set
+  `position: static` on the Box if they should use another positioned ancestor.
+- [Box measurements](/box/#measurements) now apply `throttle` to measurement
+  reads and CSS states as well as events. The edge mask eases between states;
+  larger intervals delay the fade response during scrolling.
+
+### Fixed
+
+- [Expander indicators](/expander/#indicator) leave the mark empty for
+  unrecognized strings and numbers instead of displaying them as text.
+- [Menu submenus](/menu/#submenus) stay open when a nested
+  date picker closes under the pointer outside the submenu. Hover dismissal
+  resumes after the pointer returns. Closing a nested popup away from the
+  pointer leaves hover dismissal available.
+- [Dialog headers](/dialog/#zones) wrap long unbroken text
+  and clip content that still overflows their bounds.
+
 ## 0.3.31 — September 18, 2026
 
 ### Added