@antadesign/anta 0.3.33 → 0.3.35

package/dist/elements/a-text.js

@@ -1,220 +1,137 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isTextToggleReceiver, SYNC_TEXT_TOGGLE } from "../anta_helpers";
 import "./a-text.css";
-const SHADOW_STYLE = `
-  :host {
-    display: block;
-    position: relative;
-  }
-  :host([inline]) {
-    display: inline-block;
-  }
-
-  slot {
-    display: contents;
-  }
-
-  :host([truncate]) slot {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--line-clamp, 1);
-    overflow: hidden;
-  }
-
-  :host([truncate][expandable]) slot.overflowing:not(.expanded) {
-    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
-            mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
-  }
-
-  :host([truncate="1"][expandable]) slot.overflowing:not(.expanded) {
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
-            mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
-  }
-
-  :host([truncate]) slot.expanded {
-    display: block;
-    -webkit-line-clamp: unset;
-    overflow: visible;
-  }
-
-  .expand-btn {
-    appearance: none;
-    background: transparent;
-    border: none;
-    margin: 0;
-    padding: 0;
-    color: var(--text-3);
-    cursor: pointer;
-    font: inherit;
-    font-variation-settings: inherit;
-    display: none;
-    position: absolute;
-    z-index: 1;
-    opacity: 0;
-    transition: opacity 150ms ease-out, color 150ms ease-out;
-  }
-  .expand-btn:hover {
-    color: var(--text-1);
-  }
-  .expand-btn::before {
-    content: '';
-    position: absolute;
-    right: -1px;
-    bottom: -1px;
-    width: 14px;
-    height: 14px;
-    background-color: currentColor;
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-    -webkit-mask-position: center;
-            mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-            mask-size: contain;
-    transition: transform 150ms ease-out;
-  }
-
-  :host([truncate][expandable]) slot.overflowing ~ .expand-btn {
-    display: block;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1.5em;
-  }
-
-  :host([truncate="1"][expandable]) slot.overflowing ~ .expand-btn {
-    left: auto;
-    top: 0;
-    bottom: 0;
-    width: 3em;
-  }
-
-  :host([truncate][expandable]:hover) slot.overflowing ~ .expand-btn,
-  :host([truncate][expandable]:focus-within) slot.overflowing ~ .expand-btn,
-  .expand-btn.expanded {
-    opacity: 1;
-  }
-
-  .expand-btn.expanded::before {
-    transform: rotate(180deg);
-  }
-`;
 class ATextElement extends HTMLElementBase {
   static observedAttributes = ["expandable", "truncate", "collapsible"];
-  slotEl;
-  /** The chevron — built only while expandable, removed on drop or one-way expand. */
-  expandBtn;
-  /** Expanded state lives on the element — a stateless wrapper can't hold it. */
-  expanded = false;
-  // Re-sync `slot.overflowing`: the resize observer watches the box (width),
-  // the mutation observer watches the slotted content — the clamped box never
-  // resizes as content grows, so resize alone misses added lines.
-  overflowObserver;
-  contentObserver;
+  #internals;
+  #expanded = false;
+  #resizeObserver;
+  #contentObserver;
+  #content;
+  #control;
+  #reportQueued = false;
+  #reported;
   constructor() {
     super();
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.slotEl = document.createElement("slot");
-    shadow.append(style, this.slotEl);
+    this.#internals = this.attachInternals();
+  }
+  addEventListener(type, callback, options) {
+    if (callback) super.addEventListener(type, callback, options);
+    if (type === "textpresentationchange" && callback) this.#reportPresentation(true);
   }
   connectedCallback() {
-    this.syncExpandButton();
-    if (this.#isExpandable) this.startOverflowObserver();
+    this.addEventListener("click", this.#onToggle);
+    this.addEventListener("anta-text-control-ready", this.#onControlReady);
+    this.#sync();
   }
   disconnectedCallback() {
-    this.overflowObserver?.disconnect();
-    this.contentObserver?.disconnect();
+    this.removeEventListener("click", this.#onToggle);
+    this.removeEventListener("anta-text-control-ready", this.#onControlReady);
+    this.#resizeObserver?.disconnect();
+    this.#contentObserver?.disconnect();
+    this.#content = void 0;
+    this.#clearControl();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
-    if (name === "truncate" || name === "expandable") this.setExpanded(false);
-    this.syncExpandButton();
-    if (name === "truncate" || name === "expandable") {
-      if (this.#isExpandable) this.startOverflowObserver();
-      else this.stopOverflowObserver();
-    }
+    if (name === "truncate" || name === "expandable") this.#setExpanded(false);
+    if (this.isConnected) this.#sync();
   }
-  get #isExpandable() {
+  get #canExpand() {
     return this.hasAttribute("truncate") && this.hasAttribute("expandable");
   }
-  get #isCollapsible() {
-    return this.hasAttribute("collapsible");
-  }
-  /** True when `truncate` currently hides some of the slotted content. This is
-   *  a UI-thread layout read, used by a nested `a-tooltip`; it never writes to
-   *  the host or light DOM. */
+  /** Whether the current clamp hides content. Also used by truncated-only
+   * tooltips. This layout read changes neither markup nor accessibility. */
   get isTruncated() {
-    if (!this.hasAttribute("truncate") || this.expanded) return false;
-    const s = this.slotEl;
-    if (s.clientWidth === 0 && s.clientHeight === 0) return false;
-    return s.scrollHeight > s.clientHeight + 1 || s.scrollWidth > s.clientWidth + 1;
-  }
-  /** Create or remove the chevron to match `expandable`, then refresh it. */
-  syncExpandButton() {
-    if (this.#isExpandable && !this.expandBtn) {
-      const btn = document.createElement("button");
-      btn.className = "expand-btn";
-      btn.type = "button";
-      btn.addEventListener("click", this.handleToggle);
-      this.shadowRoot.append(btn);
-      this.expandBtn = btn;
-    } else if (!this.#isExpandable && this.expandBtn) {
-      this.expandBtn.remove();
-      this.expandBtn = void 0;
+    if (!this.hasAttribute("truncate") || this.#expanded) return false;
+    const content = this.#clampBox();
+    if (!content || content.clientWidth === 0 && content.clientHeight === 0) return false;
+    return content.scrollHeight > content.clientHeight + 1 || content.scrollWidth > content.clientWidth + 1;
+  }
+  #clampBox() {
+    return this.#canExpand ? this.querySelector(":scope > a-text-content") : this;
+  }
+  #sync() {
+    if (!this.#canExpand) {
+      this.#resizeObserver?.disconnect();
+      this.#contentObserver?.disconnect();
+      this.#content = void 0;
+      this.#internals.states.delete("overflowing");
+      this.#clearControl();
+      this.#reportPresentation();
+      return;
     }
-    this.refreshButton();
-  }
-  handleToggle = () => {
-    this.setExpanded(!this.expanded);
-  };
-  setExpanded(next) {
-    if (next === this.expanded) return;
-    this.expanded = next;
-    this.slotEl.classList.toggle("expanded", next);
-    this.refreshButton();
-    if (!next) this.measureOverflow();
-  }
-  startOverflowObserver() {
-    if (!this.#isExpandable) return;
-    this.overflowObserver ??= new ResizeObserver(() => this.measureOverflow());
-    this.contentObserver ??= new MutationObserver(() => this.measureOverflow());
-    this.overflowObserver.observe(this.slotEl);
-    this.contentObserver.observe(this, { childList: true, subtree: true, characterData: true });
-    this.measureOverflow();
+    this.#contentObserver ??= new MutationObserver(() => this.#sync());
+    this.#contentObserver.observe(this, { childList: true, subtree: true, characterData: true });
+    const content = this.#clampBox();
+    this.#resizeObserver ??= new ResizeObserver(() => this.#measureOverflow());
+    if (content !== this.#content) {
+      this.#resizeObserver.disconnect();
+      if (content) this.#resizeObserver.observe(content);
+      this.#content = content ?? void 0;
+    }
+    const control = this.querySelector(":scope > a-button");
+    const receiver = isTextToggleReceiver(control) ? control : void 0;
+    if (receiver !== this.#control) {
+      this.#clearControl();
+      this.#control = receiver;
+    }
+    this.#syncControl();
+    this.#reportPresentation();
+    this.#measureOverflow();
   }
-  stopOverflowObserver() {
-    this.overflowObserver?.disconnect();
-    this.contentObserver?.disconnect();
-    this.slotEl.classList.remove("overflowing");
+  #clearControl() {
+    this.#control?.[SYNC_TEXT_TOGGLE]({ source: this, clear: true });
+    this.#control = void 0;
   }
-  /** Toggle `slot.overflowing` (gates the fade + chevron) to whether the clamp
-   *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
-  measureOverflow() {
-    if (!this.#isExpandable || this.expanded) return;
-    this.slotEl.classList.toggle("overflowing", this.isTruncated);
+  #syncControl() {
+    this.#control?.[SYNC_TEXT_TOGGLE]({ source: this, expanded: this.#expanded });
   }
-  /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
-   *  one-way expand removes it once open. */
-  refreshButton() {
-    const btn = this.expandBtn;
-    if (!btn) return;
-    if (this.expanded && !this.#isCollapsible) {
-      btn.remove();
-      this.expandBtn = void 0;
-      return;
-    }
-    btn.setAttribute("aria-expanded", this.expanded ? "true" : "false");
-    btn.setAttribute("aria-label", this.expanded ? "Show less" : "Show more");
-    btn.classList.toggle("expanded", this.expanded);
+  #onControlReady = (event) => {
+    if (event.target.parentElement === this) this.#sync();
+  };
+  #onToggle = (event) => {
+    if (!this.#canExpand || event.defaultPrevented) return;
+    const control = this.querySelector(":scope > a-button");
+    if (!control || !event.composedPath().includes(control)) return;
+    if (control.hasAttribute("disabled") || control.hasAttribute("loading")) return;
+    if (this.#expanded && !this.hasAttribute("collapsible")) return;
+    if (!this.#expanded && !this.isTruncated) return;
+    this.#setExpanded(!this.#expanded);
+    if (!this.#expanded) this.#measureOverflow();
+  };
+  #setExpanded(next) {
+    this.#expanded = next;
+    if (next) this.#internals.states.add("expanded");
+    else this.#internals.states.delete("expanded");
+    this.#syncControl();
+    this.#reportPresentation();
+  }
+  #measureOverflow() {
+    if (this.#expanded) return;
+    if (this.isTruncated) this.#internals.states.add("overflowing");
+    else this.#internals.states.delete("overflowing");
+    this.#reportPresentation();
+  }
+  #reportPresentation(replay = false) {
+    if (replay) this.#reported = void 0;
+    if (this.#reportQueued) return;
+    this.#reportQueued = true;
+    this.view.queueMicrotask(() => {
+      this.#reportQueued = false;
+      if (!this.isConnected) return;
+      const detail = {
+        expanded: this.#expanded,
+        overflowing: this.#internals.states.has("overflowing")
+      };
+      if (this.#reported?.expanded === detail.expanded && this.#reported.overflowing === detail.overflowing) return;
+      this.#reported = { ...detail };
+      this.dispatchEvent(new this.view.CustomEvent("textpresentationchange", { detail }));
+    });
   }
 }
 function register_a_text() {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get("a-text")) {
-    customElements.define("a-text", ATextElement);
-  }
+  if (!customElements.get("a-text")) customElements.define("a-text", ATextElement);
 }
 register_a_text();
 export {

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance}a-title a-icon{transform:translateY(-.05em)}a-title[truncate]{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: currentColor;--_title-tone: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--title-tone-source: attr(tone type(<color>), currentColor)}}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance}a-title a-icon{transform:translateY(-.05em)}a-title[truncate]{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:22px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[font=serif]{font-family:var(--serif)}a-title[font=monospace]{font-family:var(--monospace)}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: currentColor;--_title-tone: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--title-tone-source: attr(tone type(<color>), currentColor)}}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}}

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

@@ -0,0 +1 @@
+import './a-title.css';

package/dist/elements/a-title.js

@@ -0,0 +1 @@
+import "./a-title.css";

package/dist/elements/a-toast.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@property --toast-remaining{syntax: "<number>"; inherits: true; initial-value: 1;}@layer anta.components{a-toast{--toast-dur: .22s}a-toast:not(:defined){display:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@property --toast-remaining{syntax: "<number>"; inherits: true; initial-value: 1;}@layer anta.components{a-toast{--toast-dur: .22s;display:block;opacity:1;translate:0 0}a-toast:not(:defined){display:none}a-toast:state(leaving){opacity:0}@starting-style{a-toast{opacity:0;translate:0 12px}}@media(prefers-reduced-motion:no-preference){a-toast{transition:opacity var(--toast-dur, .22s) ease,translate var(--toast-dur, .22s) ease}}a-toast::part(content){--_toast-countdown-from: 1;--_toast-countdown-to: 0;--toast-remaining: 1;display:block}}

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

@@ -1,51 +1,16 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-toast.css';
-/**
- * `<a-toast>` — one item inside an `<a-toaster>`. A style-neutral container around
- * slotted content (a `Banner`, `Card`, `Sticker`, a string, or a raw DOM node):
- * it owns the enter / exit animation and the auto-dismiss timer (paused while
- * hovered or focused), nothing else. No chrome of its own — no ✕, no surface; the
- * toasted content brings its own look and its own dismiss affordance. Its `slot`
- * attribute (`slot="bottom-right"`, …) routes it to a placement zone.
+/** One notification in a Toaster placement slot. The host owns entry/exit motion;
+ * its shadow content slot carries the inherited `--toast-remaining` countdown.
+ * The timer and countdown pause while hovered or focused. `Infinity` is sticky.
  *
- * Content arrives one of two ways: as slotted light-DOM children (a string / JSX
- * the `<Toaster>` renders through the reconciler), or as a live DOM node set on
- * the `content` property (the wrapper's DOM-node branch), which the element slots
- * into its own light DOM. Either way it projects through the shadow `<slot>`.
+ * JSX/raw authors own host attributes and children. Setting `content` transfers
+ * insertion ownership of that exact node to the element, without cloning it or
+ * changing authored siblings. Content must not belong to another reconciler.
  *
- * ## Time left — `--toast-remaining`
- *
- * While the auto-dismiss timer runs, the element animates `--toast-remaining` from
- * `1` to `0` on the slot (paused in lockstep with the timer on hover / focus).
- * It's a registered `@property` (see `a-toast.css`) with `inherits: true`, so
- * slotted content inherits the live value and can draw a countdown with one CSS
- * rule — `transform: scaleX(var(--toast-remaining))` — with no timer of its own
- * and no re-render. Display only: the real dismiss is the JS timer, so it degrades
- * to a full bar where custom-property animation is unsupported. Sticky
- * (`duration="0"`) runs no countdown; the var stays `1`.
- *
- * ## Dismiss from an action — `data-toast-dismiss`
- *
- * Any element inside the toast carrying `data-toast-dismiss` dismisses it on click
- * — the same convention as `<a-banner>`'s `data-banner-dismiss` and `<a-dialog>`'s
- * `data-dialog-close`. It's a click listener (a light-DOM READ, declarative-safe),
- * so it catches any activated control — native `<button>`, `<a>`, `<a-button>`,
- * `<a-menu-item>` — and keyboard activation for free. A toasted `<Banner>` instead
- * dismisses through its own `onDismiss` (wire it to `manager.dismiss(id)`); its
- * built-in ✕ and any `data-banner-dismiss` action ride that channel.
- *
- * It **never removes itself**. Dismissal — from the timer, a `data-toast-dismiss`
- * control, or the `leaving` attribute the wrapper sets for a programmatic
- * `dismiss` — fades the host out (an off-DOM `:state(leaving)`), then emits a
- * bubbling **`dismiss`**; the owner removes the node on that event. So the element
- * writes only its own shadow + internals, reads its own attributes (and, read-only,
- * the light DOM for the dismiss trigger), appends only its own (wrapper-supplied)
- * content node, and dispatches events.
- *
- * Shadow structure — the host IS the box (no wrappers):
- *
- *   :host                            ← the fade/slide layer
- *     <slot>                         ← the content
+ * A `data-toast-dismiss` control, timer expiry, or authored `leaving` attribute
+ * starts the exit. After it finishes, the element emits bubbling `dismiss` and
+ * its owner removes the toast. The element never removes itself.
  */
 export declare class AToastElement extends HTMLElementBase {
     #private;
@@ -64,7 +29,7 @@ export declare class AToastElement extends HTMLElementBase {
     restart(): void;
     /** Play the exit (shadow only), then emit a bubbling `dismiss`. The owner
      *  removes the node on that event — the element never removes itself.
-     *  Idempotent. */
+     *  Idempotent within each connection. */
     dismiss(): void;
 }
 export declare function register_a_toast(): void;