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

package/types/slotted-angular-dialog.d.ts

@@ -0,0 +1,497 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, DialogMessages } from '@slotted/core/i18n';
+import * as _slotted_angular_dialog from '@slotted/angular/dialog';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, ElementRef, OnInit, OnDestroy } from '@angular/core';
+
+/**
+ * The panel's measure. Five named steps rather than the pixel string Material,
+ * Carbon and Ant all take: a theme can retune a step and cannot retune
+ * `width: '600px'`, and a family that accepted one would carry a second scale.
+ */
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Where the panel sits in the layer. `top` is for content that grows. */
+type DialogPlacement = 'center' | 'top';
+/**
+ * What scrolls. `content` bounds the panel to the layer and scrolls its body,
+ * which is what keeps the footer on screen; `viewport` scrolls the whole panel,
+ * for content that is a document rather than a task.
+ */
+type DialogScroll = 'content' | 'viewport';
+/**
+ * Whether the family paints the panel at all. `plain` turns off the surface,
+ * the border, the radius, the shadow, the rows and the padding, and keeps
+ * everything that is not paint: the portal, the scrim, presence, the focus
+ * containment and restoration, the dismissal policy and the z-index stack.
+ *
+ * It is what a consumer reaches for to put the layer around a box of their own
+ * — a `slCard`, a media viewer, an image at its own aspect ratio. The cost is
+ * that a plain panel does not keep its footer on screen for a long body,
+ * because the three rows go with the paint.
+ */
+type DialogSurface = 'panel' | 'plain';
+/**
+ * When the layer exists. `active` builds it on opening and drops it once the
+ * exit is over, `lazy` builds it on the first open and keeps it, `eager` builds
+ * it up front and hides it.
+ *
+ * The default is the opposite of `collapsible`'s, and for the same reason: a
+ * disclosure's panel transitions its own height and has to be in the DOM, while
+ * a layer transitions opacity and `@slotted/core/presence` already keeps it
+ * mounted for its own exit.
+ */
+type DialogMount = 'active' | 'lazy' | 'eager';
+/**
+ * When the panel spends the whole layer. `narrow` is a container query at a
+ * literal breakpoint, which is what `docs/component-features.md` §2.7 means by
+ * a responsive mode that can be tested deterministically.
+ */
+type DialogFullScreen = 'never' | 'narrow' | 'always';
+/** Whether a dismissal source closes the layer. */
+type DialogDismissPolicy = 'close' | 'none';
+/** The five semantic tones. An alert dialog draws its mark from this. */
+type DialogTone = 'accent' | 'secondary' | 'success' | 'warning' | 'danger';
+/** Where focus goes when the layer opens. */
+type DialogInitialFocus = 'first' | 'container' | 'cancel' | HTMLElement | false;
+/** Where focus goes when the layer closes. Defaults to the trigger. */
+type DialogFinalFocus = HTMLElement | false;
+/** Why the layer opened or closed. */
+type DialogOpenReason = 'pointer' | 'keyboard' | 'dismiss' | 'escape' | 'outsidePress' | 'back' | 'submit' | 'programmatic';
+/**
+ * The request the family emits before the layer moves, with the result the
+ * close carried. `result` is what the platform calls `returnValue` and what
+ * Angular Material returns from `afterClosed()`; it rides on the request rather
+ * than declaring a second state model, because nothing about it is controlled.
+ */
+interface DialogChangeRequest {
+    readonly value: boolean;
+    readonly previous: boolean;
+    readonly reason: DialogOpenReason;
+    readonly result?: string | undefined;
+    readonly source?: unknown;
+    readonly cancelled: boolean;
+    cancel(): void;
+}
+/** Why the panel took the layer, or gave it back. */
+type DialogFullscreenReason = 'pointer' | 'keyboard' | 'programmatic';
+interface DialogFullscreenRequest {
+    readonly value: boolean;
+    readonly previous: boolean;
+    readonly reason: DialogFullscreenReason;
+    readonly source?: unknown;
+    readonly cancelled: boolean;
+    cancel(): void;
+}
+interface DialogDefaults {
+    /** The platform's way back — a phone's gesture, a browser's button — closes a modal layer. */
+    back: DialogDismissPolicy;
+    escape: DialogDismissPolicy;
+    fullScreen: DialogFullScreen;
+    modal: boolean;
+    mount: DialogMount;
+    outsidePress: DialogDismissPolicy;
+    placement: DialogPlacement;
+    scroll: DialogScroll;
+    size: DialogSize;
+    surface: DialogSurface;
+}
+declare const DIALOG_DEFAULTS: InjectionToken<DialogDefaults>;
+/**
+ * An application decides once how its dialogs behave and look, rather than
+ * repeating the same eight inputs on every one in a product. Angular Material
+ * is the only surveyed implementation with an equivalent —
+ * `MAT_DIALOG_DEFAULT_OPTIONS` — and React gets one here too rather than being
+ * levelled down to the smaller shape.
+ */
+declare function provideDialogDefaults(defaults: Partial<DialogDefaults>): {
+    provide: InjectionToken<DialogDefaults>;
+    useFactory: () => DialogDefaults;
+};
+/** What a dialog renders as here, before it states anything of its own. */
+declare function injectDialogDefaults(): DialogDefaults;
+/**
+ * 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 SlDialogIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * A window over the page, and the scrim that says the page is out of reach.
+ *
+ * The layer is composed from `packages/core` and rewritten nowhere: `portal`
+ * decides where it lives and keeps the theme of the region that opened it,
+ * `dismissable-layer` owns Escape, outside press, `inert`, the scroll lock and
+ * the single z-index stack, `presence` keeps it mounted long enough to leave,
+ * and `focus` contains the keyboard and gives it back to the trigger.
+ *
+ * **The host is not the layer.** `<sl-dialog>` renders `display: contents` and
+ * stays exactly where the consumer wrote it; the layer is the `div` in the
+ * template, and it is that `div` which is moved into the portal. Two things
+ * follow, and both are better than the alternative: `mount="active"` can remove
+ * the layer outright, as React's does, and the host is the portal's *origin* —
+ * so the layer inherits the scheme, density, theme and direction of the region
+ * the consumer wrote it in, whether a trigger exists or not. React has to use
+ * the trigger for that, and the design document records the asymmetry.
+ */
+declare abstract class SlDialogBase {
+    protected abstract readonly member: 'dialog' | 'alertDialog';
+    /** Whether the layer is open. Two-way, so a template may bind it directly. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly size: _angular_core.InputSignal<DialogSize | undefined>;
+    readonly placement: _angular_core.InputSignal<DialogPlacement | undefined>;
+    readonly scroll: _angular_core.InputSignal<DialogScroll | undefined>;
+    readonly surface: _angular_core.InputSignal<DialogSurface | undefined>;
+    readonly mount: _angular_core.InputSignal<DialogMount | undefined>;
+    readonly fullScreen: _angular_core.InputSignal<DialogFullScreen | undefined>;
+    /**
+     * Whether the header renders the control that hands the layer to the panel.
+     * Off, because a dialog holds one task and most tasks are the size the
+     * consumer chose. `fullScreen` is the other question — the responsive rule
+     * set in advance — and this is the reader's own.
+     */
+    readonly fullscreenToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the reader has taken the layer. Two-way, as `open` is. */
+    readonly fullscreen: _angular_core.ModelSignal<boolean>;
+    readonly escape: _angular_core.InputSignal<DialogDismissPolicy | undefined>;
+    /**
+     * The platform's way back — a phone's gesture, a browser's button — closes
+     * the layer instead of leaving the page, while the layer is modal.
+     */
+    readonly back: _angular_core.InputSignal<DialogDismissPolicy | undefined>;
+    /** Whether the layer's content is still on its way. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A parent for this layer alone, instead of the shared portal root. */
+    readonly container: _angular_core.InputSignal<Element | null | undefined>;
+    readonly initialFocus: _angular_core.InputSignal<DialogInitialFocus | undefined>;
+    readonly finalFocus: _angular_core.InputSignal<DialogFinalFocus | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * corner controls' names (`close`, `fullScreen`).
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<DialogMessages> | undefined>;
+    /** One output for one transition, carrying the reason, the result and the event. */
+    readonly openChangeRequest: _angular_core.OutputEmitterRef<DialogChangeRequest>;
+    /**
+     * What `afterClosed()` is in Angular Material, as an output. It fires once the
+     * layer has actually closed, with the result the close carried.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<string | undefined>;
+    /** One output for one transition of the state the toggle sets. */
+    readonly fullscreenChangeRequest: _angular_core.OutputEmitterRef<DialogFullscreenRequest>;
+    protected readonly defaults: _slotted_angular_dialog.DialogDefaults;
+    /** The family's words in the language in force, with this layer's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<DialogMessages>;
+    protected readonly host: HTMLElement;
+    private readonly destroyRef;
+    private readonly baseId;
+    /** The element the consumer wrote us beside, recorded before anything moves. */
+    private readonly origin;
+    /**
+     * A consumer's own `aria-label` on `<sl-dialog>`, read before the host
+     * bindings are written and moved to the panel, which is the element the role
+     * is on. Without this a label written on the host would name a box with
+     * `display: contents` and no role at all.
+     */
+    private readonly writtenLabel;
+    protected readonly layerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly panelRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** The parts that have said they exist, so only what was rendered is wired. */
+    readonly hasTitle: _angular_core.WritableSignal<boolean>;
+    readonly hasDescription: _angular_core.WritableSignal<boolean>;
+    readonly cancelNode: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly triggerNode: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly titleId: string;
+    readonly descriptionId: string;
+    readonly contentId: string;
+    readonly triggerId: string;
+    /**
+     * The status rather than a boolean. `entering` is one frame long and it is
+     * the whole reason it exists: a layer that appears already open gives its CSS
+     * transition no closed style to start from.
+     */
+    private readonly status;
+    /**
+     * The status is a signal and the template reads it, and that is not enough on
+     * its own. `presence` answers `sync` from inside the effect that watches
+     * `open`, which runs as part of this view's own change detection and after its
+     * bindings have been written: the write marked no consumer, no further pass
+     * followed, and the layer stayed in the document with `inert` and the closed
+     * attribute of a dialog that reported itself open. It was measured on a layer
+     * opened from a bound state rather than from a trigger — the family's own
+     * stories all open from a trigger, which is why it stood for nine rounds.
+     */
+    private readonly changes;
+    private readonly presence;
+    /** Whether this layer has ever been open, which is what `lazy` reads. */
+    private readonly seen;
+    private readonly result;
+    readonly isAlert: _angular_core.Signal<boolean>;
+    readonly resolvedModal: _angular_core.Signal<boolean>;
+    readonly resolvedOutsidePress: _angular_core.Signal<DialogDismissPolicy>;
+    readonly resolvedMount: _angular_core.Signal<DialogMount>;
+    readonly resolvedSize: _angular_core.Signal<DialogSize>;
+    readonly resolvedPlacement: _angular_core.Signal<DialogPlacement>;
+    readonly resolvedScroll: _angular_core.Signal<DialogScroll>;
+    readonly resolvedSurface: _angular_core.Signal<DialogSurface>;
+    readonly resolvedFullScreen: _angular_core.Signal<DialogFullScreen>;
+    readonly resolvedEscape: _angular_core.Signal<DialogDismissPolicy>;
+    readonly resolvedBack: _angular_core.Signal<DialogDismissPolicy>;
+    /**
+     * A confirmation has no corner controls at all, for the reason it has no
+     * close button, so neither the state nor the control that sets it is its.
+     */
+    readonly resolvedFullscreen: _angular_core.Signal<boolean>;
+    readonly resolvedFullscreenToggle: _angular_core.Signal<boolean>;
+    readonly resolvedInitialFocus: _angular_core.Signal<DialogInitialFocus>;
+    readonly resolvedTone: _angular_core.Signal<DialogTone | null>;
+    /** Overridden by the member that has them; the base has neither. */
+    protected modalInput(): boolean;
+    protected outsidePressInput(): DialogDismissPolicy;
+    protected toneInput(): DialogTone;
+    readonly mounted: _angular_core.Signal<boolean>;
+    /** What the stylesheet keys on, which is a frame behind what was asked. */
+    readonly visible: _angular_core.Signal<boolean>;
+    /**
+     * Whether the layer takes focus and the pointer. `entering` counts: the
+     * focus scope enters in that frame, and a layer still `inert` then refuses
+     * the initial focus and leaves it on `body`.
+     */
+    readonly interactive: _angular_core.Signal<boolean>;
+    readonly labelledBy: _angular_core.Signal<string | null>;
+    readonly describedBy: _angular_core.Signal<string | null>;
+    readonly label: _angular_core.Signal<string | null>;
+    readonly role: _angular_core.Signal<"dialog" | "alertdialog">;
+    private portal;
+    private layer;
+    private scope;
+    /** Whether the layer, the focus scope and the `closed` owed are standing. */
+    private engaged;
+    /**
+     * The layer this one was written inside, and the layers written inside this
+     * one. A confirmation whose action also closes the dialog under it closes
+     * both in one change, and Angular runs the dialog's effect first: taken down
+     * from the bottom, the dialog found focus in the confirmation and restored
+     * nothing, and the confirmation then handed focus to a control in a layer
+     * already leaving — `body`, once that layer was gone. The layers come down
+     * from the top instead, as React's effects take them down.
+     */
+    private readonly parent;
+    private readonly nested;
+    constructor();
+    /**
+     * Takes down what the layer does while it is open, once per opening. The
+     * nested layers that closed in the same change go first.
+     *
+     * The layer before the scope: it lifts the `inert` it wrote on the
+     * background, and a browser refuses focus inside an inert subtree, so a
+     * scope taken down first hands focus back to a trigger that cannot take it.
+     */
+    private takeDown;
+    /**
+     * The layer element is given back to the host before the portal goes, so
+     * Angular removes a node that is where its own view expects it to be.
+     */
+    private releasePortal;
+    /** Asks to move, carrying the reason, the result and the originating event. */
+    request(next: boolean, reason: DialogOpenReason, result: string | undefined, source: unknown): void;
+    /** Asks to take the layer or give it back, carrying the reason and the event. */
+    requestFullscreen(next: boolean, reason: DialogFullscreenReason, source: unknown): void;
+    /** Opens the layer from code, carrying `programmatic`. */
+    openDialog(): void;
+    /** Closes it from code, carrying `programmatic` and the result given. */
+    close(result?: string): void;
+    /** Moves focus into the layer, as opening does. */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDialogBase, never, never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "mount": { "alias": "mount"; "required": false; "isSignal": true; }; "fullScreen": { "alias": "fullScreen"; "required": false; "isSignal": true; }; "fullscreenToggle": { "alias": "fullscreenToggle"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "escape": { "alias": "escape"; "required": false; "isSignal": true; }; "back": { "alias": "back"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; "finalFocus": { "alias": "finalFocus"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "fullscreen": "fullscreenChange"; "openChangeRequest": "openChangeRequest"; "closed": "closed"; "fullscreenChangeRequest": "fullscreenChangeRequest"; }, never, never, true, never>;
+}
+declare class SlDialog extends SlDialogBase {
+    protected readonly member: "dialog";
+    /**
+     * Whether the background is inert, the scroll is locked and focus is
+     * contained. A non-modal layer writes no `aria-modal`, which the APG requires
+     * of anything that does not actually make the background unreachable.
+     */
+    readonly modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly outsidePress: _angular_core.InputSignal<DialogDismissPolicy | undefined>;
+    protected modalInput(): boolean;
+    protected outsidePressInput(): DialogDismissPolicy;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDialog, "sl-dialog", ["slDialog"], { "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "outsidePress": { "alias": "outsidePress"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * A dialog that interrupts to confirm something irreversible.
+ *
+ * Two rules are fixed rather than left to an input: outside press never closes
+ * it, and it is always modal. Ark and React Aria make the role a prop, so a
+ * consumer who sets `role="alertdialog"` and forgets the dismissal policy ships
+ * a destructive confirmation a stray click dismisses.
+ *
+ * Focus lands on `slAlertDialogCancel` rather than on the first tabbable
+ * element, which is the APG's own advice for a step that is not easily
+ * reversible.
+ */
+declare class SlAlertDialog extends SlDialogBase {
+    protected readonly member: "alertDialog";
+    readonly tone: _angular_core.InputSignal<DialogTone>;
+    constructor();
+    protected toneInput(): DialogTone;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlAlertDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlAlertDialog, "sl-alert-dialog", ["slAlertDialog"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The control that opens a layer.
+ *
+ * It is the consumer's own element, which is what this ecosystem composes with:
+ * `<button slButton slDialogTrigger [dialog]="d">` is the library's own button
+ * and this adds the wiring to it. React reaches the same place with `render`,
+ * because there the component owns the tag.
+ *
+ * The trigger is also the layer's *branch*: a press on it is inside the layer
+ * as far as `dismissable-layer` is concerned, or opening would immediately be
+ * read as an outside press and close what it just opened.
+ */
+declare class SlDialogTrigger implements OnInit, OnDestroy {
+    /** The layer this control opens, reached with a template reference variable. */
+    readonly dialog: _angular_core.InputSignal<SlDialogBase>;
+    private readonly native;
+    /** `trigger`, unless the element is another family's root. */
+    protected readonly part: string | null;
+    protected readonly controls: _angular_core.Signal<string | null>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected press(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDialogTrigger, "[slDialogTrigger]", ["slDialogTrigger"], { "dialog": { "alias": "slDialogTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * The header, and the one part of it the family renders rather than the
+ * consumer: the full-screen toggle, when the layer was asked for one.
+ *
+ * It is written in the DOM after whatever the consumer projected. The title
+ * and the description come first for a reader moving through the header, and
+ * the two corner controls are adjacent peers whose order carries no meaning —
+ * a toggle written first would be announced ahead of the name of the dialog it
+ * belongs to. The stylesheet puts it in the column before the close, which is
+ * where a window's controls put it.
+ *
+ * It is a component on the consumer's own `<header>`, so the toggle is a child
+ * of that element written after the projected content, which is the DOM React
+ * reaches by rendering the part; the two have to land together.
+ *
+ * `aria-pressed` says which way the toggle is set, so the name stays one word
+ * in every state: a label that changed with the state would be read as a
+ * second control. The mark is the opposite of the state, because a mark on a
+ * control says what pressing it does.
+ */
+declare class SlDialogHeader {
+    protected readonly dialog: SlDialogBase;
+    protected toggle(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDialogHeader, "[slDialogHeader]", ["slDialogHeader"], {}, {}, never, ["*"], true, never>;
+}
+/** The visible name, which `aria-labelledby` points at. */
+declare class SlDialogTitle implements OnInit, OnDestroy {
+    protected readonly dialog: SlDialogBase;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogTitle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDialogTitle, "[slDialogTitle]", ["slDialogTitle"], {}, {}, never, never, true, never>;
+}
+/**
+ * The sentence that says what the dialog is about. The alert dialog pattern
+ * makes it mandatory; the modal dialog pattern makes it optional and advises
+ * against it for structured content.
+ */
+declare class SlDialogDescription implements OnInit, OnDestroy {
+    protected readonly dialog: SlDialogBase;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogDescription, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDialogDescription, "[slDialogDescription]", ["slDialogDescription"], {}, {}, never, never, true, never>;
+}
+/**
+ * The one row that scrolls, and the row `aria-busy` belongs to while the
+ * content is still on its way — the header, the close button and Escape all
+ * stay operable, because a loading dialog a reader cannot leave is the worse
+ * failure of the two.
+ */
+declare class SlDialogBody {
+    protected readonly dialog: SlDialogBase;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogBody, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDialogBody, "[slDialogBody]", ["slDialogBody"], {}, {}, never, never, true, never>;
+}
+declare class SlDialogFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDialogFooter, "[slDialogFooter]", ["slDialogFooter"], {}, {}, never, never, true, never>;
+}
+/**
+ * The ✕ in the corner. It carries `dismiss`, which is the word the closed
+ * vocabulary in `docs/state-and-events.md` already has for what a close button
+ * means; `docs/component-features.md` §8 calls the source `closeButton`, and a
+ * twelfth reason would be a change to a contract outside this family.
+ */
+declare class SlDialogClose {
+    /** The result the close carries out, which is the platform's `returnValue`. */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    private readonly dialog;
+    /** A consumer's own `aria-label`, which wins over the catalog. */
+    private readonly ownLabel;
+    protected readonly label: _angular_core.Signal<string>;
+    constructor();
+    protected press(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDialogClose, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDialogClose, "[slDialogClose]", ["slDialogClose"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * The tone's own mark, which is geometry rather than a character. A mark the
+ * consumer writes as content replaces the tone's.
+ */
+declare class SlAlertDialogIcon {
+    private readonly dialog;
+    protected readonly glyph: _angular_core.Signal<"calendar" | "upload" | "search" | "circle" | "stop" | "check" | "minus" | "plus" | "dot" | "x" | "ellipsis" | "copy" | "eye" | "eye-off" | "chevron-right" | "chevron-down" | "chevrons-right" | "panel-open" | "panel-close" | "arrow-left" | "pin" | "pin-off" | "external" | "clock" | "person" | "circle-info" | "circle-check" | "triangle-alert" | "circle-alert" | "circle-x" | "circle-question" | "inbox" | "search-x" | "lock" | "caps-lock" | "arrow-up" | "paperclip" | "pipette" | "cloud-off" | "loader-circle" | "maximize" | "minimize" | "file" | "trash" | "play" | "pause" | "rotate-ccw" | "file-image" | "file-text" | "file-spreadsheet" | "file-audio" | "file-video" | "file-archive" | "file-type" | "presentation" | "text-wrap" | "bell" | "trending-up" | "image-off" | "funnel" | "grip-vertical" | "grip-horizontal" | "star" | "check-check">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlAlertDialogIcon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlAlertDialogIcon, "[slAlertDialogIcon]", ["slAlertDialogIcon"], {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The least destructive action, and where focus lands when the layer opens.
+ * That is the APG's own advice for a step that is not easily reversible, and it
+ * is a default of the member rather than something a consumer remembers.
+ */
+declare class SlAlertDialogCancel implements OnInit, OnDestroy {
+    readonly value: _angular_core.InputSignal<string>;
+    private readonly dialog;
+    private readonly native;
+    /** `cancel`, unless the element is another family's root. */
+    protected readonly part: string | null;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected press(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlAlertDialogCancel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlAlertDialogCancel, "[slAlertDialogCancel]", ["slAlertDialogCancel"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * The action being confirmed. It carries `submit`, because confirming is what
+ * the reader came to do, and `dismiss` is what the other two controls mean.
+ */
+declare class SlAlertDialogAction {
+    readonly value: _angular_core.InputSignal<string>;
+    private readonly dialog;
+    /** `action`, unless the element is another family's root. */
+    protected readonly part: string | null;
+    protected press(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlAlertDialogAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlAlertDialogAction, "[slAlertDialogAction]", ["slAlertDialogAction"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DIALOG_DEFAULTS, SlAlertDialog, SlAlertDialogAction, SlAlertDialogCancel, SlAlertDialogIcon, SlDialog, SlDialogBase, SlDialogBody, SlDialogClose, SlDialogDescription, SlDialogFooter, SlDialogHeader, SlDialogIdFactory, SlDialogTitle, SlDialogTrigger, injectDialogDefaults, provideDialogDefaults };
+export type { DialogChangeRequest, DialogDefaults, DialogDismissPolicy, DialogFinalFocus, DialogFullScreen, DialogInitialFocus, DialogMount, DialogOpenReason, DialogPlacement, DialogScroll, DialogSize, DialogSurface, DialogTone };
+//# sourceMappingURL=slotted-angular-dialog.d.ts.map

package/types/slotted-angular-dialog.d.ts.map

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

package/types/slotted-angular-divider.d.ts

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+/** Where the label sits along the rule, in logical terms. */
+type DividerAlign = 'start' | 'center' | 'end';
+/**
+ * A rule between two regions, written on the element the consumer chose. On an
+ * `hr` the element already means separation and the component writes no role;
+ * on anything else — the `li` a menu separator has to be, or the `div` a label
+ * needs — it writes `role="separator"` instead.
+ *
+ * A label is a string rather than projected content, because the name has to
+ * reach `aria-label`: the separator role makes its children presentational, so
+ * the visible label never reaches the accessibility tree on its own.
+ */
+declare class SlDivider {
+    readonly align: _angular_core.InputSignal<DividerAlign>;
+    readonly decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly inset: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly orientation: _angular_core.InputSignal<DividerOrientation>;
+    private readonly element;
+    /**
+     * What the consumer wrote on the element themselves. Read once, before the
+     * host bindings run, because a binding that resolves to `null` removes the
+     * attribute rather than leaving the consumer's value in place.
+     */
+    private readonly ownRole;
+    private readonly ownLabel;
+    private readonly rendersOwnRule;
+    protected readonly labelled: _angular_core.Signal<boolean>;
+    readonly role: _angular_core.Signal<string | null>;
+    protected readonly ariaLabel: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDivider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDivider, "[slDivider]", ["slDivider"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SlDivider };
+export type { DividerAlign, DividerOrientation };
+//# sourceMappingURL=slotted-angular-divider.d.ts.map

package/types/slotted-angular-divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-divider.d.ts","sources":["../../divider/src/divider.ts"],"mappings":";;KAWY,kBAAkB;AAE9B;AACM,KAAM,YAAY;AAExB;;;;;;;;;AASG;AACH,cAwBa,SAAS;oBACN,aAAA,CAAA,WAAA,CAAA,YAAA;yBACK,aAAA,CAAA,wBAAA;oBACL,aAAA,CAAA,wBAAA;oBACA,aAAA,CAAA,WAAA;0BACM,aAAA,CAAA,WAAA,CAAA,kBAAA;AAEpB;AACA;;;;AAIG;AACH;AACA;AACA;AAEA,iCAA2B,aAAA,CAAA,MAAA;mBAEd,aAAA,CAAA,MAAA;AAOb,kCAA4B,aAAA,CAAA,MAAA;oDA1BjB,SAAS;sDAAT,SAAS;AA6BrB;;","names":[]}