@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -1,325 +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';
-function prefersReducedMotion() {
-    return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-}
-function parseTime(value) {
-    const trimmed = value.trim();
-    if (trimmed.endsWith('ms'))
-        return Number.parseFloat(trimmed);
-    if (trimmed.endsWith('s'))
-        return Number.parseFloat(trimmed) * 1000;
-    return 0;
-}
-function maxCssTime(value) {
-    return Math.max(0, ...value.split(',').map(parseTime).filter(Number.isFinite));
-}
-/**
- * `<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]; }
-    willUpdate(changed) {
-        // `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.
-        //
-        // This runs in willUpdate() (before render), not updated(), because a
-        // duration shortened below the already-elapsed time makes resumeTimer()
-        // call hide(), which sets the `hiding` state property synchronously --
-        // doing that from updated() sets a reactive property after Lit considers
-        // the update cycle finished, scheduling a redundant extra render pass.
-        // willUpdate() runs before that cycle is considered complete, so the same
-        // set just folds into the render already in progress.
-        if (changed.has('duration') && this.timerStarted && !this.hovering && !this.focused) {
-            this.pauseTimer();
-            this.resumeTimer();
-        }
-    }
-    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');
-        }
-    }
-    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');
-            void this.waitForVisualCompletion('show').then(() => {
-                if (this.isConnected && !this.hiding)
-                    this.emit('lyra-after-show');
-            });
-            this.startTimer();
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.showRafId !== undefined) {
-            cancelAnimationFrame(this.showRafId);
-            this.showRafId = undefined;
-        }
-        this.cancelShowAnimation?.();
-        this.cancelShowAnimation = undefined;
-        this.cancelHideAnimation?.();
-        this.cancelHideAnimation = undefined;
-        this.clearTimer();
-    }
-    startTimer() {
-        this.timerStarted = true;
-        this.elapsedMs = 0;
-        this.resumeTimer();
-    }
-    clearTimer() {
-        if (this.timer !== undefined)
-            clearTimeout(this.timer);
-        this.timer = undefined;
-    }
-    /**
-     * Wait for the actual CSS transition/animation on the toast surface. The
-     * computed duration is intentionally read at runtime so a consumer's
-     * `--lyra-toast-show-duration`/`--lyra-toast-hide-duration` override keeps
-     * lifecycle events and removal in sync with the pixels on screen. A small
-     * timeout remains as a safety net for zero-duration transitions, disabled
-     * animation, and browsers that do not dispatch an end event.
-     */
-    waitForVisualCompletion(kind) {
-        const previous = kind === 'show' ? this.cancelShowAnimation : this.cancelHideAnimation;
-        previous?.();
-        const surface = this.shadowRoot?.querySelector('[part="toast-item"]');
-        if (!surface || prefersReducedMotion())
-            return Promise.resolve();
-        const computed = getComputedStyle(surface);
-        const transitionMs = maxCssTime(computed.transitionDuration) + maxCssTime(computed.transitionDelay);
-        const animationMs = maxCssTime(computed.animationDuration) + maxCssTime(computed.animationDelay);
-        const fallbackMs = Math.max(transitionMs, animationMs);
-        if (fallbackMs <= 0)
-            return Promise.resolve();
-        return new Promise((resolve) => {
-            let settled = false;
-            let timeout;
-            const cancelKey = kind === 'show' ? 'cancelShowAnimation' : 'cancelHideAnimation';
-            const finish = () => {
-                if (settled)
-                    return;
-                settled = true;
-                if (timeout !== undefined)
-                    window.clearTimeout(timeout);
-                surface.removeEventListener('transitionend', onEnd);
-                surface.removeEventListener('animationend', onEnd);
-                if (this[cancelKey] === cancel)
-                    this[cancelKey] = undefined;
-                resolve();
-            };
-            const onEnd = (event) => {
-                if (event.target === surface)
-                    finish();
-            };
-            const cancel = () => finish();
-            surface.addEventListener('transitionend', onEnd);
-            surface.addEventListener('animationend', onEnd);
-            timeout = window.setTimeout(finish, fallbackMs + 50);
-            this[cancelKey] = cancel;
-        });
-    }
-    // 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.cancelShowAnimation?.();
-        this.cancelShowAnimation = undefined;
-        this.clearTimer();
-        this.emit('lyra-hide');
-        this.removeAttribute('data-visible');
-        this.setAttribute('data-hiding', '');
-        await this.waitForVisualCompletion('hide');
-        // A disconnect cancels the visual wait, but it does so without this
-        // reaching its normal completion -- guard against emitting a finished
-        // event or redundantly removing a node already torn down elsewhere.
-        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,11 +2,11 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    --lyra-toast-accent-width: 4px;
+    --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: 1rem;
+    --lyra-toast-font-size: var(--lyra-font-size-md);
     --lyra-toast-accent-color: var(--lyra-color-border);
   }
   :host([variant='brand']) {
@@ -23,23 +23,23 @@ export const styles = css `
   }
   :host([size='xs']) {
     --lyra-toast-padding: var(--lyra-space-xs);
-    --lyra-toast-font-size: 0.75rem;
+    --lyra-toast-font-size: var(--lyra-font-size-xs);
   }
   :host([size='s']) {
     --lyra-toast-padding: var(--lyra-space-s);
-    --lyra-toast-font-size: 0.875rem;
+    --lyra-toast-font-size: var(--lyra-font-size-md-sm);
   }
   :host([size='m']) {
     --lyra-toast-padding: var(--lyra-space-m);
-    --lyra-toast-font-size: 1rem;
+    --lyra-toast-font-size: var(--lyra-font-size-md);
   }
   :host([size='l']) {
     --lyra-toast-padding: var(--lyra-space-l);
-    --lyra-toast-font-size: 1.125rem;
+    --lyra-toast-font-size: var(--lyra-font-size-lg);
   }
   :host([size='xl']) {
     --lyra-toast-padding: calc(var(--lyra-space-l) * 1.5);
-    --lyra-toast-font-size: 1.25rem;
+    --lyra-toast-font-size: var(--lyra-font-size-xl);
   }
 
   [part='toast-item'] {
@@ -53,11 +53,11 @@ export const styles = css `
     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(--lyra-toast-show-duration),
       transform var(--lyra-toast-show-duration);
@@ -109,7 +109,7 @@ export const styles = css `
     border: none;
     background: none;
     font: inherit;
-    font-weight: bold;
+    font-weight: var(--lyra-font-weight-bold);
     color: var(--lyra-toast-accent-color);
     text-decoration: underline;
     cursor: pointer;
@@ -128,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);
   }
@@ -145,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,60 +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');
-        // 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);
+import "./toast-item.js";
 defineElement('toast', LyraToast);
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,iBAAiB,CAAC;AACzB,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

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

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

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

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