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

package/fesm2022/slotted-angular-notification-center.mjs

@@ -0,0 +1,1172 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, ElementRef, DestroyRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, TemplateRef, Directive, booleanAttribute, model, output, HostAttributeToken, viewChild, contentChild, signal, effect, untracked, afterRenderEffect } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlButton } from '@slotted/angular/button';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlSkeleton, SlSkeletonText } from '@slotted/angular/skeleton';
+import { SlTab, SlTabList, SlTabs } from '@slotted/angular/tabs';
+import { tabbables } from '@slotted/core/focus';
+import { notificationCenterMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { setSizeOf, formatTimestamp, feedFocusTarget } from '@slotted/core/timeline';
+import * as i1 from '@slotted/angular/tooltip';
+import { SlTooltip, SlTooltipLayer, SlTooltipContent, provideTooltipDefaults } from '@slotted/angular/tooltip';
+
+const FALLBACK = {
+    arrivals: 'hold',
+    controls: 'both',
+    growing: 'none',
+    level: '2',
+    size: 'md',
+    timeFormat: 'relative',
+};
+const NOTIFICATION_CENTER_DEFAULTS = new InjectionToken('slotted notification-center defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its notifications read — the size, the
+ * rank, how more loads, whether arrivals are held, how time is written, the
+ * time zone — rather than repeating them on every screen. A centre that states
+ * any of them itself still wins. Its words and locale come from the language
+ * in force (`provideSlotted`).
+ */
+function provideNotificationCenterDefaults(defaults) {
+    return {
+        provide: NOTIFICATION_CENTER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectNotificationCenterDefaults() {
+    return inject(NOTIFICATION_CENTER_DEFAULTS);
+}
+class SlNotificationCenterIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-notification-center-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * One of the family's own controls on an item — mark read or unread, and
+ * dismiss — and the tooltip it opens with the words its accessible name
+ * carries: on hover, and on keyboard focus. Two glyphs with no words beside
+ * them are two controls nobody can tell apart until they are named, and
+ * `aria-label` names them only to a screen reader. The construction is the
+ * one `top-navigation` gives its icon-only controls: `SlTooltip` is a host
+ * directive holding the state and the delays, and the control dispatches the
+ * pointer and the focus to it.
+ *
+ * On touch a hover never comes, so a press held on the control opens the hint
+ * the way the platform's own long press names a thing.
+ */
+class SlNotificationControl {
+    /** The words the control is named by, and the tooltip repeats. */
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    tooltip = inject(SlTooltip);
+    native = inject(ElementRef).nativeElement;
+    constructor() {
+        this.tooltip.triggerNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.tooltip.triggerNode.set(null));
+    }
+    describedBy = computed(() => this.tooltip.isOpen() ? this.tooltip.contentId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    onPointerEnter(event) {
+        if (event.pointerType === 'touch')
+            return;
+        this.tooltip.openAfterDelay(event);
+    }
+    onPointerLeave(event) {
+        this.tooltip.closeAfterDelay(event);
+    }
+    onPointerDown(event) {
+        if (event.pointerType === 'touch')
+            this.tooltip.pressAndHold(event);
+        else if (this.tooltip.isOpen())
+            this.tooltip.toggle(false, 'pointer', event);
+    }
+    onPointerUp() {
+        this.tooltip.cancelPending();
+    }
+    onFocus(event) {
+        if (!this.native.matches(':focus-visible'))
+            return;
+        this.tooltip.toggle(true, 'keyboard', event);
+    }
+    onBlur(event) {
+        if (this.tooltip.isOpen())
+            this.tooltip.toggle(false, 'blur', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlNotificationControl, isStandalone: true, selector: "button[slNotificationControl]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-label": "text()", "attr.aria-describedby": "describedBy()" } }, providers: [provideTooltipDefaults({ openOn: 'hover', side: 'bottom' })], hostDirectives: [{ directive: i1.SlTooltip }], ngImport: i0, template: `<ng-content /><ng-template slTooltipLayer>
+      <div slTooltipContent>{{ text() }}</div>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: SlTooltipLayer, selector: "ng-template[slTooltipLayer]", exportAs: ["slTooltipLayer"] }, { kind: "component", type: SlTooltipContent, selector: "[slTooltipContent]", exportAs: ["slTooltipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slNotificationControl]',
+                    standalone: true,
+                    imports: [SlTooltipLayer, SlTooltipContent],
+                    /* The glyph is the item's to choose, so it is projected. */
+                    template: `<ng-content /><ng-template slTooltipLayer>
+      <div slTooltipContent>{{ text() }}</div>
+    </ng-template>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: [provideTooltipDefaults({ openOn: 'hover', side: 'bottom' })],
+                    host: {
+                        type: 'button',
+                        '[attr.aria-label]': 'text()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
+
+/** How many skeleton rows stand in while nothing has arrived. */
+const WAITING_ROWS = [0, 1, 2];
+/**
+ * The family's own visual for an item with a tone and no visual of its own,
+ * as the contract's `toneGlyph` names it: every glyph a circle.
+ */
+const TONE_GLYPH = {
+    accent: 'circle-info',
+    secondary: 'bell',
+    success: 'circle-check',
+    warning: 'circle-alert',
+    danger: 'circle-x',
+};
+/** An identifier a key can be part of: word characters and hyphens stay, the rest is spelled out. */
+function escapeKey(key) {
+    return key.replace(/[^\w-]/g, (character) => `-${character.charCodeAt(0).toString(16)}-`);
+}
+function createRequest(reason, event) {
+    let cancelled = false;
+    return {
+        reason,
+        event,
+        get cancelled() {
+            return cancelled;
+        },
+        cancel() {
+            cancelled = true;
+        },
+    };
+}
+/** A click with no coordinates is a key. */
+function pressReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/** The items filed under their labels, in the order the labels first appear. */
+function groupItems(items, groupBy) {
+    const groups = [];
+    const byLabel = new Map();
+    for (const item of items) {
+        const label = groupBy(item);
+        let group = byLabel.get(label);
+        if (group === undefined) {
+            group = { label, items: [] };
+            byLabel.set(label, group);
+            groups.push(group);
+        }
+        group.items.push(item);
+    }
+    return groups;
+}
+/**
+ * Substitutes an item's content — the words between the visual and the
+ * controls; the article, its wiring and its controls stay the family's.
+ *
+ * ```html
+ * <ng-template slNotificationItem let-item let-time="time" let-ids="ids">
+ *   <span data-part="title" [id]="ids.title">{{ item.title }}</span>
+ * </ng-template>
+ * ```
+ */
+class SlNotificationItem {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationItem, isStandalone: true, selector: "ng-template[slNotificationItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationItem, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slNotificationItem]', standalone: true }]
+        }] });
+/**
+ * The visual of an item: an avatar, an icon. Absent, an item with a tone
+ * gets the family's glyph; one without gets no visual.
+ */
+class SlNotificationVisual {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationVisual, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationVisual, isStandalone: true, selector: "ng-template[slNotificationVisual]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationVisual, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slNotificationVisual]', standalone: true }]
+        }] });
+/** The consumer's controls for an item, under its body. */
+class SlNotificationActions {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationActions, isStandalone: true, selector: "ng-template[slNotificationActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationActions, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slNotificationActions]', standalone: true }]
+        }] });
+/**
+ * The persistent list of what happened while the reader was not looking.
+ *
+ * **It holds none of the facts.** `items` is the consumer's array: whether an
+ * item is read, whether it exists, how many there are. Marking, removing,
+ * opening, revealing and loading are outputs with a reason, and the store
+ * answers by changing the array.
+ *
+ * **One value moves: the view.** `[(view)]` for the value, `(viewRequest)`
+ * for the request that carries the reason and can be cancelled; the
+ * built-in `all` and `unread` when the consumer states no views. The strip
+ * is `tabs` holding its list alone; the feed is its one panel.
+ *
+ * **Arrivals are held while the reader reads.** Under `arrivals="hold"` a
+ * key the family has not shown, arriving while focus is inside the feed or
+ * the feed's scroller is past its start, waits behind `fresh` with a polite
+ * announcement; otherwise it shows at once.
+ *
+ * **The feed is the APG pattern.** `role="feed"`, an `article` per item with
+ * its position and the set's size, `PageDown` and `PageUp` between articles,
+ * `Control+End` and `Control+Home` out of the feed, `Delete` to ask for a
+ * removal, and `aria-busy` while a page is on its way.
+ */
+class SlNotificationCenter {
+    /** The consumer's array. The family holds none of its facts. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** The strip's entries. Unstated, the built-in `all` and `unread`; one entry draws no strip. */
+    views = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    level = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    growing = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "growing" }] : /* istanbul ignore next */ []));
+    arrivals = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrivals" }] : /* istanbul ignore next */ []));
+    timeFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    controls = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /** For the time; defaults to the language in force (`provideSlotted`). */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    /** The instant a relative time is measured from. State it for a stable server render. */
+    now = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    /** `aria-busy` on the feed; skeleton rows while nothing is loaded, the waiting row under growing otherwise. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** How many items exist in all, for `aria-setsize`. */
+    count = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Groups the feed: the label an item is filed under, in the order the items give. */
+    groupBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * heading, the controls, the views, the empty pages and the announcements.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The view an unbound centre starts on, read once. */
+    defaultView = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    /** The current view. Two-way, so a template may bind it directly. */
+    view = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** One output for one move of the view, carrying the reason; cancellable. */
+    viewRequest = output();
+    /** The keys and the value the family asks for. The store answers by changing `items`. */
+    readRequest = output();
+    /** Asked before an item is removed. The family removes nothing. */
+    removeRequest = output();
+    /** Asked before a title link navigates. Cancelling keeps the reader here. */
+    openRequest = output();
+    /** Asked before held arrivals are shown, with their count. */
+    revealRequest = output();
+    /** Asked when the reader presses the more control, or scrolls to it. */
+    loadMoreRequest = output();
+    /** A fact for the bell: the unread count among the items, whenever it changes. */
+    unreadChange = output();
+    defaults = injectNotificationCenterDefaults();
+    native = inject(ElementRef).nativeElement;
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    feedElement = viewChild('feed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "feedElement" }] : /* istanbul ignore next */ []));
+    freshElement = viewChild('fresh', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "freshElement" }] : /* istanbul ignore next */ []));
+    moreElement = viewChild('more', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreElement" }] : /* istanbul ignore next */ []));
+    itemTemplate = contentChild(SlNotificationItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    visualTemplate = contentChild(SlNotificationVisual, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visualTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * The tone's glyph, for an item with no visual of its own. `data-tone-glyph`
+     * tells the sheet the glyph is the family's, not the consumer's.
+     */
+    toneGlyph(tone) {
+        return TONE_GLYPH[tone];
+    }
+    actionsTemplate = contentChild(SlNotificationActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
+    id = inject(SlNotificationCenterIdFactory).next();
+    titleId = `${this.id}-title`;
+    feedId = `${this.id}-feed`;
+    waitingRows = WAITING_ROWS;
+    sizeValue = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+    levelValue = computed(() => this.level() ?? this.defaults.level, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levelValue" }] : /* istanbul ignore next */ []));
+    growingValue = computed(() => this.growing() ?? this.defaults.growing, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "growingValue" }] : /* istanbul ignore next */ []));
+    arrivalsValue = computed(() => this.arrivals() ?? this.defaults.arrivals, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrivalsValue" }] : /* istanbul ignore next */ []));
+    timeFormatValue = computed(() => this.timeFormat() ?? this.defaults.timeFormat, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormatValue" }] : /* istanbul ignore next */ []));
+    controlsValue = computed(() => this.controls() ?? this.defaults.controls, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlsValue" }] : /* istanbul ignore next */ []));
+    runtimeLocale = injectLocale();
+    localeValue = computed(() => this.locale() ?? this.runtimeLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeValue" }] : /* istanbul ignore next */ []));
+    timeZoneValue = computed(() => this.timeZone() ?? this.defaults.timeZone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZoneValue" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this centre's `messages` laid over them. */
+    t = injectMessages(notificationCenterMessages, this.messages);
+    /** The unread count among every item, held or shown. */
+    unread = computed(() => this.items().filter((item) => !item.read).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []));
+    viewList = computed(() => this.views() ?? [
+        { label: this.t('all'), value: 'all' },
+        { count: this.unread(), label: this.t('unreadView'), value: 'unread' },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewList" }] : /* istanbul ignore next */ []));
+    /** The view: the model, then defaultView, then the first entry. */
+    currentView = computed(() => this.view() ?? this.defaultView() ?? this.viewList()[0]?.value ?? 'all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    /** The keys the family has shown; a key outside it and outside `held` has just arrived. */
+    shown = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    /** The keys held behind `fresh`, in the order they arrived. */
+    held = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    pendingFocus = null;
+    shownItems = computed(() => {
+        if (this.arrivalsValue() !== 'hold')
+            return this.items();
+        const shown = this.shown();
+        return this.items().filter((item) => shown.has(item.key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownItems" }] : /* istanbul ignore next */ []));
+    visibleItems = computed(() => this.currentView() === 'unread'
+        ? this.shownItems().filter((item) => !item.read)
+        : this.shownItems(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    groups = computed(() => {
+        const groupBy = this.groupBy();
+        return groupBy === undefined ? [] : groupItems(this.visibleItems(), groupBy);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    setSize = computed(() => setSizeOf({
+        count: this.count(),
+        growing: this.growingValue(),
+        loaded: this.visibleItems().length,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setSize" }] : /* istanbul ignore next */ []));
+    waiting = computed(() => this.loading() && this.visibleItems().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+    showEmpty = computed(() => !this.waiting() && this.visibleItems().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    emptyWords = computed(() => this.currentView() === 'unread' ? this.t('caughtUp') : this.t('empty'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyWords" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.writtenLabel !== null || this.writtenLabelledBy !== null
+        ? this.writtenLabelledBy
+        : this.titleId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /*
+         * A key the family has not shown is either held or shown. Keys that
+         * left the array leave both sets. The first array is shown whole: nobody
+         * was reading before there was anything to read.
+         */
+        let first = true;
+        effect(() => {
+            const keys = new Set(this.items().map((item) => item.key));
+            const shown = untracked(() => this.shown());
+            const held = untracked(() => this.held());
+            const fresh = [...keys].filter((key) => !shown.has(key) && !held.includes(key));
+            const kept = held.filter((key) => keys.has(key));
+            const holding = untracked(() => this.arrivalsValue()) === 'hold';
+            if (fresh.length > 0 && holding && !first && untracked(() => this.reading())) {
+                this.held.set([...kept, ...fresh]);
+            }
+            else {
+                if (fresh.length > 0)
+                    this.shown.set(new Set([...shown, ...fresh]));
+                if (kept.length !== held.length)
+                    this.held.set(kept);
+            }
+            first = false;
+        });
+        /** Held arrivals are announced once per change of the count, politely. */
+        effect(() => {
+            const count = this.held().length;
+            if (count === 0)
+                return;
+            getLiveAnnouncer().announce(untracked(() => this.t('fresh', { count })));
+        });
+        /** The unread count is a fact for the bell, reported on the first read and on every change. */
+        let reported = null;
+        effect(() => {
+            const count = this.unread();
+            if (reported === count)
+                return;
+            const initial = reported === null;
+            reported = count;
+            this.unreadChange.emit(count);
+            if (!initial)
+                getLiveAnnouncer().announce(untracked(() => this.t('unread', { count })));
+        });
+        /** A keyboard reveal moves focus to the first revealed article once it is in the DOM. */
+        afterRenderEffect(() => {
+            this.visibleItems();
+            const key = this.pendingFocus;
+            if (key === null)
+                return;
+            this.pendingFocus = null;
+            this.native.querySelector(`article[data-key="${CSS.escape(key)}"]`)?.focus();
+        });
+        /**
+         * `growing="scroll"` asks when the end of the loaded list enters the
+         * scrollport. Only where the observer exists.
+         */
+        effect((onCleanup) => {
+            const more = this.moreElement()?.nativeElement;
+            if (this.growingValue() !== 'scroll' || more === undefined || this.loading())
+                return;
+            if (typeof IntersectionObserver === 'undefined')
+                return;
+            const observer = new IntersectionObserver((entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    this.loadMoreRequest.emit(createRequest('scroll', undefined));
+                }
+            });
+            observer.observe(more);
+            onCleanup(() => observer.disconnect());
+        });
+    }
+    /** Whether the reader is reading: focus in the feed, or the feed's scroller past its start. */
+    reading() {
+        const feed = this.feedElement()?.nativeElement;
+        if (feed === undefined)
+            return false;
+        const active = feed.ownerDocument.activeElement;
+        if (active !== null && feed.contains(active))
+            return true;
+        let node = feed.parentElement;
+        while (node !== null) {
+            if (node.scrollTop > 0)
+                return true;
+            node = node.parentElement;
+        }
+        return false;
+    }
+    pressReason(event) {
+        return pressReason(event);
+    }
+    contextOf(item, position) {
+        const escaped = escapeKey(item.key);
+        return {
+            $implicit: item,
+            ids: { description: `${this.id}-${escaped}-d`, title: `${this.id}-${escaped}-t` },
+            position,
+            time: formatTimestamp(item.time, {
+                format: this.timeFormatValue(),
+                locale: this.localeValue(),
+                now: this.now(),
+                timeZone: this.timeZoneValue(),
+            }),
+            tone: item.tone ?? 'accent',
+        };
+    }
+    positionOf(group, index) {
+        let before = 0;
+        for (const candidate of this.groups()) {
+            if (candidate === group)
+                break;
+            before += candidate.items.length;
+        }
+        return before + index + 1;
+    }
+    /** Asks to move the view, carrying the reason and the originating event. */
+    selectView(next, reason, source) {
+        if (next === this.currentView())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.currentView(),
+            onRequest: (request) => {
+                this.viewRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled || !moved)
+            return;
+        this.view.set(next);
+    }
+    forwardView(request) {
+        if (request.value === undefined)
+            return;
+        this.selectView(request.value, request.reason, request.source);
+    }
+    /** Asks to mark these keys read or unread. */
+    requestRead(keys, read, reason, event) {
+        if (keys.length === 0)
+            return;
+        this.readRequest.emit(Object.assign(createRequest(reason, event), { keys, read }));
+    }
+    markAll(event) {
+        this.requestRead(this.unreadShownKeys(), true, pressReason(event), event);
+    }
+    /** Asks to mark every unread shown item read, with the reason `programmatic`. */
+    markAllRead() {
+        this.requestRead(this.unreadShownKeys(), true, 'programmatic');
+    }
+    unreadShownKeys() {
+        return this.shownItems()
+            .filter((item) => !item.read)
+            .map((item) => item.key);
+    }
+    remove(key, reason, event) {
+        const request = Object.assign(createRequest(reason, event), { key });
+        this.removeRequest.emit(request);
+        return !request.cancelled;
+    }
+    open(key, event) {
+        const request = Object.assign(createRequest(pressReason(event), event), { key });
+        this.openRequest.emit(request);
+        if (request.cancelled)
+            event.preventDefault();
+    }
+    /** Shows the held arrivals; a keyboard press moves focus to the first of them. */
+    reveal(reason = 'programmatic', event) {
+        const held = this.held();
+        if (held.length === 0)
+            return;
+        const request = Object.assign(createRequest(reason, event), { count: held.length });
+        this.revealRequest.emit(request);
+        if (request.cancelled)
+            return;
+        if (reason === 'keyboard')
+            this.pendingFocus = held[0] ?? null;
+        this.shown.set(new Set([...this.shown(), ...held]));
+        this.held.set([]);
+    }
+    loadMore(event) {
+        this.loadMoreRequest.emit(createRequest(pressReason(event), event));
+    }
+    /** Moves focus to the first article, or to `fresh` when arrivals are held. */
+    focus() {
+        (this.freshElement()?.nativeElement ?? this.articles()[0])?.focus();
+    }
+    articles() {
+        const feed = this.feedElement()?.nativeElement;
+        return feed === undefined
+            ? []
+            : [...feed.querySelectorAll('article[data-part="item"]')];
+    }
+    onFeedKeydown(raw) {
+        const event = raw;
+        if (event.defaultPrevented)
+            return;
+        const feed = this.feedElement()?.nativeElement;
+        if (feed === undefined)
+            return;
+        const all = this.articles();
+        const from = all.findIndex((article) => article.contains(event.target));
+        if (from === -1)
+            return;
+        if (event.key === 'Delete' && event.target === all[from] && !event.repeat) {
+            const article = all[from];
+            if (!this.remove(article.dataset['key'] ?? '', 'keyboard', event))
+                return;
+            event.preventDefault();
+            const next = all[from + 1] ?? all[from - 1];
+            if (next !== undefined) {
+                next.focus();
+            }
+            else {
+                (this.freshElement()?.nativeElement ?? tabbables(this.native)[0])?.focus();
+            }
+            return;
+        }
+        const target = feedFocusTarget({
+            count: all.length,
+            ctrlKey: event.ctrlKey,
+            from,
+            key: event.key,
+            metaKey: event.metaKey,
+        });
+        if (target === null)
+            return;
+        const fresh = this.freshElement()?.nativeElement;
+        if (target === from && event.key === 'PageUp' && fresh !== undefined) {
+            event.preventDefault();
+            fresh.focus();
+            return;
+        }
+        event.preventDefault();
+        if (typeof target === 'number') {
+            all[target]?.focus();
+            return;
+        }
+        const page = tabbables(feed.ownerDocument.body);
+        const outside = target === 'after'
+            ? page.find((candidate) => feed.compareDocumentPosition(candidate) & Node.DOCUMENT_POSITION_FOLLOWING &&
+                !feed.contains(candidate))
+            : [...page]
+                .reverse()
+                .find((candidate) => feed.compareDocumentPosition(candidate) & Node.DOCUMENT_POSITION_PRECEDING &&
+                !feed.contains(candidate));
+        outside?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlNotificationCenter, isStandalone: true, selector: "[slNotificationCenter]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, growing: { classPropertyName: "growing", publicName: "growing", isSignal: true, isRequired: false, transformFunction: null }, arrivals: { classPropertyName: "arrivals", publicName: "arrivals", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", viewRequest: "viewRequest", readRequest: "readRequest", removeRequest: "removeRequest", openRequest: "openRequest", revealRequest: "revealRequest", loadMoreRequest: "loadMoreRequest", unreadChange: "unreadChange" }, host: { attributes: { "data-ui": "notification-center", "data-part": "root" }, properties: { "attr.data-size": "sizeValue()", "attr.data-level": "levelValue()", "attr.data-growing": "growingValue()", "attr.data-arrivals": "arrivalsValue()", "attr.data-time-format": "timeFormatValue()", "attr.data-controls": "controlsValue()", "attr.data-view": "currentView()", "attr.data-loading": "loading() ? '' : null", "attr.aria-labelledby": "labelledBy()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SlNotificationItem, descendants: true, isSignal: true }, { propertyName: "visualTemplate", first: true, predicate: SlNotificationVisual, descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SlNotificationActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "feedElement", first: true, predicate: ["feed"], descendants: true, isSignal: true }, { propertyName: "freshElement", first: true, predicate: ["fresh"], descendants: true, isSignal: true }, { propertyName: "moreElement", first: true, predicate: ["more"], descendants: true, isSignal: true }], exportAs: ["slNotificationCenter"], ngImport: i0, template: `
+    <div data-part="header">
+      @switch (levelValue()) {
+        @case ('3') {
+          <h3 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (unread() > 0) {
+              <span data-part="count">{{ unread() }}</span>
+            }
+          </h3>
+        }
+        @case ('4') {
+          <h4 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (unread() > 0) {
+              <span data-part="count">{{ unread() }}</span>
+            }
+          </h4>
+        }
+        @default {
+          <h2 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (unread() > 0) {
+              <span data-part="count">{{ unread() }}</span>
+            }
+          </h2>
+        }
+      }
+      <span data-part="mark-all">
+        <button
+          slButton
+          size="sm"
+          tone="secondary"
+          variant="ghost"
+          type="button"
+          [disabled]="unread() === 0"
+          (click)="markAll($event)"
+        >
+          {{ t('markAll') }}
+        </button>
+      </span>
+      <ng-content select="[slNotificationCenterActions]" />
+    </div>
+    @if (viewList().length > 1) {
+      <div data-part="views">
+        <div
+          slTabs
+          track="none"
+          [size]="sizeValue()"
+          [value]="currentView()"
+          (valueChange)="forwardView($event)"
+        >
+          <div slTabList [attr.aria-label]="t('views')">
+            @for (entry of viewList(); track entry.value) {
+              <div slTab [value]="entry.value" [controls]="feedId">
+                {{ entry.label }}
+                @if (entry.count !== undefined && entry.count > 0) {
+                  &ngsp;<span data-part="count">{{ entry.count }}</span>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+    @if (held().length > 0) {
+      <button #fresh data-part="fresh" type="button" (click)="reveal(pressReason($event), $event)">
+        {{ t('fresh', { count: held().length }) }}
+      </button>
+    }
+    <div
+      #feed
+      data-part="feed"
+      role="feed"
+      [id]="feedId"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      (keydown)="onFeedKeydown($event)"
+    >
+      @if (waiting()) {
+        @for (row of waitingRows; track row) {
+          <div data-part="item" aria-hidden="true">
+            <span data-part="visual"><span slSkeleton shape="circle" size="sm"></span></span>
+            <div data-part="content"><span slSkeletonText [lines]="2"></span></div>
+          </div>
+        }
+      } @else if (groupBy() === undefined) {
+        @for (item of visibleItems(); track item.key; let index = $index) {
+          <ng-container
+            [ngTemplateOutlet]="article"
+            [ngTemplateOutletContext]="{ $implicit: item, position: index + 1 }"
+          />
+        }
+      } @else {
+        @for (group of groups(); track group.label; let offset = $index) {
+          <div data-part="group">
+            @switch (levelValue()) {
+              @case ('3') {
+                <h4 data-part="group-label">{{ group.label }}</h4>
+              }
+              @case ('4') {
+                <h5 data-part="group-label">{{ group.label }}</h5>
+              }
+              @default {
+                <h3 data-part="group-label">{{ group.label }}</h3>
+              }
+            }
+            @for (item of group.items; track item.key; let index = $index) {
+              <ng-container
+                [ngTemplateOutlet]="article"
+                [ngTemplateOutletContext]="{ $implicit: item, position: positionOf(group, index) }"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+    @if (showEmpty()) {
+      <div data-part="empty">
+        <ng-content select="[slNotificationCenterEmpty]">{{ emptyWords() }}</ng-content>
+      </div>
+    } @else if (growingValue() !== 'none') {
+      @if (loading()) {
+        <div #more aria-live="polite" data-part="more">{{ t('loading') }}</div>
+      } @else if (growingValue() === 'button') {
+        <button #more data-part="more" type="button" (click)="loadMore($event)">
+          {{ t('loadMore') }}
+        </button>
+      } @else {
+        <div #more data-part="more"></div>
+      }
+    }
+    <ng-content select="[slNotificationCenterFooter]" />
+
+    <ng-template #article let-item let-position="position">
+      @let context = contextOf(item, position);
+      <article
+        data-part="item"
+        tabindex="0"
+        [attr.data-key]="item.key"
+        [attr.data-tone]="context.tone"
+        [attr.data-read]="item.read ? '' : null"
+        [attr.aria-labelledby]="context.ids.title"
+        [attr.aria-describedby]="item.description ? context.ids.description : null"
+        [attr.aria-posinset]="position"
+        [attr.aria-setsize]="setSize()"
+      >
+        @if (visualTemplate(); as visual) {
+          <span data-part="visual" [attr.data-tone]="item.tone ?? null">
+            <ng-container
+              [ngTemplateOutlet]="visual.template"
+              [ngTemplateOutletContext]="context"
+            />
+          </span>
+        } @else if (item.tone !== undefined) {
+          <span data-part="visual" [attr.data-tone]="item.tone"
+            ><span slIcon data-tone-glyph=""><svg slGlyph [name]="toneGlyph(item.tone)"></svg></span
+          ></span>
+        }
+        <div data-part="content">
+          @if (itemTemplate(); as own) {
+            <ng-container [ngTemplateOutlet]="own.template" [ngTemplateOutletContext]="context" />
+          } @else {
+            @if (item.href === undefined) {
+              <span data-part="title" [id]="context.ids.title">{{ item.title }}</span>
+            } @else {
+              <a
+                data-part="title"
+                [id]="context.ids.title"
+                [attr.href]="item.href"
+                (click)="open(item.key, $event)"
+                >{{ item.title }}</a
+              >
+            }
+            @if (item.description) {
+              <p data-part="description" [id]="context.ids.description">{{ item.description }}</p>
+            }
+            <time
+              data-part="time"
+              [attr.datetime]="context.time.dateTime"
+              [attr.title]="context.time.title"
+              >{{ context.time.text }}</time
+            >
+            @if (actionsTemplate(); as actions) {
+              <div data-part="actions">
+                <ng-container
+                  [ngTemplateOutlet]="actions.template"
+                  [ngTemplateOutletContext]="context"
+                />
+              </div>
+            }
+          }
+        </div>
+        @if (controlsValue() !== 'none') {
+          <div data-part="controls">
+            @if (controlsValue() !== 'dismiss') {
+              <button
+                slNotificationControl
+                data-part="read-toggle"
+                [text]="item.read ? t('markUnread') : t('markRead')"
+                (click)="requestRead([item.key], !item.read, pressReason($event), $event)"
+              >
+                <span slIcon><svg slGlyph [name]="item.read ? 'dot' : 'check'"></svg></span>
+              </button>
+            }
+            @if (controlsValue() !== 'read') {
+              <button
+                slNotificationControl
+                data-part="dismiss"
+                [text]="t('dismiss')"
+                (click)="remove(item.key, pressReason($event), $event)"
+              >
+                <span slIcon><svg slGlyph name="x"></svg></span>
+              </button>
+            }
+          </div>
+        }
+      </article>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=notification-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-notification-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-notification-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_tone-solid: var(--slotted-tone-accent-solid, Highlight);--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-surface: var(--slotted-tone-accent-surface, Canvas);--_unread-ground: color-mix( in oklab, var(--_tone-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent );--_inset-inline: var( --slotted-notification-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-notification-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-notification-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var( --slotted-notification-center-title-size-md, var(--slotted-font-size-lg, 1rem) );--_title-line-height: var(--slotted-line-height-lg, 1.5);--_item-title-size: var(--slotted-font-size-md, .875rem);--_item-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_visual: var(--slotted-avatar-size-sm, 28px);--_visual-glyph: calc(var(--_visual) * 6 / 7);--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_scrollbar-thumb: var( --slotted-notification-center-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-notification-center-scrollbar-track-color, transparent);background-color:var(--_ground);color:var(--_text);container-name:notification-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=notification-center][data-size=sm]{min-inline-size:var( --slotted-notification-center-min-inline-size-sm, min(22rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-notification-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-notification-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-notification-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var( --slotted-notification-center-title-size-sm, var(--slotted-font-size-md, .875rem) );--_title-line-height: var(--slotted-line-height-md, 1.5);--_item-title-size: var(--slotted-font-size-sm, .8125rem);--_item-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) );--_visual: var(--slotted-avatar-size-xs, 24px);--_visual-glyph: calc(var(--_visual) * 6 / 7)}[data-ui=notification-center]>[data-part=header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=header]>[data-part=title]{align-items:center;color:var(--_text);display:inline-flex;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui=notification-center] [data-part=count]{align-items:center;background-color:var(--slotted-surface-sunken, Canvas);block-size:var(--_count-box);border-radius:var(--slotted-radius-full, 9999px);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);box-sizing:border-box;color:var(--_muted);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=notification-center]>[data-part=header]>[data-part=title]>[data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=header]>[data-part=mark-all]{display:inline-flex}[data-ui=notification-center]>[data-part=header]>[data-part=actions]{align-items:center;display:inline-flex;font-size:var(--_meta-size);gap:var(--slotted-control-gap-sm, 6px);line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=fresh],[data-ui=notification-center]>button[data-part=more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=fresh]{background-color:var(--slotted-tone-accent-surface, Canvas);border-color:var(--slotted-tone-accent-border, Highlight);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=fresh]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, Canvas)}[data-ui=notification-center]>[data-part=fresh]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, Canvas)}[data-ui=notification-center]>button[data-part=more]:enabled:hover{background-color:var(--_hover)}[data-ui=notification-center]>button[data-part=more]:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>button[data-part=more]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=notification-center]>div[data-part=more]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:var(--slotted-space-6, 1rem);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-align:center}[data-ui=notification-center]>[data-part=fresh]:focus-visible,[data-ui=notification-center]>button[data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center]>[data-part=feed]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=item]:last-child,[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=group]:last-child>[data-part=item]:last-child{border-block-end:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]>[data-part=group-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);margin:0;padding-block:var(--_inset-block) var(--slotted-space-2, .25rem);padding-inline:var(--_inset-inline);text-transform:uppercase}[data-ui=notification-center]>[data-part=feed] [data-part=item]{align-items:flex-start;border-block-end:var(--_rule-size) solid var(--_rule);display:grid;gap:0 var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative;transition:background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=secondary]{--_tone-solid: var(--slotted-tone-secondary-solid, ButtonText);--_tone-text: var(--slotted-tone-secondary-text, ButtonText);--_tone-surface: var(--slotted-tone-secondary-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=success]{--_tone-solid: var(--slotted-tone-success-solid, ButtonText);--_tone-text: var(--slotted-tone-success-text, ButtonText);--_tone-surface: var(--slotted-tone-success-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=warning]{--_tone-solid: var(--slotted-tone-warning-solid, ButtonText);--_tone-text: var(--slotted-tone-warning-text, ButtonText);--_tone-surface: var(--slotted-tone-warning-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=danger]{--_tone-solid: var(--slotted-tone-danger-solid, ButtonText);--_tone-text: var(--slotted-tone-danger-text, ButtonText);--_tone-surface: var(--slotted-tone-danger-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read]){background-color:var(--_unread-ground)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]{align-items:center;display:flex;grid-column:1;justify-content:center;min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not(:has(>[data-part=visual]))>[data-part=content]{grid-column:1 / 3}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]:empty:not([data-tone]){display:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual][data-tone]:has(>[data-tone-glyph]){--slotted-icon-size: var(--_visual-glyph);align-items:center;background-image:radial-gradient(circle,var(--_tone-surface) calc(var(--_visual-glyph) * 9.5 / 24 - .5px),transparent calc(var(--_visual-glyph) * 9.5 / 24 + .5px));block-size:var(--_visual);color:var(--_tone-text);display:flex;inline-size:var(--_visual);justify-content:center}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]{display:flex;flex-direction:column;font-size:var(--_item-title-size);gap:var(--slotted-space-1, .125rem);grid-column:2;line-height:var(--_item-title-line-height);margin-block-start:max(0px,calc((var(--_visual) - 1lh) / 2));min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=title]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-title-clamp, 2);color:var(--_text);display:-webkit-box;font-size:var(--_item-title-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_item-title-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere;text-decoration:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read])>[data-part=content]>[data-part=title]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:after{content:\"\";inset:0;position:absolute}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:not([data-disabled]):hover{text-decoration:underline;text-underline-offset:.15em}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:focus-visible{outline:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=description]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-description-clamp, 3);color:var(--_muted);display:-webkit-box;font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=time]{color:var(--_muted);font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);margin-block-start:var(--slotted-space-2, .25rem);position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{display:flex;gap:var(--slotted-space-1, .125rem);grid-column:3;margin-block-start:max(0px,calc((var(--_visual) - var(--_control)) / 2));position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button{--slotted-icon-size: var(--_glyph);align-items:center;appearance:none;background:none;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:before{block-size:max(var(--_control),var(--slotted-target-min, 24px));content:\"\";inline-size:max(var(--_control),var(--slotted-target-min, 24px));inset-block-start:50%;inset-inline-start:50%;position:absolute;translate:-50% -50%}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:hover{background-color:var(--_hover);color:var(--_text)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center][data-controls=read]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=dismiss],[data-ui=notification-center][data-controls=dismiss]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=read-toggle],[data-ui=notification-center][data-controls=none]>[data-part=feed] [data-part=item]>[data-part=controls]{display:none}[data-ui=notification-center]>[data-part=feed]>[data-part=item][aria-hidden]{background-color:transparent}[data-ui=notification-center]>[data-part=empty]{color:var(--_muted);display:grid;font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:calc(2 * var(--slotted-space-12, 4rem));padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);place-items:center;text-align:center}[data-ui=notification-center]>[data-part=footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);margin-block-start:auto;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}@container notification-center (max-width: 319px){[data-ui=notification-center]>[data-part=feed] [data-part=item]{grid-template-columns:auto minmax(0,1fr)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{grid-column:2;justify-content:flex-end;margin-block-start:var(--slotted-space-2, .25rem)}}@media(pointer:coarse){[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{--_control: var(--slotted-target-comfortable, 44px);margin-block-start:calc((var(--_visual) - var(--_control)) / 2)}}@media(forced-colors:active){[data-ui=notification-center] [data-part=count]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlNotificationControl, selector: "button[slNotificationControl]", inputs: ["text"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }, { kind: "component", type: SlTab, selector: "[slTab]", inputs: ["value", "disabled", "dismissible", "dismissLabel", "href", "controls"], exportAs: ["slTab"] }, { kind: "directive", type: SlTabList, selector: "[slTabList]", exportAs: ["slTabList"] }, { kind: "component", type: SlTabs, selector: "[slTabs]", inputs: ["value", "defaultValue", "activation", "orientation", "size", "variant", "track", "fit", "mount", "loop", "disabled"], outputs: ["valueChange", "tabDismiss"], exportAs: ["slTabs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenter, decorators: [{
+            type: Component,
+            args: [{ selector: '[slNotificationCenter]', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlGlyph,
+                        SlIcon,
+                        SlNotificationControl,
+                        SlSkeleton,
+                        SlSkeletonText,
+                        SlTab,
+                        SlTabList,
+                        SlTabs,
+                    ], template: `
+    <div data-part="header">
+      @switch (levelValue()) {
+        @case ('3') {
+          <h3 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (unread() > 0) {
+              <span data-part="count">{{ unread() }}</span>
+            }
+          </h3>
+        }
+        @case ('4') {
+          <h4 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (unread() > 0) {
+              <span data-part="count">{{ unread() }}</span>
+            }
+          </h4>
+        }
+        @default {
+          <h2 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (unread() > 0) {
+              <span data-part="count">{{ unread() }}</span>
+            }
+          </h2>
+        }
+      }
+      <span data-part="mark-all">
+        <button
+          slButton
+          size="sm"
+          tone="secondary"
+          variant="ghost"
+          type="button"
+          [disabled]="unread() === 0"
+          (click)="markAll($event)"
+        >
+          {{ t('markAll') }}
+        </button>
+      </span>
+      <ng-content select="[slNotificationCenterActions]" />
+    </div>
+    @if (viewList().length > 1) {
+      <div data-part="views">
+        <div
+          slTabs
+          track="none"
+          [size]="sizeValue()"
+          [value]="currentView()"
+          (valueChange)="forwardView($event)"
+        >
+          <div slTabList [attr.aria-label]="t('views')">
+            @for (entry of viewList(); track entry.value) {
+              <div slTab [value]="entry.value" [controls]="feedId">
+                {{ entry.label }}
+                @if (entry.count !== undefined && entry.count > 0) {
+                  &ngsp;<span data-part="count">{{ entry.count }}</span>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+    @if (held().length > 0) {
+      <button #fresh data-part="fresh" type="button" (click)="reveal(pressReason($event), $event)">
+        {{ t('fresh', { count: held().length }) }}
+      </button>
+    }
+    <div
+      #feed
+      data-part="feed"
+      role="feed"
+      [id]="feedId"
+      [attr.aria-labelledby]="titleId"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      (keydown)="onFeedKeydown($event)"
+    >
+      @if (waiting()) {
+        @for (row of waitingRows; track row) {
+          <div data-part="item" aria-hidden="true">
+            <span data-part="visual"><span slSkeleton shape="circle" size="sm"></span></span>
+            <div data-part="content"><span slSkeletonText [lines]="2"></span></div>
+          </div>
+        }
+      } @else if (groupBy() === undefined) {
+        @for (item of visibleItems(); track item.key; let index = $index) {
+          <ng-container
+            [ngTemplateOutlet]="article"
+            [ngTemplateOutletContext]="{ $implicit: item, position: index + 1 }"
+          />
+        }
+      } @else {
+        @for (group of groups(); track group.label; let offset = $index) {
+          <div data-part="group">
+            @switch (levelValue()) {
+              @case ('3') {
+                <h4 data-part="group-label">{{ group.label }}</h4>
+              }
+              @case ('4') {
+                <h5 data-part="group-label">{{ group.label }}</h5>
+              }
+              @default {
+                <h3 data-part="group-label">{{ group.label }}</h3>
+              }
+            }
+            @for (item of group.items; track item.key; let index = $index) {
+              <ng-container
+                [ngTemplateOutlet]="article"
+                [ngTemplateOutletContext]="{ $implicit: item, position: positionOf(group, index) }"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+    @if (showEmpty()) {
+      <div data-part="empty">
+        <ng-content select="[slNotificationCenterEmpty]">{{ emptyWords() }}</ng-content>
+      </div>
+    } @else if (growingValue() !== 'none') {
+      @if (loading()) {
+        <div #more aria-live="polite" data-part="more">{{ t('loading') }}</div>
+      } @else if (growingValue() === 'button') {
+        <button #more data-part="more" type="button" (click)="loadMore($event)">
+          {{ t('loadMore') }}
+        </button>
+      } @else {
+        <div #more data-part="more"></div>
+      }
+    }
+    <ng-content select="[slNotificationCenterFooter]" />
+
+    <ng-template #article let-item let-position="position">
+      @let context = contextOf(item, position);
+      <article
+        data-part="item"
+        tabindex="0"
+        [attr.data-key]="item.key"
+        [attr.data-tone]="context.tone"
+        [attr.data-read]="item.read ? '' : null"
+        [attr.aria-labelledby]="context.ids.title"
+        [attr.aria-describedby]="item.description ? context.ids.description : null"
+        [attr.aria-posinset]="position"
+        [attr.aria-setsize]="setSize()"
+      >
+        @if (visualTemplate(); as visual) {
+          <span data-part="visual" [attr.data-tone]="item.tone ?? null">
+            <ng-container
+              [ngTemplateOutlet]="visual.template"
+              [ngTemplateOutletContext]="context"
+            />
+          </span>
+        } @else if (item.tone !== undefined) {
+          <span data-part="visual" [attr.data-tone]="item.tone"
+            ><span slIcon data-tone-glyph=""><svg slGlyph [name]="toneGlyph(item.tone)"></svg></span
+          ></span>
+        }
+        <div data-part="content">
+          @if (itemTemplate(); as own) {
+            <ng-container [ngTemplateOutlet]="own.template" [ngTemplateOutletContext]="context" />
+          } @else {
+            @if (item.href === undefined) {
+              <span data-part="title" [id]="context.ids.title">{{ item.title }}</span>
+            } @else {
+              <a
+                data-part="title"
+                [id]="context.ids.title"
+                [attr.href]="item.href"
+                (click)="open(item.key, $event)"
+                >{{ item.title }}</a
+              >
+            }
+            @if (item.description) {
+              <p data-part="description" [id]="context.ids.description">{{ item.description }}</p>
+            }
+            <time
+              data-part="time"
+              [attr.datetime]="context.time.dateTime"
+              [attr.title]="context.time.title"
+              >{{ context.time.text }}</time
+            >
+            @if (actionsTemplate(); as actions) {
+              <div data-part="actions">
+                <ng-container
+                  [ngTemplateOutlet]="actions.template"
+                  [ngTemplateOutletContext]="context"
+                />
+              </div>
+            }
+          }
+        </div>
+        @if (controlsValue() !== 'none') {
+          <div data-part="controls">
+            @if (controlsValue() !== 'dismiss') {
+              <button
+                slNotificationControl
+                data-part="read-toggle"
+                [text]="item.read ? t('markUnread') : t('markRead')"
+                (click)="requestRead([item.key], !item.read, pressReason($event), $event)"
+              >
+                <span slIcon><svg slGlyph [name]="item.read ? 'dot' : 'check'"></svg></span>
+              </button>
+            }
+            @if (controlsValue() !== 'read') {
+              <button
+                slNotificationControl
+                data-part="dismiss"
+                [text]="t('dismiss')"
+                (click)="remove(item.key, pressReason($event), $event)"
+              >
+                <span slIcon><svg slGlyph name="x"></svg></span>
+              </button>
+            }
+          </div>
+        }
+      </article>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slNotificationCenter', host: {
+                        'data-ui': 'notification-center',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'sizeValue()',
+                        '[attr.data-level]': 'levelValue()',
+                        '[attr.data-growing]': 'growingValue()',
+                        '[attr.data-arrivals]': 'arrivalsValue()',
+                        '[attr.data-time-format]': 'timeFormatValue()',
+                        '[attr.data-controls]': 'controlsValue()',
+                        '[attr.data-view]': 'currentView()',
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                    }, styles: ["@layer slotted.components{[data-ui=notification-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-notification-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-notification-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_tone-solid: var(--slotted-tone-accent-solid, Highlight);--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-surface: var(--slotted-tone-accent-surface, Canvas);--_unread-ground: color-mix( in oklab, var(--_tone-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent );--_inset-inline: var( --slotted-notification-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-notification-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-notification-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var( --slotted-notification-center-title-size-md, var(--slotted-font-size-lg, 1rem) );--_title-line-height: var(--slotted-line-height-lg, 1.5);--_item-title-size: var(--slotted-font-size-md, .875rem);--_item-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_visual: var(--slotted-avatar-size-sm, 28px);--_visual-glyph: calc(var(--_visual) * 6 / 7);--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_scrollbar-thumb: var( --slotted-notification-center-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-notification-center-scrollbar-track-color, transparent);background-color:var(--_ground);color:var(--_text);container-name:notification-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=notification-center][data-size=sm]{min-inline-size:var( --slotted-notification-center-min-inline-size-sm, min(22rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-notification-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-notification-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-notification-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var( --slotted-notification-center-title-size-sm, var(--slotted-font-size-md, .875rem) );--_title-line-height: var(--slotted-line-height-md, 1.5);--_item-title-size: var(--slotted-font-size-sm, .8125rem);--_item-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) );--_visual: var(--slotted-avatar-size-xs, 24px);--_visual-glyph: calc(var(--_visual) * 6 / 7)}[data-ui=notification-center]>[data-part=header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=header]>[data-part=title]{align-items:center;color:var(--_text);display:inline-flex;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui=notification-center] [data-part=count]{align-items:center;background-color:var(--slotted-surface-sunken, Canvas);block-size:var(--_count-box);border-radius:var(--slotted-radius-full, 9999px);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);box-sizing:border-box;color:var(--_muted);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=notification-center]>[data-part=header]>[data-part=title]>[data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=header]>[data-part=mark-all]{display:inline-flex}[data-ui=notification-center]>[data-part=header]>[data-part=actions]{align-items:center;display:inline-flex;font-size:var(--_meta-size);gap:var(--slotted-control-gap-sm, 6px);line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=fresh],[data-ui=notification-center]>button[data-part=more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=fresh]{background-color:var(--slotted-tone-accent-surface, Canvas);border-color:var(--slotted-tone-accent-border, Highlight);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=fresh]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, Canvas)}[data-ui=notification-center]>[data-part=fresh]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, Canvas)}[data-ui=notification-center]>button[data-part=more]:enabled:hover{background-color:var(--_hover)}[data-ui=notification-center]>button[data-part=more]:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>button[data-part=more]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=notification-center]>div[data-part=more]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:var(--slotted-space-6, 1rem);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-align:center}[data-ui=notification-center]>[data-part=fresh]:focus-visible,[data-ui=notification-center]>button[data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center]>[data-part=feed]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=item]:last-child,[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=group]:last-child>[data-part=item]:last-child{border-block-end:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]>[data-part=group-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);margin:0;padding-block:var(--_inset-block) var(--slotted-space-2, .25rem);padding-inline:var(--_inset-inline);text-transform:uppercase}[data-ui=notification-center]>[data-part=feed] [data-part=item]{align-items:flex-start;border-block-end:var(--_rule-size) solid var(--_rule);display:grid;gap:0 var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative;transition:background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=secondary]{--_tone-solid: var(--slotted-tone-secondary-solid, ButtonText);--_tone-text: var(--slotted-tone-secondary-text, ButtonText);--_tone-surface: var(--slotted-tone-secondary-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=success]{--_tone-solid: var(--slotted-tone-success-solid, ButtonText);--_tone-text: var(--slotted-tone-success-text, ButtonText);--_tone-surface: var(--slotted-tone-success-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=warning]{--_tone-solid: var(--slotted-tone-warning-solid, ButtonText);--_tone-text: var(--slotted-tone-warning-text, ButtonText);--_tone-surface: var(--slotted-tone-warning-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=danger]{--_tone-solid: var(--slotted-tone-danger-solid, ButtonText);--_tone-text: var(--slotted-tone-danger-text, ButtonText);--_tone-surface: var(--slotted-tone-danger-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read]){background-color:var(--_unread-ground)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]{align-items:center;display:flex;grid-column:1;justify-content:center;min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not(:has(>[data-part=visual]))>[data-part=content]{grid-column:1 / 3}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]:empty:not([data-tone]){display:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual][data-tone]:has(>[data-tone-glyph]){--slotted-icon-size: var(--_visual-glyph);align-items:center;background-image:radial-gradient(circle,var(--_tone-surface) calc(var(--_visual-glyph) * 9.5 / 24 - .5px),transparent calc(var(--_visual-glyph) * 9.5 / 24 + .5px));block-size:var(--_visual);color:var(--_tone-text);display:flex;inline-size:var(--_visual);justify-content:center}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]{display:flex;flex-direction:column;font-size:var(--_item-title-size);gap:var(--slotted-space-1, .125rem);grid-column:2;line-height:var(--_item-title-line-height);margin-block-start:max(0px,calc((var(--_visual) - 1lh) / 2));min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=title]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-title-clamp, 2);color:var(--_text);display:-webkit-box;font-size:var(--_item-title-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_item-title-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere;text-decoration:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read])>[data-part=content]>[data-part=title]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:after{content:\"\";inset:0;position:absolute}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:not([data-disabled]):hover{text-decoration:underline;text-underline-offset:.15em}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:focus-visible{outline:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=description]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-description-clamp, 3);color:var(--_muted);display:-webkit-box;font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=time]{color:var(--_muted);font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);margin-block-start:var(--slotted-space-2, .25rem);position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{display:flex;gap:var(--slotted-space-1, .125rem);grid-column:3;margin-block-start:max(0px,calc((var(--_visual) - var(--_control)) / 2));position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button{--slotted-icon-size: var(--_glyph);align-items:center;appearance:none;background:none;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:before{block-size:max(var(--_control),var(--slotted-target-min, 24px));content:\"\";inline-size:max(var(--_control),var(--slotted-target-min, 24px));inset-block-start:50%;inset-inline-start:50%;position:absolute;translate:-50% -50%}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:hover{background-color:var(--_hover);color:var(--_text)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center][data-controls=read]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=dismiss],[data-ui=notification-center][data-controls=dismiss]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=read-toggle],[data-ui=notification-center][data-controls=none]>[data-part=feed] [data-part=item]>[data-part=controls]{display:none}[data-ui=notification-center]>[data-part=feed]>[data-part=item][aria-hidden]{background-color:transparent}[data-ui=notification-center]>[data-part=empty]{color:var(--_muted);display:grid;font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:calc(2 * var(--slotted-space-12, 4rem));padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);place-items:center;text-align:center}[data-ui=notification-center]>[data-part=footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);margin-block-start:auto;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}@container notification-center (max-width: 319px){[data-ui=notification-center]>[data-part=feed] [data-part=item]{grid-template-columns:auto minmax(0,1fr)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{grid-column:2;justify-content:flex-end;margin-block-start:var(--slotted-space-2, .25rem)}}@media(pointer:coarse){[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{--_control: var(--slotted-target-comfortable, 44px);margin-block-start:calc((var(--_visual) - var(--_control)) / 2)}}@media(forced-colors:active){[data-ui=notification-center] [data-part=count]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], growing: [{ type: i0.Input, args: [{ isSignal: true, alias: "growing", required: false }] }], arrivals: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrivals", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], viewRequest: [{ type: i0.Output, args: ["viewRequest"] }], readRequest: [{ type: i0.Output, args: ["readRequest"] }], removeRequest: [{ type: i0.Output, args: ["removeRequest"] }], openRequest: [{ type: i0.Output, args: ["openRequest"] }], revealRequest: [{ type: i0.Output, args: ["revealRequest"] }], loadMoreRequest: [{ type: i0.Output, args: ["loadMoreRequest"] }], unreadChange: [{ type: i0.Output, args: ["unreadChange"] }], feedElement: [{ type: i0.ViewChild, args: ['feed', { isSignal: true }] }], freshElement: [{ type: i0.ViewChild, args: ['fresh', { isSignal: true }] }], moreElement: [{ type: i0.ViewChild, args: ['more', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNotificationItem), { isSignal: true }] }], visualTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNotificationVisual), { isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNotificationActions), { isSignal: true }] }] } });
+/** The consumer's own controls in the header, after mark-all: a preferences link, a menu. */
+class SlNotificationCenterActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterActions, isStandalone: true, selector: "[slNotificationCenterActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slNotificationCenterActions]',
+                    standalone: true,
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/** The consumer's link from the popover to the page. */
+class SlNotificationCenterFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterFooter, isStandalone: true, selector: "[slNotificationCenterFooter]", host: { attributes: { "data-part": "footer" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slNotificationCenterFooter]',
+                    standalone: true,
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/** The empty page: a result-state, projected in place of the family's words. */
+class SlNotificationCenterEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterEmpty, isStandalone: true, selector: "[slNotificationCenterEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slNotificationCenterEmpty]', standalone: true }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NOTIFICATION_CENTER_DEFAULTS, SlNotificationActions, SlNotificationCenter, SlNotificationCenterActions, SlNotificationCenterEmpty, SlNotificationCenterFooter, SlNotificationCenterIdFactory, SlNotificationItem, SlNotificationVisual, injectNotificationCenterDefaults, provideNotificationCenterDefaults };
+//# sourceMappingURL=slotted-angular-notification-center.mjs.map