@antadesign/anta 0.3.13 → 0.3.15

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;
@@ -46,6 +54,16 @@ export declare const ISOLATE_HINT: string;
  *  `'open'` is `'closed'`, so an absent / malformed attribute reads closed. Kept
  *  here so the two elements can't drift on how the token is parsed. */
 export declare function parseOpenState(v: string | null): 'open' | 'closed';
+/** Install a delegated "dismiss from an action" click handler: any element inside
+ *  `host` carrying `[attr]` runs `onDismiss` on click, scoped to the nearest host
+ *  of `host`'s own tag (so a control inside a nested same-tag element doesn't also
+ *  dismiss the outer one). A read-only light-DOM walk — no host / tree mutation —
+ *  that catches any activated control (native `<button>`, `<a>`, `<a-button>`,
+ *  `<a-menu-item>`) with keyboard activation for free. Shared by `a-toast`
+ *  (`data-toast-dismiss`) and `a-banner` (`data-banner-dismiss`), mirroring
+ *  `a-dialog`'s `data-dialog-close` family; keep the one copy here so a future fix
+ *  (e.g. skipping `[disabled]` triggers) lands for every element at once. */
+export declare function installDismissTrigger(host: HTMLElement, attr: string, onDismiss: () => void): void;
 /** The six named tones every toned component shares. Anything else is a literal
  *  CSS colour the element resolves through its `--{component}-tone-source` var. */
 export declare const NAMED_TONES: Set<string>;

package/dist/anta_helpers.js

@@ -21,6 +21,14 @@ const ISOLATE_HINT = IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to
 function parseOpenState(v) {
   return v === "open" ? "open" : "closed";
 }
+function installDismissTrigger(host, attr, onDismiss) {
+  host.addEventListener("click", (e) => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const trigger = target.closest(`[${attr}]`);
+    if (trigger && trigger.closest(host.localName) === host) onDismiss();
+  });
+}
 const NAMED_TONES = /* @__PURE__ */ new Set([
   "brand",
   "neutral",
@@ -138,6 +146,7 @@ export {
   SelectableChildElement,
   anchorRect,
   hasChildren,
+  installDismissTrigger,
   isInsideOpenMenu,
   isMenuOpen,
   nativeStateChange,

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/Select.module.css

@@ -1 +1 @@
-.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}
+.chevron{transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}

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,136 @@
+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="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();
+    });
+    installDismissTrigger(this, DISMISS_ATTR, () => 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-input.css

@@ -1 +1 @@
-@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);width:100%}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h)}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]{--input-border: oklch(from var(--input-status-source) .58 c h)}.dark a-input[status]{--input-border: oklch(from var(--input-status-source) .52 c h)}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}}
+@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h)}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]{--input-border: oklch(from var(--input-status-source) .58 c h)}.dark a-input[status]{--input-border: oklch(from var(--input-status-source) .52 c h)}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}}

package/dist/elements/a-input.js

@@ -173,6 +173,7 @@ const SHADOW_STYLE = `
   :host([readonly]) slot[name="clear"] { display: none; }
 
   .field.has-leading slot[name="leading"] { margin-inline-start: 7px; }
+  .field.has-trailing slot[name="trailing"] { margin-inline-end: var(--input-trailing-inset, 7px); }
   .field.has-leading input,
   .field.has-leading textarea { padding-inline-start: 5px; }
   :host([multiline]) .field.has-leading slot[name="leading"],

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}}