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

package/types/slotted-angular-navigation-menu.d.ts

@@ -0,0 +1,309 @@
+import * as _slotted_core_navigation_menu from '@slotted/core/navigation-menu';
+import { NavigationMenuMotion } from '@slotted/core/navigation-menu';
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, NavigationMenuMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import { PresenceStatus } from '@slotted/core/presence';
+
+/** The control step of a trigger and of a top-level link. */
+type NavigationMenuSize = 'sm' | 'md' | 'lg';
+/** A row under which panels open, or a column beside which they open. */
+type NavigationMenuOrientation = 'horizontal' | 'vertical';
+/** How many columns of links or groups a panel lays out. */
+type NavigationMenuColumns = 1 | 2 | 3;
+/** Why the open section moved. */
+type NavigationMenuValueReason = 'pointer' | 'keyboard' | 'escape' | 'outsidePress' | 'blur' | 'select' | 'programmatic';
+interface NavigationMenuDefaults {
+    /** Draws the mark on the surface's edge that points at the open trigger. */
+    arrow: boolean;
+    /** Milliseconds a pointer leaving the root waits before the section closes. */
+    closeDelay: number;
+    /** A link inside a panel closes the panel when it is followed. */
+    closeOnSelect: boolean;
+    /** Milliseconds a pointer rests on a trigger before its section opens. */
+    openDelay: number;
+    size: NavigationMenuSize;
+}
+/** The contract's defaults. */
+declare const NAVIGATION_MENU_FALLBACK: NavigationMenuDefaults;
+declare const NAVIGATION_MENU_DEFAULTS: InjectionToken<NavigationMenuDefaults>;
+/**
+ * An application decides once how its navigation menus behave — the hover
+ * delays, whether following a link closes the panel, the size, the arrow —
+ * rather than on every instance. An instance that states any of them still
+ * wins. Its words come from the language in force (`provideSlotted`).
+ */
+declare function provideNavigationMenuDefaults(defaults: Partial<NavigationMenuDefaults>): {
+    provide: InjectionToken<NavigationMenuDefaults>;
+    useFactory: () => NavigationMenuDefaults;
+};
+/** What a navigation menu renders as here, before it states anything of its own. */
+declare function injectNavigationMenuDefaults(): NavigationMenuDefaults;
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+declare class SlNavigationMenuIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * What a section is to the parts inside it: the item of this family, or the
+ * item of another family that carries a section — `top-navigation`'s — which
+ * provides the same token.
+ */
+interface NavigationMenuSection {
+    readonly contentId: string;
+    value(): string;
+    open(): boolean;
+    disabled(): boolean;
+    hasCurrent(): boolean;
+    reportCurrent(link: object, current: boolean): void;
+}
+declare const NAVIGATION_MENU_SECTION: InjectionToken<NavigationMenuSection>;
+/** Provided by a panel, so a root inside one knows it is a second level. */
+declare const NAVIGATION_MENU_PANEL: InjectionToken<boolean>;
+interface NavigationMenuCrossing {
+    from: string | null;
+    to: string | null;
+    enter: NavigationMenuMotion | null;
+    exit: NavigationMenuMotion | null;
+}
+/**
+ * The sections of a site or an application, each a button that shows a panel
+ * of links under the row — or beside the column — with direct links beside
+ * them.
+ *
+ * The directive goes on the consumer's own element: `<nav slNavigationMenu>`
+ * on its own, `<div slNavigationMenu>` inside another one's panel, where it is
+ * a second level — vertical, with no surface of its own, switching inside the
+ * outer panel. It is a directive rather than a component so that another
+ * family can carry it on its own part — `top-navigation`'s nav does, as a host
+ * directive — and it appends the one surface after the consumer's list
+ * itself. The stylesheet comes with the list and the trigger, the two parts
+ * every menu has.
+ *
+ * **One value.** `value` is the open section, two-way; every way it moves
+ * asks through `valueChangeRequest` with its reason.
+ *
+ * **The panel stays in its item.** Each panel follows its trigger in the
+ * DOM, which is the disclosure example's structure and what lets Tab reach
+ * it. The root writes the open panel's measured size and place on itself
+ * (`@slotted/core/navigation-menu`); the stylesheet lays the panel over the
+ * surface and moves both on one interpolation.
+ */
+declare class SlNavigationMenu {
+    /** The open section's value, or null. Two-way, so a template may bind it directly. */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    readonly size: _angular_core.InputSignal<NavigationMenuSize | undefined>;
+    /** A row or a column. Unstated, a second level is a column and a first level a row. */
+    readonly orientation: _angular_core.InputSignal<NavigationMenuOrientation | undefined>;
+    /** Draws the mark on the surface's edge that points at the open trigger. */
+    readonly arrow: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Milliseconds a pointer rests on a trigger before its section opens. */
+    readonly openDelay: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** Milliseconds a pointer leaving the root waits before the section closes. */
+    readonly closeDelay: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** A link inside a panel closes the panel when it is followed. A link's own input wins. */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Words laid over the catalog of the language in force. A static `aria-label` still wins. */
+    readonly messages: _angular_core.InputSignal<PartialMessages<NavigationMenuMessages> | undefined>;
+    /** One output for one transition, carrying the reason and the event. */
+    readonly valueChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<string | null>>;
+    private readonly defaults;
+    private readonly writtenLabel;
+    readonly outer: SlNavigationMenu | null;
+    readonly nested: boolean;
+    readonly host: HTMLElement;
+    readonly resolvedSize: _angular_core.Signal<NavigationMenuSize>;
+    readonly resolvedOrientation: _angular_core.Signal<NavigationMenuOrientation>;
+    readonly resolvedArrow: _angular_core.Signal<boolean>;
+    readonly resolvedOpenDelay: _angular_core.Signal<number>;
+    readonly resolvedCloseDelay: _angular_core.Signal<number>;
+    readonly resolvedCloseOnSelect: _angular_core.Signal<boolean>;
+    readonly t: _slotted_core_i18n.FamilyTranslator<NavigationMenuMessages>;
+    protected readonly ariaLabel: _angular_core.Signal<string | null>;
+    /** The crossing between the section that left and the one that arrived. */
+    readonly motion: _angular_core.WritableSignal<NavigationMenuCrossing>;
+    readonly positioned: _angular_core.WritableSignal<boolean>;
+    /** Whether the open section stands in this root's list, where the surface can reach it. */
+    readonly surfaced: _angular_core.WritableSignal<boolean>;
+    /** Each section's panel id, by value: a section another family moved out of the list keeps one. */
+    private readonly panels;
+    private readonly tick;
+    private opened;
+    /** The pointer: a delay to open, a switch without one, a delay to close. */
+    protected readonly intent: _slotted_core_navigation_menu.HoverIntentHandle;
+    constructor();
+    /** A section says where its panel is, wherever another family moves it. */
+    register(value: string, contentId: string): () => void;
+    /** The open section's panel, wherever it stands in the document. */
+    openPanel(): HTMLElement | null;
+    /** Asks the open section to move. */
+    request(next: string | null, reason: NavigationMenuValueReason, source?: Event): void;
+    /** A panel link was followed: every level closes, with the reason `select`. */
+    select(source?: Event): void;
+    /** The pointer entered a trigger. */
+    hover(value: string, pointerType: string): void;
+    /** Measures the open panel again on the next render. */
+    remeasure(): void;
+    /** Opens one section, with the reason `programmatic`. */
+    open(value: string): void;
+    /** Closes the open section, with the reason `programmatic`. */
+    close(): void;
+    /** Focuses one section's trigger, or the first top-level control. */
+    focus(value?: string): void;
+    /** The surface, measured from the open panel and placed under (or beside) its trigger. */
+    private measure;
+    protected onPointerLeave(event: PointerEvent): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenu, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenu, "[slNavigationMenu]", ["slNavigationMenu"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChangeRequest": "valueChangeRequest"; }, never, never, true, never>;
+}
+
+/**
+ * The sections and the top-level links, in a row or a column. A component
+ * for one reason: it brings the family's stylesheet, which the root — a
+ * directive another family may carry — cannot.
+ */
+declare class SlNavigationMenuList {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlNavigationMenuList, "ul[slNavigationMenuList]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * One section — a trigger followed by its panel — or one top-level link. It
+ * carries `data-open` while its panel is shown, and knows whether a link
+ * inside the panel is the current page.
+ */
+declare class SlNavigationMenuItem implements NavigationMenuSection {
+    /** The item's identity: what the root's `value` names it by. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** The section or the top-level link refuses interaction. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly navigation: SlNavigationMenu;
+    readonly contentId: string;
+    readonly open: _angular_core.Signal<boolean>;
+    private readonly currents;
+    /** Whether a link inside this item's panel is the current page. */
+    readonly hasCurrent: _angular_core.Signal<boolean>;
+    constructor();
+    /** A link inside the panel says whether it is the current page. */
+    reportCurrent(link: object, current: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuItem, "li[slNavigationMenuItem]", ["slNavigationMenuItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * What makes a button a section's trigger: `aria-expanded` and
+ * `aria-controls` toward its panel, `data-open` and `data-current`, a press
+ * and a resting pointer. A host directive, so another family's trigger —
+ * `top-navigation`'s — is wired by the same lines.
+ */
+declare class SlNavigationMenuTriggerWiring {
+    protected readonly section: NavigationMenuSection;
+    private readonly navigation;
+    protected onClick(event: MouseEvent): void;
+    protected onPointerEnter(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuTriggerWiring, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuTriggerWiring, "[slNavigationMenuTriggerWiring]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The section's button: always a native `button`, because it owns
+ * `aria-expanded` and `aria-controls` and the family wires both. The chevron
+ * is the family's own mark.
+ */
+declare class SlNavigationMenuTrigger {
+    private readonly navigation;
+    protected readonly vertical: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuTrigger, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlNavigationMenuTrigger, "button[slNavigationMenuTrigger]", ["slNavigationMenuTrigger"], {}, {}, never, ["*"], true, [{ directive: typeof SlNavigationMenuTriggerWiring; inputs: {}; outputs: {}; }]>;
+}
+/**
+ * The section's panel, after its trigger in the same item. It stays in the
+ * document while it leaves — `@slotted/core/presence` holds it for the exit —
+ * and is `hidden` otherwise, so the tab sequence, a static render and a search
+ * engine read every destination. It tells a root rendered inside it that it is
+ * a second level.
+ */
+declare class SlNavigationMenuContent {
+    /** How many columns of links or groups the panel lays out. */
+    readonly columns: _angular_core.InputSignalWithTransform<NavigationMenuColumns, string | NavigationMenuColumns>;
+    protected readonly item: NavigationMenuSection;
+    private readonly navigation;
+    protected readonly status: _angular_core.WritableSignal<PresenceStatus>;
+    protected readonly crossing: _angular_core.Signal<_slotted_core_navigation_menu.NavigationMenuMotion | null>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuContent, "[slNavigationMenuContent]", ["slNavigationMenuContent"], { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * A destination, at the top level or inside a panel. `current` — or the
+ * `aria-current` a router writes — marks the page the reader is on and tells
+ * the section's trigger. Inside a panel, following it closes every level.
+ */
+declare class SlNavigationMenuLink {
+    /** This link is the page the reader is on. Unstated, a router's `aria-current` is read. */
+    readonly current: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** The destination is unavailable: the click is refused and the `href` kept. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Following this link closes the panel. Wins over the root's `closeOnSelect`. */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    private readonly navigation;
+    private readonly item;
+    private readonly inPanel;
+    private readonly writtenCurrent;
+    readonly resolvedCurrent: _angular_core.Signal<boolean>;
+    constructor();
+    protected onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuLink, "a[slNavigationMenuLink]", ["slNavigationMenuLink"], { "current": { "alias": "current"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** A grid of links inside a panel or a group. */
+declare class SlNavigationMenuLinks {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuLinks, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuLinks, "ul[slNavigationMenuLinks]", never, {}, {}, never, never, true, never>;
+}
+/** A column of a panel with a title that names the links under it. */
+declare class SlNavigationMenuGroup {
+    readonly labelId: string;
+    protected readonly labelledBy: string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuGroup, "[slNavigationMenuGroup]", never, {}, {}, never, never, true, never>;
+}
+/** The group's title. */
+declare class SlNavigationMenuGroupLabel {
+    protected readonly id: string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuGroupLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuGroupLabel, "[slNavigationMenuGroupLabel]", never, {}, {}, never, never, true, never>;
+}
+/** The panel's last row, under a rule: the consumer's call to action. */
+declare class SlNavigationMenuFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuFooter, "[slNavigationMenuFooter]", never, {}, {}, never, never, true, never>;
+}
+/** A rich link's mark, aligned to the text of its label. */
+declare class SlNavigationMenuIcon {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuIcon, "[slNavigationMenuIcon]", never, {}, {}, never, never, true, never>;
+}
+/** A rich link's title. */
+declare class SlNavigationMenuLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuLabel, "[slNavigationMenuLabel]", never, {}, {}, never, never, true, never>;
+}
+/** A rich link's description: two lines to the eye, whole in the DOM. */
+declare class SlNavigationMenuDescription {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNavigationMenuDescription, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNavigationMenuDescription, "[slNavigationMenuDescription]", never, {}, {}, never, never, true, never>;
+}
+
+export { NAVIGATION_MENU_DEFAULTS, NAVIGATION_MENU_FALLBACK, NAVIGATION_MENU_PANEL, NAVIGATION_MENU_SECTION, SlNavigationMenu, SlNavigationMenuContent, SlNavigationMenuDescription, SlNavigationMenuFooter, SlNavigationMenuGroup, SlNavigationMenuGroupLabel, SlNavigationMenuIcon, SlNavigationMenuIdFactory, SlNavigationMenuItem, SlNavigationMenuLabel, SlNavigationMenuLink, SlNavigationMenuLinks, SlNavigationMenuList, SlNavigationMenuTrigger, SlNavigationMenuTriggerWiring, injectNavigationMenuDefaults, provideNavigationMenuDefaults };
+export type { NavigationMenuColumns, NavigationMenuCrossing, NavigationMenuDefaults, NavigationMenuOrientation, NavigationMenuSection, NavigationMenuSize, NavigationMenuValueReason };
+//# sourceMappingURL=slotted-angular-navigation-menu.d.ts.map

package/types/slotted-angular-navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-navigation-menu.d.ts","sources":["../../navigation-menu/src/navigation-menu-defaults.ts","../../navigation-menu/src/navigation-menu.ts","../../navigation-menu/src/navigation-menu-parts.ts"],"mappings":"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","names":["i0"]}

package/types/slotted-angular-notification-center.d.ts

@@ -0,0 +1,318 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, NotificationCenterMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, TemplateRef } from '@angular/core';
+import { GlyphName } from '@slotted/angular/icon';
+import { ChangeRequest } from '@slotted/core/state';
+import { TimestampValue, FormattedTimestamp } from '@slotted/core/timeline';
+
+/** The popover's step and the page's. */
+type NotificationCenterSize = 'sm' | 'md';
+/** The rank of the header's heading; group labels take the rank below. */
+type NotificationCenterLevel = '2' | '3' | '4';
+/** How more is loaded: never, on a button, or when the end scrolls into view. */
+type NotificationCenterGrowing = 'none' | 'button' | 'scroll';
+/** Whether keys that arrive while the reader reads are held behind `fresh`. */
+type NotificationCenterArrivals = 'hold' | 'show';
+/** How the item's time is written. */
+type NotificationCenterTimeFormat = 'relative' | 'absolute';
+/** Which of the family's two item controls are drawn. */
+type NotificationCenterControls = 'both' | 'read' | 'dismiss' | 'none';
+/** The item's tone: the family's visual and the wash an unread item stands on. */
+type NotificationCenterTone = 'accent' | 'secondary' | 'success' | 'warning' | 'danger';
+/** Why the view moved. */
+type NotificationCenterViewReason = 'pointer' | 'keyboard' | 'programmatic';
+/** Why an item was pressed, marked or removed. */
+type NotificationCenterPressReason = 'pointer' | 'keyboard';
+/** Why a read change was asked for: the two presses, or the instance. */
+type NotificationCenterReadReason = NotificationCenterPressReason | 'programmatic';
+/** Why more was asked for: the two presses, or the end scrolling into view. */
+type NotificationCenterLoadReason = NotificationCenterPressReason | 'scroll';
+/** A request the family makes that carries no value of its own: a reason, the event, a refusal. */
+interface NotificationCenterRequest<Reason extends string> {
+    readonly reason: Reason;
+    readonly event?: Event | undefined;
+    readonly cancelled: boolean;
+    /** Refuses the request. The family does nothing further with it. */
+    cancel(): void;
+}
+/** What `readRequest` asks: these keys become this. */
+interface NotificationCenterReadRequest extends NotificationCenterRequest<NotificationCenterReadReason> {
+    readonly keys: readonly string[];
+    readonly read: boolean;
+}
+/** What `removeRequest` and `openRequest` name. */
+interface NotificationCenterItemRequest extends NotificationCenterRequest<NotificationCenterPressReason> {
+    readonly key: string;
+}
+/** What `revealRequest` carries: how many were held. */
+interface NotificationCenterRevealRequest extends NotificationCenterRequest<NotificationCenterReadReason> {
+    readonly count: number;
+}
+/** One notification as the consumer's store holds it. */
+interface NotificationItem {
+    /** Identifies the item across renders; what every request names. */
+    key: string;
+    /** The words that name it: a link when `href`, text otherwise. */
+    title: string;
+    /** The body, clamped at three lines by the stylesheet. */
+    description?: string | undefined;
+    /** When it happened: a plain date-time or an ISO instant. */
+    time: TimestampValue;
+    /** Whether the reader has seen it. The consumer's fact; the family asks to change it. */
+    read: boolean;
+    /** Where the title goes. */
+    href?: string | undefined;
+    /** The visual's glyph and the unread wash. Accent when unstated. */
+    tone?: NotificationCenterTone | undefined;
+    /** Whatever the consumer's templates need: an avatar's initials, a record. */
+    data?: unknown;
+}
+/** One entry of the views strip. */
+interface NotificationView {
+    value: string;
+    label: string;
+    /** A count drawn as a chip after the label. */
+    count?: number | undefined;
+}
+/** What an application sets once for every centre under it. */
+interface NotificationCenterDefaults {
+    arrivals: NotificationCenterArrivals;
+    controls: NotificationCenterControls;
+    growing: NotificationCenterGrowing;
+    level: NotificationCenterLevel;
+    size: NotificationCenterSize;
+    timeFormat: NotificationCenterTimeFormat;
+    timeZone?: string | undefined;
+}
+declare const NOTIFICATION_CENTER_DEFAULTS: InjectionToken<NotificationCenterDefaults>;
+/**
+ * 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`).
+ */
+declare function provideNotificationCenterDefaults(defaults: Partial<NotificationCenterDefaults>): {
+    provide: InjectionToken<NotificationCenterDefaults>;
+    useFactory: () => NotificationCenterDefaults;
+};
+declare function injectNotificationCenterDefaults(): NotificationCenterDefaults;
+declare class SlNotificationCenterIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationCenterIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/** What an item template is handed. */
+interface NotificationItemContext {
+    $implicit: NotificationItem;
+    /** Its position in the feed, from one. */
+    position: number;
+    /** The tone the family resolved for it. */
+    tone: NotificationCenterTone;
+    /** The formatted time: the machine value and the words. */
+    time: FormattedTimestamp;
+    /** The ids the family wrote, for `aria-labelledby` and `aria-describedby`. */
+    ids: {
+        title: string;
+        description: string;
+    };
+}
+interface Group {
+    label: string;
+    items: NotificationItem[];
+}
+/**
+ * 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>
+ * ```
+ */
+declare class SlNotificationItem {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNotificationItem, "ng-template[slNotificationItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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.
+ */
+declare class SlNotificationVisual {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationVisual, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNotificationVisual, "ng-template[slNotificationVisual]", never, {}, {}, never, never, true, never>;
+}
+/** The consumer's controls for an item, under its body. */
+declare class SlNotificationActions {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNotificationActions, "ng-template[slNotificationActions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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.
+ */
+declare class SlNotificationCenter {
+    /** The consumer's array. The family holds none of its facts. */
+    readonly items: _angular_core.InputSignal<readonly NotificationItem[]>;
+    /** The strip's entries. Unstated, the built-in `all` and `unread`; one entry draws no strip. */
+    readonly views: _angular_core.InputSignal<readonly NotificationView[] | undefined>;
+    readonly size: _angular_core.InputSignal<NotificationCenterSize | undefined>;
+    readonly level: _angular_core.InputSignal<NotificationCenterLevel | undefined>;
+    readonly growing: _angular_core.InputSignal<NotificationCenterGrowing | undefined>;
+    readonly arrivals: _angular_core.InputSignal<NotificationCenterArrivals | undefined>;
+    readonly timeFormat: _angular_core.InputSignal<NotificationCenterTimeFormat | undefined>;
+    readonly controls: _angular_core.InputSignal<NotificationCenterControls | undefined>;
+    /** For the time; defaults to the language in force (`provideSlotted`). */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly timeZone: _angular_core.InputSignal<string | undefined>;
+    /** The instant a relative time is measured from. State it for a stable server render. */
+    readonly now: _angular_core.InputSignal<number | undefined>;
+    /** `aria-busy` on the feed; skeleton rows while nothing is loaded, the waiting row under growing otherwise. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** How many items exist in all, for `aria-setsize`. */
+    readonly count: _angular_core.InputSignal<number | undefined>;
+    /** Groups the feed: the label an item is filed under, in the order the items give. */
+    readonly groupBy: _angular_core.InputSignal<((item: NotificationItem) => string) | undefined>;
+    /**
+     * 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.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<NotificationCenterMessages> | undefined>;
+    /** The view an unbound centre starts on, read once. */
+    readonly defaultView: _angular_core.InputSignal<string | undefined>;
+    /** The current view. Two-way, so a template may bind it directly. */
+    readonly view: _angular_core.ModelSignal<string | undefined>;
+    /** One output for one move of the view, carrying the reason; cancellable. */
+    readonly viewRequest: _angular_core.OutputEmitterRef<ChangeRequest<string | undefined>>;
+    /** The keys and the value the family asks for. The store answers by changing `items`. */
+    readonly readRequest: _angular_core.OutputEmitterRef<NotificationCenterReadRequest>;
+    /** Asked before an item is removed. The family removes nothing. */
+    readonly removeRequest: _angular_core.OutputEmitterRef<NotificationCenterItemRequest>;
+    /** Asked before a title link navigates. Cancelling keeps the reader here. */
+    readonly openRequest: _angular_core.OutputEmitterRef<NotificationCenterItemRequest>;
+    /** Asked before held arrivals are shown, with their count. */
+    readonly revealRequest: _angular_core.OutputEmitterRef<NotificationCenterRevealRequest>;
+    /** Asked when the reader presses the more control, or scrolls to it. */
+    readonly loadMoreRequest: _angular_core.OutputEmitterRef<NotificationCenterRequest<NotificationCenterLoadReason>>;
+    /** A fact for the bell: the unread count among the items, whenever it changes. */
+    readonly unreadChange: _angular_core.OutputEmitterRef<number>;
+    private readonly defaults;
+    private readonly native;
+    private readonly writtenLabel;
+    private readonly writtenLabelledBy;
+    private readonly feedElement;
+    private readonly freshElement;
+    private readonly moreElement;
+    protected readonly itemTemplate: _angular_core.Signal<SlNotificationItem | undefined>;
+    protected readonly visualTemplate: _angular_core.Signal<SlNotificationVisual | undefined>;
+    /**
+     * 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.
+     */
+    protected toneGlyph(tone: NotificationCenterTone): GlyphName;
+    protected readonly actionsTemplate: _angular_core.Signal<SlNotificationActions | undefined>;
+    readonly id: string;
+    readonly titleId: string;
+    readonly feedId: string;
+    protected readonly waitingRows: number[];
+    readonly sizeValue: _angular_core.Signal<NotificationCenterSize>;
+    readonly levelValue: _angular_core.Signal<NotificationCenterLevel>;
+    readonly growingValue: _angular_core.Signal<NotificationCenterGrowing>;
+    readonly arrivalsValue: _angular_core.Signal<NotificationCenterArrivals>;
+    readonly timeFormatValue: _angular_core.Signal<NotificationCenterTimeFormat>;
+    readonly controlsValue: _angular_core.Signal<NotificationCenterControls>;
+    private readonly runtimeLocale;
+    readonly localeValue: _angular_core.Signal<string>;
+    readonly timeZoneValue: _angular_core.Signal<string | undefined>;
+    /** The family's words in the language in force, with this centre's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<NotificationCenterMessages>;
+    /** The unread count among every item, held or shown. */
+    readonly unread: _angular_core.Signal<number>;
+    readonly viewList: _angular_core.Signal<readonly NotificationView[]>;
+    /** The view: the model, then defaultView, then the first entry. */
+    readonly currentView: _angular_core.Signal<string>;
+    /** The keys the family has shown; a key outside it and outside `held` has just arrived. */
+    private readonly shown;
+    /** The keys held behind `fresh`, in the order they arrived. */
+    readonly held: _angular_core.WritableSignal<readonly string[]>;
+    private pendingFocus;
+    readonly shownItems: _angular_core.Signal<readonly NotificationItem[]>;
+    readonly visibleItems: _angular_core.Signal<readonly NotificationItem[]>;
+    protected readonly groups: _angular_core.Signal<Group[]>;
+    readonly setSize: _angular_core.Signal<number>;
+    protected readonly waiting: _angular_core.Signal<boolean>;
+    protected readonly showEmpty: _angular_core.Signal<boolean>;
+    protected readonly emptyWords: _angular_core.Signal<string>;
+    protected readonly labelledBy: _angular_core.Signal<string | null>;
+    constructor();
+    /** Whether the reader is reading: focus in the feed, or the feed's scroller past its start. */
+    private reading;
+    protected pressReason(event: Event): NotificationCenterPressReason;
+    protected contextOf(item: NotificationItem, position: number): NotificationItemContext;
+    protected positionOf(group: Group, index: number): number;
+    /** Asks to move the view, carrying the reason and the originating event. */
+    selectView(next: string, reason: NotificationCenterViewReason, source?: Event): void;
+    protected forwardView(request: ChangeRequest<string | undefined>): void;
+    /** Asks to mark these keys read or unread. */
+    requestRead(keys: readonly string[], read: boolean, reason: NotificationCenterReadReason, event?: Event): void;
+    protected markAll(event: Event): void;
+    /** Asks to mark every unread shown item read, with the reason `programmatic`. */
+    markAllRead(): void;
+    private unreadShownKeys;
+    protected remove(key: string, reason: NotificationCenterPressReason, event?: Event): boolean;
+    protected open(key: string, event: Event): void;
+    /** Shows the held arrivals; a keyboard press moves focus to the first of them. */
+    reveal(reason?: NotificationCenterReadReason, event?: Event): void;
+    protected loadMore(event: Event): void;
+    /** Moves focus to the first article, or to `fresh` when arrivals are held. */
+    focus(): void;
+    private articles;
+    protected onFeedKeydown(raw: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationCenter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlNotificationCenter, "[slNotificationCenter]", ["slNotificationCenter"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "views": { "alias": "views"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "growing": { "alias": "growing"; "required": false; "isSignal": true; }; "arrivals": { "alias": "arrivals"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "now": { "alias": "now"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, { "view": "viewChange"; "viewRequest": "viewRequest"; "readRequest": "readRequest"; "removeRequest": "removeRequest"; "openRequest": "openRequest"; "revealRequest": "revealRequest"; "loadMoreRequest": "loadMoreRequest"; "unreadChange": "unreadChange"; }, ["itemTemplate", "visualTemplate", "actionsTemplate"], ["[slNotificationCenterActions]", "[slNotificationCenterEmpty]", "[slNotificationCenterFooter]"], true, never>;
+}
+/** The consumer's own controls in the header, after mark-all: a preferences link, a menu. */
+declare class SlNotificationCenterActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationCenterActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNotificationCenterActions, "[slNotificationCenterActions]", never, {}, {}, never, never, true, never>;
+}
+/** The consumer's link from the popover to the page. */
+declare class SlNotificationCenterFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationCenterFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNotificationCenterFooter, "[slNotificationCenterFooter]", never, {}, {}, never, never, true, never>;
+}
+/** The empty page: a result-state, projected in place of the family's words. */
+declare class SlNotificationCenterEmpty {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlNotificationCenterEmpty, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlNotificationCenterEmpty, "[slNotificationCenterEmpty]", never, {}, {}, never, never, true, never>;
+}
+
+export { NOTIFICATION_CENTER_DEFAULTS, SlNotificationActions, SlNotificationCenter, SlNotificationCenterActions, SlNotificationCenterEmpty, SlNotificationCenterFooter, SlNotificationCenterIdFactory, SlNotificationItem, SlNotificationVisual, injectNotificationCenterDefaults, provideNotificationCenterDefaults };
+export type { NotificationCenterArrivals, NotificationCenterControls, NotificationCenterDefaults, NotificationCenterGrowing, NotificationCenterItemRequest, NotificationCenterLevel, NotificationCenterLoadReason, NotificationCenterPressReason, NotificationCenterReadReason, NotificationCenterReadRequest, NotificationCenterRequest, NotificationCenterRevealRequest, NotificationCenterSize, NotificationCenterTimeFormat, NotificationCenterTone, NotificationCenterViewReason, NotificationItem, NotificationItemContext, NotificationView };
+//# sourceMappingURL=slotted-angular-notification-center.d.ts.map