@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-toast.mjs

@@ -0,0 +1,917 @@
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, computed, DestroyRef, Injectable, input, ElementRef, Injector, effect, Directive, booleanAttribute, output, viewChild, PLATFORM_ID, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlLoader } from '@slotted/angular/progress-indicator';
+import { createRemovalFocus } from '@slotted/core/focus';
+import { toastMessages } from '@slotted/core/i18n';
+import { createPortalRoot } from '@slotted/core/portal';
+import { createPresence } from '@slotted/core/presence';
+import { createToastStore } from '@slotted/core/toast';
+
+/**
+ * The key that moves focus into the region. Five surveyed implementations ship
+ * a shortcut and no two chose the same key; `F6` is the one two of them chose
+ * for the reason that generalises — it is the landmark-navigation key.
+ */
+const TOAST_HOTKEY = 'F6';
+const FALLBACK = {
+    placement: 'bottom-end',
+    attach: 'portal',
+    stacking: 'list',
+    tone: 'accent',
+    variant: 'raised',
+    priority: 'polite',
+    dismissible: true,
+    swipe: true,
+    progress: false,
+    pauseOnHover: true,
+    pauseWhenHidden: true,
+    limit: 3,
+    duration: 5000,
+    swipeThreshold: 48,
+    hotkey: TOAST_HOTKEY,
+};
+const TOAST_DEFAULTS = new InjectionToken('slotted toast defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once where its messages appear and how long they
+ * stay. A region or a message that states any of them still wins: an explicit
+ * value is never overridden by the token. The region's name and the close
+ * control's come from the language in force (`provideSlotted`).
+ */
+function provideToastDefaults(defaults) {
+    return {
+        provide: TOAST_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a region renders as here, before it states anything of its own. */
+function injectToastDefaults() {
+    return inject(TOAST_DEFAULTS);
+}
+/** What a reader hears when the call did not say. */
+function spokenFrom(input) {
+    if (input.announcement !== undefined)
+        return input.announcement;
+    return [input.title, input.description].filter(Boolean).join('. ');
+}
+/** The store's own fields, and the rest carried whole as the message's payload. */
+function split(input) {
+    const { id, duration, priority, announcement, loading, onStatusChange, ...content } = input;
+    void announcement;
+    return {
+        ...(id === undefined ? {} : { id }),
+        ...(duration === undefined ? {} : { duration }),
+        ...(priority === undefined ? {} : { priority }),
+        ...(loading === undefined ? {} : { loading }),
+        ...(onStatusChange === undefined ? {} : { onStatusChange }),
+        announcement: spokenFrom(input),
+        /* The one field the store reads out of the content: a message a reader is
+           meant to act on is a message no clock may end. */
+        action: content.actions !== undefined,
+        data: content,
+    };
+}
+/**
+ * The imperative facade, and the observable model, which
+ * `docs/component-features.md` §14 asks for in one sentence.
+ *
+ * It is `providedIn: 'root'` because that is the surface Angular Material's
+ * consumers already know: a message is shown from an interceptor, a resolver or
+ * an effect, none of which is anywhere near a component. The reads are signals,
+ * so a zoneless application renders on them without a `markForCheck` anywhere.
+ */
+class SlToastService {
+    defaults = inject(TOAST_DEFAULTS);
+    /** The model a region renders. Also the escape hatch for a page's own host. */
+    store = createToastStore({
+        limit: this.defaults.limit,
+        duration: this.defaults.duration,
+    });
+    snapshot = signal(this.store.snapshot, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    /** The messages on screen, newest first. */
+    visible = computed(() => this.snapshot().visible, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** The messages waiting behind the limit. A page may say how many. */
+    queued = computed(() => this.snapshot().queued, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queued" }] : /* istanbul ignore next */ []));
+    /** Whether every clock is held. */
+    paused = computed(() => this.snapshot().paused, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const stop = this.store.subscribe(() => this.snapshot.set(this.store.snapshot));
+        inject(DestroyRef).onDestroy(() => {
+            stop();
+            this.store.destroy();
+        });
+    }
+    /** Adds a message, or updates the one that already carries this id. */
+    show(input = {}) {
+        return this.store.show(split(input));
+    }
+    /** Changes a message already in the queue, keeping its place. */
+    update(id, input) {
+        this.store.update(id, split(input));
+    }
+    /** Asks for a message to leave, carrying the reason. */
+    dismiss(id, reason = 'programmatic') {
+        this.store.dismiss(id, reason);
+    }
+    /** Asks for every message to leave at once — a route change, a sign-out. */
+    clear(reason = 'clear') {
+        this.store.clear(reason);
+    }
+    pauseAll() {
+        this.store.pauseAll();
+    }
+    resumeAll() {
+        this.store.resumeAll();
+    }
+    /** A message that follows a promise: loading, then success or failure. */
+    promise(promise, input) {
+        return this.store.promise(promise, {
+            loading: split(input.loading),
+            success: typeof input.success === 'function'
+                ? (value) => split(input.success(value))
+                : split(input.success),
+            error: typeof input.error === 'function'
+                ? (reason) => split(input.error(reason))
+                : split(input.error),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The glyph each tone draws: `specs/components/toast/contract.json` holds the
+ * map, and the binding draws it because a stylesheet paints no icon.
+ */
+const TONE_GLYPH = {
+    accent: 'circle-info',
+    secondary: null,
+    success: 'circle-check',
+    warning: 'circle-alert',
+    danger: 'circle-x',
+};
+/** Which way a message is dragged away, given the edge its region sits at. */
+function swipeAxis(placement, direction) {
+    const block = placement.startsWith('top') ? -1 : 1;
+    const rtl = direction === 'rtl';
+    const inline = placement.endsWith('-start')
+        ? rtl
+            ? 1
+            : -1
+        : placement.endsWith('-end')
+            ? rtl
+                ? -1
+                : 1
+            : 0;
+    return { block, inline };
+}
+/**
+ * A message's own height, which is not the height it is drawn at: a closed
+ * pile draws every message at the front one's height, and an opening one
+ * animates it. The override is lifted for the one read, and not at all while
+ * the height is moving, because lifting it then cancels the movement — the
+ * last measurement stands until the transition ends and the observer fires
+ * again. Chrome names the logical property's transition by its physical one.
+ */
+function naturalHeight(item) {
+    const moving = typeof item.getAnimations === 'function' &&
+        item
+            .getAnimations()
+            .some((animation) => ['block-size', 'height', 'width'].includes(animation.transitionProperty ?? ''));
+    if (moving) {
+        const last = Number.parseFloat(item.style.getPropertyValue('--slotted-toast-height'));
+        if (!Number.isNaN(last))
+            return last;
+    }
+    const inline = item.style.blockSize;
+    item.style.blockSize = 'auto';
+    const height = item.getBoundingClientRect().height;
+    item.style.blockSize = inline;
+    return height;
+}
+/**
+ * One message: everything about it that is behaviour rather than markup.
+ *
+ * It is a directive rather than a component so a page that writes its own list
+ * — from `SlToastService.visible()` and nothing else — gets the timer, the
+ * exit, the swipe and the keyboard by putting one attribute on its own `li`.
+ */
+class SlToastItem {
+    message = input.required({ ...(ngDevMode ? { debugName: "message" } : /* istanbul ignore next */ {}), alias: 'slToastItem' });
+    /** How far this message is from the front of the pile. The stylesheet reads it. */
+    index = input(0, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), alias: 'slToastItemIndex' });
+    region = inject(SlToastRegion);
+    host = inject(ElementRef);
+    /**
+     * The message's own injector, handed to a page's body template so the parts
+     * inside it — the mark's glyph above all — read this message and not the
+     * place the template was declared.
+     */
+    injector = inject(Injector);
+    status = signal('entering', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    offset = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    drag = null;
+    tone = computed(() => this.message().data.tone ?? this.region.defaults.tone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * The glyph the tone's mark draws: none while a promise is in flight, when
+     * the mark is `progress-indicator`'s contained loader, and none for
+     * `secondary`, a neutral message with no severity to state.
+     */
+    mark = computed(() => this.message().loading ? null : TONE_GLYPH[this.tone()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []));
+    variant = computed(() => this.message().data.variant ?? this.region.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.status() === 'open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    durationValue = computed(() => {
+        const duration = this.message().duration;
+        return duration > 0 ? `${duration}ms` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "durationValue" }] : /* istanbul ignore next */ []));
+    swipeX = computed(() => {
+        const value = this.offset();
+        return value === null ? null : `${value.x}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeX" }] : /* istanbul ignore next */ []));
+    swipeY = computed(() => {
+        const value = this.offset();
+        return value === null ? null : `${value.y}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeY" }] : /* istanbul ignore next */ []));
+    /**
+     * `packages/core/src/presence` reads the exit the stylesheet declares and
+     * completes it on a timer when the browser never reports one — a backgrounded
+     * tab, a `display: none` ancestor. Ark guesses two hundred milliseconds
+     * instead, and a message caught by any of those cases never leaves.
+     */
+    presence = createPresence({
+        initialPresent: true,
+        skipInitialAnimation: false,
+        onStatusChange: (next) => this.status.set(next),
+        onExitComplete: () => this.region.store.remove(this.message().id),
+    });
+    constructor() {
+        this.presence.setNode(this.host.nativeElement);
+        effect(() => {
+            this.presence.request(this.message().status !== 'closing', 'programmatic');
+        });
+        inject(DestroyRef).onDestroy(() => this.presence.destroy());
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented || event.key !== 'Escape')
+            return;
+        /* Only the message the keyboard is in: a page whose dialog is open keeps
+           its own Escape. */
+        event.stopPropagation();
+        this.region.store.dismiss(this.message().id, 'escape');
+    }
+    onPointerDown(event) {
+        if (!this.region.resolvedSwipe() || event.button !== 0)
+            return;
+        /* A control inside the message is what the pointer came for. */
+        if (event.target.closest('button, a, input, select, textarea'))
+            return;
+        this.drag = { id: event.pointerId, x: event.clientX, y: event.clientY };
+        this.host.nativeElement.setPointerCapture(event.pointerId);
+    }
+    onPointerMove(event) {
+        const start = this.drag;
+        if (!start || start.id !== event.pointerId)
+            return;
+        const element = this.host.nativeElement;
+        const view = element.ownerDocument.defaultView;
+        const axis = swipeAxis(this.region.resolvedPlacement(), view?.getComputedStyle(element).direction ?? 'ltr');
+        /* Only movement toward the edge the region sits at counts. Dragging a
+           message into the page is not a gesture, it is a slip. */
+        const x = axis.inline === 0 ? 0 : Math.max(0, (event.clientX - start.x) * axis.inline);
+        const y = Math.max(0, (event.clientY - start.y) * axis.block);
+        if (!this.dragging() && Math.max(x, y) < 2)
+            return;
+        this.dragging.set(true);
+        this.offset.set({ x: x * axis.inline, y: y * axis.block });
+    }
+    onPointerUp(event) {
+        if (!this.drag || this.drag.id !== event.pointerId)
+            return;
+        const moved = this.offset();
+        const distance = moved === null ? 0 : Math.max(Math.abs(moved.x), Math.abs(moved.y));
+        this.drag = null;
+        this.dragging.set(false);
+        this.offset.set(null);
+        const element = this.host.nativeElement;
+        if (element.hasPointerCapture(event.pointerId))
+            element.releasePointerCapture(event.pointerId);
+        /* Past the threshold the gesture was a dismissal; short of it the message
+           springs back, which is the only way a reader can change their mind. */
+        if (event.type !== 'pointercancel' && distance >= this.region.defaults.swipeThreshold) {
+            this.region.store.dismiss(this.message().id, 'pointer');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToastItem, isStandalone: true, selector: "li[slToastItem]", inputs: { message: { classPropertyName: "message", publicName: "slToastItem", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "slToastItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item", "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "attr.data-tone": "tone()", "attr.data-variant": "variant()", "attr.data-open": "isOpen() ? '' : null", "attr.data-loading": "message().loading ? '' : null", "attr.data-dragging": "dragging() ? '' : null", "style.--slotted-toast-index": "index()", "style.--slotted-toast-duration": "durationValue()", "style.--slotted-toast-swipe-x": "swipeX()", "style.--slotted-toast-swipe-y": "swipeY()" } }, exportAs: ["slToastItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[slToastItem]',
+                    standalone: true,
+                    exportAs: 'slToastItem',
+                    host: {
+                        'data-part': 'item',
+                        tabindex: '-1',
+                        '[attr.data-tone]': 'tone()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-open]': "isOpen() ? '' : null",
+                        '[attr.data-loading]': "message().loading ? '' : null",
+                        '[attr.data-dragging]': "dragging() ? '' : null",
+                        '[style.--slotted-toast-index]': 'index()',
+                        '[style.--slotted-toast-duration]': 'durationValue()',
+                        '[style.--slotted-toast-swipe-x]': 'swipeX()',
+                        '[style.--slotted-toast-swipe-y]': 'swipeY()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "slToastItem", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "slToastItemIndex", required: false }] }] } });
+/**
+ * The place transient messages appear, and the only part of this family a page
+ * renders directly.
+ *
+ * **It is a landmark, not a live region.** A live role on a box holding a Close
+ * and an Undo is read with both buttons inside the sentence, and a region
+ * created in the same task as its text is silent under ARIA 1.2 §6.4. The words
+ * are spoken by `packages/core/src/live-announcer`; this element is what a
+ * reader navigates to, with the hotkey or with their own landmark list.
+ *
+ * **It never takes focus.** The APG's Alert pattern is explicit that an
+ * arriving message must not affect the keyboard, and the whole of this family's
+ * claim on it is one key the reader presses.
+ */
+class SlToastRegion {
+    /** Defaults to the token, then to `bottom-end`. */
+    placement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Defaults to the token, then to `portal`. */
+    attach = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attach" }] : /* istanbul ignore next */ []));
+    /** Defaults to the token, then to `list`. */
+    stacking = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacking" }] : /* istanbul ignore next */ []));
+    swipe = input(undefined, { ...(ngDevMode ? { debugName: "swipe" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    limit = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+    duration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    pauseOnHover = input(undefined, { ...(ngDevMode ? { debugName: "pauseOnHover" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    pauseWhenHidden = input(undefined, { ...(ngDevMode ? { debugName: "pauseWhenHidden" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** The key that moves focus into the region. Defaults to the token. */
+    hotkey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hotkey" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the name
+     * a reader finds the region by (`label`) and what each close control
+     * announces (`close`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The element a portalled region is placed inside. */
+    container = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    /** The queue the page owns. Present at all decides the mode for good. */
+    toasts = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the reason, the originating event and `cancel()`. There is no `[(toasts)]`
+     * because a two-way binding has one slot and cannot carry any of those — the
+     * shape `alert` settled.
+     */
+    toastsChange = output();
+    defaults = injectToastDefaults();
+    /** The family's words in the language in force, with this region's `messages` laid over them. */
+    t = injectMessages(toastMessages, this.messages);
+    service = inject(SlToastService);
+    layer = viewChild.required('layer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layer" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    browser = isPlatformBrowser(inject(PLATFORM_ID));
+    /**
+     * A region the page's own array feeds cannot share the injected service: the
+     * mode is decided once, for the life of the store, and the service's store is
+     * uncontrolled by construction.
+     */
+    ownStore = this.toasts() === undefined
+        ? null
+        : createToastStore({ toasts: this.toasts() ?? [] });
+    store = this.ownStore ?? this.service.store;
+    snapshot = signal(this.store.snapshot, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.snapshot().visible, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    queued = computed(() => this.snapshot().queued, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queued" }] : /* istanbul ignore next */ []));
+    paused = computed(() => this.snapshot().paused, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []));
+    resolvedPlacement = computed(() => this.placement() ?? this.defaults.placement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []));
+    resolvedAttach = computed(() => this.attach() ?? this.defaults.attach, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAttach" }] : /* istanbul ignore next */ []));
+    resolvedStacking = computed(() => this.stacking() ?? this.defaults.stacking, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStacking" }] : /* istanbul ignore next */ []));
+    resolvedSwipe = computed(() => this.swipe() ?? this.defaults.swipe, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSwipe" }] : /* istanbul ignore next */ []));
+    resolvedHotkey = computed(() => this.hotkey() ?? this.defaults.hotkey, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHotkey" }] : /* istanbul ignore next */ []));
+    interacting = { pointer: false, focus: false };
+    /** Where the keyboard was before the hotkey moved it into the region. */
+    cameFrom = null;
+    constructor() {
+        const stop = this.store.subscribe(() => this.snapshot.set(this.store.snapshot));
+        this.store.onRequest((request) => this.toastsChange.emit(request));
+        effect(() => {
+            this.store.configure({
+                limit: this.limit() ?? this.defaults.limit,
+                duration: this.duration() ?? this.defaults.duration,
+                pauseOnHover: this.pauseOnHover() ?? this.defaults.pauseOnHover,
+                pauseWhenHidden: this.pauseWhenHidden() ?? this.defaults.pauseWhenHidden,
+            });
+        });
+        effect(() => {
+            const owned = this.toasts();
+            if (owned !== undefined)
+                this.store.sync(owned);
+        });
+        /**
+         * A portalled region inherits nothing from where it was written, so the
+         * layer carries the theme, the scheme, the density and the direction of the
+         * host it came from. Every surveyed implementation loses them.
+         *
+         * Only in the browser, as the focus effects below: the server's document is
+         * not the page. The region is drawn in its host there, where hydration
+         * expects the view's nodes, and nothing on the server holds focus.
+         */
+        effect((onCleanup) => {
+            const section = this.layer().nativeElement;
+            if (this.resolvedAttach() !== 'portal' || !this.browser)
+                return;
+            const handle = createPortalRoot({
+                origin: this.host.nativeElement,
+                container: this.container() ?? null,
+            });
+            handle.container?.append(section);
+            onCleanup(() => {
+                /* Back where Angular expects it before the layer goes, so the view's
+                   own teardown removes a node whose parent it still knows. */
+                this.host.nativeElement.append(section);
+                handle.release();
+            });
+        });
+        /**
+         * Where the keyboard goes when the message it was in is taken away — the
+         * next message, then the element focus came from. Only React Aria answers
+         * it at all, and only for its own close button.
+         */
+        effect((onCleanup) => {
+            const section = this.layer().nativeElement;
+            if (!this.browser)
+                return;
+            const handle = createRemovalFocus(section, {
+                itemSelector: '[data-part="item"]',
+                fallback: () => this.cameFrom,
+            });
+            onCleanup(() => handle.destroy());
+        });
+        /** The one key this family binds, and the only thing that moves focus here. */
+        effect((onCleanup) => {
+            const section = this.layer().nativeElement;
+            const doc = section.ownerDocument;
+            const hotkey = this.resolvedHotkey();
+            if (!this.browser)
+                return;
+            const onKeyDown = (event) => {
+                const parts = hotkey.toLowerCase().split('+');
+                const key = parts.at(-1) ?? '';
+                const wants = (name) => parts.includes(name);
+                if (event.key.toLowerCase() !== key ||
+                    event.altKey !== wants('alt') ||
+                    event.ctrlKey !== wants('ctrl') ||
+                    event.shiftKey !== wants('shift') ||
+                    event.metaKey !== wants('meta')) {
+                    return;
+                }
+                const first = section.querySelector('[data-part="item"]');
+                if (!first)
+                    return;
+                event.preventDefault();
+                const active = doc.activeElement;
+                this.cameFrom = active instanceof HTMLElement && !section.contains(active) ? active : null;
+                first.focus();
+            };
+            doc.addEventListener('keydown', onKeyDown);
+            onCleanup(() => doc.removeEventListener('keydown', onKeyDown));
+        });
+        /**
+         * Measured, and only for the pile. A column of messages that are not all
+         * the same height cannot be opened from arithmetic alone.
+         *
+         * After render rather than as an `effect`: a component's effect runs
+         * before its view is refreshed, so the messages that just arrived were not
+         * in the list yet and the pile was never measured.
+         */
+        afterRenderEffect((onCleanup) => {
+            const section = this.layer().nativeElement;
+            if (this.resolvedStacking() !== 'stack')
+                return;
+            void this.visible();
+            const list = section.querySelector('[data-part="list"]');
+            const view = section.ownerDocument.defaultView;
+            if (!list || !view || typeof view.ResizeObserver !== 'function')
+                return;
+            const measure = () => {
+                const items = [...list.querySelectorAll('[data-part="item"]')];
+                const gap = Number.parseFloat(view.getComputedStyle(list).rowGap) || 0;
+                let offset = 0;
+                items.forEach((item, index) => {
+                    const height = naturalHeight(item);
+                    item.style.setProperty('--slotted-toast-height', `${height}px`);
+                    item.style.setProperty('--slotted-toast-stack-offset', `${offset}px`);
+                    if (index === 0)
+                        section.style.setProperty('--slotted-toast-front-height', `${height}px`);
+                    offset += height + gap;
+                });
+                /* The open pile's whole height, so its gaps are the region's. */
+                section.style.setProperty('--slotted-toast-stack-height', `${Math.max(0, offset - gap)}px`);
+            };
+            const observer = new view.ResizeObserver(measure);
+            for (const item of list.querySelectorAll('[data-part="item"]'))
+                observer.observe(item);
+            measure();
+            onCleanup(() => observer.disconnect());
+        });
+        inject(DestroyRef).onDestroy(() => {
+            stop();
+            this.ownStore?.destroy();
+        });
+    }
+    /** Sends the keyboard to the newest message. The family never does it alone. */
+    focus() {
+        this.layer().nativeElement.querySelector('[data-part="item"]')?.focus();
+    }
+    onPointer(inside) {
+        this.interacting.pointer = inside;
+        this.report();
+    }
+    onFocus(inside) {
+        this.interacting.focus = inside;
+        this.report();
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.layer().nativeElement.contains(next))
+            return;
+        this.interacting.focus = false;
+        this.report();
+    }
+    report() {
+        this.store.setInteracting(this.interacting.pointer || this.interacting.focus);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastRegion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlToastRegion, isStandalone: true, selector: "sl-toast-region", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, stacking: { classPropertyName: "stacking", publicName: "stacking", isSignal: true, isRequired: false, transformFunction: null }, swipe: { classPropertyName: "swipe", publicName: "swipe", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseWhenHidden: { classPropertyName: "pauseWhenHidden", publicName: "pauseWhenHidden", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, toasts: { classPropertyName: "toasts", publicName: "toasts", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toastsChange: "toastsChange" }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true, isSignal: true }], exportAs: ["slToastRegion"], ngImport: i0, template: `<section
+    #layer
+    data-part="root"
+    data-ui="toast"
+    role="region"
+    tabindex="-1"
+    [attr.aria-label]="t('label')"
+    [attr.data-attach]="resolvedAttach()"
+    [attr.data-expanded]="paused() ? '' : null"
+    [attr.data-placement]="resolvedPlacement()"
+    [attr.data-stacking]="resolvedStacking()"
+    [attr.data-swipe]="resolvedSwipe()"
+    [style.--slotted-toast-count]="visible().length"
+    [style.--slotted-toast-play-state]="paused() ? 'paused' : 'running'"
+    (focusin)="onFocus(true)"
+    (focusout)="onFocusOut($event)"
+    (pointerenter)="onPointer(true)"
+    (pointerleave)="onPointer(false)"
+  >
+    <ol data-part="list">
+      @for (message of visible(); track message.id; let index = $index) {
+        <li [slToastItem]="message" [slToastItemIndex]="index" #item="slToastItem">
+          @if (message.data.body; as body) {
+            <ng-container
+              [ngTemplateOutlet]="body"
+              [ngTemplateOutletContext]="{ $implicit: message }"
+              [ngTemplateOutletInjector]="item.injector"
+            />
+          } @else {
+            @if (!message.data.hideIcon && (message.loading || item.mark())) {
+              <span aria-hidden="true" data-part="icon">
+                @if (message.loading) {
+                  <div
+                    slLoader
+                    contained
+                    decorative
+                    [delay]="0"
+                    [minDuration]="0"
+                    [tone]="item.tone()"
+                  ></div>
+                } @else if (item.mark(); as glyph) {
+                  <span slIcon><svg slGlyph [name]="glyph" solid></svg></span>
+                }
+              </span>
+            }
+            <div data-part="content">
+              @if (message.data.title) {
+                <div data-part="title">{{ message.data.title }}</div>
+              }
+              @if (message.data.description) {
+                <p data-part="description">{{ message.data.description }}</p>
+              }
+            </div>
+            @if (message.data.dismissible ?? defaults.dismissible) {
+              <button
+                type="button"
+                data-part="close"
+                [attr.aria-label]="t('close')"
+                (click)="store.dismiss(message.id, 'dismiss')"
+              >
+                <span slIcon><svg slGlyph name="x"></svg></span>
+              </button>
+            }
+            @if (message.data.actions; as actions) {
+              <div data-part="actions">
+                <ng-container
+                  [ngTemplateOutlet]="actions"
+                  [ngTemplateOutletContext]="{ $implicit: message }"
+                />
+              </div>
+            }
+            @if ((message.data.progress ?? defaults.progress) && message.duration > 0) {
+              <div aria-hidden="true" data-part="progress"></div>
+            }
+          }
+        </li>
+      }
+    </ol>
+  </section>`, isInline: true, styles: ["@layer slotted.components{[data-ui=toast][data-part=root]{--_offset: var(--slotted-toast-offset, var(--slotted-space-6, 1rem));--_measure: var(--slotted-toast-measure, 24rem);--_gap: var(--slotted-toast-gap, var(--slotted-space-5, .75rem));--_stack-step: var(--slotted-toast-stack-step, var(--slotted-space-3, .375rem));--_stack-fade: var(--slotted-toast-stack-fade, .15);--_enter-shift: var(--slotted-space-7, 1.25rem);box-sizing:border-box;container-name:slotted-toast;container-type:inline-size;inline-size:min(var(--_measure),calc(100% - 2 * var(--_offset)));position:fixed;z-index:var(--slotted-z-index-toast, 1200);pointer-events:none}[data-ui=toast][data-part=root][data-attach=inline]{position:absolute}[data-ui=toast][data-part=root][data-placement^=top]{inset-block-start:var(--_offset)}[data-ui=toast][data-part=root][data-placement^=bottom]{inset-block-end:var(--_offset)}[data-ui=toast][data-part=root][data-placement$=-start]{inset-inline-start:var(--_offset)}[data-ui=toast][data-part=root][data-placement$=-end]{inset-inline-end:var(--_offset)}[data-ui=toast][data-part=root][data-placement=top],[data-ui=toast][data-part=root][data-placement=bottom]{inset-inline:var(--_offset);margin-inline:auto}[data-ui=toast]>[data-part=list]{display:flex;flex-direction:column;gap:var(--_gap);list-style:none;margin:0;padding:0;pointer-events:none}[data-ui=toast][data-placement^=bottom]>[data-part=list]{flex-direction:column-reverse}[data-ui=toast][data-expanded]>[data-part=list]{pointer-events:auto}[data-ui=toast]>[data-part=list]>[data-part=item]{--_solid: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_tone-surface: var(--slotted-tone-accent-surface);--_tone-border: var(--slotted-tone-accent-border);--_tone-text: var(--slotted-tone-accent-text);--_ground: var(--slotted-toast-surface, var(--slotted-surface-raised, #ffffff));--_edge: var(--slotted-toast-border-color, var(--slotted-border-subtle, #e2e8f0));--_ink: var(--slotted-toast-text, var(--slotted-text, #0f172a));--_ink-muted: var(--slotted-toast-text-muted, var(--slotted-text-muted, #5b6b7f));--_mark: var(--_tone-text);--_state-hover: color-mix( in oklab, currentcolor var(--slotted-toast-state-layer-hover, 10%), transparent );--_state-active: color-mix( in oklab, currentcolor var(--slotted-toast-state-layer-active, 16%), transparent );--_font-size: var(--slotted-control-font-size-md, 13px);--_glyph-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_mark-size: round(nearest, 1.2em, 2px);--_line-height: var(--slotted-line-height-md, 1.5);--_inset-block: var(--slotted-toast-padding-block, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-toast-padding-inline, var(--slotted-space-6, 1rem));--_column-gap: var(--slotted-toast-column-gap, var(--slotted-space-4, .5rem));--_row-gap: var(--slotted-toast-row-gap, var(--slotted-space-5, .75rem));--_text-gap: var(--slotted-toast-text-gap, var(--slotted-space-2, .25rem));--_radius: var(--slotted-toast-radius, var(--slotted-radius-lg, 8px));--_border-width: var(--slotted-toast-border-width, var(--slotted-border-width-thin, 1px));--_close-size: var( --slotted-toast-close-size, max( var(--slotted-target-min, 24px), min(calc(var(--_glyph-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) ) );--_progress-size: var(--slotted-toast-progress-size, var(--slotted-space-1, .125rem));background-color:var(--_ground);border:var(--_border-width) solid var(--_edge);border-radius:var(--_radius);box-shadow:var(--slotted-toast-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--_ink);column-gap:0;display:grid;font-family:var(--slotted-toast-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto;line-height:round(nearest,calc(var(--_line-height) * 1em),2px);pointer-events:auto;position:relative;overflow:hidden;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);row-gap:var(--_row-gap);opacity:0;translate:0 var(--_enter-shift);transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=toast][data-placement^=top]>[data-part=list]>[data-part=item]{translate:0 calc(-1 * var(--_enter-shift))}[data-ui=toast]>[data-part=list]>[data-part=item][data-open]{opacity:1;translate:0;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_tone-surface: var(--slotted-tone-accent-surface);--_tone-border: var(--slotted-tone-accent-border);--_tone-text: var(--slotted-tone-accent-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_on-solid: var(--slotted-tone-secondary-on-solid);--_tone-surface: var(--slotted-tone-secondary-surface);--_tone-border: var(--slotted-tone-secondary-border);--_tone-text: var(--slotted-tone-secondary-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_on-solid: var(--slotted-tone-success-on-solid);--_tone-surface: var(--slotted-tone-success-surface);--_tone-border: var(--slotted-tone-success-border);--_tone-text: var(--slotted-tone-success-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_on-solid: var(--slotted-tone-warning-on-solid);--_tone-surface: var(--slotted-tone-warning-surface);--_tone-border: var(--slotted-tone-warning-border);--_tone-text: var(--slotted-tone-warning-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_on-solid: var(--slotted-tone-danger-on-solid);--_tone-surface: var(--slotted-tone-danger-surface);--_tone-border: var(--slotted-tone-danger-border);--_tone-text: var(--slotted-tone-danger-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=soft]{--_ground: var(--_tone-surface);--_edge: var(--_tone-border);--_ink: var(--_tone-text);--_ink-muted: var(--_tone-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=solid]{--_ground: var(--_solid);--_edge: var(--_solid);--_ink: var(--_on-solid);--_ink-muted: var(--_on-solid);--_mark: var(--_on-solid)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=icon]{--slotted-icon-size: calc(var(--_mark-size) * 12 / 11);--slotted-progress-indicator-size: var(--_mark-size);--slotted-progress-indicator-indicator-color: var(--_mark);--slotted-progress-indicator-track-color: color-mix(in oklab, var(--_mark) 24%, var(--_ground));align-items:center;align-self:baseline;block-size:var(--_mark-size);color:var(--_mark);contain:layout;display:flex;grid-column:1;grid-row:1;inline-size:var(--_mark-size);inset-block-start:round(nearest,(var(--_mark-size) - 1cap) / 2,1px);justify-content:center;margin-block-start:calc(-1 * var(--_mark-size));margin-inline-end:var(--_column-gap);position:relative}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=content]{align-self:baseline;display:grid;grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);min-inline-size:0;row-gap:var(--_text-gap)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=content]>[data-part=title]{font-family:var( --slotted-toast-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-weight:var(--slotted-toast-title-font-weight, var(--slotted-font-weight-semibold, 600));margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=content]>[data-part=description]{color:var(--_ink-muted);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toast-actions-gap, var(--slotted-space-3, .375rem));grid-column:2;grid-row:2;min-inline-size:0}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]{--slotted-icon-size: var(--_glyph-size);align-items:center;align-self:start;appearance:none;background-color:transparent;block-size:var(--_close-size);border:0;border-radius:var(--slotted-toast-close-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;flex:none;font:inherit;grid-column:3;grid-row:1;inline-size:var(--_close-size);justify-content:center;margin-block-end:calc((1lh - var(--_close-size)) / 2);margin-block-start:calc((1lh - var(--_close-size)) / 2);margin-inline-end:calc((1lh - var(--_close-size)) / 2);margin-inline-start:var(--_column-gap);padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:hover{background-color:var(--_state-hover)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:active{background-color:var(--_state-active)}@media(pointer:coarse){[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]{position:relative}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:focus-visible,[data-ui=toast]>[data-part=list]>[data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:focus-visible{outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=toast]>[data-part=list]>[data-part=item]:focus-visible{outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=solid]>[data-part=close]:focus-visible{box-shadow:inset 0 0 0 calc(2 * var(--slotted-focus-ring-width, 2px)) var(--_on-solid)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=progress]{animation-duration:var(--slotted-toast-duration, var(--slotted-duration-long));animation-fill-mode:forwards;animation-name:slotted-toast-countdown;animation-play-state:var(--slotted-toast-play-state, running);animation-timing-function:linear;background-color:var(--_solid);block-size:var(--_progress-size);inset-block-end:0;inset-inline-start:0;position:absolute}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=solid]>[data-part=progress]{background-color:var(--_on-solid);opacity:.7}@keyframes slotted-toast-countdown{0%{inline-size:100%}to{inline-size:0%}}[data-ui=toast][data-stacking=stack]>[data-part=list]{display:block;position:relative}[data-ui=toast][data-stacking=stack]>[data-part=list]>[data-part=item]{block-size:var(--slotted-toast-front-height, auto);inset-inline:0;position:absolute;z-index:calc(var(--slotted-toast-count, 1) - var(--slotted-toast-index, 0));transition:block-size var(--slotted-duration-medium) var(--slotted-easing-standard),opacity var(--slotted-duration-medium) var(--slotted-easing-standard),translate var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=toast][data-stacking=stack]>[data-part=list]>[data-part=item][data-open]{opacity:calc(1 - min(var(--slotted-toast-index, 0),2) * var(--_stack-fade))}[data-ui=toast][data-stacking=stack][data-placement^=bottom]>[data-part=list]>[data-part=item]{inset-block-end:0;translate:0 calc(-1 * var(--slotted-toast-index, 0) * var(--_stack-step))}[data-ui=toast][data-stacking=stack][data-placement^=top]>[data-part=list]>[data-part=item]{inset-block-start:0;translate:0 calc(var(--slotted-toast-index, 0) * var(--_stack-step))}[data-ui=toast][data-stacking=stack][data-expanded]>[data-part=list]>[data-part=item]{block-size:var(--slotted-toast-height, auto)}[data-ui=toast][data-stacking=stack][data-expanded]>[data-part=list]{block-size:var(--slotted-toast-stack-height, auto)}[data-ui=toast][data-stacking=stack][data-expanded]>[data-part=list]>[data-part=item][data-open]{opacity:1}[data-ui=toast][data-stacking=stack][data-expanded][data-placement^=bottom]>[data-part=list]>[data-part=item]{translate:0 calc(-1 * var(--slotted-toast-stack-offset, 0px))}[data-ui=toast][data-stacking=stack][data-expanded][data-placement^=top]>[data-part=list]>[data-part=item]{translate:0 var(--slotted-toast-stack-offset, 0px)}[data-ui=toast][data-stacking=stack]>[data-part=list]>[data-part=item]>*{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=toast][data-stacking=stack]:not([data-expanded]) [data-part=item]>*{opacity:calc(1 - min(1,var(--slotted-toast-index, 0)))}[data-ui=toast]>[data-part=list]>[data-part=item][data-dragging]{cursor:grabbing;transition:none;translate:var(--slotted-toast-swipe-x, 0px) var(--slotted-toast-swipe-y, 0px);touch-action:none;-webkit-user-select:none;user-select:none}[data-ui=toast][data-swipe=true]>[data-part=list]>[data-part=item]{touch-action:none}@container slotted-toast (max-width: 20rem){[data-ui=toast]>[data-part=list]>[data-part=item]{--_inset-block: var(--slotted-toast-padding-block, var(--slotted-space-4, .5rem));--_inset-inline: var(--slotted-toast-padding-inline, var(--slotted-space-5, .75rem))}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=actions]{align-items:flex-start;flex-direction:column}}@media(forced-colors:active){[data-ui=toast]>[data-part=list]>[data-part=item]{border-color:CanvasText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=icon]{color:CanvasText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]{color:CanvasText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:hover,[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:active{background-color:Highlight;color:HighlightText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=progress]{background-color:CanvasText;opacity:1}}@media(prefers-reduced-motion:reduce){[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=progress]{animation-name:none;inline-size:100%}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlLoader, selector: "[slLoader]", inputs: ["contained"], exportAs: ["slLoader"] }, { kind: "directive", type: SlToastItem, selector: "li[slToastItem]", inputs: ["slToastItem", "slToastItemIndex"], exportAs: ["slToastItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastRegion, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-toast-region', standalone: true, exportAs: 'slToastRegion', imports: [NgTemplateOutlet, SlGlyph, SlIcon, SlLoader, SlToastItem], template: `<section
+    #layer
+    data-part="root"
+    data-ui="toast"
+    role="region"
+    tabindex="-1"
+    [attr.aria-label]="t('label')"
+    [attr.data-attach]="resolvedAttach()"
+    [attr.data-expanded]="paused() ? '' : null"
+    [attr.data-placement]="resolvedPlacement()"
+    [attr.data-stacking]="resolvedStacking()"
+    [attr.data-swipe]="resolvedSwipe()"
+    [style.--slotted-toast-count]="visible().length"
+    [style.--slotted-toast-play-state]="paused() ? 'paused' : 'running'"
+    (focusin)="onFocus(true)"
+    (focusout)="onFocusOut($event)"
+    (pointerenter)="onPointer(true)"
+    (pointerleave)="onPointer(false)"
+  >
+    <ol data-part="list">
+      @for (message of visible(); track message.id; let index = $index) {
+        <li [slToastItem]="message" [slToastItemIndex]="index" #item="slToastItem">
+          @if (message.data.body; as body) {
+            <ng-container
+              [ngTemplateOutlet]="body"
+              [ngTemplateOutletContext]="{ $implicit: message }"
+              [ngTemplateOutletInjector]="item.injector"
+            />
+          } @else {
+            @if (!message.data.hideIcon && (message.loading || item.mark())) {
+              <span aria-hidden="true" data-part="icon">
+                @if (message.loading) {
+                  <div
+                    slLoader
+                    contained
+                    decorative
+                    [delay]="0"
+                    [minDuration]="0"
+                    [tone]="item.tone()"
+                  ></div>
+                } @else if (item.mark(); as glyph) {
+                  <span slIcon><svg slGlyph [name]="glyph" solid></svg></span>
+                }
+              </span>
+            }
+            <div data-part="content">
+              @if (message.data.title) {
+                <div data-part="title">{{ message.data.title }}</div>
+              }
+              @if (message.data.description) {
+                <p data-part="description">{{ message.data.description }}</p>
+              }
+            </div>
+            @if (message.data.dismissible ?? defaults.dismissible) {
+              <button
+                type="button"
+                data-part="close"
+                [attr.aria-label]="t('close')"
+                (click)="store.dismiss(message.id, 'dismiss')"
+              >
+                <span slIcon><svg slGlyph name="x"></svg></span>
+              </button>
+            }
+            @if (message.data.actions; as actions) {
+              <div data-part="actions">
+                <ng-container
+                  [ngTemplateOutlet]="actions"
+                  [ngTemplateOutletContext]="{ $implicit: message }"
+                />
+              </div>
+            }
+            @if ((message.data.progress ?? defaults.progress) && message.duration > 0) {
+              <div aria-hidden="true" data-part="progress"></div>
+            }
+          }
+        </li>
+      }
+    </ol>
+  </section>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents' }, styles: ["@layer slotted.components{[data-ui=toast][data-part=root]{--_offset: var(--slotted-toast-offset, var(--slotted-space-6, 1rem));--_measure: var(--slotted-toast-measure, 24rem);--_gap: var(--slotted-toast-gap, var(--slotted-space-5, .75rem));--_stack-step: var(--slotted-toast-stack-step, var(--slotted-space-3, .375rem));--_stack-fade: var(--slotted-toast-stack-fade, .15);--_enter-shift: var(--slotted-space-7, 1.25rem);box-sizing:border-box;container-name:slotted-toast;container-type:inline-size;inline-size:min(var(--_measure),calc(100% - 2 * var(--_offset)));position:fixed;z-index:var(--slotted-z-index-toast, 1200);pointer-events:none}[data-ui=toast][data-part=root][data-attach=inline]{position:absolute}[data-ui=toast][data-part=root][data-placement^=top]{inset-block-start:var(--_offset)}[data-ui=toast][data-part=root][data-placement^=bottom]{inset-block-end:var(--_offset)}[data-ui=toast][data-part=root][data-placement$=-start]{inset-inline-start:var(--_offset)}[data-ui=toast][data-part=root][data-placement$=-end]{inset-inline-end:var(--_offset)}[data-ui=toast][data-part=root][data-placement=top],[data-ui=toast][data-part=root][data-placement=bottom]{inset-inline:var(--_offset);margin-inline:auto}[data-ui=toast]>[data-part=list]{display:flex;flex-direction:column;gap:var(--_gap);list-style:none;margin:0;padding:0;pointer-events:none}[data-ui=toast][data-placement^=bottom]>[data-part=list]{flex-direction:column-reverse}[data-ui=toast][data-expanded]>[data-part=list]{pointer-events:auto}[data-ui=toast]>[data-part=list]>[data-part=item]{--_solid: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_tone-surface: var(--slotted-tone-accent-surface);--_tone-border: var(--slotted-tone-accent-border);--_tone-text: var(--slotted-tone-accent-text);--_ground: var(--slotted-toast-surface, var(--slotted-surface-raised, #ffffff));--_edge: var(--slotted-toast-border-color, var(--slotted-border-subtle, #e2e8f0));--_ink: var(--slotted-toast-text, var(--slotted-text, #0f172a));--_ink-muted: var(--slotted-toast-text-muted, var(--slotted-text-muted, #5b6b7f));--_mark: var(--_tone-text);--_state-hover: color-mix( in oklab, currentcolor var(--slotted-toast-state-layer-hover, 10%), transparent );--_state-active: color-mix( in oklab, currentcolor var(--slotted-toast-state-layer-active, 16%), transparent );--_font-size: var(--slotted-control-font-size-md, 13px);--_glyph-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_mark-size: round(nearest, 1.2em, 2px);--_line-height: var(--slotted-line-height-md, 1.5);--_inset-block: var(--slotted-toast-padding-block, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-toast-padding-inline, var(--slotted-space-6, 1rem));--_column-gap: var(--slotted-toast-column-gap, var(--slotted-space-4, .5rem));--_row-gap: var(--slotted-toast-row-gap, var(--slotted-space-5, .75rem));--_text-gap: var(--slotted-toast-text-gap, var(--slotted-space-2, .25rem));--_radius: var(--slotted-toast-radius, var(--slotted-radius-lg, 8px));--_border-width: var(--slotted-toast-border-width, var(--slotted-border-width-thin, 1px));--_close-size: var( --slotted-toast-close-size, max( var(--slotted-target-min, 24px), min(calc(var(--_glyph-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) ) );--_progress-size: var(--slotted-toast-progress-size, var(--slotted-space-1, .125rem));background-color:var(--_ground);border:var(--_border-width) solid var(--_edge);border-radius:var(--_radius);box-shadow:var(--slotted-toast-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--_ink);column-gap:0;display:grid;font-family:var(--slotted-toast-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto;line-height:round(nearest,calc(var(--_line-height) * 1em),2px);pointer-events:auto;position:relative;overflow:hidden;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);row-gap:var(--_row-gap);opacity:0;translate:0 var(--_enter-shift);transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=toast][data-placement^=top]>[data-part=list]>[data-part=item]{translate:0 calc(-1 * var(--_enter-shift))}[data-ui=toast]>[data-part=list]>[data-part=item][data-open]{opacity:1;translate:0;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_tone-surface: var(--slotted-tone-accent-surface);--_tone-border: var(--slotted-tone-accent-border);--_tone-text: var(--slotted-tone-accent-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=secondary]{--_solid: var(--slotted-tone-secondary-solid);--_on-solid: var(--slotted-tone-secondary-on-solid);--_tone-surface: var(--slotted-tone-secondary-surface);--_tone-border: var(--slotted-tone-secondary-border);--_tone-text: var(--slotted-tone-secondary-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_on-solid: var(--slotted-tone-success-on-solid);--_tone-surface: var(--slotted-tone-success-surface);--_tone-border: var(--slotted-tone-success-border);--_tone-text: var(--slotted-tone-success-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_on-solid: var(--slotted-tone-warning-on-solid);--_tone-surface: var(--slotted-tone-warning-surface);--_tone-border: var(--slotted-tone-warning-border);--_tone-text: var(--slotted-tone-warning-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_on-solid: var(--slotted-tone-danger-on-solid);--_tone-surface: var(--slotted-tone-danger-surface);--_tone-border: var(--slotted-tone-danger-border);--_tone-text: var(--slotted-tone-danger-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=soft]{--_ground: var(--_tone-surface);--_edge: var(--_tone-border);--_ink: var(--_tone-text);--_ink-muted: var(--_tone-text)}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=solid]{--_ground: var(--_solid);--_edge: var(--_solid);--_ink: var(--_on-solid);--_ink-muted: var(--_on-solid);--_mark: var(--_on-solid)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=icon]{--slotted-icon-size: calc(var(--_mark-size) * 12 / 11);--slotted-progress-indicator-size: var(--_mark-size);--slotted-progress-indicator-indicator-color: var(--_mark);--slotted-progress-indicator-track-color: color-mix(in oklab, var(--_mark) 24%, var(--_ground));align-items:center;align-self:baseline;block-size:var(--_mark-size);color:var(--_mark);contain:layout;display:flex;grid-column:1;grid-row:1;inline-size:var(--_mark-size);inset-block-start:round(nearest,(var(--_mark-size) - 1cap) / 2,1px);justify-content:center;margin-block-start:calc(-1 * var(--_mark-size));margin-inline-end:var(--_column-gap);position:relative}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=content]{align-self:baseline;display:grid;grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);min-inline-size:0;row-gap:var(--_text-gap)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=content]>[data-part=title]{font-family:var( --slotted-toast-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-weight:var(--slotted-toast-title-font-weight, var(--slotted-font-weight-semibold, 600));margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=content]>[data-part=description]{color:var(--_ink-muted);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toast-actions-gap, var(--slotted-space-3, .375rem));grid-column:2;grid-row:2;min-inline-size:0}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]{--slotted-icon-size: var(--_glyph-size);align-items:center;align-self:start;appearance:none;background-color:transparent;block-size:var(--_close-size);border:0;border-radius:var(--slotted-toast-close-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;flex:none;font:inherit;grid-column:3;grid-row:1;inline-size:var(--_close-size);justify-content:center;margin-block-end:calc((1lh - var(--_close-size)) / 2);margin-block-start:calc((1lh - var(--_close-size)) / 2);margin-inline-end:calc((1lh - var(--_close-size)) / 2);margin-inline-start:var(--_column-gap);padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:hover{background-color:var(--_state-hover)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:active{background-color:var(--_state-active)}@media(pointer:coarse){[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]{position:relative}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:focus-visible,[data-ui=toast]>[data-part=list]>[data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:focus-visible{outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=toast]>[data-part=list]>[data-part=item]:focus-visible{outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=solid]>[data-part=close]:focus-visible{box-shadow:inset 0 0 0 calc(2 * var(--slotted-focus-ring-width, 2px)) var(--_on-solid)}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=progress]{animation-duration:var(--slotted-toast-duration, var(--slotted-duration-long));animation-fill-mode:forwards;animation-name:slotted-toast-countdown;animation-play-state:var(--slotted-toast-play-state, running);animation-timing-function:linear;background-color:var(--_solid);block-size:var(--_progress-size);inset-block-end:0;inset-inline-start:0;position:absolute}[data-ui=toast]>[data-part=list]>[data-part=item][data-variant=solid]>[data-part=progress]{background-color:var(--_on-solid);opacity:.7}@keyframes slotted-toast-countdown{0%{inline-size:100%}to{inline-size:0%}}[data-ui=toast][data-stacking=stack]>[data-part=list]{display:block;position:relative}[data-ui=toast][data-stacking=stack]>[data-part=list]>[data-part=item]{block-size:var(--slotted-toast-front-height, auto);inset-inline:0;position:absolute;z-index:calc(var(--slotted-toast-count, 1) - var(--slotted-toast-index, 0));transition:block-size var(--slotted-duration-medium) var(--slotted-easing-standard),opacity var(--slotted-duration-medium) var(--slotted-easing-standard),translate var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=toast][data-stacking=stack]>[data-part=list]>[data-part=item][data-open]{opacity:calc(1 - min(var(--slotted-toast-index, 0),2) * var(--_stack-fade))}[data-ui=toast][data-stacking=stack][data-placement^=bottom]>[data-part=list]>[data-part=item]{inset-block-end:0;translate:0 calc(-1 * var(--slotted-toast-index, 0) * var(--_stack-step))}[data-ui=toast][data-stacking=stack][data-placement^=top]>[data-part=list]>[data-part=item]{inset-block-start:0;translate:0 calc(var(--slotted-toast-index, 0) * var(--_stack-step))}[data-ui=toast][data-stacking=stack][data-expanded]>[data-part=list]>[data-part=item]{block-size:var(--slotted-toast-height, auto)}[data-ui=toast][data-stacking=stack][data-expanded]>[data-part=list]{block-size:var(--slotted-toast-stack-height, auto)}[data-ui=toast][data-stacking=stack][data-expanded]>[data-part=list]>[data-part=item][data-open]{opacity:1}[data-ui=toast][data-stacking=stack][data-expanded][data-placement^=bottom]>[data-part=list]>[data-part=item]{translate:0 calc(-1 * var(--slotted-toast-stack-offset, 0px))}[data-ui=toast][data-stacking=stack][data-expanded][data-placement^=top]>[data-part=list]>[data-part=item]{translate:0 var(--slotted-toast-stack-offset, 0px)}[data-ui=toast][data-stacking=stack]>[data-part=list]>[data-part=item]>*{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=toast][data-stacking=stack]:not([data-expanded]) [data-part=item]>*{opacity:calc(1 - min(1,var(--slotted-toast-index, 0)))}[data-ui=toast]>[data-part=list]>[data-part=item][data-dragging]{cursor:grabbing;transition:none;translate:var(--slotted-toast-swipe-x, 0px) var(--slotted-toast-swipe-y, 0px);touch-action:none;-webkit-user-select:none;user-select:none}[data-ui=toast][data-swipe=true]>[data-part=list]>[data-part=item]{touch-action:none}@container slotted-toast (max-width: 20rem){[data-ui=toast]>[data-part=list]>[data-part=item]{--_inset-block: var(--slotted-toast-padding-block, var(--slotted-space-4, .5rem));--_inset-inline: var(--slotted-toast-padding-inline, var(--slotted-space-5, .75rem))}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=actions]{align-items:flex-start;flex-direction:column}}@media(forced-colors:active){[data-ui=toast]>[data-part=list]>[data-part=item]{border-color:CanvasText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=icon]{color:CanvasText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]{color:CanvasText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:hover,[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=close]:enabled:active{background-color:Highlight;color:HighlightText}[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=progress]{background-color:CanvasText;opacity:1}}@media(prefers-reduced-motion:reduce){[data-ui=toast]>[data-part=list]>[data-part=item]>[data-part=progress]{animation-name:none;inline-size:100%}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], attach: [{ type: i0.Input, args: [{ isSignal: true, alias: "attach", required: false }] }], stacking: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacking", required: false }] }], swipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipe", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], pauseWhenHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseWhenHidden", required: false }] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], toasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasts", required: false }] }], toastsChange: [{ type: i0.Output, args: ["toastsChange"] }], layer: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }] } });
+
+/**
+ * The parts, for a page that writes its own message body inside
+ * `<ng-template slToastBody>` rather than taking the family's.
+ *
+ * They carry the part name and nothing else: the geometry, the tone and the
+ * states are the item's and the region's, and a directive that repeated any of
+ * them would be a second place to change them. The two that draw a glyph read
+ * it from the item they sit in.
+ */
+/**
+ * The tone's mark, or the page's own. Content the page writes replaces it;
+ * with none, the item's glyph is drawn, `progress-indicator`'s contained
+ * loader while the message waits, and nothing for `secondary`.
+ */
+class SlToastIcon {
+    item = inject(SlToastItem, { optional: true });
+    /* Outside an item there is no tone, and the default tone's glyph stands. */
+    mark = computed(() => (this.item === null ? 'circle-info' : this.item.mark()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this.item?.message().loading ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    tone = computed(() => this.item?.tone() ?? 'accent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlToastIcon, isStandalone: true, selector: "[slToastIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, exportAs: ["slToastIcon"], ngImport: i0, template: `<ng-content>
+    @if (loading()) {
+      <div slLoader contained decorative [delay]="0" [minDuration]="0" [tone]="tone()"></div>
+    } @else if (mark(); as glyph) {
+      <span slIcon><svg slGlyph [name]="glyph" solid></svg></span>
+    }
+  </ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlLoader, selector: "[slLoader]", inputs: ["contained"], exportAs: ["slLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slToastIcon]',
+                    standalone: true,
+                    exportAs: 'slToastIcon',
+                    imports: [SlGlyph, SlIcon, SlLoader],
+                    template: `<ng-content>
+    @if (loading()) {
+      <div slLoader contained decorative [delay]="0" [minDuration]="0" [tone]="tone()"></div>
+    } @else if (mark(); as glyph) {
+      <span slIcon><svg slGlyph [name]="glyph" solid></svg></span>
+    }
+  </ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-part': 'icon', 'aria-hidden': 'true' },
+                }]
+        }] });
+/** The words, and the one column that is allowed to shrink. */
+class SlToastContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToastContent, isStandalone: true, selector: "[slToastContent]", host: { attributes: { "data-part": "content" } }, exportAs: ["slToastContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToastContent]',
+                    standalone: true,
+                    exportAs: 'slToastContent',
+                    host: { 'data-part': 'content' },
+                }]
+        }] });
+/**
+ * The message's name. Written on the page's own element, and not a heading: a
+ * message that is gone in five seconds is not a section of the document.
+ */
+class SlToastTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToastTitle, isStandalone: true, selector: "[slToastTitle]", host: { attributes: { "data-part": "title" } }, exportAs: ["slToastTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToastTitle]',
+                    standalone: true,
+                    exportAs: 'slToastTitle',
+                    host: { 'data-part': 'title' },
+                }]
+        }] });
+/** The message. Written on a `p`, which is what a sentence of prose is. */
+class SlToastDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToastDescription, isStandalone: true, selector: "[slToastDescription]", host: { attributes: { "data-part": "description" } }, exportAs: ["slToastDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToastDescription]',
+                    standalone: true,
+                    exportAs: 'slToastDescription',
+                    host: { 'data-part': 'description' },
+                }]
+        }] });
+/**
+ * The controls that act on the message. What goes in is the page's own
+ * buttons: `button` already owns what a button is.
+ */
+class SlToastActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToastActions, isStandalone: true, selector: "[slToastActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slToastActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToastActions]',
+                    standalone: true,
+                    exportAs: 'slToastActions',
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/** The control that puts the message away. A real button with a real name. */
+class SlToastClose {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlToastClose, isStandalone: true, selector: "button[slToastClose]", host: { attributes: { "data-part": "close", "type": "button" } }, exportAs: ["slToastClose"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph name="x"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastClose, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slToastClose]',
+                    standalone: true,
+                    exportAs: 'slToastClose',
+                    imports: [SlGlyph, SlIcon],
+                    /* The cross is drawn unless the consumer wrote content of their own. */
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph name="x"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-part': 'close', type: 'button' },
+                }]
+        }] });
+/** How much of the duration is left, drawn from the number the timer reads. */
+class SlToastProgress {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastProgress, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToastProgress, isStandalone: true, selector: "[slToastProgress]", host: { attributes: { "data-part": "progress", "aria-hidden": "true" } }, exportAs: ["slToastProgress"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToastProgress, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToastProgress]',
+                    standalone: true,
+                    exportAs: 'slToastProgress',
+                    host: { 'data-part': 'progress', 'aria-hidden': 'true' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlToastActions, SlToastClose, SlToastContent, SlToastDescription, SlToastIcon, SlToastItem, SlToastProgress, SlToastRegion, SlToastService, SlToastTitle, TOAST_DEFAULTS, TOAST_HOTKEY, injectToastDefaults, provideToastDefaults };
+//# sourceMappingURL=slotted-angular-toast.mjs.map