@antadesign/anta 0.3.14 → 0.3.15

package/dist/anta_helpers.d.ts

@@ -54,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/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/elements/a-banner.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase, parseOpenState } from "../anta_helpers";
+import { HTMLElementBase, installDismissTrigger, parseOpenState } from "../anta_helpers";
 import "./a-banner.css";
 const DISMISS_TRIGGER = "dismissrequest";
 const DISMISS_ATTR = "data-banner-dismiss";
@@ -65,12 +65,7 @@ class ABannerElement extends HTMLElementBase {
       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();
-    });
+    installDismissTrigger(this, DISMISS_ATTR, () => this.#requestDismiss());
   }
   /** Controlled mode: the `state` attribute is present and owns visibility. */
   get #controlled() {

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/index.d.ts

@@ -36,5 +36,7 @@ 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

@@ -21,6 +21,8 @@ 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 {
@@ -46,6 +48,8 @@ export {
   ATabPanelElement,
   ATabsElement,
   ATextElement,
+  AToastElement,
+  AToasterElement,
   ATooltipElement,
   register_a_banner,
   register_a_button,
@@ -69,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

@@ -1121,3 +1121,42 @@ export interface ABannerAttributes extends BaseAttributes {
         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

@@ -76,6 +76,8 @@ 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

@@ -43,6 +43,7 @@ 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,
@@ -74,10 +75,12 @@ export {
   Tag,
   Text,
   Title,
+  Toaster,
   Tooltip,
   buildMonth,
   clampDate,
   configure,
+  createToaster,
   dateFormatPattern,
   dateTimeFormatPattern,
   firstDayOfWeek,

package/dist/jsx-runtime.d.ts

@@ -8,6 +8,7 @@ type JsxFunction = {
 type UseState = <S>(initial: S | (() => S)) => [S, (next: S | ((prev: S) => S)) => void];
 type UseId = () => string;
 type UseMemo = <T>(factory: () => T, deps: unknown[]) => T;
+type UseSyncExternalStore = <T>(subscribe: (onChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T) => T;
 declare let _Fragment: ComponentType;
 /**
  * Swap the underlying JSX factory (and, optionally, the hooks) used by all anta
@@ -32,16 +33,18 @@ export declare function configure(jsx: JsxFunction, Fragment?: ComponentType, ho
     useState?: UseState;
     useId?: UseId;
     useMemo?: UseMemo;
+    useSyncExternalStore?: UseSyncExternalStore;
 }): void;
 /** Hooks indirection so wrappers depend on the configured renderer, not a hard
  *  `import … from 'react'`. Call these exactly like the React hooks. */
 export declare function useState<S>(initial: S | (() => S)): [S, (next: S | ((prev: S) => S)) => void];
 export declare function useId(): string;
 export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
+export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -96,4 +99,6 @@ export interface AntaIntrinsicElements {
     'a-card': ACardAttributes;
     'a-banner': ABannerAttributes;
     'a-banner-message': BaseAttributes;
+    'a-toaster': AToasterAttributes;
+    'a-toast': AToastAttributes;
 }

package/dist/jsx-runtime.js

@@ -4,12 +4,14 @@ let _Fragment = React.Fragment;
 let _useState = React.useState;
 let _useId = React.useId;
 let _useMemo = React.useMemo;
+let _useSyncExternalStore = React.useSyncExternalStore;
 function configure(jsx2, Fragment, hooks) {
   _jsx = jsx2;
   if (Fragment !== void 0) _Fragment = Fragment;
   if (hooks?.useState) _useState = hooks.useState;
   if (hooks?.useId) _useId = hooks.useId;
   if (hooks?.useMemo) _useMemo = hooks.useMemo;
+  if (hooks?.useSyncExternalStore) _useSyncExternalStore = hooks.useSyncExternalStore;
 }
 function useState(initial) {
   return _useState(initial);
@@ -20,6 +22,9 @@ function useId() {
 function useMemo(factory, deps) {
   return _useMemo(factory, deps);
 }
+function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+  return _useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
 function jsx(type, props, key) {
   const { children, ...rest } = props ?? {};
   const p = key !== void 0 ? { ...rest, key } : rest;
@@ -43,5 +48,6 @@ export {
   jsxs,
   useId,
   useMemo,
-  useState
+  useState,
+  useSyncExternalStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",