@antadesign/anta 0.3.13 → 0.3.15

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

@@ -0,0 +1,70 @@
+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.
+ *
+ * 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>`.
+ *
+ * ## 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
+ */
+export declare class AToastElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** A live DOM node to show as the content (set by the wrapper's DOM-node
+     *  branch). Paired getter/setter so React 19's property assignment works. */
+    get content(): Node | null;
+    set content(node: Node | null);
+    /** Restart the auto-dismiss timer from the current `duration` (an in-place
+     *  update). If the toast is currently paused, the fresh time is banked and the
+     *  countdown stays paused until hover / focus releases. */
+    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. */
+    dismiss(): void;
+}
+export declare function register_a_toast(): void;

package/dist/elements/a-toast.js

@@ -0,0 +1,283 @@
+import { HTMLElementBase, installDismissTrigger } from "../anta_helpers";
+import "./a-toast.css";
+const EXIT_MS = 220;
+const DEFAULT_DURATION = 5e3;
+const DISMISS_ATTR = "data-toast-dismiss";
+class AToastElement extends HTMLElementBase {
+  // `leaving` triggers the exit; `rev` (bumped on an in-place update) restarts
+  // the timer. `duration` is read on demand, not observed.
+  static observedAttributes = ["leaving", "rev"];
+  /** Off-DOM state channel — drives `:state(leaving)` for the exit fade. */
+  #internals;
+  /** The content slot. Also the element the `--toast-remaining` countdown
+   *  animates on, so slotted content can inherit the value (see SHADOW_STYLE). */
+  #slot;
+  /** A DOM node handed in via the `content` property (the wrapper's DOM-node
+   *  branch). String / JSX content arrives as slotted children instead. */
+  #content;
+  /** The content node we last slotted, so an in-place update can swap or clear it
+   *  without touching the reconciler's own children. */
+  #slotted;
+  #timer;
+  #exitTimer;
+  /** Time left on the auto-dismiss timer (ms), tracked across pause/resume. */
+  #remaining = 0;
+  /** When the current run started, for computing remaining on pause. */
+  #startedAt = 0;
+  #leaving = false;
+  // Independent pause holds — the countdown runs only when BOTH are false.
+  #hovered = false;
+  #focused = false;
+  constructor() {
+    super();
+    try {
+      this.#internals = this.attachInternals?.();
+    } catch (err) {
+      console.warn("a-toast: ElementInternals unavailable \u2014 exit fade disabled.", err);
+    }
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#slot = document.createElement("slot");
+    shadow.append(style, this.#slot);
+    installDismissTrigger(this, DISMISS_ATTR, () => this.dismiss());
+  }
+  connectedCallback() {
+    this.#applyContent();
+    this.addEventListener("pointerenter", this.#onPointerEnter);
+    this.addEventListener("pointerleave", this.#onPointerLeave);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.addEventListener("focusout", this.#onFocusOut);
+    if (this.hasAttribute("leaving")) {
+      this.dismiss();
+      return;
+    }
+    this.#startTimer();
+  }
+  disconnectedCallback() {
+    this.#clearTimer();
+    if (this.#exitTimer != null) {
+      this.view.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+    }
+    this.removeEventListener("pointerenter", this.#onPointerEnter);
+    this.removeEventListener("pointerleave", this.#onPointerLeave);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.removeEventListener("focusout", this.#onFocusOut);
+  }
+  attributeChangedCallback(name) {
+    if (name === "leaving") {
+      if (this.hasAttribute("leaving")) {
+        if (this.isConnected) this.dismiss();
+      } else if (this.#leaving) {
+        this.#revive();
+      }
+    } else if (name === "rev") {
+      if (this.isConnected) this.restart();
+    }
+  }
+  /** Cancel a pending exit and bring the toast back (an upsert landed during the
+   *  exit window). */
+  #revive() {
+    if (this.#exitTimer != null) {
+      this.view.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+    }
+    this.#leaving = false;
+    this.#internals?.states.delete("leaving");
+    this.#startTimer();
+  }
+  /** A live DOM node to show as the content (set by the wrapper's DOM-node
+   *  branch). Paired getter/setter so React 19's property assignment works. */
+  get content() {
+    return this.#content ?? null;
+  }
+  set content(node) {
+    this.#content = node ?? void 0;
+    this.#applyContent();
+  }
+  /** Slot the content node into our own light DOM. Only ever touches the node WE
+   *  slotted (tracked in `#slotted`), never the reconciler's children: it removes
+   *  the previous node and appends the new one, or removes it when `content` goes
+   *  null (an in-place update swapping DOM-node content for a string / JSX — else
+   *  the stale node would stack under the new content). String / JSX content
+   *  arrives as reconciler-owned children, so `#content` is undefined and this
+   *  only clears any node we had slotted. */
+  #applyContent() {
+    if (this.#content === this.#slotted) return;
+    if (this.#slotted?.parentNode === this) this.removeChild(this.#slotted);
+    this.#slotted = this.#content;
+    if (this.#content) this.append(this.#content);
+  }
+  /** Auto-dismiss delay in ms. Empty / non-positive falls back to the 5000ms
+   *  default; `Infinity` is sticky (never auto-dismisses). */
+  get #duration() {
+    const a = this.getAttribute("duration");
+    if (a == null) return DEFAULT_DURATION;
+    const n = Number(a);
+    if (n === Infinity) return Infinity;
+    return Number.isFinite(n) && n > 0 ? n : DEFAULT_DURATION;
+  }
+  /** Paused while either hold is active. */
+  get #paused() {
+    return this.#hovered || this.#focused;
+  }
+  #startTimer() {
+    this.#remaining = this.#duration;
+    this.#startCountdown();
+    this.#armIfActive();
+  }
+  /** Set up (or restart) the display countdown that drives `--toast-remaining`
+   *  1 → 0 on the slot over `duration`; slotted content inherits it. It's display
+   *  only — the auto-dismiss above is the real JS timer — so it degrades to a
+   *  static full bar where custom-property animation is unsupported. Sticky
+   *  (`Infinity` duration) runs no countdown; the var stays at its initial 1. */
+  #startCountdown() {
+    if (Number.isFinite(this.#duration)) {
+      this.#slot.style.animation = `toast-remaining ${this.#duration}ms linear forwards`;
+      this.#eachCountdown((a) => {
+        a.currentTime = 0;
+      });
+      if (this.#paused || this.#leaving) this.#pauseCountdown();
+    } else {
+      this.#slot.style.animation = "";
+    }
+  }
+  /** Run `fn` for the `--toast-remaining` animation on the slot, if present.
+   *  Guarded — `getAnimations` / animation control may be absent in a partial
+   *  runtime, and the countdown is non-essential (never let it break the toast). */
+  #eachCountdown(fn) {
+    try {
+      for (const a of this.#slot.getAnimations?.() ?? []) {
+        if (a.animationName === "toast-remaining") fn(a);
+      }
+    } catch {
+    }
+  }
+  #pauseCountdown() {
+    this.#eachCountdown((a) => a.pause());
+  }
+  #playCountdown() {
+    this.#eachCountdown((a) => a.play());
+  }
+  /** Start (or resume) the dismiss timer only when it should be running: a finite
+   *  duration (a non-finite one is sticky), not leaving, not paused, not already
+   *  running. */
+  #armIfActive() {
+    if (this.#timer != null || this.#leaving || this.#paused || !Number.isFinite(this.#duration)) return;
+    if (this.#remaining <= 0) {
+      this.dismiss();
+      return;
+    }
+    this.#startedAt = Date.now();
+    this.#timer = this.view.setTimeout(() => {
+      this.#timer = void 0;
+      this.dismiss();
+    }, this.#remaining);
+    this.#playCountdown();
+  }
+  #clearTimer() {
+    if (this.#timer != null) {
+      this.view.clearTimeout(this.#timer);
+      this.#timer = void 0;
+    }
+  }
+  /** Freeze the timer, banking the time left, and freeze the display countdown
+   *  with it. Idempotent. */
+  #pause() {
+    if (this.#timer == null) return;
+    this.#remaining -= Date.now() - this.#startedAt;
+    this.#clearTimer();
+    this.#pauseCountdown();
+  }
+  #onPointerEnter = () => {
+    this.#hovered = true;
+    this.#pause();
+  };
+  #onPointerLeave = () => {
+    this.#hovered = false;
+    this.#armIfActive();
+  };
+  #onFocusIn = () => {
+    this.#focused = true;
+    this.#pause();
+  };
+  #onFocusOut = () => {
+    this.#focused = false;
+    this.#armIfActive();
+  };
+  #reducedMotion() {
+    return this.view.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+  /** How long to wait after starting the exit before emitting `dismiss` (node
+   *  removal). Read from the computed `--toast-dur` token so it tracks a consumer
+   *  override and the removal fires exactly when the fade ends — instead of a
+   *  fixed 220ms that desyncs from a changed `--toast-dur`. 0 under reduced motion
+   *  (the shadow transition is gated off there); `EXIT_MS` if it can't be read. */
+  #exitDuration() {
+    if (this.#reducedMotion()) return 0;
+    const raw = this.view.getComputedStyle?.(this).getPropertyValue("--toast-dur").trim();
+    if (raw) {
+      const n = parseFloat(raw);
+      if (Number.isFinite(n)) return raw.endsWith("ms") ? n : n * 1e3;
+    }
+    return EXIT_MS;
+  }
+  /** Restart the auto-dismiss timer from the current `duration` (an in-place
+   *  update). If the toast is currently paused, the fresh time is banked and the
+   *  countdown stays paused until hover / focus releases. */
+  restart() {
+    if (this.#leaving) return;
+    this.#clearTimer();
+    this.#startTimer();
+  }
+  /** Play the exit (shadow only), then emit a bubbling `dismiss`. The owner
+   *  removes the node on that event — the element never removes itself.
+   *  Idempotent. */
+  dismiss() {
+    if (this.#leaving) return;
+    this.#leaving = true;
+    this.#clearTimer();
+    this.#pauseCountdown();
+    this.#internals?.states.add("leaving");
+    const wait = this.#exitDuration();
+    this.#exitTimer = this.view.setTimeout(() => {
+      this.#exitTimer = void 0;
+      this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+    }, wait);
+  }
+}
+const SHADOW_STYLE = `
+  :host { display: block; opacity: 1; translate: 0 0; }
+  :host(:state(leaving)) { opacity: 0; }
+
+  @starting-style {
+    :host { opacity: 0; translate: 0 12px; }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :host {
+      transition:
+        opacity var(--toast-dur, 220ms) ease,
+        translate var(--toast-dur, 220ms) ease;
+    }
+  }
+
+  slot { display: block; }
+
+  @keyframes toast-remaining {
+    from { --toast-remaining: 1; }
+    to { --toast-remaining: 0; }
+  }
+`;
+function register_a_toast() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-toast")) {
+    customElements.define("a-toast", AToastElement);
+  }
+}
+register_a_toast();
+export {
+  AToastElement,
+  register_a_toast
+};

package/dist/elements/a-toaster.css

@@ -0,0 +1 @@
+@layer anta{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px}a-toaster:not(:defined){display:none}}

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

@@ -0,0 +1,30 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-toaster.css';
+/**
+ * `<a-toaster>` — a viewport-anchored notification region. One instance hosts all
+ * six placement zones; each `<a-toast>` routes to a corner/edge by its `slot`
+ * attribute (`slot="bottom-right"`, …). The `<Toaster>` wrapper keeps it mounted
+ * and renders its `<a-toast>` children through the reconciler; this element only
+ * lays them out — it touches its own shadow and reads its children, never a host
+ * or light-DOM write.
+ *
+ * Shadow structure:
+ *
+ *   <div part="region" popover="manual">   ← top-layer, viewport-covering, click-through
+ *     <slot name="top-left">    …           ← one flex column per zone, pinned to its edge
+ *     <slot name="bottom-right"> …
+ *
+ * The region is a `popover` so it renders in the top layer and escapes any
+ * transformed / clipping ancestor of wherever `<Toaster>` is mounted. It's shown
+ * only while it holds at least one toast (`showPopover`) and hidden when empty
+ * (`hidePopover`), so it never sits in the top layer for nothing. Natural
+ * top-layer ordering stands: a dialog or menu opened afterward can cover it (by
+ * design — toasts don't force themselves above modals).
+ */
+export declare class AToasterElement extends HTMLElementBase {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare function register_a_toaster(): void;

package/dist/elements/a-toaster.js

@@ -0,0 +1,98 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { TOAST_PLACEMENTS } from "../toaster";
+import "./a-toaster.css";
+const ZONES = TOAST_PLACEMENTS;
+class AToasterElement extends HTMLElementBase {
+  #region;
+  #shown = false;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#region = document.createElement("div");
+    this.#region.className = "region";
+    this.#region.setAttribute("part", "region");
+    this.#region.setAttribute("popover", "manual");
+    for (const zone of ZONES) {
+      const slot = document.createElement("slot");
+      slot.name = zone;
+      this.#region.append(slot);
+    }
+    this.#region.addEventListener("slotchange", this.#syncVisibility);
+    shadow.append(style, this.#region);
+  }
+  connectedCallback() {
+    this.#syncVisibility();
+  }
+  disconnectedCallback() {
+    this.#shown = false;
+  }
+  /** Show the region while it holds a toast, hide it when empty. A child count
+   *  read + a shadow popover toggle — no host or light-DOM mutation. */
+  #syncVisibility = () => {
+    const region = this.#region;
+    if (typeof region.showPopover !== "function") return;
+    const has = this.childElementCount > 0;
+    if (has && !this.#shown) {
+      if (!this.isConnected) return;
+      try {
+        region.showPopover();
+        this.#shown = true;
+      } catch {
+      }
+    } else if (!has && this.#shown) {
+      try {
+        if (region.matches(":popover-open")) region.hidePopover();
+      } catch {
+      }
+      this.#shown = false;
+    }
+  };
+}
+const SHADOW_STYLE = `
+  :host { display: contents; }
+
+  .region {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    pointer-events: none;
+    width: auto;
+    height: auto;
+  }
+  .region:popover-open { display: block; }
+
+  slot {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toaster-gap, 12px);
+    width: min(var(--toaster-width, 380px), calc(100vw - 2 * var(--toaster-inset, 16px)));
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  ::slotted(*) { pointer-events: auto; }
+
+  slot[name^="top-"] { top: var(--toaster-inset, 16px); flex-direction: column-reverse; }
+  slot[name^="bottom-"] { bottom: var(--toaster-inset, 16px); flex-direction: column; }
+  slot[name$="-left"] { left: var(--toaster-inset, 16px); }
+  slot[name$="-right"] { right: var(--toaster-inset, 16px); }
+  slot[name$="-center"] { left: 50%; transform: translateX(-50%); }
+`;
+function register_a_toaster() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-toaster")) {
+    customElements.define("a-toaster", AToasterElement);
+  }
+}
+register_a_toaster();
+export {
+  AToasterElement,
+  register_a_toaster
+};

package/dist/elements/index.d.ts

@@ -35,5 +35,8 @@ export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 export { ADialogElement, register_a_dialog } from './a-dialog';
 export { ACardElement, register_a_card } from './a-card';
+export { ABannerElement, register_a_banner } from './a-banner';
+export { AToasterElement, register_a_toaster } from './a-toaster';
+export { AToastElement, register_a_toast } from './a-toast';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -20,9 +20,13 @@ import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import { ADialogElement, register_a_dialog } from "./a-dialog";
 import { ACardElement, register_a_card } from "./a-card";
+import { ABannerElement, register_a_banner } from "./a-banner";
+import { AToasterElement, register_a_toaster } from "./a-toaster";
+import { AToastElement, register_a_toast } from "./a-toast";
 import "./a-title.css";
 import "./a-tag.css";
 export {
+  ABannerElement,
   AButtonElement,
   ACalendarElement,
   ACardElement,
@@ -44,7 +48,10 @@ export {
   ATabPanelElement,
   ATabsElement,
   ATextElement,
+  AToastElement,
+  AToasterElement,
   ATooltipElement,
+  register_a_banner,
   register_a_button,
   register_a_calendar,
   register_a_card,
@@ -66,5 +73,7 @@ export {
   register_a_tabpanel,
   register_a_tabs,
   register_a_text,
+  register_a_toast,
+  register_a_toaster,
   register_a_tooltip
 };

package/dist/general_types.d.ts

@@ -1081,3 +1081,82 @@ export interface ACardAttributes extends BaseAttributes {
      *  chain the element derives in link mode. */
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-banner>` custom element — a full-width, dismissible
+ * message strip (borderless by default; opt into a rule via `border-bottom-width` /
+ * `border-width`, the Progress pattern). Slots (light-DOM children): `message`
+ * (leading), the default slot (middle content), `actions` (trailing), and `close`
+ * (the ✕ button). The element exposes `::part(message | content | actions | close)`,
+ * and `:state(open)` / `:state(closed)` as visibility hooks (the external
+ * sheet collapses the host on `:state(closed)`). Low-level attributes; for the
+ * typed JSX wrapper use `Banner` from `@antadesign/anta`.
+ */
+export interface ABannerAttributes extends BaseAttributes {
+    /** Controlled visibility (`'open'` / `'closed'`). Present → controlled: the
+     *  attribute is the source of truth, the ✕ dismiss only dispatches the cancelable
+     *  `statechange` event, and the consumer answers by updating it. Absent →
+     *  uncontrolled (use `default-state`). The `<Banner>` wrapper presents this as
+     *  `dismissed` (closed = dismissed). See STATEFUL-COMPONENTS.md. */
+    state?: 'open' | 'closed';
+    /** Initial visibility for the uncontrolled mode (`'open'` / `'closed'`), read
+     *  once at connect. A banner is shown by default, so omit / `'open'` shows it;
+     *  `'closed'` starts it dismissed. */
+    'default-state'?: 'open' | 'closed';
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
+     *  re-point the surface + text + border colour (used if you opt into a border); a
+     *  custom color keeps its hue with lightness/chroma pinned. `'neutral'` is the
+     *  default (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Rounded corners for a standalone banner — `border-radius: 999px` (clamps to a
+     *  stadium), or a custom radius via a length value (`round="12px"`). Borderless
+     *  like the default. Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Fires before visibility changes — the element dispatches a `cancelable`
+     *  `statechange` `CustomEvent` whose `detail` is `{ next, prev }` in the
+     *  `'open'|'closed'` vocabulary (a dismiss is always `next: 'closed'`).
+     *  Uncontrolled, `preventDefault()` vetoes the transition. All-lowercase so both
+     *  renderers bind it (React 19 keeps the case after `on`; Preact lowercases). */
+    onstatechange?: (e: CustomEvent<{
+        next: 'open' | 'closed';
+        prev: 'open' | 'closed';
+    }>) => void;
+}
+/**
+ * Attributes for the `<a-toaster>` custom element — a viewport-anchored
+ * notification region. One instance hosts all six placement zones; each
+ * `<a-toast>` routes to a corner/edge by its `slot` attribute. Keep one mounted
+ * (the `<Toaster>` wrapper, or by hand). Exposes `::part(region)`. Low-level
+ * attributes; for the typed JSX wrapper use `Toaster` from `@antadesign/anta`.
+ */
+export interface AToasterAttributes extends BaseAttributes {
+    /** Accessible name for the region landmark. */
+    'aria-label'?: string;
+}
+/**
+ * Attributes for the `<a-toast>` custom element — one item inside an
+ * `<a-toaster>`. A style-neutral container around slotted content: it owns the
+ * enter/exit animation and the auto-dismiss timer (paused on hover / focus), with
+ * no chrome of its own (no ✕, no surface — the content brings its own look and its
+ * own dismiss affordance). Route it to a placement zone with `slot`
+ * (`slot="bottom-right"`, …). It never removes itself — on dismiss it animates out
+ * then emits a bubbling `dismiss`, and the owner removes the node. For an
+ * announcement, give it `role="status"` (polite) or `role="alert"` (assertive).
+ */
+export interface AToastAttributes extends BaseAttributes {
+    /** Auto-dismiss delay in ms (default 5000). Empty / non-positive uses the
+     *  default; `Infinity` keeps it until dismissed (sticky). */
+    duration?: number | string;
+    /** Set by the wrapper to request dismissal (a programmatic `dismiss`): the
+     *  element plays its exit and emits `dismiss`. Presence-based (`''` on, omit off). */
+    leaving?: boolean | '';
+    /** Bumped on an in-place update so the element restarts its auto-dismiss timer. */
+    rev?: number | string;
+    /** A live DOM node to show as the content (the wrapper's DOM-node branch);
+     *  set as a property, not a string attribute. String / JSX content is slotted
+     *  as children instead. */
+    content?: Node;
+    /** Fires after the exit animation, when the toast has dismissed — a bubbling
+     *  `CustomEvent`. The owner removes the node in response. All-lowercase so both
+     *  renderers bind it (React 19 keeps the case after `on`; Preact lowercases). */
+    ondismiss?: (e: CustomEvent) => void;
+}

package/dist/index.d.ts

@@ -74,6 +74,10 @@ export { Dialog } from './components/Dialog';
 export type { DialogProps } from './components/Dialog';
 export { Card } from './components/Card';
 export type { CardProps } from './components/Card';
+export { Banner } from './components/Banner';
+export type { BannerProps } from './components/Banner';
+export { Toaster, createToaster } from './components/Toaster';
+export type { ToasterProps, ToasterManager, ToastOptions, ToastPlacement, ToastContent, ToastRender, } from './components/Toaster';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -42,8 +42,11 @@ import { Tabs } from "./components/Tabs";
 import { TabPanel } from "./components/TabPanel";
 import { Dialog } from "./components/Dialog";
 import { Card } from "./components/Card";
+import { Banner } from "./components/Banner";
+import { Toaster, createToaster } from "./components/Toaster";
 import { configure } from "./jsx-runtime";
 export {
+  Banner,
   Button,
   ButtonCopy,
   Calendar,
@@ -72,10 +75,12 @@ export {
   Tag,
   Text,
   Title,
+  Toaster,
   Tooltip,
   buildMonth,
   clampDate,
   configure,
+  createToaster,
   dateFormatPattern,
   dateTimeFormatPattern,
   firstDayOfWeek,