@antadesign/anta 0.3.13 → 0.3.14

package/dist/anta_helpers.d.ts

@@ -29,9 +29,17 @@ export declare function wrapLabel(kids: React.ReactNode, tag: string): React.Rea
  * `currentTarget` is still live. (Read as `true` for the falsy-event guard so a
  * missing event never spuriously reads as bubbled.)
  */
-export declare function nativeStateChange<D>(e: CustomEvent<D> | {
+/**
+ * The event a cross-renderer `statechange` handler receives: React wraps the native
+ * `CustomEvent` in a synthetic event (`.nativeEvent`); Preact passes it directly. `D`
+ * is the per-component `detail` vocabulary. Pair with `nativeStateChange` to unwrap.
+ * Exported so the stateful wrappers (`Banner`, and future ones) don't each re-declare
+ * this union — the CLAUDE.md "reuse shared wrapper helpers" rule.
+ */
+export type StateChangeEvent<D> = CustomEvent<D> | {
     nativeEvent: CustomEvent<D>;
-}): {
+};
+export declare function nativeStateChange<D>(e: StateChangeEvent<D>): {
     event: CustomEvent<D>;
     detail?: D;
     isOwn: boolean;

package/dist/components/Banner.d.ts

@@ -0,0 +1,79 @@
+import type { BaseProps } from "../general_types";
+/** Public props for the `<Banner>` message strip. `message` is the leading
+ *  content, `children` sit between it and `actions`, all centered in one row. */
+export interface BannerProps extends BaseProps {
+    /** Leading message — a string (rendered at the banner type scale) or any node.
+     *  Centered in the bar, followed by `children` and then `actions`. */
+    message?: React.ReactNode;
+    /** Trailing controls (buttons, links) rendered as a compact row after the
+     *  message and `children`. */
+    actions?: React.ReactNode;
+    /** Free content placed BETWEEN the message and the actions. */
+    children?: React.ReactNode;
+    /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for
+     *  a one-off custom tone. Named tones re-point the surface, text, and border
+     *  colour (used if you opt into a border); a custom color keeps its hue while
+     *  lightness/chroma are pinned. `'neutral'` (the default) is the same as omitting it.
+     *  @defaultValue 'neutral' */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Rounded corners for a standalone, floating banner (`border-radius: 999px`,
+     *  which clamps to a stadium) instead of the edge-to-edge strip. Still borderless
+     *  by default. Pass a `number` (px) or a CSS length string for a custom radius. */
+    round?: boolean | number | string;
+    /** Whether the trailing ✕ dismiss button is present. `false` removes it — drive
+     *  dismissal yourself (a controlled `dismissed`, or your own control) instead.
+     *  It doesn't make the banner un-dismissible, it just drops the built-in ✕.
+     *  @defaultValue true */
+    closable?: boolean;
+    /** ARIA role for the strip host. `'status'` (a polite live region, so the notice
+     *  reaches assistive tech) by default; pass `'alert'` for an urgent notice that
+     *  should interrupt, or a landmark role.
+     *  @defaultValue 'status' */
+    role?: string;
+    /** Controlled dismissed state. When provided, the consumer owns visibility: the
+     *  banner follows this prop only, and clicking ✕ *requests* dismissal (reject by
+     *  not updating). **Requires `onDismiss`** — controlled mode never self-hides, so
+     *  without a handler to set `dismissed` the ✕ can't close the banner. Leave
+     *  undefined for uncontrolled. */
+    dismissed?: boolean;
+    /** Initial dismissed state for the uncontrolled case (read once on mount). */
+    defaultDismissed?: boolean;
+    /** Fired when the user dismisses the banner (clicks ✕). Uncontrolled, the banner
+     *  hides itself and this just notifies. Controlled, it's how you accept the
+     *  request — set `dismissed` to `true` (or ignore to reject); pair it with
+     *  `dismissed`, or the banner can't be closed. */
+    onDismiss?: () => void;
+}
+/**
+ * `<Banner>` — a full-width, dismissible message strip with a bottom border.
+ *
+ * A close cousin of `<Card>` with a small, centered horizontal payload:
+ * `message` leads, `children` sit in the middle, `actions` trail, and (when
+ * `closable`) a 40px-wide, full-height ✕ fills the right edge without shifting the centered group.
+ *
+ * A pure, stateless pass-through to `<a-banner>`: the element owns dismissal and
+ * visibility, so the wrapper holds no state and grabs no ref — it maps props to
+ * attributes (safe wherever the host DOM is reconciled, incl. off the UI thread).
+ *
+ * Uncontrolled (`defaultDismissed`): the element owns visibility and the ✕
+ * self-dismisses. Controlled (`dismissed` + `onDismiss`): the wrapper emits
+ * `state="open"|"closed"`; the element treats the attribute as the source of
+ * truth and the ✕ only *requests* dismissal. The element uses Anta's shared
+ * open/closed state contract under the hood — the wrapper presents it as the
+ * banner-natural `dismissed` (closed = dismissed). See STATEFUL-COMPONENTS.md.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom element.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Banner tone="info" message="A new release is available." actions={<Button size="small" label="Update" />} />
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [hidden, setHidden] = useState(false)
+ * <Banner message="Saved." dismissed={hidden} onDismiss={() => setHidden(true)} />
+ * ```
+ */
+export declare const Banner: ({ message, actions, tone, round, closable, role, dismissed, defaultDismissed, onDismiss, className, style, children, ...rest }: BannerProps) => any;

package/dist/components/Banner.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { Button } from "./Button";
+const Banner = ({
+  message,
+  actions,
+  tone,
+  round,
+  closable,
+  role = "status",
+  dismissed,
+  defaultDismissed,
+  onDismiss,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const controlled = dismissed != null;
+  const computedStyle = roundStyle(
+    round,
+    "--banner-round",
+    toneStyle(tone, "--banner-tone-source", style)
+  );
+  const messageNode = message == null ? null : typeof message === "string" || typeof message === "number" ? /* @__PURE__ */ jsx("a-banner-message", { slot: "message", children: message }) : /* @__PURE__ */ jsx("span", { slot: "message", style: { display: "contents" }, children: message });
+  return /* @__PURE__ */ jsxs(
+    "a-banner",
+    {
+      state: controlled ? dismissed ? "closed" : "open" : void 0,
+      "default-state": !controlled ? defaultDismissed ? "closed" : "open" : void 0,
+      tone: tone && tone !== "neutral" ? tone : void 0,
+      round: roundAttr(round),
+      role,
+      onstatechange: onDismiss ? (e) => {
+        const { detail, isOwn } = nativeStateChange(e);
+        if (isOwn && detail?.next === "closed") onDismiss();
+      } : void 0,
+      class: className,
+      style: computedStyle,
+      ...rest,
+      children: [
+        messageNode,
+        children,
+        actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", style: { display: "contents" }, children: actions }),
+        closable !== false && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in the
+        // element's `close` slot. It fires the bubbling `dismissrequest` event via
+        // a-button's global listener, so dismissing works even without framework
+        // hydration; the element turns that into a dismiss request.
+        // CONTRACT: `data-custom-event` below MUST match `DISMISS_TRIGGER` in the
+        // element (src/elements/a-banner.ts). Duplicated, not shared — importing
+        // the element module here would self-register it and break the
+        // wrapper/element decoupling. Rename in both places.
+        /* @__PURE__ */ jsx("span", { slot: "close", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            priority: "quaternary",
+            icon: "x",
+            tone,
+            "aria-label": "Dismiss",
+            "data-custom-event": "dismissrequest"
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Banner
+};

package/dist/components/Select.d.ts

@@ -227,6 +227,24 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  `indicator` (`'check'` / `'radio'`) or `selection="multiple"` for the
      *  semantics. Composes with `renderOption`. */
     renderIndicator?: (state: OptionState<V>) => React.ReactNode;
+    /** `multiple` only: spell the picks out in the count summary — `3 selected:
+     *  A, B, C` (labels comma-joined) in place of the bare `3 selected`. Applies
+     *  to the multi-count case only: `All` stays `All`, a single pick stays its
+     *  own label, and an empty selection stays the `placeholder`. The list flows
+     *  into the read-only field, so it ellipsizes at the field's width when long
+     *  (`3 selected: Engineering, Des… `). `renderSummary` overrides this. */
+    verbose?: boolean;
+    /** `multiple` only: build the trigger's selection summary text yourself,
+     *  replacing the built-in "`All` / one label / `N selected`" logic. Receives
+     *  the resolved selected options (`selected.length` is the count) and runs only
+     *  while something is selected — an empty selection still shows the
+     *  `placeholder`. Return a **string**: it flows into the default trigger's
+     *  read-only field, so a long summary ellipsizes at the field's width just
+     *  like a long value (`Engineering, Design, … `). Return `undefined` to fall
+     *  back to the default for that case (e.g. customize only the count, keeping
+     *  the single-label case built-in). For rich content (chips, multiple nodes)
+     *  use `renderTrigger`, which replaces the whole field. */
+    renderSummary?: (selected: SelectOption<V>[]) => string | undefined;
     /** Render your own trigger in place of the default field. Receives a
      *  `TriggerState` (`open` / `value` / `selected` / `disabled` / `icon`) to drive
      *  its look. **Return exactly one focusable element** (an Anta `Button`, say) —

package/dist/components/Select.js

@@ -62,6 +62,8 @@ const Select = (props) => {
     clearLabel = "Clear",
     renderOption,
     renderIndicator,
+    verbose,
+    renderSummary,
     renderTrigger,
     renderEmpty,
     className,
@@ -112,13 +114,22 @@ const Select = (props) => {
   const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
   const isSelected = (v) => selectedValues.includes(v);
   const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
+  const allEnabledValues = allLeaves.filter((l) => !l.disabled).map((l) => l.opt.value);
+  const everythingSelected = multiple && allEnabledValues.length > 1 && allEnabledValues.every((v) => selectedValues.includes(v));
+  const labelOf = (o) => o.label ?? String(o.value);
   let display = "";
   if (multiple) {
-    if (selectedOptions.length === 1) display = selectedOptions[0].label ?? String(selectedOptions[0].value);
-    else if (selectedOptions.length > 1) display = `${selectedOptions.length} selected`;
+    const custom = selectedOptions.length > 0 ? renderSummary?.(selectedOptions) : void 0;
+    if (custom != null && custom !== "") display = custom;
+    else if (everythingSelected) display = "All";
+    else if (selectedOptions.length === 1) display = labelOf(selectedOptions[0]);
+    else if (selectedOptions.length > 1) {
+      const count = `${selectedOptions.length} selected`;
+      display = verbose ? `${count}: ${selectedOptions.map(labelOf).join(", ")}` : count;
+    }
   } else if (currentRaw != null) {
     const o = byValue.get(currentRaw);
-    display = o ? o.label ?? String(o.value) : "";
+    display = o ? labelOf(o) : "";
   }
   const choose = (o, e) => {
     if (multiple) {

package/dist/components/SelectFaceted.js

@@ -196,7 +196,7 @@ const SelectFaceted = (props) => {
     const applied = current[facet.key] ?? "";
     const draft = drafts[facet.key] ?? applied;
     const apply = () => {
-      const next = draft.trim() || void 0;
+      const next = draft.trim() === "" ? void 0 : draft;
       if (next !== (applied || void 0)) setFacet(facet, next);
     };
     return (
@@ -312,7 +312,7 @@ const SelectFaceted = (props) => {
           searchable && rootQuery.trim() ? renderFlatResults() : facets.map((facet) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, icon: facet.icon, label: facet.label, children: [
             (() => {
               const s = summaryOf(facet);
-              return s != null ? /* @__PURE__ */ jsx(Tag, { size: "small", tone: "brand", children: s }) : null;
+              return s != null ? /* @__PURE__ */ jsx(Tag, { size: "small", tone: "brand", children: /* @__PURE__ */ jsx("span", { className: styles.summary, children: s }) }) : null;
             })(),
             renderEditor(facet)
           ] }, facet.key)),

package/dist/components/SelectFaceted.module.css

@@ -1 +1 @@
-.search{padding:var(--menu-padding, 4px)}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}
+.search{padding:var(--menu-padding, 4px)}.summary{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}

package/dist/components/Toaster.d.ts

@@ -0,0 +1,48 @@
+import type { BaseProps } from "../general_types";
+import { type Toaster as ToasterStore } from "../toaster";
+export interface ToasterProps extends BaseProps {
+    /** The store this region renders. Omit to bind the default store driven by
+     *  `Toaster.manager`; pass a `createToaster()` for an isolated region. */
+    toaster?: ToasterStore;
+    /** Accessible label for the region landmark.
+     *  @defaultValue 'Notifications' */
+    label?: string;
+}
+/**
+ * `<Toaster>` — the mounted notification region. Keep one mounted somewhere in
+ * your app (a portal is fine); toasts are added imperatively through the store
+ * (`Toaster.manager`, or a `createToaster()` you pass as `toaster`). It
+ * subscribes to the store and renders each toast through the reconciler, so
+ * React/Preact owns the toast nodes.
+ *
+ * Announcement is opt-in **per toast** (`add(render, { politeness })`), not a
+ * blanket live region on the whole toaster.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom elements.
+ *
+ * @example
+ * ```tsx
+ * <Toaster />   // mount once, keep it mounted
+ *
+ * // A bare string is auto-wrapped in a dismissible Banner:
+ * Toaster.manager.add(() => 'Saved', { placement: 'bottom-right' })
+ *
+ * // Or toast a Banner yourself and wire its dismiss to the toast:
+ * Toaster.manager.add((id) => (
+ *   <Banner tone="success" message="Saved" onDismiss={() => Toaster.manager.dismiss(id)} />
+ * ))
+ * ```
+ */
+declare const ToasterImpl: ({ toaster, label, className, style, children: _children, ...rest }: ToasterProps) => any;
+/**
+ * The `<Toaster>` component, carrying the default toast store as a static:
+ * `Toaster.manager.add(render, opts)`. A function-with-a-static (like
+ * `Component.displayName`) — no class component, which would couple to a renderer.
+ */
+export declare const Toaster: typeof ToasterImpl & {
+    /** The default toast store, bound to a `<Toaster>` mounted with no `toaster`. */
+    readonly manager: ToasterStore;
+};
+export { createToaster } from "../toaster";
+export type { Toaster as ToasterManager, ToastOptions, ToastPlacement, ToastContent, ToastRender, } from "../toaster";

package/dist/components/Toaster.js

@@ -0,0 +1,56 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { useMemo, useSyncExternalStore } from "../jsx-runtime";
+import { createToaster } from "../toaster";
+import { Banner } from "./Banner";
+const ToastItem = ({ entry, store }) => {
+  const content = useMemo(() => entry.render(entry.id), [entry.id, entry.rev]);
+  const isNode = typeof Node !== "undefined" && content instanceof Node;
+  const isText = typeof content === "string" || typeof content === "number";
+  const common = {
+    slot: entry.placement,
+    duration: entry.duration,
+    leaving: entry.leaving ? "" : void 0,
+    rev: entry.rev,
+    // Opt-in per-toast announcement. role=status/alert (not a bare aria-live) so
+    // it announces when inserted — a plain aria-live region must pre-exist before
+    // its content changes, which a freshly-added toast can't satisfy. Omitted (no
+    // announcement) unless requested.
+    role: entry.politeness === "assertive" ? "alert" : entry.politeness === "polite" ? "status" : void 0,
+    // Fires after the exit animation; that's when the entry actually leaves.
+    ondismiss: () => store.remove(entry.id)
+  };
+  if (isNode) return /* @__PURE__ */ jsx("a-toast", { ...common, content });
+  if (isText)
+    return /* @__PURE__ */ jsx("a-toast", { ...common, children: /* @__PURE__ */ jsx(
+      Banner,
+      {
+        round: true,
+        message: content,
+        dismissed: false,
+        onDismiss: () => store.dismiss(entry.id)
+      }
+    ) });
+  return /* @__PURE__ */ jsx("a-toast", { ...common, children: content });
+};
+const ToasterImpl = ({
+  toaster,
+  label = "Notifications",
+  className,
+  style,
+  // The region's children come from the store, not from JSX.
+  children: _children,
+  ...rest
+}) => {
+  const store = toaster ?? getDefaultStore();
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  return /* @__PURE__ */ jsx("a-toaster", { role: "region", "aria-label": label, class: className, style, ...rest, children: entries.map((entry) => /* @__PURE__ */ jsx(ToastItem, { entry, store }, entry.id)) });
+};
+let defaultStore;
+const getDefaultStore = () => defaultStore ??= createToaster();
+const Toaster = ToasterImpl;
+Object.defineProperty(Toaster, "manager", { get: getDefaultStore, enumerable: true });
+import { createToaster as createToaster2 } from "../toaster";
+export {
+  Toaster,
+  createToaster2 as createToaster
+};

package/dist/elements/a-banner.css

@@ -0,0 +1 @@
+@layer anta{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding:6px 52px;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[round]{--banner-round: attr(round type(<length>));border-radius:var(--banner-round, 999px)}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: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: attr(tone type(<color>), currentColor);--banner-text: oklch(from var(--banner-tone-source) .5 .125 h);--banner-bg: oklch(from var(--banner-tone-source) .955 .02 h);--banner-border: oklch(from var(--banner-tone-source) .9 .04 h);.dark &{--banner-text: oklch(from var(--banner-tone-source) .77 .11 h);--banner-bg: oklch(from var(--banner-tone-source) .185 .05 h);--banner-border: oklch(from var(--banner-tone-source) .26 .06 h)}}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(prefers-reduced-motion:reduce){a-banner{transition:none}}}

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

@@ -0,0 +1,10 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-banner.css';
+export declare class ABannerElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+export declare function register_a_banner(): void;

package/dist/elements/a-banner.js

@@ -0,0 +1,141 @@
+import { HTMLElementBase, 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="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 closeSlot = document.createElement("slot");
+    closeSlot.name = "close";
+    closeSlot.setAttribute("part", "close");
+    shadow.append(style, messageSlot, contentSlot, actionsSlot, closeSlot);
+    this.addEventListener(DISMISS_TRIGGER, (e) => {
+      e.stopPropagation();
+      this.#requestDismiss();
+    });
+    this.addEventListener("click", (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      const trigger = target.closest(`[${DISMISS_ATTR}]`);
+      if (trigger && trigger.closest("a-banner") === this) 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";
+  }
+  connectedCallback() {
+    if (this.#controlled) {
+      this.#applyState(parseState(this.getAttribute("state")));
+    } else if (!this.#seeded) {
+      this.#applyState(this.#seedState());
+      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) {
+    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 {
+    }
+  }
+  /** 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");
+  }
+}
+function register_a_banner() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-banner")) {
+    customElements.define("a-banner", ABannerElement);
+  }
+}
+register_a_banner();
+export {
+  ABannerElement,
+  register_a_banner
+};

package/dist/elements/a-menu-item.js

@@ -31,7 +31,12 @@ function ensureMenuItemKeyListener(doc) {
   if (doc.hasKeyListenerForAMenuItem) return;
   installKeyActivation(doc, {
     keys: ["Enter", " "],
-    resolve: (t) => t?.closest?.(MENU_ITEM_SELECTOR),
+    resolve: (t) => {
+      const el = t;
+      if (el?.closest?.('input, textarea, select, a-input, a-input-time, [contenteditable]:not([contenteditable="false"])'))
+        return null;
+      return el?.closest?.(MENU_ITEM_SELECTOR);
+    },
     blocked: (el) => el.hasAttribute("disabled"),
     activate: (el) => el.click()
   });

package/dist/elements/a-menu.css

@@ -1 +1 @@
-@layer anta{a-menu:not(:defined){display:none}a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px)}a-menu[round]{--menu-radius: attr(round type(<length>), 20px)}.dark a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--menu-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}}
+@layer anta{a-menu:not(:defined){display:none}a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px);--menu-width-duration: .16s}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: attr(round type(<length>), 20px)}.dark a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 78%, transparent);--menu-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}}

package/dist/elements/a-menu.js

@@ -216,6 +216,7 @@ class AMenuElement extends HTMLElementBase {
         transition:
           opacity 140ms ease-out,
           translate 140ms ease-out,
+          width var(--menu-width-duration, 160ms) ease,
           display 140ms allow-discrete,
           overlay 140ms allow-discrete;
       }
@@ -227,6 +228,7 @@ class AMenuElement extends HTMLElementBase {
         transition:
           opacity 100ms ease-out,
           translate 100ms ease-out,
+          width var(--menu-width-duration, 160ms) ease,
           display 100ms allow-discrete,
           overlay 100ms allow-discrete;
       }

package/dist/elements/a-toast.css

@@ -0,0 +1 @@
+@property --toast-remaining{syntax: "<number>"; inherits: true; initial-value: 1;}@layer anta{a-toast{--toast-dur: .22s}a-toast:not(:defined){display:none}}

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;