@antadesign/anta 0.3.34 → 0.3.35

package/dist/components/Tooltip.d.ts

@@ -1,10 +1,8 @@
 import type { BaseProps } from "../general_types";
 export interface TooltipProps extends BaseProps {
-    /** Tooltip content. Renders anything — text, markup, an icon + text.
-     *  Lives in the light DOM, so it's styleable with your own plain CSS. */
+    /** Supplementary text or markup. Content stays in light DOM for application CSS. */
     children?: React.ReactNode;
-    /** Show delay in milliseconds after hover / focus. Never use `0` — use
-     *  ~`50` for a near-instant tooltip (0 has caused issues in practice).
+    /** Wait in milliseconds after hover or keyboard focus. Use `50` for a short delay.
      *  @defaultValue 300 */
     delay?: number;
     /** Which side of the anchor the bubble prefers. Auto-flips to the other
@@ -18,10 +16,9 @@ export interface TooltipProps extends BaseProps {
      *  pinned (anchored beneath the target) by default; pass `follow` for the
      *  cursor-tracking behavior, which fades by distance as the cursor leaves. */
     follow?: boolean;
-    /** Make the bubble hoverable and clickable — enables pointer events and
-     *  keeps it open while the cursor is over it, so its content (links,
-     *  buttons) can be interacted with. Always pinned (an interactive bubble
-     *  can't follow the cursor, even with `follow`). */
+    /** Keep content available while the pointer or keyboard focus is inside it.
+     *  Enables pointer events and pins the bubble even with `follow`. Essential
+     *  actions belong in a Menu or Dialog with an explicit trigger. */
     interactive?: boolean;
     /** Only show when the target is actually truncated (its text overflows and is
      *  ellipsized); a label that fits gets no tooltip. The check is a UI-thread
@@ -49,13 +46,12 @@ export interface TooltipProps extends BaseProps {
  *
  * @example Basic usage
  * ```tsx
- * import { Tooltip } from '@antadesign/anta'
+ * import { Tooltip, Button } from '@antadesign/anta'
  * import '@antadesign/anta/elements'
  *
- * <button>
- *   Save
+ * <Button label="Save">
  *   <Tooltip>Saves your work</Tooltip>
- * </button>
+ * </Button>
  * ```
  *
  * @example Above the anchor, rich content
@@ -70,10 +66,9 @@ export interface TooltipProps extends BaseProps {
  *
  * @example Follow the cursor
  * ```tsx
- * <button>
- *   Hover me
+ * <Button label="Hover me">
  *   <Tooltip follow>Tracks the pointer</Tooltip>
- * </button>
+ * </Button>
  * ```
  */
 export declare const Tooltip: ({ delay, placement, round, follow, interactive, truncatedOnly, truncatedSelector, className, style, children, ...rest }: TooltipProps) => any;

package/dist/components/copy-props.d.ts

@@ -2,7 +2,7 @@
  * The copy target for a copy preset (`ButtonCopy` / `MenuItemCopy`) — exactly
  * one of a literal string, a DOM region, or the page URL. The write itself is
  * performed by the slotted `<a-copy>` element; these props map to its attributes
- * via `copyElementProps`. `copyWithUrl` / `onCopyRequest` are only meaningful for
+ * via `useCopyElementProps`. `copyWithUrl` / `onCopyRequest` are only meaningful for
  * the string target, so the union pins them `never` elsewhere.
  */
 export type CopyTarget = {
@@ -40,7 +40,7 @@ export type CopyTarget = {
     copyWithUrl?: never;
     onCopyRequest?: never;
 };
-/** Everything `copyElementProps` reads: the target plus the resolved `onCopied`
+/** Everything `useCopyElementProps` reads: the target plus the resolved `onCopied`
  *  (the preset passes its feedback-wrapped handler) and the `toast` opt-in. */
 type CopyElementInput = {
     copy?: string;
@@ -63,7 +63,18 @@ export declare function copyElementProps(p: CopyElementInput): {
     readonly toast: "" | undefined;
     readonly 'copied-label': string | undefined;
     readonly oncopydone: ((e: any) => void) | undefined;
-    readonly oncopyrequest: (() => void) | undefined;
+    readonly oncopyrequest: ((e: any) => void) | undefined;
+};
+/** @internal Apply the shared browser hydration option to copy event props. */
+export declare function useCopyElementProps(p: CopyElementInput): {
+    copy: string | undefined;
+    'copy-node': string | undefined;
+    'copy-url': "" | undefined;
+    'copy-with-url': "" | undefined;
+    toast: "" | undefined;
+    'copied-label': string | undefined;
+    oncopydone?: ((e: any) => void) | undefined;
+    oncopyrequest?: ((e: any) => void) | undefined;
 };
 /** True when these props copy a DOM node — the host control must then be marked
  *  `data-copy-node-button` so the serializer strips it from the copied region. */

package/dist/components/copy-props.js

@@ -1,4 +1,5 @@
 import { nativeStateChange } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
 function copyElementProps(p) {
   const { copy, copyNode, copyUrl, copyWithUrl, onCopyRequest, onCopied, toast, copiedLabel } = p;
   return {
@@ -8,14 +9,24 @@ function copyElementProps(p) {
     "copy-with-url": copyWithUrl ? "" : void 0,
     toast: toast ? "" : void 0,
     "copied-label": copiedLabel,
-    oncopydone: onCopied ? (e) => onCopied(nativeStateChange(e).detail?.ok ?? false) : void 0,
-    oncopyrequest: onCopyRequest ? () => onCopyRequest() : void 0
+    oncopydone: onCopied ? (e) => {
+      const result = nativeStateChange(e);
+      if (result.isOwn) onCopied(result.detail?.ok ?? false);
+    } : void 0,
+    oncopyrequest: onCopyRequest ? (e) => {
+      if (nativeStateChange(e).isOwn) onCopyRequest();
+    } : void 0
   };
 }
+function useCopyElementProps(p) {
+  const { oncopydone, oncopyrequest, ...attributes } = copyElementProps(p);
+  return { ...attributes, ...useNativeEventProps({ oncopydone, oncopyrequest }) };
+}
 function isNodeCopy(p) {
   return p.copyNode != null && p.copyNode !== false;
 }
 export {
   copyElementProps,
-  isNodeCopy
+  isNodeCopy,
+  useCopyElementProps
 };

package/dist/components/select-tree.d.ts

@@ -0,0 +1,24 @@
+import type { OptionValue, SelectGroup, SelectItem, SelectOption, SelectSubmenu } from './Select';
+interface Leaf<V extends OptionValue> {
+    kind: 'option';
+    opt: SelectOption<V>;
+    disabled: boolean;
+    group?: string;
+}
+export type SelectNode<V extends OptionValue> = Leaf<V> | ({
+    key: string;
+    disabled: boolean;
+    children: SelectNode<V>[];
+} & ({
+    kind: 'group';
+    source: SelectGroup<V>;
+} | {
+    kind: 'submenu';
+    source: SelectSubmenu<V>;
+}));
+export declare function prepareSelectOptions<V extends OptionValue>(items: SelectItem<V>[], matches?: (option: SelectOption<V>) => boolean): {
+    tree: SelectNode<V>[];
+    allLeaves: Leaf<V>[];
+    visibleLeaves: Leaf<V>[];
+};
+export {};

package/dist/components/select-tree.js

@@ -0,0 +1,35 @@
+import { normalizeOpt } from "./select-options";
+function prepareSelectOptions(items, matches) {
+  const allLeaves = [];
+  const visibleLeaves = [];
+  const walk = (items2, group, disabled = false) => {
+    const nodes = [];
+    items2.forEach((raw, index) => {
+      if (typeof raw !== "string" && Array.isArray(raw.submenu)) {
+        const source = raw;
+        const effectiveDisabled = disabled || !!source.disabled;
+        const children = walk(source.submenu, source.label, effectiveDisabled);
+        if (children.length) nodes.push({ kind: "submenu", source, disabled: effectiveDisabled, children, key: `sub-${index}-${source.label}` });
+      } else if (typeof raw !== "string" && Array.isArray(raw.options)) {
+        const source = raw;
+        const effectiveDisabled = disabled || !!source.disabled;
+        const children = walk(source.options, source.label, effectiveDisabled);
+        if (children.length) nodes.push({ kind: "group", source, disabled: effectiveDisabled, children, key: `grp-${index}-${source.label}` });
+      } else {
+        const opt = normalizeOpt(raw);
+        const leaf = { kind: "option", opt, disabled: disabled || !!opt.disabled, group };
+        allLeaves.push(leaf);
+        if (!matches || matches(opt)) {
+          visibleLeaves.push(leaf);
+          nodes.push(leaf);
+        }
+      }
+    });
+    return nodes;
+  };
+  const tree = walk(items);
+  return { tree, allLeaves, visibleLeaves };
+}
+export {
+  prepareSelectOptions
+};

package/dist/element-base.d.ts

@@ -0,0 +1,10 @@
+/** Use a harmless base when importing element classes without a browser DOM. */
+declare const NativeHTMLElement: typeof HTMLElement;
+/** Base for custom elements that can live in a different document or iframe. */
+export declare class HTMLElementBase extends NativeHTMLElement {
+    /** This element's own window, including when rendered in an iframe. */
+    protected get view(): Window & typeof globalThis;
+    /** This element's own document. */
+    protected get doc(): Document;
+}
+export {};

package/dist/element-base.js

@@ -0,0 +1,15 @@
+const NativeHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+class HTMLElementBase extends NativeHTMLElement {
+  /** This element's own window, including when rendered in an iframe. */
+  get view() {
+    return this.ownerDocument?.defaultView ?? window;
+  }
+  /** This element's own document. */
+  get doc() {
+    return this.ownerDocument ?? document;
+  }
+}
+export {
+  HTMLElementBase
+};

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);--banner-round: initial;--banner-tone-source: initial;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner>a-banner-content{display:contents}a-banner>a-banner-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}a-banner>a-banner-actions:empty{display:none}a-banner>a-banner-message:empty,a-banner>:is(a-banner-message,a-banner-content,a-banner-actions,a-banner-close)[hidden]{display:none}a-banner>a-banner-close{position:absolute;inset-inline-end:0;inset-block:0;display:grid;place-items:center;opacity:.65;transition:opacity .15s ease}a-banner>a-banner-close:hover,a-banner>a-banner-close:focus-within{opacity:1}a-banner>a-banner-close>a-button{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center]>a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner[state]:not([state=open]),a-banner:not([state])[default-state=closed]:not(:state(open)),a-banner:not([state]):state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner,a-banner>a-banner-close{transition:none}}}

package/dist/elements/a-banner.d.ts

@@ -1,10 +1,13 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-banner.css';
+/** Light-DOM notice with declarative regions and external styling. The element
+ * owns dismissal through ElementInternals, without changing
+ * application-owned markup, attributes, styles, or ARIA. */
 export declare class ABannerElement extends HTMLElementBase {
     #private;
     static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare function register_a_banner(): void;

package/dist/elements/a-banner.js

@@ -1,145 +1,55 @@
 import { HTMLElementBase, installDismissTrigger, parseOpenState } from "../anta_helpers";
 import "./a-banner.css";
-const DISMISS_TRIGGER = "dismissrequest";
-const DISMISS_ATTR = "data-banner-dismiss";
-const SHADOW_STYLE = `
-  slot[name="message"], slot:not([name]) { display: contents; }
-
-  slot[name="actions"] {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-  }
-  slot[name="actions"][hidden] { display: none; }
-
-  slot[name="close"] {
-    position: absolute;
-    inset-inline-end: 0;
-    inset-block: 0;
-    display: grid;
-    place-items: center;
-    opacity: 0.65;
-    transition: opacity 150ms ease;
-  }
-  slot[name="close"]:hover,
-  slot[name="close"]:focus-within {
-    opacity: 1;
-  }
-`;
-const parseState = parseOpenState;
 class ABannerElement extends HTMLElementBase {
   static observedAttributes = ["state"];
-  // Visibility is held here as a custom state (`:state(open)` / `:state(closed)`),
-  // NOT a host attribute — declarative-DOM safe (no host mutation, no reconcile
-  // churn). This is the ONLY declarative-safe self-hide channel, so a runtime
-  // (uncontrolled) ✕ dismiss needs CustomStateSet + the CSS `:state()` selector
-  // (Chrome 90+, Safari 17.4+, Firefox 126+); below that the ✕ can't self-hide (an
-  // attribute fallback would violate the no-host-mutation rule). Controlled mode
-  // degrades everywhere — the `state="closed"` attribute the wrapper sets has the
-  // `[state="closed"]` CSS fallback, which needs no custom-state support.
   #internals;
-  // `default-state` seeds the uncontrolled intent ONCE, on the first connect; a
-  // re-parent (disconnect → reconnect) then keeps the applied state (which lives
-  // off-DOM in #internals and survives the move) instead of re-seeding `open` over a
-  // banner the user already dismissed. Mirrors a-dialog's #seeded.
   #seeded = false;
   constructor() {
     super();
-    this.#internals = typeof this.attachInternals === "function" ? this.attachInternals() : void 0;
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    const messageSlot = document.createElement("slot");
-    messageSlot.name = "message";
-    messageSlot.setAttribute("part", "message");
-    const contentSlot = document.createElement("slot");
-    contentSlot.setAttribute("part", "content");
-    const actionsSlot = document.createElement("slot");
-    actionsSlot.name = "actions";
-    actionsSlot.setAttribute("part", "actions");
-    const syncActionsSlot = () => {
-      actionsSlot.hidden = !actionsSlot.assignedNodes({ flatten: true }).some((node) => {
-        if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim() !== "";
-        if (node.nodeType !== Node.ELEMENT_NODE) return false;
-        const element = node;
-        return !element.hasAttribute("data-anta-banner-actions-wrapper") || !element.matches(":empty");
-      });
-    };
-    actionsSlot.hidden = true;
-    actionsSlot.addEventListener("slotchange", syncActionsSlot);
-    const closeSlot = document.createElement("slot");
-    closeSlot.name = "close";
-    closeSlot.setAttribute("part", "close");
-    shadow.append(style, messageSlot, contentSlot, actionsSlot, closeSlot);
-    syncActionsSlot();
-    this.addEventListener(DISMISS_TRIGGER, (e) => {
-      e.stopPropagation();
+    this.#internals = this.attachInternals();
+    this.addEventListener("dismissrequest", (event) => {
+      const banner = event.composedPath().find((node) => node.nodeType === 1 && node.localName === "a-banner");
+      if (banner !== this) return;
+      event.stopPropagation();
       this.#requestDismiss();
     });
-    installDismissTrigger(this, DISMISS_ATTR, () => this.#requestDismiss());
+    installDismissTrigger(this, "data-banner-dismiss", () => this.#requestDismiss());
   }
-  /** Controlled mode: the `state` attribute is present and owns visibility. */
   get #controlled() {
     return this.hasAttribute("state");
   }
-  /** The currently *applied* state (read from the custom state — the source of
-   *  truth for what's painted). Reads open until the element has applied a state.
-   *  Both `?.` guard engines with ElementInternals but no CustomStateSet (`.states`
-   *  undefined), where reading it would otherwise throw inside the ✕ click. */
   get #current() {
-    return this.#internals?.states?.has("closed") ? "closed" : "open";
+    return this.#internals.states.has("closed") ? "closed" : "open";
   }
   connectedCallback() {
     if (this.#controlled) {
-      this.#applyState(parseState(this.getAttribute("state")));
+      this.#applyState(parseOpenState(this.getAttribute("state")));
     } else if (!this.#seeded) {
-      this.#applyState(this.#seedState());
-      this.#seeded = true;
+      this.#applyState(this.getAttribute("default-state") === "closed" ? "closed" : "open");
     }
+    this.#seeded = true;
   }
-  /** The uncontrolled initial state. A banner is shown by DEFAULT, so `open` unless
-   *  `default-state="closed"` is explicit. (Unlike a-dialog / a-expander, whose
-   *  absent default-state means closed — a banner is the inverse, so it can't share
-   *  `parseState` here. A hand-authored `<a-banner>` with no attributes shows.) */
-  #seedState() {
-    return this.getAttribute("default-state") === "closed" ? "closed" : "open";
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "state" && this.#controlled) this.#applyState(parseOpenState(newValue));
   }
-  attributeChangedCallback(name) {
-    if (name === "state" && this.#controlled) this.#applyState(parseState(this.getAttribute("state")));
-  }
-  /** Mirror the state to `:state(open)` / `:state(closed)` (idempotent). The
-   *  external sheet collapses the host on `:state(closed)`. Off-DOM only. */
   #applyState(state) {
-    if (!this.#internals) return;
-    try {
-      if (state === "closed") {
-        this.#internals?.states?.add("closed");
-        this.#internals?.states?.delete("open");
-      } else {
-        this.#internals?.states?.add("open");
-        this.#internals?.states?.delete("closed");
-      }
-    } catch {
-    }
+    this.#internals.states.delete(state === "closed" ? "open" : "closed");
+    this.#internals.states.add(state);
   }
-  /** Announce a requested dismiss (cancelable, before applying), then — uncontrolled
-   *  and un-vetoed — apply it. Controlled: never self-apply; the consumer answers
-   *  via `state`. See STATEFUL-COMPONENTS.md. */
   #requestDismiss() {
     if (this.#current === "closed") return;
-    const ok = this.dispatchEvent(
-      new CustomEvent("statechange", { cancelable: true, detail: { next: "closed", prev: "open" } })
-    );
-    if (this.#controlled) return;
-    if (ok) this.#applyState("closed");
+    const controlled = this.#controlled;
+    const accepted = this.dispatchEvent(new this.view.CustomEvent("statechange", {
+      cancelable: true,
+      detail: { next: "closed", prev: "open" }
+    }));
+    if (!controlled && !this.#controlled && accepted) this.#applyState("closed");
   }
 }
 function register_a_banner() {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get("a-banner")) {
-    customElements.define("a-banner", ABannerElement);
-  }
+  if (!customElements.get("a-banner")) customElements.define("a-banner", ABannerElement);
 }
 register_a_banner();
 export {

package/dist/elements/a-button.d.ts

@@ -1,4 +1,4 @@
-import { HTMLElementBase, SYNC_POPUP_ARIA, type PopupAriaRelations } from "../anta_helpers";
+import { HTMLElementBase, SYNC_POPUP_ARIA, type PopupAriaRelations, SYNC_TEXT_TOGGLE, type TextToggleAria } from "../anta_helpers";
 import "./a-button.css";
 declare global {
     interface Document {
@@ -73,6 +73,7 @@ export declare class AButtonElement extends HTMLElementBase {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
+    [SYNC_TEXT_TOGGLE](state: TextToggleAria): void;
     [SYNC_POPUP_ARIA](relations: PopupAriaRelations): void;
 }
 export declare function register_a_button(): void;

package/dist/elements/a-button.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase, SYNC_POPUP_ARIA } from "../anta_helpers";
+import { HTMLElementBase, SYNC_POPUP_ARIA, SYNC_TEXT_TOGGLE } from "../anta_helpers";
 import { installKeyActivation } from "./key-activation";
 import "./a-button.css";
 function installDocumentHandlers(doc) {
@@ -18,6 +18,7 @@ class AButtonElement extends HTMLElementBase {
   popupAriaSource;
   #fieldObserver;
   #field;
+  #textToggleSource;
   constructor() {
     super();
     try {
@@ -27,6 +28,8 @@ class AButtonElement extends HTMLElementBase {
   }
   connectedCallback() {
     installDocumentHandlers(this.doc);
+    if (this.parentElement?.localName === "a-text")
+      this.dispatchEvent(new Event("anta-text-control-ready", { bubbles: true }));
     if (this.parentElement?.localName === "a-select-field") {
       this.#field = this.parentElement;
       this.#fieldObserver = new MutationObserver(() => this.#syncField());
@@ -36,6 +39,7 @@ class AButtonElement extends HTMLElementBase {
     }
   }
   disconnectedCallback() {
+    if (this.#textToggleSource) this[SYNC_TEXT_TOGGLE]({ source: this.#textToggleSource, clear: true });
     if (!this.#field) return;
     this.#fieldObserver?.disconnect();
     this.#field?.removeEventListener("click", this.#onFieldClick);
@@ -61,6 +65,19 @@ class AButtonElement extends HTMLElementBase {
     if (this.hasAttribute("disabled") || this.hasAttribute("loading")) return;
     if (event.composedPath().some((node) => node instanceof Element && node.localName === "a-select-label")) this.focus();
   };
+  [SYNC_TEXT_TOGGLE](state) {
+    if (!this.internals) return;
+    if (state.clear) {
+      if (this.#textToggleSource !== state.source) return;
+      this.#textToggleSource = void 0;
+      this.internals.ariaExpanded = null;
+      this.internals.ariaLabel = null;
+      return;
+    }
+    this.#textToggleSource = state.source;
+    this.internals.ariaExpanded = state.expanded ? "true" : "false";
+    this.internals.ariaLabel = state.expanded ? "Show less" : "Show more";
+  }
   [SYNC_POPUP_ARIA](relations) {
     if (!this.internals || !("ariaControlsElements" in this.internals)) return;
     if (relations.clear) {

package/dist/elements/a-calendar.d.ts

@@ -21,18 +21,18 @@ import './a-calendar.css';
  *   `{ next, prev, reason }`: ISO-string dates (or `null`), `reason` ∈
  *   `'user' | 'reset' | 'restore'`. `preventDefault()` vetoes a `'user'` pick in
  *   uncontrolled mode.
- * - `change` — fired AFTER a selection applies (uncontrolled), and on
- *   reset/restore.
+ * - `change` — fired AFTER a selection applies, including controlled attribute
+ *   updates and accepted reset/restore.
  * - `navigate` — `detail: { date }` (ISO). Fired on keyboard navigation (and
  *   when the target month isn't rendered) so the renderer can move the roving tab
  *   stop and flip the displayed month.
  *
  * ## Controlled vs uncontrolled (like `<a-radio-group>`)
  *
- * Presence of the **`value`** attribute = controlled: a pick only *requests* a
- * change (fires `statechange`); the consumer answers by updating `value`. With
- * **`defaultvalue`** instead, the element owns selection — a pick self-applies
- * (form value + `change`) unless vetoed.
+ * Presence of **`value`** = controlled: a pick requests a change through
+ * `statechange`; the renderer answers by updating `value`. With **`defaultvalue`**
+ * instead, the element owns selection and applies picks unless vetoed. Consumer
+ * property assignments reflect these inputs; picks never rewrite them.
  *
  * ## Selection & keyboard
  *
@@ -47,8 +47,9 @@ export declare class ACalendarElement extends HTMLElementBase {
     static formAssociated: boolean;
     static observedAttributes: string[];
     private internals?;
-    /** Selection in uncontrolled mode (controlled reads the `value` attribute). */
+    /** Latest applied selection, retained when controlled state is removed. */
     private selectedIso;
+    private seeded;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
@@ -64,12 +65,12 @@ export declare class ACalendarElement extends HTMLElementBase {
      *  microtask so a just-rendered new month has committed. Signal: `"<iso>#<nonce>"`. */
     private focusCell;
     private emitState;
-    /** The selected date as an ISO string (`''` when empty). */
-    get value(): string;
-    set value(v: string);
-    /** Form field name — mirrors the `name` attribute, like native `<input>.name`. */
-    get name(): string;
-    set name(v: string);
+    /** Applied ISO date, or `null` when empty. String assignments supply controlled input. */
+    get value(): string | null;
+    set value(value: string | null | undefined);
+    /** Authored initial/reset date, or `null` when no default is supplied. */
+    get defaultValue(): string | null;
+    set defaultValue(value: string | null | undefined);
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
 }

package/dist/elements/a-calendar.js

@@ -1,12 +1,14 @@
 import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import { Temporal } from "temporal-polyfill";
 import "./a-calendar.css";
+import { upgradeValueProperties } from "./value-input";
 class ACalendarElement extends HTMLElementBase {
   static formAssociated = true;
   static observedAttributes = ["value", "data-focus"];
   internals;
-  /** Selection in uncontrolled mode (controlled reads the `value` attribute). */
+  /** Latest applied selection, retained when controlled state is removed. */
   selectedIso = null;
+  seeded = false;
   constructor() {
     super();
     try {
@@ -16,27 +18,28 @@ class ACalendarElement extends HTMLElementBase {
     }
     this.addEventListener("click", this.onClick);
     this.addEventListener("keydown", this.onKeydown);
+    upgradeValueProperties(this);
   }
   connectedCallback() {
-    if (Object.prototype.hasOwnProperty.call(this, "value")) {
-      const v = this.value;
-      delete this.value;
-      this.value = v;
+    if (!this.seeded) {
+      this.selectedIso = this.#controlled ? this.currentIso() : this.getAttribute("defaultvalue") || null;
+      this.seeded = true;
     }
-    this.selectedIso = this.getAttribute("value") || this.getAttribute("defaultvalue") || null;
     this.applyFormValue(this.currentIso());
   }
   attributeChangedCallback(name, _old, value) {
     if (name === "value") {
-      this.applyFormValue(value);
+      const prev = this.selectedIso;
+      this.selectedIso = this.currentIso();
+      this.applyFormValue(this.selectedIso);
+      if (this.seeded && this.selectedIso !== prev) this.dispatchEvent(new Event("change", { bubbles: true }));
       return;
     }
     if (name === "data-focus") {
       this.focusCell(value);
     }
   }
-  /** Controlled when the `value` attribute is present (the renderer sets it only
-   *  in controlled mode); otherwise the element owns selection. */
+  /** A present value input keeps selection controlled, including an empty date. */
   get #controlled() {
     return this.hasAttribute("value");
   }
@@ -145,37 +148,39 @@ class ACalendarElement extends HTMLElementBase {
   }
   // --- Public value API + form callbacks ----------------------------------
   emitState(next, prev, reason) {
+    const controlled = this.#controlled;
+    if (!controlled) {
+      this.selectedIso = next;
+      this.applyFormValue(next);
+    }
     this.dispatchEvent(
       new CustomEvent("statechange", { bubbles: false, detail: { next, prev, reason } })
     );
-    this.dispatchEvent(new Event("change", { bubbles: true }));
+    if (!controlled) this.dispatchEvent(new Event("change", { bubbles: true }));
   }
-  /** The selected date as an ISO string (`''` when empty). */
+  /** Applied ISO date, or `null` when empty. String assignments supply controlled input. */
   get value() {
-    return this.currentIso() ?? "";
+    return this.currentIso();
   }
-  set value(v) {
-    this.selectedIso = v || null;
-    this.applyFormValue(v || null);
+  set value(value) {
+    if (value == null) this.removeAttribute("value");
+    else this.setAttribute("value", value);
   }
-  /** Form field name — mirrors the `name` attribute, like native `<input>.name`. */
-  get name() {
-    return this.getAttribute("name") ?? "";
+  /** Authored initial/reset date, or `null` when no default is supplied. */
+  get defaultValue() {
+    return this.getAttribute("defaultvalue");
   }
-  set name(v) {
-    this.setAttribute("name", v);
+  set defaultValue(value) {
+    if (value == null) this.removeAttribute("defaultvalue");
+    else this.setAttribute("defaultvalue", value);
   }
   formResetCallback() {
     const def = this.getAttribute("defaultvalue") || null;
     const prev = this.currentIso();
-    this.selectedIso = def;
-    this.applyFormValue(def);
     this.emitState(def, prev, "reset");
   }
   formStateRestoreCallback(state) {
     const prev = this.currentIso();
-    this.selectedIso = state || null;
-    this.applyFormValue(state || null);
     this.emitState(state || null, prev, "restore");
   }
 }