@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/toast/toast-item.js

@@ -1,288 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './toast-item.class.js';
+import { LyraToastItem } from './toast-item.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { closeIcon } from '../../internal/icons.js';
-import { styles } from './toast-item.styles.js';
-// Must stay in sync with --lyra-transition-base's 180ms fallback
-// (internal/tokens.styles.ts) — toast-item.styles.ts derives
-// --show-duration/--hide-duration from that same token. Kept as a literal
-// here rather than read via getComputedStyle() because the token's value is
-// a full transition shorthand ("180ms ease-out"), not a bare duration, and
-// parsing that back out in JS for a single setTimeout would be more fragile
-// than this documented literal.
-const ANIM_MS = 180;
-function prefersReducedMotion() {
-    return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-}
-// toast-item.styles.ts already collapses the CSS transition itself to ~0 under
-// reduced motion; this keeps the lyra-after-show/lyra-after-hide events (and
-// the DOM removal in hide()) from still waiting out the full duration of an
-// animation nothing is visibly playing.
-function animMs() {
-    return prefersReducedMotion() ? 0 : ANIM_MS;
-}
-/**
- * `<lyra-toast-item>` — a single toast notification.
- * Mirrors the Web Awesome `<wa-toast-item>` API under the `lyra-` prefix.
- *
- * @customElement lyra-toast-item
- * @slot - The message content.
- * @slot icon - Optional icon shown at the start.
- * @event lyra-show - Fired when the item begins showing.
- * @event lyra-after-show - Fired after the show animation completes.
- * @event lyra-hide - Fired when the item begins hiding.
- * @event lyra-after-hide - Fired after the hide animation completes (item then removes itself).
- * @csspart toast-item - The outer container.
- * @csspart accent - The colored accent bar.
- * @csspart icon - The icon wrapper.
- * @csspart content - The message wrapper.
- * @csspart close-button - The dismiss button.
- */
-export class LyraToastItem extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Auto-dismiss delay in ms. Set to `Infinity` (or <= 0) to disable. */
-        this.duration = 5000;
-        /** Visual size. */
-        this.size = 'm';
-        /** Severity/variant. */
-        this.variant = 'neutral';
-        /** Show the icon slot. */
-        this.withIcon = false;
-        this.elapsedMs = 0;
-        this.startedAt = 0;
-        this.timerStarted = false;
-        this.hovering = false;
-        this.focused = false;
-        this.hiding = false;
-        this.resumeTimer = () => {
-            // Guard against an interleaved pointer+focus pause/resume sequence
-            // calling resumeTimer() twice without a pauseTimer() in between --
-            // without clearing here, the earlier setTimeout is orphaned (not
-            // tracked by `this.timer` anymore) and still fires on its own
-            // schedule, auto-dismissing the toast early even after it's paused
-            // again.
-            if (this.timer !== undefined) {
-                clearTimeout(this.timer);
-                this.timer = undefined;
-            }
-            if (!isFinite(this.duration) || this.duration <= 0)
-                return;
-            const remaining = this.duration - this.elapsedMs;
-            // A duration shortened below the already-elapsed time must hide promptly,
-            // not silently never schedule anything.
-            if (remaining <= 0) {
-                void this.hide();
-                return;
-            }
-            this.startedAt = performance.now();
-            this.timer = window.setTimeout(() => this.hide(), remaining);
-        };
-        this.pauseTimer = () => {
-            if (this.timer !== undefined) {
-                clearTimeout(this.timer);
-                this.timer = undefined;
-                this.elapsedMs += performance.now() - this.startedAt;
-            }
-        };
-        // Hover and focus are tracked as independent pause reasons so that
-        // releasing one (e.g. Shift-Tabbing focus away) only resumes the timer
-        // once *neither* modality still holds the toast paused -- otherwise a
-        // pointer resting on the toast would see it auto-dismiss out from under
-        // it the moment focus alone moved away, or vice versa.
-        this.onPointerEnter = () => {
-            this.hovering = true;
-            this.pauseTimer();
-        };
-        this.onPointerLeave = () => {
-            this.hovering = false;
-            if (!this.focused)
-                this.resumeTimer();
-        };
-        this.onFocusIn = () => {
-            this.focused = true;
-            this.pauseTimer();
-        };
-        this.onFocusOut = () => {
-            this.focused = false;
-            if (!this.hovering)
-                this.resumeTimer();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    updated(changed) {
-        if (changed.has('variant')) {
-            // Assertive for actionable severities, polite otherwise. Re-evaluated
-            // on every `variant` change (not just the first render) so a toast
-            // reassigned to `danger`/`warning` after creation is announced as an
-            // interruption instead of keeping its original, now-stale role.
-            this.setAttribute('role', this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'status');
-        }
-        // `elapsedMs`/`duration` are re-read fresh every time the timer is
-        // (re)scheduled, so a `duration` change while paused (hovering/focused)
-        // or before the timer has ever started needs no action here -- the next
-        // resumeTimer()/startTimer() call already picks up the new value.
-        // Re-evaluate on any duration change once the show sequence has started,
-        // not only while a timer is already actively counting down -- this also
-        // covers duration flipping from disabled (0/Infinity) back to a positive
-        // value, which previously never had `this.timer !== undefined` to gate on.
-        if (changed.has('duration') && this.timerStarted && !this.hovering && !this.focused) {
-            this.pauseTimer();
-            this.resumeTimer();
-        }
-    }
-    firstUpdated() {
-        this.showRafId = requestAnimationFrame(() => {
-            this.showRafId = undefined;
-            // hide() may have already run synchronously before this frame fired
-            // (e.g. a caller creates the toast and immediately dismisses it) --
-            // don't resurrect the show sequence on top of an already-hiding item.
-            if (this.hiding)
-                return;
-            this.setAttribute('data-visible', '');
-            this.emit('lyra-show');
-            this.showAnimTimer = window.setTimeout(() => {
-                this.showAnimTimer = undefined;
-                this.emit('lyra-after-show');
-            }, animMs());
-            this.startTimer();
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.showRafId !== undefined) {
-            cancelAnimationFrame(this.showRafId);
-            this.showRafId = undefined;
-        }
-        if (this.showAnimTimer !== undefined) {
-            clearTimeout(this.showAnimTimer);
-            this.showAnimTimer = undefined;
-        }
-        if (this.hideAnimTimer !== undefined) {
-            clearTimeout(this.hideAnimTimer);
-            this.hideAnimTimer = undefined;
-            // hide()'s own promise is awaiting this timer firing to resolve() --
-            // a disconnect (e.g. the toast's ancestor is removed from the DOM,
-            // bypassing this.remove()) must still let that promise settle instead
-            // of leaving it pending forever.
-            this.resolvePendingHide?.();
-            this.resolvePendingHide = undefined;
-        }
-        this.clearTimer();
-    }
-    startTimer() {
-        this.timerStarted = true;
-        this.elapsedMs = 0;
-        this.resumeTimer();
-    }
-    clearTimer() {
-        if (this.timer !== undefined)
-            clearTimeout(this.timer);
-        this.timer = undefined;
-    }
-    // A stack of several simultaneously-open toasts otherwise gives every
-    // close button the same bare "Close" label, so screen-reader/switch-access
-    // users can't tell which toast a given button dismisses without first
-    // activating it. Deriving the label from the toast's own message content
-    // mirrors combobox's per-item "Remove X" labeling for the same reason.
-    //
-    // Only direct Text-node children are considered -- the message is always
-    // assigned as plain text (`create()` sets `textContent`), whereas anything
-    // else appended to the host (an action `<button>`, a `slot="icon"` element
-    // and its own descendant text) is a sibling *element*, not a top-level text
-    // node, so it's excluded without needing to know about those features here.
-    get closeLabel() {
-        const text = Array.from(this.childNodes)
-            .filter((node) => node.nodeType === Node.TEXT_NODE)
-            .map((node) => node.textContent ?? '')
-            .join('')
-            .trim()
-            .replace(/\s+/g, ' ');
-        if (!text)
-            return 'Close';
-        const snippet = text.length > 40 ? `${text.slice(0, 40)}…` : text;
-        return `Close: ${snippet}`;
-    }
-    /** Hide with animation, then remove from the DOM. */
-    async hide() {
-        if (this.hiding)
-            return;
-        this.hiding = true;
-        this.clearTimer();
-        this.emit('lyra-hide');
-        this.removeAttribute('data-visible');
-        await new Promise((resolve) => {
-            this.resolvePendingHide = resolve;
-            this.hideAnimTimer = window.setTimeout(() => {
-                this.hideAnimTimer = undefined;
-                this.resolvePendingHide = undefined;
-                resolve();
-            }, animMs());
-        });
-        // An out-of-band disconnect (see disconnectedCallback) resolves this same
-        // promise so callers awaiting hide() never hang, but it does so *without*
-        // this having reached its normal completion -- guard against then still
-        // emitting a "finished hiding" event (and redundantly calling remove())
-        // for a node that's already been torn down some other way.
-        if (!this.isConnected)
-            return;
-        this.emit('lyra-after-hide');
-        this.remove();
-    }
-    render() {
-        return html `
-      <div
-        part="toast-item"
-        @pointerenter=${this.onPointerEnter}
-        @pointerleave=${this.onPointerLeave}
-        @focusin=${this.onFocusIn}
-        @focusout=${this.onFocusOut}
-      >
-        <span part="accent" aria-hidden="true"></span>
-        ${this.withIcon ? html `<span part="icon"><slot name="icon"></slot></span>` : ''}
-        <div part="content"><slot></slot></div>
-        <button
-          part="close-button"
-          type="button"
-          aria-label=${this.closeLabel}
-          aria-disabled=${this.hiding ? 'true' : 'false'}
-          @click=${(e) => {
-            // Reflect the disabled state on the DOM node synchronously, not
-            // just via the reactive binding above -- Lit's re-render from
-            // `this.hiding = true` (inside hide()) lands on the next
-            // microtask, which is too late for a screen reader (or a second
-            // rapid click) that inspects the attribute right after this
-            // handler returns.
-            e.currentTarget.setAttribute('aria-disabled', 'true');
-            void this.hide();
-        }}
-        >
-          ${closeIcon()}
-        </button>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Number })
-], LyraToastItem.prototype, "duration", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraToastItem.prototype, "size", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraToastItem.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-icon' })
-], LyraToastItem.prototype, "withIcon", void 0);
-__decorate([
-    state()
-], LyraToastItem.prototype, "hiding", void 0);
 defineElement('toast-item', LyraToastItem);
+//# sourceMappingURL=toast-item.js.map

package/dist/components/toast/toast-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-item.js","sourceRoot":"","sources":["../../../src/components/toast/toast-item.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC"}

package/dist/components/toast/toast-item.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=toast-item.styles.d.ts.map

package/dist/components/toast/toast-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiJlB,CAAC"}

package/dist/components/toast/toast-item.styles.js

@@ -2,44 +2,44 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    --accent-width: 4px;
-    --show-duration: var(--lyra-transition-base, 180ms ease-out);
-    --hide-duration: var(--lyra-transition-base, 180ms ease-out);
-    --padding: var(--lyra-space-m);
-    --font-size: 1rem;
-    --accent-color: var(--lyra-color-border);
+    --lyra-toast-accent-width: var(--lyra-size-4px);
+    --lyra-toast-show-duration: var(--lyra-transition-base, 180ms ease-out);
+    --lyra-toast-hide-duration: var(--lyra-transition-base, 180ms ease-out);
+    --lyra-toast-padding: var(--lyra-space-m);
+    --lyra-toast-font-size: var(--lyra-font-size-md);
+    --lyra-toast-accent-color: var(--lyra-color-border);
   }
   :host([variant='brand']) {
-    --accent-color: var(--lyra-color-brand);
+    --lyra-toast-accent-color: var(--lyra-color-brand);
   }
   :host([variant='success']) {
-    --accent-color: var(--lyra-color-success);
+    --lyra-toast-accent-color: var(--lyra-color-success);
   }
   :host([variant='warning']) {
-    --accent-color: var(--lyra-color-warning);
+    --lyra-toast-accent-color: var(--lyra-color-warning);
   }
   :host([variant='danger']) {
-    --accent-color: var(--lyra-color-danger);
+    --lyra-toast-accent-color: var(--lyra-color-danger);
   }
   :host([size='xs']) {
-    --padding: var(--lyra-space-xs);
-    --font-size: 0.75rem;
+    --lyra-toast-padding: var(--lyra-space-xs);
+    --lyra-toast-font-size: var(--lyra-font-size-xs);
   }
   :host([size='s']) {
-    --padding: var(--lyra-space-s);
-    --font-size: 0.875rem;
+    --lyra-toast-padding: var(--lyra-space-s);
+    --lyra-toast-font-size: var(--lyra-font-size-md-sm);
   }
   :host([size='m']) {
-    --padding: var(--lyra-space-m);
-    --font-size: 1rem;
+    --lyra-toast-padding: var(--lyra-space-m);
+    --lyra-toast-font-size: var(--lyra-font-size-md);
   }
   :host([size='l']) {
-    --padding: var(--lyra-space-l);
-    --font-size: 1.125rem;
+    --lyra-toast-padding: var(--lyra-space-l);
+    --lyra-toast-font-size: var(--lyra-font-size-lg);
   }
   :host([size='xl']) {
-    --padding: calc(var(--lyra-space-l) * 1.5);
-    --font-size: 1.25rem;
+    --lyra-toast-padding: calc(var(--lyra-space-l) * 1.5);
+    --lyra-toast-font-size: var(--lyra-font-size-xl);
   }
 
   [part='toast-item'] {
@@ -48,19 +48,24 @@ export const styles = css `
     align-items: start;
     gap: var(--lyra-space-s);
     inline-size: 100%;
-    padding: var(--padding);
-    padding-inline-start: calc(var(--padding) + var(--accent-width));
-    font-size: var(--font-size);
+    padding: var(--lyra-toast-padding);
+    padding-inline-start: calc(var(--lyra-toast-padding) + var(--lyra-toast-accent-width));
+    font-size: var(--lyra-toast-font-size);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(var(--lyra-size-neg-8px));
     transition:
-      opacity var(--show-duration),
-      transform var(--show-duration);
+      opacity var(--lyra-toast-show-duration),
+      transform var(--lyra-toast-show-duration);
+  }
+  :host([data-hiding]) [part='toast-item'] {
+    transition:
+      opacity var(--lyra-toast-hide-duration),
+      transform var(--lyra-toast-hide-duration);
   }
   :host([data-visible]) [part='toast-item'] {
     opacity: 1;
@@ -76,20 +81,46 @@ export const styles = css `
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
-    inline-size: var(--accent-width);
-    background: var(--accent-color);
+    inline-size: var(--lyra-toast-accent-width);
+    background: var(--lyra-toast-accent-color);
     border-start-start-radius: var(--lyra-radius);
     border-end-start-radius: var(--lyra-radius);
   }
   [part='icon'] {
     display: inline-flex;
     flex: 0 0 auto;
-    color: var(--accent-color);
+    color: var(--lyra-toast-accent-color);
   }
   [part='content'] {
     flex: 1 1 auto;
     min-inline-size: 0;
   }
+  /* toaster.ts's action option (and the WithIcon/Triggers stories) append a
+     plain light-DOM button as a sibling of the message text -- without
+     this, it renders with the browser's unstyled default button chrome,
+     clashing with the rest of the token-driven design. Styled as an inline
+     text action (matching the toast's own accent color) rather than a
+     boxed button, since it sits directly after the message inside the
+     content part rather than in its own layout slot. */
+  ::slotted(button) {
+    display: inline-block;
+    margin-inline-start: var(--lyra-space-s);
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    font-weight: var(--lyra-font-weight-bold);
+    color: var(--lyra-toast-accent-color);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  ::slotted(button:hover) {
+    color: var(--lyra-color-text);
+  }
+  ::slotted(button:focus-visible) {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
   [part='close-button'] {
     flex: 0 0 auto;
     margin-inline-start: auto;
@@ -97,8 +128,8 @@ export const styles = css `
     border: none;
     cursor: pointer;
     color: var(--lyra-color-text-quiet);
-    font-size: 1em;
-    line-height: 1;
+    font-size: var(--lyra-size-1em);
+    line-height: var(--lyra-line-height-none);
     padding: var(--lyra-space-xs);
     border-radius: var(--lyra-radius);
   }
@@ -114,3 +145,4 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
 `;
+//# sourceMappingURL=toast-item.styles.js.map

package/dist/components/toast/toast-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-item.styles.js","sourceRoot":"","sources":["../../../src/components/toast/toast-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,CAAC"}

package/dist/components/toast/toast.class.d.ts

@@ -0,0 +1,33 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { LyraToastItem, type ToastVariant, type ToastSize } from './toast-item.class.js';
+import './toast-item.class.js';
+export type ToastPlacement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export interface ToastCreateOptions {
+    variant?: ToastVariant;
+    duration?: number;
+    size?: ToastSize;
+    withIcon?: boolean;
+}
+/**
+ * `<lyra-toast>` — the stacking toast region. One per page is recommended.
+ * Mirrors the Web Awesome `<wa-toast>` API under the `lyra-` prefix.
+ *
+ * @customElement lyra-toast
+ * @slot - `<lyra-toast-item>` elements.
+ * @csspart stack - The fl-column container holding the items.
+ */
+export declare class LyraToast extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Where the stack anchors on screen. */
+    placement: ToastPlacement;
+    /** Create and append a toast item programmatically; resolves to the item. */
+    create(message: string, options?: ToastCreateOptions): Promise<LyraToastItem>;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-toast': LyraToast;
+    }
+}
+//# sourceMappingURL=toast.class.d.ts.map

package/dist/components/toast/toast.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.class.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,CAAC;AAEjB,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yCAAyC;IACZ,SAAS,EAAE,cAAc,CAAa;IAEnE,6EAA6E;IACvE,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAAC,aAAa,CAAC,CAetF;IAED,MAAM,IAAI,cAAc,CAKvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/toast/toast.class.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './toast.styles.js';
+import { LyraToastItem } from './toast-item.class.js';
+import './toast-item.class.js';
+/**
+ * `<lyra-toast>` — the stacking toast region. One per page is recommended.
+ * Mirrors the Web Awesome `<wa-toast>` API under the `lyra-` prefix.
+ *
+ * @customElement lyra-toast
+ * @slot - `<lyra-toast-item>` elements.
+ * @csspart stack - The fl-column container holding the items.
+ */
+export class LyraToast extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Where the stack anchors on screen. */
+        this.placement = 'top-end';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** Create and append a toast item programmatically; resolves to the item. */
+    async create(message, options = {}) {
+        const item = document.createElement('lyra-toast-item');
+        // Only assign what the caller actually specified -- a freshly-created
+        // <lyra-toast-item> already carries its own property defaults, so
+        // falling back to a literal here (e.g. `?? 5000`) would duplicate those
+        // defaults in a second place that has no way of staying in sync if the
+        // property declaration in toast-item.ts ever changes.
+        if (options.variant !== undefined)
+            item.variant = options.variant;
+        if (options.duration !== undefined)
+            item.duration = options.duration;
+        if (options.size !== undefined)
+            item.size = options.size;
+        if (options.withIcon !== undefined)
+            item.withIcon = options.withIcon;
+        item.textContent = message;
+        this.appendChild(item);
+        await item.updateComplete;
+        return item;
+    }
+    render() {
+        // Each toast item owns its own status/alert role. Keeping a live region on
+        // the stack as well would nest assertive alerts inside a polite region and
+        // can cause duplicate or out-of-order announcements.
+        return html `<div part="stack"><slot></slot></div>`;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraToast.prototype, "placement", void 0);
+//# sourceMappingURL=toast.class.js.map

package/dist/components/toast/toast.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.class.js","sourceRoot":"","sources":["../../../src/components/toast/toast.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAqC,MAAM,uBAAuB,CAAC;AACzF,OAAO,uBAAuB,CAAC;AAiB/B;;;;;;;GAOG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGE,yCAAyC;QACZ,cAAS,GAAmB,SAAS,CAAC;IA0BrE,CAAC;aA7BQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAK7C,6EAA6E;IAC7E,KAAK,CAAC,MAAM,CAAC,OAAe,EAAE,OAAO,GAAuB,EAAE;QAC5D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAkB,CAAC;QACxE,sEAAsE;QACtE,kEAAkE;QAClE,wEAAwE;QACxE,uEAAuE;QACvE,sDAAsD;QACtD,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS;YAAE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAClE,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS;YAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACrE,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS;YAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzD,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS;YAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACrE,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,2EAA2E;QAC3E,2EAA2E;QAC3E,qDAAqD;QACrD,OAAO,IAAI,CAAA,uCAAuC,CAAC;IACrD,CAAC;CACF;AA1B8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAuC"}

package/dist/components/toast/toast.d.ts

@@ -1,32 +1,3 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { LyraToastItem, type ToastVariant, type ToastSize } from './toast-item.js';
-import './toast-item.js';
-export type ToastPlacement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
-export interface ToastCreateOptions {
-    variant?: ToastVariant;
-    duration?: number;
-    size?: ToastSize;
-    withIcon?: boolean;
-}
-/**
- * `<lyra-toast>` — the stacking toast region. One per page is recommended.
- * Mirrors the Web Awesome `<wa-toast>` API under the `lyra-` prefix.
- *
- * @customElement lyra-toast
- * @slot - `<lyra-toast-item>` elements.
- * @csspart stack - The fl-column container holding the items.
- */
-export declare class LyraToast extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Where the stack anchors on screen. */
-    placement: ToastPlacement;
-    /** Create and append a toast item programmatically; resolves to the item. */
-    create(message: string, options?: ToastCreateOptions): Promise<LyraToastItem>;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-toast': LyraToast;
-    }
-}
+export * from './toast.class.js';
+import "./toast-item.js";
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAGjC,OAAO,iBAAiB,CAAC"}

package/dist/components/toast/toast.js

@@ -1,48 +1,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './toast.class.js';
+import { LyraToast } from './toast.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './toast.styles.js';
-import { LyraToastItem } from './toast-item.js';
-import './toast-item.js';
-/**
- * `<lyra-toast>` — the stacking toast region. One per page is recommended.
- * Mirrors the Web Awesome `<wa-toast>` API under the `lyra-` prefix.
- *
- * @customElement lyra-toast
- * @slot - `<lyra-toast-item>` elements.
- * @csspart stack - The fl-column container holding the items.
- */
-export class LyraToast extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Where the stack anchors on screen. */
-        this.placement = 'top-end';
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    /** Create and append a toast item programmatically; resolves to the item. */
-    async create(message, options = {}) {
-        const item = document.createElement('lyra-toast-item');
-        item.variant = options.variant ?? 'neutral';
-        item.duration = options.duration ?? 5000;
-        item.size = options.size ?? 'm';
-        item.withIcon = options.withIcon ?? false;
-        item.textContent = message;
-        this.appendChild(item);
-        await item.updateComplete;
-        return item;
-    }
-    render() {
-        return html `<div part="stack" role="status" aria-live="polite"><slot></slot></div>`;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], LyraToast.prototype, "placement", void 0);
+import "./toast-item.js";
 defineElement('toast', LyraToast);
+//# sourceMappingURL=toast.js.map