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

package/fesm2022/slotted-angular-dialog.mjs

@@ -0,0 +1,980 @@
+import { injectMessages } from '@slotted/angular/i18n';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createFocusScope } from '@slotted/core/focus';
+import { dialogMessages } from '@slotted/core/i18n';
+import { createPortalRoot } from '@slotted/core/portal';
+import { createPresence } from '@slotted/core/presence';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, model, input, booleanAttribute, output, ElementRef, DestroyRef, HostAttributeToken, viewChild, signal, ChangeDetectorRef, computed, effect, Directive, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+const FALLBACK = {
+    back: 'close',
+    escape: 'close',
+    fullScreen: 'narrow',
+    modal: true,
+    mount: 'active',
+    outsidePress: 'close',
+    placement: 'center',
+    scroll: 'content',
+    size: 'md',
+    surface: 'panel',
+};
+const DIALOG_DEFAULTS = new InjectionToken('slotted dialog defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its dialogs behave and look, rather than
+ * repeating the same eight inputs on every one in a product. Angular Material
+ * is the only surveyed implementation with an equivalent —
+ * `MAT_DIALOG_DEFAULT_OPTIONS` — and React gets one here too rather than being
+ * levelled down to the smaller shape.
+ */
+function provideDialogDefaults(defaults) {
+    return {
+        provide: DIALOG_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a dialog renders as here, before it states anything of its own. */
+function injectDialogDefaults() {
+    return inject(DIALOG_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+class SlDialogIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-dialog-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A window over the page, and the scrim that says the page is out of reach.
+ *
+ * The layer is composed from `packages/core` and rewritten nowhere: `portal`
+ * decides where it lives and keeps the theme of the region that opened it,
+ * `dismissable-layer` owns Escape, outside press, `inert`, the scroll lock and
+ * the single z-index stack, `presence` keeps it mounted long enough to leave,
+ * and `focus` contains the keyboard and gives it back to the trigger.
+ *
+ * **The host is not the layer.** `<sl-dialog>` renders `display: contents` and
+ * stays exactly where the consumer wrote it; the layer is the `div` in the
+ * template, and it is that `div` which is moved into the portal. Two things
+ * follow, and both are better than the alternative: `mount="active"` can remove
+ * the layer outright, as React's does, and the host is the portal's *origin* —
+ * so the layer inherits the scheme, density, theme and direction of the region
+ * the consumer wrote it in, whether a trigger exists or not. React has to use
+ * the trigger for that, and the design document records the asymmetry.
+ */
+class SlDialogBase {
+    /** Whether the layer is open. Two-way, so a template may bind it directly. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    placement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    scroll = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    surface = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    mount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
+    fullScreen = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullScreen" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the header renders the control that hands the layer to the panel.
+     * Off, because a dialog holds one task and most tasks are the size the
+     * consumer chose. `fullScreen` is the other question — the responsive rule
+     * set in advance — and this is the reader's own.
+     */
+    fullscreenToggle = input(false, { ...(ngDevMode ? { debugName: "fullscreenToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the reader has taken the layer. Two-way, as `open` is. */
+    fullscreen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
+    escape = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "escape" }] : /* istanbul ignore next */ []));
+    /**
+     * The platform's way back — a phone's gesture, a browser's button — closes
+     * the layer instead of leaving the page, while the layer is modal.
+     */
+    back = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
+    /** Whether the layer's content is still on its way. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A parent for this layer alone, instead of the shared portal root. */
+    container = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    initialFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    finalFocus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finalFocus" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * corner controls' names (`close`, `fullScreen`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** One output for one transition, carrying the reason, the result and the event. */
+    openChangeRequest = output();
+    /**
+     * What `afterClosed()` is in Angular Material, as an output. It fires once the
+     * layer has actually closed, with the result the close carried.
+     */
+    closed = output();
+    /** One output for one transition of the state the toggle sets. */
+    fullscreenChangeRequest = output();
+    defaults = injectDialogDefaults();
+    /** The family's words in the language in force, with this layer's `messages` laid over them. */
+    t = injectMessages(dialogMessages, this.messages);
+    host = inject(ElementRef).nativeElement;
+    destroyRef = inject(DestroyRef);
+    baseId = inject(SlDialogIdFactory).next();
+    /** The element the consumer wrote us beside, recorded before anything moves. */
+    origin = this.host.parentElement;
+    /**
+     * A consumer's own `aria-label` on `<sl-dialog>`, read before the host
+     * bindings are written and moved to the panel, which is the element the role
+     * is on. Without this a label written on the host would name a box with
+     * `display: contents` and no role at all.
+     */
+    writtenLabel = inject(new HostAttributeToken('aria-label'), {
+        optional: true,
+    });
+    layerRef = viewChild('layer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** The parts that have said they exist, so only what was rendered is wired. */
+    hasTitle = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
+    hasDescription = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    cancelNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelNode" }] : /* istanbul ignore next */ []));
+    triggerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerNode" }] : /* istanbul ignore next */ []));
+    titleId = `${this.baseId}-title`;
+    descriptionId = `${this.baseId}-description`;
+    contentId = `${this.baseId}-content`;
+    triggerId = `${this.baseId}-trigger`;
+    /**
+     * The status rather than a boolean. `entering` is one frame long and it is
+     * the whole reason it exists: a layer that appears already open gives its CSS
+     * transition no closed style to start from.
+     */
+    status = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * The status is a signal and the template reads it, and that is not enough on
+     * its own. `presence` answers `sync` from inside the effect that watches
+     * `open`, which runs as part of this view's own change detection and after its
+     * bindings have been written: the write marked no consumer, no further pass
+     * followed, and the layer stayed in the document with `inert` and the closed
+     * attribute of a dialog that reported itself open. It was measured on a layer
+     * opened from a bound state rather than from a trigger — the family's own
+     * stories all open from a trigger, which is why it stood for nine rounds.
+     */
+    changes = inject(ChangeDetectorRef);
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => {
+            this.status.set(next);
+            this.changes.markForCheck();
+        },
+    });
+    /** Whether this layer has ever been open, which is what `lazy` reads. */
+    seen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seen" }] : /* istanbul ignore next */ []));
+    result = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    isAlert = computed(() => this.member === 'alertDialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAlert" }] : /* istanbul ignore next */ []));
+    resolvedModal = computed(() => (this.isAlert() ? true : this.modalInput()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedModal" }] : /* istanbul ignore next */ []));
+    resolvedOutsidePress = computed(() => this.isAlert() ? 'none' : this.outsidePressInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOutsidePress" }] : /* istanbul ignore next */ []));
+    resolvedMount = computed(() => this.mount() ?? this.defaults.mount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? (this.isAlert() ? 'sm' : this.defaults.size), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedPlacement = computed(() => this.placement() ?? this.defaults.placement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.scroll() ?? this.defaults.scroll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    resolvedSurface = computed(() => this.surface() ?? this.defaults.surface, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
+    resolvedFullScreen = computed(() => this.fullScreen() ?? (this.isAlert() ? 'never' : this.defaults.fullScreen), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFullScreen" }] : /* istanbul ignore next */ []));
+    resolvedEscape = computed(() => this.escape() ?? this.defaults.escape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEscape" }] : /* istanbul ignore next */ []));
+    resolvedBack = computed(() => this.back() ?? this.defaults.back, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBack" }] : /* istanbul ignore next */ []));
+    /**
+     * A confirmation has no corner controls at all, for the reason it has no
+     * close button, so neither the state nor the control that sets it is its.
+     */
+    resolvedFullscreen = computed(() => !this.isAlert() && this.fullscreen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFullscreen" }] : /* istanbul ignore next */ []));
+    resolvedFullscreenToggle = computed(() => !this.isAlert() && this.fullscreenToggle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFullscreenToggle" }] : /* istanbul ignore next */ []));
+    resolvedInitialFocus = computed(() => this.initialFocus() ?? (this.isAlert() ? 'cancel' : 'first'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInitialFocus" }] : /* istanbul ignore next */ []));
+    resolvedTone = computed(() => this.isAlert() ? this.toneInput() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    /** Overridden by the member that has them; the base has neither. */
+    modalInput() {
+        return this.defaults.modal;
+    }
+    outsidePressInput() {
+        return this.defaults.outsidePress;
+    }
+    toneInput() {
+        return 'danger';
+    }
+    mounted = computed(() => {
+        const mount = this.resolvedMount();
+        if (mount === 'eager')
+            return true;
+        if (mount === 'lazy')
+            return this.seen();
+        return this.status() !== 'unmounted';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    /** What the stylesheet keys on, which is a frame behind what was asked. */
+    visible = computed(() => this.status() === 'open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the layer takes focus and the pointer. `entering` counts: the
+     * focus scope enters in that frame, and a layer still `inert` then refuses
+     * the initial focus and leaves it on `body`.
+     */
+    interactive = computed(() => {
+        const status = this.status();
+        return status === 'entering' || status === 'open';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.hasTitle() && this.writtenLabel === null ? this.titleId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => (this.hasDescription() ? this.descriptionId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.writtenLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    role = computed(() => (this.isAlert() ? 'alertdialog' : 'dialog'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    portal = null;
+    layer = null;
+    scope = null;
+    /** Whether the layer, the focus scope and the `closed` owed are standing. */
+    engaged = false;
+    /**
+     * The layer this one was written inside, and the layers written inside this
+     * one. A confirmation whose action also closes the dialog under it closes
+     * both in one change, and Angular runs the dialog's effect first: taken down
+     * from the bottom, the dialog found focus in the confirmation and restored
+     * nothing, and the confirmation then handed focus to a control in a layer
+     * already leaving — `body`, once that layer was gone. The layers come down
+     * from the top instead, as React's effects take them down.
+     */
+    parent = inject(SlDialogBase, { optional: true, skipSelf: true });
+    nested = new Set();
+    constructor() {
+        this.parent?.nested.add(this);
+        effect(() => {
+            if (this.open())
+                this.seen.set(true);
+            this.presence.sync(this.open());
+        });
+        /** Where the layer lives, for as long as it is in the document. */
+        effect(() => {
+            const node = this.layerRef()?.nativeElement ?? null;
+            this.presence.setNode(node);
+            if (node === null) {
+                this.releasePortal();
+                return;
+            }
+            if (this.portal !== null)
+                return;
+            const named = this.container();
+            this.portal = createPortalRoot({
+                origin: this.origin,
+                ...(named === undefined ? {} : { container: named }),
+            });
+            this.portal.container?.append(node);
+        });
+        /**
+         * Everything the layer does while it is open, taken down when it closes
+         * rather than when the node leaves — `presence` keeps the node mounted
+         * through the exit, and a layer still holding the scroll lock and the
+         * background's `inert` for those milliseconds is a page nobody can touch.
+         */
+        effect((onCleanup) => {
+            const node = this.layerRef()?.nativeElement;
+            const panel = this.panelRef()?.nativeElement;
+            if (!this.open() || node === undefined || panel === undefined)
+                return;
+            const escape = this.resolvedEscape() === 'close';
+            const outsidePress = this.resolvedOutsidePress() === 'close';
+            const modal = this.resolvedModal();
+            /* A history entry is a modal layer's: a layer the page stays reachable
+               under has no claim on the way back. */
+            const back = modal && this.resolvedBack() === 'close';
+            const trigger = this.triggerNode();
+            /* The frame is the layer and the panel is what a press is inside of: the
+               scrim and the viewport around the panel are the way out. The click, not
+               the pointerdown, so a selection dragged out of the panel is not a press
+               on the scrim. */
+            this.layer = createDismissableLayer(node, {
+                back,
+                branches: trigger === null ? [] : [trigger],
+                content: panel,
+                escape,
+                modal,
+                onDismiss: (request) => {
+                    if (request.reason === 'outsidePress' && !outsidePress)
+                        return request.cancel();
+                    this.request(false, request.reason, undefined, request.source);
+                },
+                outsidePress,
+                outsidePressEvent: 'click',
+            });
+            const wanted = this.resolvedInitialFocus();
+            const returnTo = this.finalFocus();
+            this.scope = createFocusScope(panel, {
+                contain: modal,
+                initial: wanted === 'cancel'
+                    ? () => this.cancelNode()
+                    : wanted instanceof HTMLElement
+                        ? () => wanted
+                        : wanted,
+                ...(returnTo === undefined
+                    ? {}
+                    : { restore: returnTo === false ? false : () => returnTo }),
+            });
+            this.scope.enter();
+            this.engaged = true;
+            onCleanup(() => this.takeDown());
+        });
+        this.destroyRef.onDestroy(() => {
+            this.parent?.nested.delete(this);
+            this.layer?.destroy();
+            this.scope?.destroy();
+            this.presence.destroy();
+            this.releasePortal();
+        });
+    }
+    /**
+     * Takes down what the layer does while it is open, once per opening. The
+     * nested layers that closed in the same change go first.
+     *
+     * The layer before the scope: it lifts the `inert` it wrote on the
+     * background, and a browser refuses focus inside an inert subtree, so a
+     * scope taken down first hands focus back to a trigger that cannot take it.
+     */
+    takeDown() {
+        if (!this.engaged)
+            return;
+        this.engaged = false;
+        for (const layer of this.nested)
+            if (!layer.open())
+                layer.takeDown();
+        this.layer?.destroy();
+        this.layer = null;
+        this.scope?.destroy();
+        this.scope = null;
+        this.closed.emit(this.result());
+        this.result.set(undefined);
+    }
+    /**
+     * The layer element is given back to the host before the portal goes, so
+     * Angular removes a node that is where its own view expects it to be.
+     */
+    releasePortal() {
+        if (this.portal === null)
+            return;
+        const node = this.layerRef()?.nativeElement;
+        if (node !== undefined)
+            this.host.append(node);
+        this.portal.release();
+        this.portal = null;
+    }
+    /** Asks to move, carrying the reason, the result and the originating event. */
+    request(next, reason, result, source) {
+        if (next === this.open())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.open(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.openChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    result,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return;
+        if (!next)
+            this.result.set(result);
+        this.open.set(next);
+    }
+    /** Asks to take the layer or give it back, carrying the reason and the event. */
+    requestFullscreen(next, reason, source) {
+        if (next === this.resolvedFullscreen())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.fullscreen(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.fullscreenChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return;
+        this.fullscreen.set(next);
+    }
+    /** Opens the layer from code, carrying `programmatic`. */
+    openDialog() {
+        this.request(true, 'programmatic', undefined, undefined);
+    }
+    /** Closes it from code, carrying `programmatic` and the result given. */
+    close(result) {
+        this.request(false, 'programmatic', result, undefined);
+    }
+    /** Moves focus into the layer, as opening does. */
+    focus() {
+        this.panelRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.7", type: SlDialogBase, isStandalone: true, inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, fullscreenToggle: { classPropertyName: "fullscreenToggle", publicName: "fullscreenToggle", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, finalFocus: { classPropertyName: "finalFocus", publicName: "finalFocus", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", fullscreen: "fullscreenChange", openChangeRequest: "openChangeRequest", closed: "closed", fullscreenChangeRequest: "fullscreenChangeRequest" }, viewQueries: [{ propertyName: "layerRef", first: true, predicate: ["layer"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], fullscreenToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenToggle", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }, { type: i0.Output, args: ["fullscreenChange"] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], finalFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "finalFocus", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], closed: [{ type: i0.Output, args: ["closed"] }], fullscreenChangeRequest: [{ type: i0.Output, args: ["fullscreenChangeRequest"] }], layerRef: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+/**
+ * One template for the two members. `tag` already names its own the same way,
+ * which is what says the compiler folds it: `entry-points.source.test.mjs`
+ * refuses an identifier for `styleUrl` because that one needs a file resolved
+ * at build time, and a template string needs nothing resolved at all.
+ */
+const LAYER_TEMPLATE = `
+  @if (mounted()) {
+    <div
+      #layer
+      data-ui="dialog"
+      data-part="root"
+      [attr.data-size]="resolvedSize()"
+      [attr.data-placement]="resolvedPlacement()"
+      [attr.data-scroll]="resolvedScroll()"
+      [attr.data-surface]="resolvedSurface()"
+      [attr.data-mount]="resolvedMount()"
+      [attr.data-full-screen]="resolvedFullScreen()"
+      [attr.data-fullscreen]="resolvedFullscreen() ? '' : null"
+      [attr.data-outside-press]="resolvedOutsidePress()"
+      [attr.data-tone]="resolvedTone()"
+      [attr.data-modal]="resolvedModal() ? '' : null"
+      [attr.data-open]="visible() ? '' : null"
+      [attr.data-loading]="loading() ? '' : null"
+      [attr.inert]="interactive() ? null : ''"
+    >
+      <div data-part="backdrop"></div>
+      <div data-part="viewport">
+        <div
+          #panel
+          data-part="content"
+          [id]="contentId"
+          [attr.role]="role()"
+          [attr.aria-modal]="resolvedModal() ? 'true' : null"
+          [attr.aria-label]="label()"
+          [attr.aria-labelledby]="labelledBy()"
+          [attr.aria-describedby]="describedBy()"
+        >
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  }`;
+class SlDialog extends SlDialogBase {
+    member = 'dialog';
+    /**
+     * Whether the background is inert, the scroll is locked and focus is
+     * contained. A non-modal layer writes no `aria-modal`, which the APG requires
+     * of anything that does not actually make the background unreachable.
+     */
+    modal = input(true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    outsidePress = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsidePress" }] : /* istanbul ignore next */ []));
+    modalInput() {
+        return this.modal();
+    }
+    outsidePressInput() {
+        return this.outsidePress() ?? this.defaults.outsidePress;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDialog, isStandalone: true, selector: "sl-dialog", inputs: { modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, outsidePress: { classPropertyName: "outsidePress", publicName: "outsidePress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "'contents'" } }, providers: [{ provide: SlDialogBase, useExisting: forwardRef(() => SlDialog) }], exportAs: ["slDialog"], usesInheritance: true, ngImport: i0, template: "\n  @if (mounted()) {\n    <div\n      #layer\n      data-ui=\"dialog\"\n      data-part=\"root\"\n      [attr.data-size]=\"resolvedSize()\"\n      [attr.data-placement]=\"resolvedPlacement()\"\n      [attr.data-scroll]=\"resolvedScroll()\"\n      [attr.data-surface]=\"resolvedSurface()\"\n      [attr.data-mount]=\"resolvedMount()\"\n      [attr.data-full-screen]=\"resolvedFullScreen()\"\n      [attr.data-fullscreen]=\"resolvedFullscreen() ? '' : null\"\n      [attr.data-outside-press]=\"resolvedOutsidePress()\"\n      [attr.data-tone]=\"resolvedTone()\"\n      [attr.data-modal]=\"resolvedModal() ? '' : null\"\n      [attr.data-open]=\"visible() ? '' : null\"\n      [attr.data-loading]=\"loading() ? '' : null\"\n      [attr.inert]=\"interactive() ? null : ''\"\n    >\n      <div data-part=\"backdrop\"></div>\n      <div data-part=\"viewport\">\n        <div\n          #panel\n          data-part=\"content\"\n          [id]=\"contentId\"\n          [attr.role]=\"role()\"\n          [attr.aria-modal]=\"resolvedModal() ? 'true' : null\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-labelledby]=\"labelledBy()\"\n          [attr.aria-describedby]=\"describedBy()\"\n        >\n          <ng-content />\n        </div>\n      </div>\n    </div>\n  }", isInline: true, styles: ["@layer slotted.components{[data-ui=dialog]{--_measure: var(--slotted-dialog-measure, 32rem);--_layer-padding: var(--slotted-space-8, 1.5rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_padding-block: var(--slotted-space-7, 1.25rem);--_header-padding-block: var(--slotted-space-6, 1rem);--_footer-padding-block: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_title-line-height: var(--slotted-line-height-md, 1.5);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_status-size: var(--_title-font-size);--_mark-gap: var(--slotted-space-4, .5rem);--_tone-color: var(--slotted-tone-danger-text, CanvasText);position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);container-type:inline-size;container-name:slotted-dialog;color:var(--slotted-dialog-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:content-visibility var(--slotted-duration-medium) allow-discrete}[data-ui=dialog][inert]{content-visibility:hidden;pointer-events:none}[data-ui=dialog]:not([data-modal]){pointer-events:none}[data-ui=dialog]:not([data-modal])>[data-part=backdrop]{visibility:hidden}[data-ui=dialog]:not([data-modal])>[data-part=viewport]>[data-part=content]{pointer-events:auto}[data-ui=dialog][data-size=sm]{--_measure: var(--slotted-dialog-measure, 24rem);--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_header-padding-block: var(--slotted-space-5, .75rem);--_footer-padding-block: var(--slotted-space-4, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem)}[data-ui=dialog][data-size=lg]{--_measure: var(--slotted-dialog-measure, 42rem)}[data-ui=dialog][data-size=xl]{--_measure: var(--slotted-dialog-measure, 56rem)}[data-ui=dialog][data-size=full]{--_measure: var(--slotted-dialog-measure, none)}[data-ui=dialog]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-dialog-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog]>[data-part=viewport]{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;justify-items:center;padding:var(--_layer-padding);overflow:auto;overscroll-behavior:contain}[data-ui=dialog][data-placement=top]>[data-part=viewport]{align-content:safe start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;inline-size:100%;max-inline-size:var(--_measure);max-block-size:100%;background:var(--slotted-dialog-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-dialog-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-dialog-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-shadow-lg);overflow:hidden;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=viewport]>[data-part=content]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]{max-block-size:none}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start;column-gap:0;row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_header-padding-block);padding-inline:var(--_padding-inline)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>*:not([data-part=icon],[data-part=title],[data-part=description],[data-part=fullscreen],[data-part=close]){grid-column:2;justify-self:start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=icon]{--slotted-icon-size: var(--_status-size);grid-column:1;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;color:var(--_tone-color);block-size:var(--_status-size);inline-size:var(--_status-size);flex:none;margin-block-start:calc((var(--_title-font-size) * var(--_title-line-height) - var(--_status-size)) / 2);margin-inline-end:var(--_mark-gap)}[data-ui=dialog][data-tone=accent]{--_tone-color: var(--slotted-tone-accent-text, CanvasText)}[data-ui=dialog][data-tone=secondary]{--_tone-color: var(--slotted-tone-secondary-text, CanvasText)}[data-ui=dialog][data-tone=success]{--_tone-color: var(--slotted-tone-success-text, CanvasText)}[data-ui=dialog][data-tone=warning]{--_tone-color: var(--slotted-tone-warning-text, CanvasText)}[data-ui=dialog][data-tone=danger]{--_tone-color: var(--slotted-tone-danger-text, CanvasText)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=title]{grid-column:2;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-dialog-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_title-line-height);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description]{grid-column:2;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-description-color, var(--slotted-text-muted, GrayText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description] :is(strong,b){font-weight:var(--slotted-font-weight-semibold, 600);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]{--slotted-icon-size: var(--_icon-size);grid-column:3;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]{margin-inline-start:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}@media(pointer:coarse){[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]){position:relative}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:has(+[data-part=close]):before{inset-inline-end:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]:before{inset-inline-start:0}}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-body-color, var(--slotted-text, CanvasText))}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]>[data-part=body]{overflow:visible}[data-ui=dialog][data-loading]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_footer-padding-block);padding-inline:var(--_padding-inline);background:var(--slotted-dialog-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]{display:block;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]>:is([data-part=header],[data-part=body],[data-part=footer]){background:none;border:0;padding:0}@container slotted-dialog (max-inline-size: 30rem){[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}}[data-ui=dialog][data-full-screen=always]>[data-part=viewport],[data-ui=dialog][data-fullscreen]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=always]>[data-part=viewport]>[data-part=content],[data-ui=dialog][data-fullscreen]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}@media(forced-colors:active){[data-ui=dialog]>[data-part=viewport]>[data-part=content]{border-color:CanvasText;border-width:var(--slotted-border-width-thick, 2px)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-dialog', standalone: true, exportAs: 'slDialog', template: LAYER_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, providers: [{ provide: SlDialogBase, useExisting: forwardRef(() => SlDialog) }], styles: ["@layer slotted.components{[data-ui=dialog]{--_measure: var(--slotted-dialog-measure, 32rem);--_layer-padding: var(--slotted-space-8, 1.5rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_padding-block: var(--slotted-space-7, 1.25rem);--_header-padding-block: var(--slotted-space-6, 1rem);--_footer-padding-block: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_title-line-height: var(--slotted-line-height-md, 1.5);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_status-size: var(--_title-font-size);--_mark-gap: var(--slotted-space-4, .5rem);--_tone-color: var(--slotted-tone-danger-text, CanvasText);position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);container-type:inline-size;container-name:slotted-dialog;color:var(--slotted-dialog-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:content-visibility var(--slotted-duration-medium) allow-discrete}[data-ui=dialog][inert]{content-visibility:hidden;pointer-events:none}[data-ui=dialog]:not([data-modal]){pointer-events:none}[data-ui=dialog]:not([data-modal])>[data-part=backdrop]{visibility:hidden}[data-ui=dialog]:not([data-modal])>[data-part=viewport]>[data-part=content]{pointer-events:auto}[data-ui=dialog][data-size=sm]{--_measure: var(--slotted-dialog-measure, 24rem);--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_header-padding-block: var(--slotted-space-5, .75rem);--_footer-padding-block: var(--slotted-space-4, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem)}[data-ui=dialog][data-size=lg]{--_measure: var(--slotted-dialog-measure, 42rem)}[data-ui=dialog][data-size=xl]{--_measure: var(--slotted-dialog-measure, 56rem)}[data-ui=dialog][data-size=full]{--_measure: var(--slotted-dialog-measure, none)}[data-ui=dialog]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-dialog-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog]>[data-part=viewport]{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;justify-items:center;padding:var(--_layer-padding);overflow:auto;overscroll-behavior:contain}[data-ui=dialog][data-placement=top]>[data-part=viewport]{align-content:safe start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;inline-size:100%;max-inline-size:var(--_measure);max-block-size:100%;background:var(--slotted-dialog-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-dialog-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-dialog-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-shadow-lg);overflow:hidden;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=viewport]>[data-part=content]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]{max-block-size:none}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start;column-gap:0;row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_header-padding-block);padding-inline:var(--_padding-inline)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>*:not([data-part=icon],[data-part=title],[data-part=description],[data-part=fullscreen],[data-part=close]){grid-column:2;justify-self:start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=icon]{--slotted-icon-size: var(--_status-size);grid-column:1;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;color:var(--_tone-color);block-size:var(--_status-size);inline-size:var(--_status-size);flex:none;margin-block-start:calc((var(--_title-font-size) * var(--_title-line-height) - var(--_status-size)) / 2);margin-inline-end:var(--_mark-gap)}[data-ui=dialog][data-tone=accent]{--_tone-color: var(--slotted-tone-accent-text, CanvasText)}[data-ui=dialog][data-tone=secondary]{--_tone-color: var(--slotted-tone-secondary-text, CanvasText)}[data-ui=dialog][data-tone=success]{--_tone-color: var(--slotted-tone-success-text, CanvasText)}[data-ui=dialog][data-tone=warning]{--_tone-color: var(--slotted-tone-warning-text, CanvasText)}[data-ui=dialog][data-tone=danger]{--_tone-color: var(--slotted-tone-danger-text, CanvasText)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=title]{grid-column:2;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-dialog-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_title-line-height);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description]{grid-column:2;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-description-color, var(--slotted-text-muted, GrayText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description] :is(strong,b){font-weight:var(--slotted-font-weight-semibold, 600);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]{--slotted-icon-size: var(--_icon-size);grid-column:3;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]{margin-inline-start:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}@media(pointer:coarse){[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]){position:relative}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:has(+[data-part=close]):before{inset-inline-end:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]:before{inset-inline-start:0}}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-body-color, var(--slotted-text, CanvasText))}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]>[data-part=body]{overflow:visible}[data-ui=dialog][data-loading]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_footer-padding-block);padding-inline:var(--_padding-inline);background:var(--slotted-dialog-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]{display:block;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]>:is([data-part=header],[data-part=body],[data-part=footer]){background:none;border:0;padding:0}@container slotted-dialog (max-inline-size: 30rem){[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}}[data-ui=dialog][data-full-screen=always]>[data-part=viewport],[data-ui=dialog][data-fullscreen]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=always]>[data-part=viewport]>[data-part=content],[data-ui=dialog][data-fullscreen]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}@media(forced-colors:active){[data-ui=dialog]>[data-part=viewport]>[data-part=content]{border-color:CanvasText;border-width:var(--slotted-border-width-thick, 2px)}}}\n"] }]
+        }], propDecorators: { modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], outsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsidePress", required: false }] }] } });
+/**
+ * A dialog that interrupts to confirm something irreversible.
+ *
+ * Two rules are fixed rather than left to an input: outside press never closes
+ * it, and it is always modal. Ark and React Aria make the role a prop, so a
+ * consumer who sets `role="alertdialog"` and forgets the dismissal policy ships
+ * a destructive confirmation a stray click dismisses.
+ *
+ * Focus lands on `slAlertDialogCancel` rather than on the first tabbable
+ * element, which is the APG's own advice for a step that is not easily
+ * reversible.
+ */
+class SlAlertDialog extends SlDialogBase {
+    member = 'alertDialog';
+    tone = input('danger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        /**
+         * The alert dialog pattern *requires* `aria-describedby`. A confirmation
+         * announced as a title and two buttons, with the sentence saying what is
+         * about to be destroyed left out, is the failure the requirement exists
+         * for — so it fails loudly rather than shipping.
+         *
+         * The DOM rather than the signal: projected content is created before this
+         * effect flushes, so the element is there and the signal it sets may not
+         * have been read yet.
+         */
+        effect(() => {
+            const panel = this.panelRef()?.nativeElement;
+            if (!this.open() || panel === undefined)
+                return;
+            if (panel.querySelector('[data-part="description"]') !== null)
+                return;
+            throw new Error('sl-alert-dialog requires an element with slDialogDescription: the alertdialog pattern makes aria-describedby mandatory.');
+        });
+    }
+    toneInput() {
+        return this.tone();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAlertDialog, isStandalone: true, selector: "sl-alert-dialog", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "'contents'" } }, providers: [{ provide: SlDialogBase, useExisting: forwardRef(() => SlAlertDialog) }], exportAs: ["slAlertDialog"], usesInheritance: true, ngImport: i0, template: "\n  @if (mounted()) {\n    <div\n      #layer\n      data-ui=\"dialog\"\n      data-part=\"root\"\n      [attr.data-size]=\"resolvedSize()\"\n      [attr.data-placement]=\"resolvedPlacement()\"\n      [attr.data-scroll]=\"resolvedScroll()\"\n      [attr.data-surface]=\"resolvedSurface()\"\n      [attr.data-mount]=\"resolvedMount()\"\n      [attr.data-full-screen]=\"resolvedFullScreen()\"\n      [attr.data-fullscreen]=\"resolvedFullscreen() ? '' : null\"\n      [attr.data-outside-press]=\"resolvedOutsidePress()\"\n      [attr.data-tone]=\"resolvedTone()\"\n      [attr.data-modal]=\"resolvedModal() ? '' : null\"\n      [attr.data-open]=\"visible() ? '' : null\"\n      [attr.data-loading]=\"loading() ? '' : null\"\n      [attr.inert]=\"interactive() ? null : ''\"\n    >\n      <div data-part=\"backdrop\"></div>\n      <div data-part=\"viewport\">\n        <div\n          #panel\n          data-part=\"content\"\n          [id]=\"contentId\"\n          [attr.role]=\"role()\"\n          [attr.aria-modal]=\"resolvedModal() ? 'true' : null\"\n          [attr.aria-label]=\"label()\"\n          [attr.aria-labelledby]=\"labelledBy()\"\n          [attr.aria-describedby]=\"describedBy()\"\n        >\n          <ng-content />\n        </div>\n      </div>\n    </div>\n  }", isInline: true, styles: ["@layer slotted.components{[data-ui=dialog]{--_measure: var(--slotted-dialog-measure, 32rem);--_layer-padding: var(--slotted-space-8, 1.5rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_padding-block: var(--slotted-space-7, 1.25rem);--_header-padding-block: var(--slotted-space-6, 1rem);--_footer-padding-block: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_title-line-height: var(--slotted-line-height-md, 1.5);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_status-size: var(--_title-font-size);--_mark-gap: var(--slotted-space-4, .5rem);--_tone-color: var(--slotted-tone-danger-text, CanvasText);position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);container-type:inline-size;container-name:slotted-dialog;color:var(--slotted-dialog-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:content-visibility var(--slotted-duration-medium) allow-discrete}[data-ui=dialog][inert]{content-visibility:hidden;pointer-events:none}[data-ui=dialog]:not([data-modal]){pointer-events:none}[data-ui=dialog]:not([data-modal])>[data-part=backdrop]{visibility:hidden}[data-ui=dialog]:not([data-modal])>[data-part=viewport]>[data-part=content]{pointer-events:auto}[data-ui=dialog][data-size=sm]{--_measure: var(--slotted-dialog-measure, 24rem);--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_header-padding-block: var(--slotted-space-5, .75rem);--_footer-padding-block: var(--slotted-space-4, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem)}[data-ui=dialog][data-size=lg]{--_measure: var(--slotted-dialog-measure, 42rem)}[data-ui=dialog][data-size=xl]{--_measure: var(--slotted-dialog-measure, 56rem)}[data-ui=dialog][data-size=full]{--_measure: var(--slotted-dialog-measure, none)}[data-ui=dialog]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-dialog-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog]>[data-part=viewport]{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;justify-items:center;padding:var(--_layer-padding);overflow:auto;overscroll-behavior:contain}[data-ui=dialog][data-placement=top]>[data-part=viewport]{align-content:safe start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;inline-size:100%;max-inline-size:var(--_measure);max-block-size:100%;background:var(--slotted-dialog-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-dialog-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-dialog-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-shadow-lg);overflow:hidden;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=viewport]>[data-part=content]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]{max-block-size:none}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start;column-gap:0;row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_header-padding-block);padding-inline:var(--_padding-inline)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>*:not([data-part=icon],[data-part=title],[data-part=description],[data-part=fullscreen],[data-part=close]){grid-column:2;justify-self:start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=icon]{--slotted-icon-size: var(--_status-size);grid-column:1;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;color:var(--_tone-color);block-size:var(--_status-size);inline-size:var(--_status-size);flex:none;margin-block-start:calc((var(--_title-font-size) * var(--_title-line-height) - var(--_status-size)) / 2);margin-inline-end:var(--_mark-gap)}[data-ui=dialog][data-tone=accent]{--_tone-color: var(--slotted-tone-accent-text, CanvasText)}[data-ui=dialog][data-tone=secondary]{--_tone-color: var(--slotted-tone-secondary-text, CanvasText)}[data-ui=dialog][data-tone=success]{--_tone-color: var(--slotted-tone-success-text, CanvasText)}[data-ui=dialog][data-tone=warning]{--_tone-color: var(--slotted-tone-warning-text, CanvasText)}[data-ui=dialog][data-tone=danger]{--_tone-color: var(--slotted-tone-danger-text, CanvasText)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=title]{grid-column:2;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-dialog-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_title-line-height);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description]{grid-column:2;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-description-color, var(--slotted-text-muted, GrayText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description] :is(strong,b){font-weight:var(--slotted-font-weight-semibold, 600);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]{--slotted-icon-size: var(--_icon-size);grid-column:3;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]{margin-inline-start:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}@media(pointer:coarse){[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]){position:relative}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:has(+[data-part=close]):before{inset-inline-end:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]:before{inset-inline-start:0}}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-body-color, var(--slotted-text, CanvasText))}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]>[data-part=body]{overflow:visible}[data-ui=dialog][data-loading]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_footer-padding-block);padding-inline:var(--_padding-inline);background:var(--slotted-dialog-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]{display:block;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]>:is([data-part=header],[data-part=body],[data-part=footer]){background:none;border:0;padding:0}@container slotted-dialog (max-inline-size: 30rem){[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}}[data-ui=dialog][data-full-screen=always]>[data-part=viewport],[data-ui=dialog][data-fullscreen]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=always]>[data-part=viewport]>[data-part=content],[data-ui=dialog][data-fullscreen]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}@media(forced-colors:active){[data-ui=dialog]>[data-part=viewport]>[data-part=content]{border-color:CanvasText;border-width:var(--slotted-border-width-thick, 2px)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-alert-dialog', standalone: true, exportAs: 'slAlertDialog', template: LAYER_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, providers: [{ provide: SlDialogBase, useExisting: forwardRef(() => SlAlertDialog) }], styles: ["@layer slotted.components{[data-ui=dialog]{--_measure: var(--slotted-dialog-measure, 32rem);--_layer-padding: var(--slotted-space-8, 1.5rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_padding-block: var(--slotted-space-7, 1.25rem);--_header-padding-block: var(--slotted-space-6, 1rem);--_footer-padding-block: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-xl, 1.125rem);--_title-line-height: var(--slotted-line-height-md, 1.5);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_status-size: var(--_title-font-size);--_mark-gap: var(--slotted-space-4, .5rem);--_tone-color: var(--slotted-tone-danger-text, CanvasText);position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);container-type:inline-size;container-name:slotted-dialog;color:var(--slotted-dialog-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:content-visibility var(--slotted-duration-medium) allow-discrete}[data-ui=dialog][inert]{content-visibility:hidden;pointer-events:none}[data-ui=dialog]:not([data-modal]){pointer-events:none}[data-ui=dialog]:not([data-modal])>[data-part=backdrop]{visibility:hidden}[data-ui=dialog]:not([data-modal])>[data-part=viewport]>[data-part=content]{pointer-events:auto}[data-ui=dialog][data-size=sm]{--_measure: var(--slotted-dialog-measure, 24rem);--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_header-padding-block: var(--slotted-space-5, .75rem);--_footer-padding-block: var(--slotted-space-4, .5rem);--_title-font-size: var(--slotted-font-size-lg, 1rem)}[data-ui=dialog][data-size=lg]{--_measure: var(--slotted-dialog-measure, 42rem)}[data-ui=dialog][data-size=xl]{--_measure: var(--slotted-dialog-measure, 56rem)}[data-ui=dialog][data-size=full]{--_measure: var(--slotted-dialog-measure, none)}[data-ui=dialog]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-dialog-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog]>[data-part=viewport]{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;justify-items:center;padding:var(--_layer-padding);overflow:auto;overscroll-behavior:contain}[data-ui=dialog][data-placement=top]>[data-part=viewport]{align-content:safe start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;inline-size:100%;max-inline-size:var(--_measure);max-block-size:100%;background:var(--slotted-dialog-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-dialog-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-dialog-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-shadow-lg);overflow:hidden;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=dialog][data-open]>[data-part=viewport]>[data-part=content]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]{max-block-size:none}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start;column-gap:0;row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_header-padding-block);padding-inline:var(--_padding-inline)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>*:not([data-part=icon],[data-part=title],[data-part=description],[data-part=fullscreen],[data-part=close]){grid-column:2;justify-self:start}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=icon]{--slotted-icon-size: var(--_status-size);grid-column:1;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;color:var(--_tone-color);block-size:var(--_status-size);inline-size:var(--_status-size);flex:none;margin-block-start:calc((var(--_title-font-size) * var(--_title-line-height) - var(--_status-size)) / 2);margin-inline-end:var(--_mark-gap)}[data-ui=dialog][data-tone=accent]{--_tone-color: var(--slotted-tone-accent-text, CanvasText)}[data-ui=dialog][data-tone=secondary]{--_tone-color: var(--slotted-tone-secondary-text, CanvasText)}[data-ui=dialog][data-tone=success]{--_tone-color: var(--slotted-tone-success-text, CanvasText)}[data-ui=dialog][data-tone=warning]{--_tone-color: var(--slotted-tone-warning-text, CanvasText)}[data-ui=dialog][data-tone=danger]{--_tone-color: var(--slotted-tone-danger-text, CanvasText)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=title]{grid-column:2;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-dialog-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_title-line-height);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description]{grid-column:2;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-description-color, var(--slotted-text-muted, GrayText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=description] :is(strong,b){font-weight:var(--slotted-font-weight-semibold, 600);color:var(--slotted-dialog-title-color, var(--slotted-text, CanvasText))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]{--slotted-icon-size: var(--_icon-size);grid-column:3;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-start:var(--_gap);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-dialog-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]{margin-inline-start:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):hover{background-color:var( --slotted-dialog-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:not(:disabled):active{background-color:var( --slotted-dialog-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}@media(pointer:coarse){[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]){position:relative}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>:is([data-part=close],[data-part=fullscreen]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]:has(+[data-part=close]):before{inset-inline-end:0}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=header]>[data-part=fullscreen]+[data-part=close]:before{inset-inline-start:0}}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-dialog-body-color, var(--slotted-text, CanvasText))}[data-ui=dialog][data-scroll=viewport]>[data-part=viewport]>[data-part=content]>[data-part=body]{overflow:visible}[data-ui=dialog][data-loading]>[data-part=viewport]>[data-part=content]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_footer-padding-block);padding-inline:var(--_padding-inline);background:var(--slotted-dialog-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=dialog]>[data-part=viewport]>[data-part=content]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-dialog-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]{display:block;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}[data-ui=dialog][data-surface=plain]>[data-part=viewport]>[data-part=content]>:is([data-part=header],[data-part=body],[data-part=footer]){background:none;border:0;padding:0}@container slotted-dialog (max-inline-size: 30rem){[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=narrow]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}}[data-ui=dialog][data-full-screen=always]>[data-part=viewport],[data-ui=dialog][data-fullscreen]>[data-part=viewport]{align-content:stretch;padding:0}[data-ui=dialog][data-full-screen=always]>[data-part=viewport]>[data-part=content],[data-ui=dialog][data-fullscreen]>[data-part=viewport]>[data-part=content]{max-inline-size:none;block-size:100%;border-radius:0;border:0}@media(forced-colors:active){[data-ui=dialog]>[data-part=viewport]>[data-part=content]{border-color:CanvasText;border-width:var(--slotted-border-width-thick, 2px)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports the
+ * click count. It is how `Enter`, `Space` and a pointer are told apart without
+ * a key listener existing for something the platform already handles.
+ */
+function activationReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * The part a control names. On an element another family draws — `slButton` —
+ * that family's root stays its part: two directives write one attribute, and
+ * the family the element is drawn by keeps it, as React's `render` does by
+ * spreading the button's props last.
+ */
+function ownPart(native, part) {
+    return native.hasAttribute('data-ui') ? native.getAttribute('data-part') : part;
+}
+/**
+ * The control that opens a layer.
+ *
+ * It is the consumer's own element, which is what this ecosystem composes with:
+ * `<button slButton slDialogTrigger [dialog]="d">` is the library's own button
+ * and this adds the wiring to it. React reaches the same place with `render`,
+ * because there the component owns the tag.
+ *
+ * The trigger is also the layer's *branch*: a press on it is inside the layer
+ * as far as `dismissable-layer` is concerned, or opening would immediately be
+ * read as an outside press and close what it just opened.
+ */
+class SlDialogTrigger {
+    /** The layer this control opens, reached with a template reference variable. */
+    dialog = input.required({ ...(ngDevMode ? { debugName: "dialog" } : /* istanbul ignore next */ {}), alias: 'slDialogTrigger' });
+    native = inject(ElementRef).nativeElement;
+    /** `trigger`, unless the element is another family's root. */
+    part = ownPart(this.native, 'trigger');
+    controls = computed(() => this.dialog().mounted() ? this.dialog().contentId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.dialog().triggerNode.set(this.native);
+    }
+    ngOnDestroy() {
+        if (this.dialog().triggerNode() === this.native)
+            this.dialog().triggerNode.set(null);
+    }
+    press(event) {
+        /* The consumer's own handler ran first, and `preventDefault()` refuses the
+           open — composed with, never replaced. */
+        if (event.defaultPrevented)
+            return;
+        this.dialog().request(true, activationReason(event), undefined, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDialogTrigger, isStandalone: true, selector: "[slDialogTrigger]", inputs: { dialog: { classPropertyName: "dialog", publicName: "slDialogTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.data-part": "part", "attr.aria-haspopup": "'dialog'", "attr.aria-expanded": "dialog().open()", "attr.aria-controls": "controls()", "attr.data-open": "dialog().open() ? '' : null", "id": "dialog().triggerId" } }, exportAs: ["slDialogTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDialogTrigger]',
+                    standalone: true,
+                    exportAs: 'slDialogTrigger',
+                    host: {
+                        '[attr.data-part]': 'part',
+                        type: 'button',
+                        '[attr.aria-haspopup]': "'dialog'",
+                        '[attr.aria-expanded]': 'dialog().open()',
+                        '[attr.aria-controls]': 'controls()',
+                        '[attr.data-open]': "dialog().open() ? '' : null",
+                        '[id]': 'dialog().triggerId',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], propDecorators: { dialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDialogTrigger", required: true }] }] } });
+/**
+ * The header, and the one part of it the family renders rather than the
+ * consumer: the full-screen toggle, when the layer was asked for one.
+ *
+ * It is written in the DOM after whatever the consumer projected. The title
+ * and the description come first for a reader moving through the header, and
+ * the two corner controls are adjacent peers whose order carries no meaning —
+ * a toggle written first would be announced ahead of the name of the dialog it
+ * belongs to. The stylesheet puts it in the column before the close, which is
+ * where a window's controls put it.
+ *
+ * It is a component on the consumer's own `<header>`, so the toggle is a child
+ * of that element written after the projected content, which is the DOM React
+ * reaches by rendering the part; the two have to land together.
+ *
+ * `aria-pressed` says which way the toggle is set, so the name stays one word
+ * in every state: a label that changed with the state would be read as a
+ * second control. The mark is the opposite of the state, because a mark on a
+ * control says what pressing it does.
+ */
+class SlDialogHeader {
+    dialog = inject(SlDialogBase);
+    toggle(event) {
+        if (event.defaultPrevented)
+            return;
+        this.dialog.requestFullscreen(!this.dialog.resolvedFullscreen(), activationReason(event) === 'keyboard' ? 'keyboard' : 'pointer', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDialogHeader, isStandalone: true, selector: "[slDialogHeader]", host: { attributes: { "data-part": "header" } }, exportAs: ["slDialogHeader"], ngImport: i0, template: `<ng-content />
+    @if (dialog.resolvedFullscreenToggle()) {
+      <button
+        type="button"
+        data-part="fullscreen"
+        [attr.aria-label]="dialog.t('fullScreen')"
+        [attr.aria-pressed]="dialog.resolvedFullscreen()"
+        (click)="toggle($event)"
+      >
+        <span slIcon
+          ><svg slGlyph [name]="dialog.resolvedFullscreen() ? 'minimize' : 'maximize'"></svg
+        ></span>
+      </button>
+    }`, 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: SlDialogHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slDialogHeader]',
+                    standalone: true,
+                    exportAs: 'slDialogHeader',
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content />
+    @if (dialog.resolvedFullscreenToggle()) {
+      <button
+        type="button"
+        data-part="fullscreen"
+        [attr.aria-label]="dialog.t('fullScreen')"
+        [attr.aria-pressed]="dialog.resolvedFullscreen()"
+        (click)="toggle($event)"
+      >
+        <span slIcon
+          ><svg slGlyph [name]="dialog.resolvedFullscreen() ? 'minimize' : 'maximize'"></svg
+        ></span>
+      </button>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-part': 'header' },
+                }]
+        }] });
+/** The visible name, which `aria-labelledby` points at. */
+class SlDialogTitle {
+    dialog = inject(SlDialogBase);
+    ngOnInit() {
+        this.dialog.hasTitle.set(true);
+    }
+    ngOnDestroy() {
+        this.dialog.hasTitle.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDialogTitle, isStandalone: true, selector: "[slDialogTitle]", host: { attributes: { "data-part": "title" }, properties: { "id": "dialog.titleId" } }, exportAs: ["slDialogTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDialogTitle]',
+                    standalone: true,
+                    exportAs: 'slDialogTitle',
+                    host: { 'data-part': 'title', '[id]': 'dialog.titleId' },
+                }]
+        }] });
+/**
+ * The sentence that says what the dialog is about. The alert dialog pattern
+ * makes it mandatory; the modal dialog pattern makes it optional and advises
+ * against it for structured content.
+ */
+class SlDialogDescription {
+    dialog = inject(SlDialogBase);
+    ngOnInit() {
+        this.dialog.hasDescription.set(true);
+    }
+    ngOnDestroy() {
+        this.dialog.hasDescription.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDialogDescription, isStandalone: true, selector: "[slDialogDescription]", host: { attributes: { "data-part": "description" }, properties: { "id": "dialog.descriptionId" } }, exportAs: ["slDialogDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDialogDescription]',
+                    standalone: true,
+                    exportAs: 'slDialogDescription',
+                    host: { 'data-part': 'description', '[id]': 'dialog.descriptionId' },
+                }]
+        }] });
+/**
+ * The one row that scrolls, and the row `aria-busy` belongs to while the
+ * content is still on its way — the header, the close button and Escape all
+ * stay operable, because a loading dialog a reader cannot leave is the worse
+ * failure of the two.
+ */
+class SlDialogBody {
+    dialog = inject(SlDialogBase);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDialogBody, isStandalone: true, selector: "[slDialogBody]", host: { attributes: { "data-part": "body" }, properties: { "attr.aria-busy": "dialog.loading() ? 'true' : null" } }, exportAs: ["slDialogBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDialogBody]',
+                    standalone: true,
+                    exportAs: 'slDialogBody',
+                    host: { 'data-part': 'body', '[attr.aria-busy]': "dialog.loading() ? 'true' : null" },
+                }]
+        }] });
+class SlDialogFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDialogFooter, isStandalone: true, selector: "[slDialogFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDialogFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDialogFooter]',
+                    standalone: true,
+                    exportAs: 'slDialogFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * The ✕ in the corner. It carries `dismiss`, which is the word the closed
+ * vocabulary in `docs/state-and-events.md` already has for what a close button
+ * means; `docs/component-features.md` §8 calls the source `closeButton`, and a
+ * twelfth reason would be a change to a contract outside this family.
+ */
+class SlDialogClose {
+    /** The result the close carries out, which is the platform's `returnValue`. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    dialog = inject(SlDialogBase);
+    /** A consumer's own `aria-label`, which wins over the catalog. */
+    ownLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    label = computed(() => this.ownLabel ?? this.dialog.t('close'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.dialog.isAlert()) {
+            throw new Error('sl-alert-dialog has no close part: a confirmation is answered with slAlertDialogCancel or slAlertDialogAction, not dismissed by an ✕.');
+        }
+    }
+    press(event) {
+        if (event.defaultPrevented)
+            return;
+        this.dialog.request(false, 'dismiss', this.value(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDialogClose, isStandalone: true, selector: "[slDialogClose]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "close", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.aria-label": "label()" } }, exportAs: ["slDialogClose"], 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: SlDialogClose, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slDialogClose]',
+                    standalone: true,
+                    exportAs: 'slDialogClose',
+                    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',
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+/**
+ * The glyph each tone draws, and a triangle where no tone was resolved. Warning
+ * and danger differ in silhouette as well as colour, because under forced
+ * colours the silhouette is all that is left.
+ */
+const TONE_GLYPH = {
+    accent: 'circle-info',
+    secondary: 'circle-info',
+    success: 'circle-check',
+    warning: 'triangle-alert',
+    danger: 'circle-alert',
+};
+/**
+ * The tone's own mark, which is geometry rather than a character. A mark the
+ * consumer writes as content replaces the tone's.
+ */
+class SlAlertDialogIcon {
+    dialog = inject(SlDialogBase);
+    glyph = computed(() => {
+        const tone = this.dialog.resolvedTone();
+        return tone === null ? 'triangle-alert' : TONE_GLYPH[tone];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialogIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAlertDialogIcon, isStandalone: true, selector: "[slAlertDialogIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, exportAs: ["slAlertDialogIcon"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="glyph()"></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: SlAlertDialogIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slAlertDialogIcon]',
+                    standalone: true,
+                    exportAs: 'slAlertDialogIcon',
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="glyph()"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-part': 'icon', 'aria-hidden': 'true' },
+                }]
+        }] });
+/**
+ * The least destructive action, and where focus lands when the layer opens.
+ * That is the APG's own advice for a step that is not easily reversible, and it
+ * is a default of the member rather than something a consumer remembers.
+ */
+class SlAlertDialogCancel {
+    value = input('cancel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    dialog = inject(SlDialogBase);
+    native = inject(ElementRef).nativeElement;
+    /** `cancel`, unless the element is another family's root. */
+    part = ownPart(this.native, 'cancel');
+    ngOnInit() {
+        this.dialog.cancelNode.set(this.native);
+    }
+    ngOnDestroy() {
+        if (this.dialog.cancelNode() === this.native)
+            this.dialog.cancelNode.set(null);
+    }
+    press(event) {
+        if (event.defaultPrevented)
+            return;
+        this.dialog.request(false, 'dismiss', this.value(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialogCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlAlertDialogCancel, isStandalone: true, selector: "[slAlertDialogCancel]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.data-part": "part" } }, exportAs: ["slAlertDialogCancel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialogCancel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAlertDialogCancel]',
+                    standalone: true,
+                    exportAs: 'slAlertDialogCancel',
+                    host: { '[attr.data-part]': 'part', type: 'button', '(click)': 'press($event)' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+/**
+ * The action being confirmed. It carries `submit`, because confirming is what
+ * the reader came to do, and `dismiss` is what the other two controls mean.
+ */
+class SlAlertDialogAction {
+    value = input('confirm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    dialog = inject(SlDialogBase);
+    /** `action`, unless the element is another family's root. */
+    part = ownPart(inject(ElementRef).nativeElement, 'action');
+    press(event) {
+        if (event.defaultPrevented)
+            return;
+        this.dialog.request(false, 'submit', this.value(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialogAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlAlertDialogAction, isStandalone: true, selector: "[slAlertDialogAction]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.data-part": "part" } }, exportAs: ["slAlertDialogAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAlertDialogAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAlertDialogAction]',
+                    standalone: true,
+                    exportAs: 'slAlertDialogAction',
+                    host: { '[attr.data-part]': 'part', type: 'button', '(click)': 'press($event)' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DIALOG_DEFAULTS, SlAlertDialog, SlAlertDialogAction, SlAlertDialogCancel, SlAlertDialogIcon, SlDialog, SlDialogBase, SlDialogBody, SlDialogClose, SlDialogDescription, SlDialogFooter, SlDialogHeader, SlDialogIdFactory, SlDialogTitle, SlDialogTrigger, injectDialogDefaults, provideDialogDefaults };
+//# sourceMappingURL=slotted-angular-dialog.mjs.map