@aceshooting/lyra-ui 0.1.0

package/dist/components/flag/language-map.js

@@ -0,0 +1,62 @@
+/**
+ * Default mapping from a language subtag to a representative country flag
+ * (ISO 3166-1 alpha-2). Languages don't map 1:1 to countries; these are the
+ * conventional choices for language pickers. Override per-app as needed.
+ */
+export const LANGUAGE_TO_COUNTRY = {
+    en: 'gb',
+    fr: 'fr',
+    de: 'de',
+    es: 'es',
+    it: 'it',
+    pt: 'pt',
+    nl: 'nl',
+    ar: 'sa',
+    zh: 'cn',
+    ja: 'jp',
+    ko: 'kr',
+    ru: 'ru',
+    pl: 'pl',
+    tr: 'tr',
+    sv: 'se',
+    da: 'dk',
+    fi: 'fi',
+    no: 'no',
+    nb: 'no',
+    cs: 'cz',
+    sk: 'sk',
+    el: 'gr',
+    he: 'il',
+    hi: 'in',
+    th: 'th',
+    vi: 'vn',
+    id: 'id',
+    ms: 'my',
+    uk: 'ua',
+    ro: 'ro',
+    hu: 'hu',
+    bg: 'bg',
+    hr: 'hr',
+    sr: 'rs',
+    sl: 'si',
+    et: 'ee',
+    lv: 'lv',
+    lt: 'lt',
+    fa: 'ir',
+    ur: 'pk',
+    bn: 'bd',
+    ta: 'in',
+    ca: 'es',
+};
+/**
+ * Resolve a BCP-47-ish language tag to a flag country code.
+ * A region subtag wins (`en-US` → `us`); otherwise the base language is mapped.
+ */
+export function languageToCountry(language) {
+    const parts = language.toLowerCase().split(/[-_]/);
+    const base = parts[0];
+    const region = parts[1];
+    if (region && region.length === 2)
+        return region;
+    return LANGUAGE_TO_COUNTRY[base];
+}

package/dist/components/sparkline/sparkline.d.ts

@@ -0,0 +1,30 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-sparkline>` — a zero-dependency inline SVG trend chart.
+ * Mirrors the Web Awesome `<wa-sparkline>` API under the `lyra-` prefix.
+ *
+ * @customElement lyra-sparkline
+ * @csspart line - The line path (type="line").
+ * @csspart area - The filled area under the line (type="area").
+ * @csspart bar - Each bar rectangle (type="bar").
+ */
+export declare class LyraSparkline extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The data series to plot. */
+    values: number[];
+    /** Rendering style. */
+    type: 'line' | 'bar' | 'area';
+    /** Lower bound of the value scale (defaults to the data minimum). */
+    min?: number;
+    /** Upper bound of the value scale (defaults to the data maximum). */
+    max?: number;
+    private points;
+    protected willUpdate(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-sparkline': LyraSparkline;
+    }
+}

package/dist/components/sparkline/sparkline.js

@@ -0,0 +1,74 @@
+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, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './sparkline.styles.js';
+const VIEW = 100;
+/**
+ * `<lyra-sparkline>` — a zero-dependency inline SVG trend chart.
+ * Mirrors the Web Awesome `<wa-sparkline>` API under the `lyra-` prefix.
+ *
+ * @customElement lyra-sparkline
+ * @csspart line - The line path (type="line").
+ * @csspart area - The filled area under the line (type="area").
+ * @csspart bar - Each bar rectangle (type="bar").
+ */
+export class LyraSparkline extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The data series to plot. */
+        this.values = [];
+        /** Rendering style. */
+        this.type = 'line';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    points() {
+        const v = this.values;
+        const lo = this.min ?? Math.min(...v);
+        const hi = this.max ?? Math.max(...v);
+        const span = hi - lo || 1;
+        return v.map((n, i) => {
+            const x = v.length > 1 ? (i / (v.length - 1)) * VIEW : VIEW / 2;
+            const y = VIEW - ((n - lo) / span) * VIEW;
+            return [x, y];
+        });
+    }
+    willUpdate() {
+        const v = this.values;
+        this.setAttribute('role', 'img');
+        this.setAttribute('aria-label', v.length ? `Trend of ${v.length} values, last ${v.at(-1)}` : 'No data');
+    }
+    render() {
+        const v = this.values;
+        if (!v.length)
+            return html `<svg viewBox="0 0 ${VIEW} ${VIEW}"></svg>`;
+        const pts = this.points();
+        const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join(' ');
+        const shape = this.type === 'bar'
+            ? pts.map(([x, y]) => svg `<rect part="bar" x="${x - 2}" y="${y}" width="4" height="${VIEW - y}"></rect>`)
+            : svg `<path part="line" d="${d}"></path>`;
+        return html `<svg viewBox="0 0 ${VIEW} ${VIEW}" preserveAspectRatio="none">
+      ${this.type === 'area' ? svg `<path part="area" d="${d} L${VIEW},${VIEW} L0,${VIEW} Z"></path>` : ''}
+      ${shape}
+    </svg>`;
+    }
+}
+__decorate([
+    property({ type: Array })
+], LyraSparkline.prototype, "values", void 0);
+__decorate([
+    property()
+], LyraSparkline.prototype, "type", void 0);
+__decorate([
+    property({ type: Number })
+], LyraSparkline.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], LyraSparkline.prototype, "max", void 0);
+defineElement('sparkline', LyraSparkline);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/sparkline/sparkline.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    inline-size: 6em;
+    block-size: 1.5em;
+    vertical-align: middle;
+  }
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  [part='line'] {
+    fill: none;
+    stroke: var(--lyra-color-brand);
+    stroke-width: 1.5;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+  }
+  [part='area'] {
+    fill: var(--lyra-color-brand);
+    opacity: 0.15;
+    stroke: none;
+  }
+  [part='bar'] {
+    fill: var(--lyra-color-brand);
+  }
+`;

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

@@ -0,0 +1,49 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ToastVariant = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+export type ToastSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+/**
+ * `<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 declare class LyraToastItem extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Auto-dismiss delay in ms. Set to `Infinity` (or <= 0) to disable. */
+    duration: number;
+    /** Visual size. */
+    size: ToastSize;
+    /** Severity/variant. */
+    variant: ToastVariant;
+    /** Show the icon slot. */
+    withIcon: boolean;
+    private timer?;
+    private remaining;
+    private startedAt;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private startTimer;
+    private resumeTimer;
+    private pauseTimer;
+    private clearTimer;
+    /** Hide with animation, then remove from the DOM. */
+    hide(): Promise<void>;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-toast-item': LyraToastItem;
+    }
+}

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

@@ -0,0 +1,123 @@
+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 { defineElement } from '../../internal/prefix.js';
+import { styles } from './toast-item.styles.js';
+const ANIM_MS = 250;
+/**
+ * `<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.remaining = 0;
+        this.startedAt = 0;
+        this.resumeTimer = () => {
+            if (!isFinite(this.duration) || this.duration <= 0 || this.remaining <= 0)
+                return;
+            this.startedAt = performance.now();
+            this.timer = window.setTimeout(() => this.hide(), this.remaining);
+        };
+        this.pauseTimer = () => {
+            if (this.timer !== undefined) {
+                clearTimeout(this.timer);
+                this.timer = undefined;
+                this.remaining -= performance.now() - this.startedAt;
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    firstUpdated() {
+        // Assertive for actionable severities, polite otherwise.
+        this.setAttribute('role', this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'status');
+        requestAnimationFrame(() => {
+            this.setAttribute('data-visible', '');
+            this.emit('lyra-show');
+            window.setTimeout(() => this.emit('lyra-after-show'), ANIM_MS);
+            this.startTimer();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.clearTimer();
+    }
+    startTimer() {
+        if (!isFinite(this.duration) || this.duration <= 0)
+            return;
+        this.remaining = this.duration;
+        this.resumeTimer();
+    }
+    clearTimer() {
+        if (this.timer !== undefined)
+            clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    /** Hide with animation, then remove from the DOM. */
+    async hide() {
+        this.clearTimer();
+        this.emit('lyra-hide');
+        this.removeAttribute('data-visible');
+        await new Promise((r) => window.setTimeout(r, ANIM_MS));
+        this.emit('lyra-after-hide');
+        this.remove();
+    }
+    render() {
+        return html `
+      <div
+        part="toast-item"
+        @pointerenter=${this.pauseTimer}
+        @pointerleave=${this.resumeTimer}
+        @focusin=${this.pauseTimer}
+        @focusout=${this.resumeTimer}
+      >
+        <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="Close" @click=${() => this.hide()}>
+          &times;
+        </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);
+defineElement('toast-item', LyraToastItem);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --accent-width: 4px;
+    --show-duration: 250ms;
+    --hide-duration: 250ms;
+    --padding: var(--lyra-space-m);
+    --accent-color: var(--lyra-color-border);
+  }
+  :host([variant='brand']) {
+    --accent-color: var(--lyra-color-brand);
+  }
+  :host([variant='success']) {
+    --accent-color: var(--lyra-color-success);
+  }
+  :host([variant='warning']) {
+    --accent-color: var(--lyra-color-warning);
+  }
+  :host([variant='danger']) {
+    --accent-color: var(--lyra-color-danger);
+  }
+
+  [part='toast-item'] {
+    position: relative;
+    display: flex;
+    align-items: start;
+    gap: var(--lyra-space-s);
+    inline-size: 100%;
+    padding: var(--padding);
+    padding-inline-start: calc(var(--padding) + var(--accent-width));
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    opacity: 0;
+    transform: translateY(-8px);
+    transition:
+      opacity var(--show-duration) ease,
+      transform var(--show-duration) ease;
+  }
+  :host([data-visible]) [part='toast-item'] {
+    opacity: 1;
+    transform: none;
+  }
+
+  [part='accent'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: var(--accent-width);
+    background: var(--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);
+  }
+  [part='content'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  [part='close-button'] {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--lyra-color-text-quiet);
+    font-size: 1rem;
+    line-height: 1;
+    padding: var(--lyra-space-xs);
+    border-radius: var(--lyra-radius);
+  }
+  [part='close-button']:hover {
+    color: var(--lyra-color-text);
+  }
+`;

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

@@ -0,0 +1,32 @@
+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;
+    }
+}

package/dist/components/toast/toast.js

@@ -0,0 +1,48 @@
+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 { 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);
+defineElement('toast', LyraToast);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    position: fixed;
+    z-index: 9999;
+    display: block;
+    --gap: var(--lyra-space-s);
+    --width: 28rem;
+    pointer-events: none;
+  }
+  [part='stack'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    inline-size: var(--width);
+    max-inline-size: calc(100vw - 2rem);
+  }
+  [part='stack']::slotted(*),
+  ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  :host([placement^='bottom']) [part='stack'] {
+    flex-direction: column-reverse;
+  }
+  :host([placement='top-start']) {
+    inset-block-start: 1rem;
+    inset-inline-start: 1rem;
+  }
+  :host([placement='top-end']) {
+    inset-block-start: 1rem;
+    inset-inline-end: 1rem;
+  }
+  :host([placement='top-center']) {
+    inset-block-start: 1rem;
+    inset-inline: 0;
+    margin-inline: auto;
+  }
+  :host([placement='bottom-start']) {
+    inset-block-end: 1rem;
+    inset-inline-start: 1rem;
+  }
+  :host([placement='bottom-end']) {
+    inset-block-end: 1rem;
+    inset-inline-end: 1rem;
+  }
+  :host([placement='bottom-center']) {
+    inset-block-end: 1rem;
+    inset-inline: 0;
+    margin-inline: auto;
+  }
+`;

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

@@ -0,0 +1,26 @@
+import { type ToastCreateOptions, type ToastPlacement } from './toast.js';
+import type { LyraToastItem } from './toast-item.js';
+import './toast.js';
+export interface ToastOptions extends ToastCreateOptions {
+    message: string;
+    placement?: ToastPlacement;
+    /** Optional action button rendered after the message. */
+    action?: {
+        label: string;
+        onClick: (item: LyraToastItem) => void;
+    };
+}
+export interface ToastHandle {
+    /** Resolves to the created toast item. */
+    item: Promise<LyraToastItem>;
+    /** Dismiss the toast early. */
+    dismiss: () => void;
+}
+/**
+ * Show a toast. Ergonomic convenience over `<lyra-toast>.create()` that mounts
+ * and reuses a single page-level region — the drop-in for `react-hot-toast`.
+ *
+ * @example toast('Saved');
+ * @example toast({ message: 'Deleted', variant: 'danger', action: { label: 'Undo', onClick: undo } });
+ */
+export declare function toast(input: ToastOptions | string): ToastHandle;

package/dist/components/toast/toaster.js

@@ -0,0 +1,41 @@
+import { LyraToast } from './toast.js';
+import './toast.js';
+let region;
+/** Get (or lazily mount) the singleton toast region on `document.body`. */
+function getRegion(placement) {
+    if (!region || !region.isConnected) {
+        region = document.createElement('lyra-toast');
+        document.body.appendChild(region);
+    }
+    if (placement)
+        region.placement = placement;
+    return region;
+}
+/**
+ * Show a toast. Ergonomic convenience over `<lyra-toast>.create()` that mounts
+ * and reuses a single page-level region — the drop-in for `react-hot-toast`.
+ *
+ * @example toast('Saved');
+ * @example toast({ message: 'Deleted', variant: 'danger', action: { label: 'Undo', onClick: undo } });
+ */
+export function toast(input) {
+    const opts = typeof input === 'string' ? { message: input } : input;
+    const item = getRegion(opts.placement)
+        .create(opts.message, opts)
+        .then((el) => {
+        if (opts.action) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.textContent = opts.action.label;
+            btn.addEventListener('click', () => opts.action.onClick(el));
+            el.appendChild(btn);
+        }
+        return el;
+    });
+    return {
+        item,
+        dismiss: () => {
+            void item.then((el) => el.hide());
+        },
+    };
+}

package/dist/internal/a11y.d.ts

@@ -0,0 +1,4 @@
+/** Monotonic unique id, scoped by a short label (e.g. `nextId('listbox')`). */
+export declare const nextId: (scope: string) => string;
+/** Visually-hidden-but-screen-reader-available helper class. */
+export declare const srOnly: import("lit").CSSResult;