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

package/types/slotted-angular-description-list.d.ts

@@ -0,0 +1,281 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, DescriptionListMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+
+/** The term beside its value, or above it. */
+type DescriptionListLayout = 'row' | 'stack';
+/** How many pairs stand side by side before the container narrows. */
+type DescriptionListColumns = 1 | 2 | 3;
+/** Nothing between pairs, a rule between them, or a framed table. */
+type DescriptionListVariant = 'plain' | 'ruled' | 'framed';
+/**
+ * What happened when a value was copied. It is not a `ChangeRequest`: the
+ * clipboard belongs to the platform, so there is no previous value, nothing to
+ * cancel, and no state the family holds. The output reports, after the fact,
+ * what a consumer may want to log or announce differently.
+ */
+interface DescriptionListCopyRequest {
+    readonly value: string;
+    readonly reason: 'pointer' | 'keyboard';
+    /** `false` when the platform refused the write or offers no clipboard. */
+    readonly copied: boolean;
+    /**
+     * `true` when the write was refused and the value was selected instead, so
+     * the reader can copy it with the keyboard.
+     */
+    readonly selected: boolean;
+    readonly source?: Event;
+}
+interface DescriptionListDefaults {
+    columns?: DescriptionListColumns;
+    layout?: DescriptionListLayout;
+    /** The maximum width of the term column, as a CSS length. */
+    termWidth?: string;
+    variant?: DescriptionListVariant;
+}
+declare const DESCRIPTION_LIST_DEFAULT_LAYOUT: DescriptionListLayout;
+declare const DESCRIPTION_LIST_DEFAULT_COLUMNS: DescriptionListColumns;
+declare const DESCRIPTION_LIST_DEFAULT_VARIANT: DescriptionListVariant;
+/** How long the copy control says it succeeded before returning to rest. */
+declare const COPIED_FOR = 1500;
+declare const DESCRIPTION_LIST_DEFAULTS_TOKEN: InjectionToken<DescriptionListDefaults>;
+/**
+ * An application decides once how its details panels are arranged. A list
+ * that states any of it itself still wins: an explicit input is never
+ * overridden by the token. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+declare function provideDescriptionListDefaults(defaults: DescriptionListDefaults): {
+    provide: InjectionToken<DescriptionListDefaults>;
+    useValue: DescriptionListDefaults;
+};
+declare function injectDescriptionListDefaults(): DescriptionListDefaults;
+/**
+ * A span is stated in columns and the list may have fewer, so a pair asking for
+ * three columns of a two-column list takes two. Grid would otherwise invent the
+ * tracks it was asked for and the list would quietly grow a column nobody
+ * declared. Shared with the React binding through the tests that assert the
+ * same table, and deliberately not through `@slotted/core`: it is three lines,
+ * and a core module exists for arithmetic two bindings would otherwise get
+ * *differently* wrong.
+ */
+declare function spanWithin(span: number | undefined, columns: number): number | undefined;
+/**
+ * Whether a value wants more room than the lines it was given.
+ *
+ * It compares the height the text wants against the height the clamp allows,
+ * rather than comparing the box to itself: `scrollHeight` reports the full
+ * content either way, so the answer does not change when the clamp is released
+ * and the control does not disappear under the hand that pressed it. A line
+ * height CSS cannot resolve — `normal`, or an element with no layout — answers
+ * no, which leaves the control absent rather than present and useless.
+ *
+ * Shared with the React binding through the tests that assert the same table.
+ */
+declare function overflowsClamp(scrollHeight: number, lineHeight: number, lines: number): boolean;
+/**
+ * Puts the value under the reader's own selection, which is the one thing left
+ * to offer when the platform refuses the clipboard. It returns whether it
+ * managed to, so the request can say what actually happened.
+ */
+declare function selectValue(node: HTMLElement | null | undefined): boolean;
+/**
+ * Putting a value on the clipboard, and saying whether it got there.
+ *
+ * The two ways and the order they are tried in belong to `@slotted/core`, which
+ * is where behaviour the two bindings would otherwise get differently wrong
+ * lives: a temporary selection that is not taken back destroys the reader's
+ * own, and that is a bug a family would rediscover once per framework (DL1).
+ *
+ * What is left here is the family's own reading of the answer: the control says
+ * it copied whichever way the text went, and says it could not only when both
+ * ways were refused.
+ */
+declare function copyToClipboard(value: string): Promise<boolean>;
+/**
+ * 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 SlDescriptionListIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionListIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * Pairs of a term and its description, read rather than edited.
+ *
+ * **The semantics are the platform's.** `dl`, `dt` and `dd` already carry
+ * `list`, `term` and `definition`, so the family writes no role: MDN records
+ * that authoring the ARIA `term` and `definition` roles by hand changes how
+ * VoiceOver announces the construct.
+ *
+ * **The `dl` is the component's and the element around it is the consumer's.**
+ * An element with `container-type: inline-size` is a query container for its
+ * descendants and not for itself, and what the container query changes here is
+ * the grid — so the consumer's own element is the container, and the `dl` the
+ * component draws inside it is the grid. Every pair a consumer writes is
+ * projected into that `dl`.
+ */
+declare class SlDescriptionList {
+    readonly layout: _angular_core.InputSignal<DescriptionListLayout | undefined>;
+    readonly columns: _angular_core.InputSignalWithTransform<DescriptionListColumns | undefined, string | DescriptionListColumns | undefined>;
+    readonly variant: _angular_core.InputSignal<DescriptionListVariant | undefined>;
+    /** The maximum width of the term column, as a CSS length. */
+    readonly termWidth: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * copy control and its announcements, the reveal control, and the sentence
+     * read in place of a missing value.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<DescriptionListMessages> | undefined>;
+    private readonly defaults;
+    readonly layoutValue: _angular_core.Signal<DescriptionListLayout>;
+    readonly columnsValue: _angular_core.Signal<DescriptionListColumns>;
+    readonly variantValue: _angular_core.Signal<DescriptionListVariant>;
+    readonly termWidthValue: _angular_core.Signal<string | undefined>;
+    /** The family's words in the language in force, with this list's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<DescriptionListMessages>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDescriptionList, "div[slDescriptionList]", ["slDescriptionList"], { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "termWidth": { "alias": "termWidth"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * One name-value pair, and the `div` the HTML Standard permits inside a `dl`.
+ *
+ * It is the box a rule, a tint and a span apply to, and the only part that can
+ * see both the term and the action — so it is where the identifier that ties
+ * the two together is made.
+ */
+declare class SlDescriptionListItem {
+    readonly list: SlDescriptionList;
+    readonly span: _angular_core.InputSignalWithTransform<DescriptionListColumns | undefined, string | DescriptionListColumns | undefined>;
+    /** The `dt`'s identifier, which the row's action is described by. */
+    readonly termId: string;
+    readonly spanValue: _angular_core.Signal<number | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionListItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDescriptionListItem, "div[slDescriptionListItem]", ["slDescriptionListItem"], { "span": { "alias": "span"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * The name. It carries an identifier so the row's action can be described by
+ * it; a static `id` the consumer wrote wins, because a page that already
+ * references this term references it by the name it chose.
+ */
+declare class SlDescriptionListTerm {
+    private readonly item;
+    private readonly ownId;
+    readonly identifier: string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionListTerm, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDescriptionListTerm, "dt[slDescriptionListTerm]", ["slDescriptionListTerm"], {}, {}, never, never, true, never>;
+}
+/**
+ * One line explaining what the term means, inside the `dt` that names it. It is
+ * part of the term's own text on purpose: a reader who reaches the term hears
+ * the explanation with it, and the row's action — described by the same `dt` —
+ * inherits the context rather than repeating it.
+ */
+declare class SlDescriptionListHint {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionListHint, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDescriptionListHint, "[slDescriptionListHint]", ["slDescriptionListHint"], {}, {}, never, never, true, never>;
+}
+/**
+ * The value's cell: the value itself, and the controls that reach it.
+ *
+ * **Clamping is visual only.** Every character stays in the DOM, selectable,
+ * copyable and readable by a screen reader, which is what section 10 of the
+ * feature guide means by never truncating without access.
+ *
+ * **Empty is stated rather than inferred.** Angular cannot read projected
+ * content without reading the DOM after a render, so the absence of a value is
+ * an input here where React reads nullish children. Levelling the two down to
+ * the input in both would remove the case that matters most in React — a value
+ * missing because the data is missing — to make the two look alike.
+ */
+declare class SlDescriptionListDescription {
+    readonly list: SlDescriptionList;
+    /** The character a row shows where it has no value. */
+    protected readonly emptyMark = "\u2014";
+    /** Lines the value is held to before it is revealed. `0` never clamps. */
+    readonly clamp: _angular_core.InputSignalWithTransform<number, string | number>;
+    /** Draws the control that puts the value on the clipboard. */
+    readonly copy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The text the control copies. Absent, the rendered text of the value is read
+     * at the moment of the press, which is what a formatted value needs.
+     */
+    readonly copyValue: _angular_core.InputSignal<string | undefined>;
+    /** Draws the placeholder in place of a value that is missing. */
+    readonly empty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** What is read in place of that value. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Present means controlled, for the life of the component, which is why the
+     * unset value is `undefined` rather than `false`: a family that read `false`
+     * as a consumer's answer would never own its own state.
+     */
+    readonly revealedValue: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** What an uncontrolled description starts from, read once. */
+    readonly defaultRevealed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emitted before the value is revealed, carrying the value it replaces, the
+     * reason and the event it came from. It is not the second half of a two-way
+     * binding: one slot can carry none of those.
+     */
+    readonly revealedChange: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    /** Emitted after a copy, whether or not the platform accepted it. */
+    readonly copied$: _angular_core.OutputEmitterRef<DescriptionListCopyRequest>;
+    private readonly own;
+    private readonly done;
+    private readonly overflowing;
+    private readonly value;
+    private readonly destroyRef;
+    private readonly injector;
+    private timer;
+    private observer;
+    private keyed;
+    readonly revealed: _angular_core.Signal<boolean>;
+    readonly clampValue: _angular_core.Signal<number>;
+    readonly copied: _angular_core.Signal<boolean>;
+    /** Whether the value wants more room than the clamp gives it. */
+    readonly overflows: _angular_core.Signal<boolean>;
+    readonly placeholderText: _angular_core.Signal<string>;
+    constructor();
+    /**
+     * `Enter` and `Space` both activate a button and the browser turns each into
+     * a click, so the reason a request carries is decided by whether a key came
+     * first. It is the difference between a press and a key, and a consumer that
+     * has to guess writes the wrong handler.
+     */
+    onKeydown(event: KeyboardEvent): void;
+    onToggle(event: Event): void;
+    onCopy(event: Event): Promise<void>;
+    private takeReason;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionListDescription, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDescriptionListDescription, "dd[slDescriptionListDescription]", ["slDescriptionListDescription"], { "clamp": { "alias": "clamp"; "required": false; "isSignal": true; }; "copy": { "alias": "copy"; "required": false; "isSignal": true; }; "copyValue": { "alias": "copyValue"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "revealedValue": { "alias": "revealed"; "required": false; "isSignal": true; }; "defaultRevealed": { "alias": "defaultRevealed"; "required": false; "isSignal": true; }; }, { "revealedChange": "revealedChange"; "copied$": "copied"; }, never, ["*"], true, never>;
+}
+/**
+ * The row's own action, in a second `dd` of the same group — which is what a
+ * `dt` followed by more than one `dd` is for, and what GOV.UK's summary list
+ * does.
+ *
+ * It is named by its own term through `aria-describedby`, so a reader who
+ * reaches "Change" out of context hears which row it changes. GOV.UK repeats
+ * the term as visually hidden text inside every action, which a template system
+ * has to do; a reference says it once and cannot drift. A static
+ * `aria-describedby` the consumer wrote is composed with rather than replaced.
+ */
+declare class SlDescriptionListAction {
+    private readonly item;
+    private readonly own;
+    readonly describedBy: string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDescriptionListAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDescriptionListAction, "dd[slDescriptionListAction]", ["slDescriptionListAction"], {}, {}, never, never, true, never>;
+}
+
+export { COPIED_FOR, DESCRIPTION_LIST_DEFAULTS_TOKEN, DESCRIPTION_LIST_DEFAULT_COLUMNS, DESCRIPTION_LIST_DEFAULT_LAYOUT, DESCRIPTION_LIST_DEFAULT_VARIANT, SlDescriptionList, SlDescriptionListAction, SlDescriptionListDescription, SlDescriptionListHint, SlDescriptionListIdFactory, SlDescriptionListItem, SlDescriptionListTerm, copyToClipboard, injectDescriptionListDefaults, overflowsClamp, provideDescriptionListDefaults, selectValue, spanWithin };
+export type { DescriptionListColumns, DescriptionListCopyRequest, DescriptionListDefaults, DescriptionListLayout, DescriptionListVariant };
+//# sourceMappingURL=slotted-angular-description-list.d.ts.map

package/types/slotted-angular-description-list.d.ts.map

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

package/types/slotted-angular-detail-panel.d.ts

@@ -0,0 +1,240 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, DetailPanelMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, TemplateRef } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import * as _slotted_angular_detail_panel from '@slotted/angular/detail-panel';
+import { SlPage } from '@slotted/angular/page';
+import { SectionLevel } from '@slotted/angular/section';
+import * as i1 from '@slotted/angular/page-header';
+
+/** Every section in the flow with a heading each, or a strip with one section shown. */
+type DetailPanelLayout = 'stacked' | 'tabs';
+/** Which side the aside column takes above 600 pixels; `none` when the consumer renders no aside. */
+type DetailPanelAside = 'end' | 'start' | 'none';
+/** The heading rank the page-header defaults to. Stacked sections take the rank below. */
+type DetailPanelLevel = '1' | '2' | '3';
+/** The page-header's size default, the sections' size, the body's gap and inset. */
+type DetailPanelSize = 'sm' | 'md' | 'lg';
+/** Who scrolls: the host, or the root itself. */
+type DetailPanelScroll = 'ancestor' | 'self';
+/** Under `tabs`, when a section's content exists. Inert under `stacked`. */
+type DetailPanelMount = 'active' | 'lazy' | 'eager';
+/** Whether the record is there. Under either failure the columns give way to the message. */
+type DetailPanelStatus = 'ready' | 'not-found' | 'error';
+/** Why the current section moved. */
+type DetailPanelSectionReason = 'pointer' | 'keyboard' | 'programmatic';
+interface DetailPanelDefaults {
+    aside: DetailPanelAside;
+    layout: DetailPanelLayout;
+    level: DetailPanelLevel;
+    mount: DetailPanelMount;
+    scroll: DetailPanelScroll;
+    size: DetailPanelSize;
+}
+declare const DETAIL_PANEL_DEFAULTS: InjectionToken<DetailPanelDefaults>;
+/**
+ * An application decides once how its records read — stacked or tabbed, the
+ * aside's side, the rank, the size, who scrolls — rather than repeating them
+ * on every screen. A panel that states any of them itself still wins. Its
+ * words come from the language in force (`provideSlotted`).
+ */
+declare function provideDetailPanelDefaults(defaults: Partial<DetailPanelDefaults>): {
+    provide: InjectionToken<DetailPanelDefaults>;
+    useFactory: () => DetailPanelDefaults;
+};
+declare function injectDetailPanelDefaults(): DetailPanelDefaults;
+declare class SlDetailPanelIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/** The ids the strip's tabs family returns for one section name. */
+interface DetailPanelIdentity {
+    panelId: string;
+    tabId: string;
+}
+/**
+ * One named unit of content, declared as a template so the panel decides
+ * when it exists: `mount` under `tabs`, and `loading` under both layouts.
+ *
+ * ```html
+ * <ng-template slDetailPanelSection name="linhas" label="Linhas" [count]="4">
+ *   …
+ * </ng-template>
+ * ```
+ */
+declare class SlDetailPanelSection {
+    /** The value the section is named by in `section` and the URL. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** The tab's words, and the stacked heading. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Drawn in the tab, or as a badge after the stacked heading. */
+    readonly count: _angular_core.InputSignal<number | undefined>;
+    /** Takes the tab out of the strip's sequence. Inert under `stacked`. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The section's own controls, as a template: in the stacked heading's actions column, or in a row above a tabbed section. */
+    readonly actions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelSection, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDetailPanelSection, "ng-template[slDetailPanelSection]", ["slDetailPanelSection"], { "name": { "alias": "name"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * One record on screen: what identifies it, what state it is in, what can be
+ * done to it, and what happened to it.
+ *
+ * **The top is a `[slPageHeader]` the consumer writes**, the root's first
+ * child. The panel provides `PAGE_HEADER_DEFAULTS` for its subtree from its
+ * own `level` and `size`, so a header that states neither takes the panel's;
+ * one that does still wins.
+ *
+ * **One value moves: the current section.** `section` is a model; every move
+ * is first a request on `sectionRequest`, carrying the reason and `cancel()`.
+ * Under `layout="tabs"` the strip (`[slDetailPanelTabs]`, placed in the
+ * header's tabs slot) asks with `pointer` or `keyboard`; under `stacked` the
+ * value arrives as `programmatic` and the named section is scrolled under the
+ * chrome and marked `data-current`.
+ *
+ * **Focus follows the record.** When `recordKey` changes while focus is
+ * inside the root, the heading takes focus and the scroller returns to its
+ * start.
+ */
+declare class SlDetailPanel {
+    readonly layout: _angular_core.InputSignal<DetailPanelLayout | undefined>;
+    readonly aside: _angular_core.InputSignal<DetailPanelAside | undefined>;
+    readonly level: _angular_core.InputSignal<DetailPanelLevel | undefined>;
+    readonly size: _angular_core.InputSignal<DetailPanelSize | undefined>;
+    readonly scroll: _angular_core.InputSignal<DetailPanelScroll | undefined>;
+    readonly mount: _angular_core.InputSignal<DetailPanelMount | undefined>;
+    readonly status: _angular_core.InputSignal<DetailPanelStatus>;
+    /** The record has not arrived: `aria-busy`, and skeleton lines in every section. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The identity of the record on screen. */
+    readonly recordKey: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * aside's name (`aside`) and the root's name while loading (`loading`).
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<DetailPanelMessages> | undefined>;
+    /** The current section. Two-way, so a template may bind it directly. */
+    readonly section: _angular_core.ModelSignal<string | undefined>;
+    /** One output for one move of the current section, carrying the reason and the event. */
+    readonly sectionRequest: _angular_core.OutputEmitterRef<ChangeRequest<string | undefined>>;
+    private readonly defaults;
+    private readonly native;
+    private readonly writtenLabel;
+    private readonly writtenLabelledBy;
+    readonly id: string;
+    /** Every section declared inside the panel, in declaration order. */
+    readonly sections: _angular_core.Signal<readonly SlDetailPanelSection[]>;
+    /** The strip's ids for a section, once the strip has attached. */
+    readonly identify: _angular_core.WritableSignal<((name: string) => DetailPanelIdentity) | undefined>;
+    private readonly headingId;
+    private readonly seen;
+    readonly resolvedLayout: _angular_core.Signal<DetailPanelLayout>;
+    readonly resolvedAside: _angular_core.Signal<DetailPanelAside>;
+    readonly resolvedLevel: _angular_core.Signal<DetailPanelLevel>;
+    readonly resolvedSize: _angular_core.Signal<DetailPanelSize>;
+    readonly resolvedScroll: _angular_core.Signal<DetailPanelScroll>;
+    readonly resolvedMount: _angular_core.Signal<DetailPanelMount>;
+    /** The family's words in the language in force, with this panel's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<DetailPanelMessages>;
+    /** The current section: the model, or under tabs the first section when nothing is named. */
+    readonly current: _angular_core.Signal<string | undefined>;
+    protected readonly labelledBy: _angular_core.Signal<string | null>;
+    protected readonly label: _angular_core.Signal<string | null>;
+    constructor();
+    /** Whether a section has been current at least once, which is what `lazy` reads. */
+    hasSeen(name: string): boolean;
+    /** Asks to move the current section, carrying the reason and the originating event. */
+    select(next: string, reason: DetailPanelSectionReason, source?: Event): void;
+    /** Scrolls a stacked section under the chrome, or shows a tabbed one, with the reason `programmatic`. */
+    scrollToSection(name: string): void;
+    /** Puts focus on the page-header's heading, which is where a new record starts. */
+    focus(): void;
+    private scroller;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDetailPanel, "[slDetailPanel]", ["slDetailPanel"], { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "aside": { "alias": "aside"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "mount": { "alias": "mount"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "recordKey": { "alias": "recordKey"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "section": { "alias": "section"; "required": false; "isSignal": true; }; }, { "section": "sectionChange"; "sectionRequest": "sectionRequest"; }, ["sections"], ["*"], true, never>;
+}
+
+/** An alert about the record, above the columns. */
+declare class SlDetailPanelBanner {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelBanner, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDetailPanelBanner, "[slDetailPanelBanner]", never, {}, {}, never, never, true, never>;
+}
+/** What stands in place of the columns when the record is not there: a result-state. */
+declare class SlDetailPanelMessage {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelMessage, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlDetailPanelMessage, "[slDetailPanelMessage]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The metadata column beside the sections. An `aside` element, named by
+ * the `aside` message unless the consumer names it; while the panel is loading
+ * it shows four short skeleton lines in place of its content.
+ */
+declare class SlDetailPanelAside {
+    protected readonly panel: SlDetailPanel;
+    protected readonly lines = 4;
+    private readonly written;
+    protected readonly name: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelAside, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDetailPanelAside, "aside[slDetailPanelAside]", ["slDetailPanelAside"], {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The row that stays at the bottom: an action-bar, aligned with the column
+ * above through a container at the page's width and inset.
+ */
+declare class SlDetailPanelFooter {
+    protected readonly page: SlPage | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDetailPanelFooter, "footer[slDetailPanelFooter]", ["slDetailPanelFooter"], {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The column under the header: a container at the page's width and inset,
+ * so the columns align with the header's own; the banner above, the two
+ * columns — the sections and the aside — and, when the record is not
+ * there, the message in their place.
+ *
+ * The sections are the panel's `ng-template[slDetailPanelSection]`s,
+ * rendered here in either shape: a tabpanel wired to the strip's tab, or a
+ * `[slSection]` at the rank below the panel's. Rendering a template is what
+ * lets `mount` and `loading` decide whether the consumer's view exists.
+ */
+declare class SlDetailPanelBody {
+    protected readonly panel: SlDetailPanel;
+    protected readonly page: SlPage | null;
+    protected readonly aside: _angular_core.Signal<SlDetailPanelAside | undefined>;
+    protected readonly lines = 3;
+    protected readonly tabbed: _angular_core.Signal<boolean>;
+    protected readonly sectionLevel: _angular_core.Signal<SectionLevel>;
+    protected identity(name: string): _slotted_angular_detail_panel.DetailPanelIdentity | undefined;
+    /** Whether a tabbed section's content exists, by the mount axis. */
+    protected present(name: string): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelBody, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDetailPanelBody, "[slDetailPanelBody]", ["slDetailPanelBody"], {}, {}, ["aside"], ["[slDetailPanelBanner]", "aside[slDetailPanelAside]", "[slDetailPanelMessage]"], true, never>;
+}
+/**
+ * The strip: a `[slTabs]` list rendered from the panel's sections, placed
+ * on the element in the page-header's tabs slot — `slPageHeaderTabs` is a
+ * host directive, so the element is that slot. It holds the list alone; the
+ * panels are the body's sections, wired by the ids this strip hands the
+ * panel. A toolbar beside the list is the consumer's own `[slTabActions]`
+ * element, projected into the strip. Under `layout="stacked"` it renders
+ * nothing.
+ */
+declare class SlDetailPanelTabs {
+    /** The list's accessible name. */
+    readonly label: _angular_core.InputSignal<string>;
+    protected readonly panel: SlDetailPanel;
+    private readonly tabs;
+    constructor();
+    protected forward(request: ChangeRequest<string | undefined>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlDetailPanelTabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlDetailPanelTabs, "[slDetailPanelTabs]", ["slDetailPanelTabs"], { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["[slTabActions]"], true, [{ directive: typeof i1.SlPageHeaderTabs; inputs: {}; outputs: {}; }]>;
+}
+
+export { DETAIL_PANEL_DEFAULTS, SlDetailPanel, SlDetailPanelAside, SlDetailPanelBanner, SlDetailPanelBody, SlDetailPanelFooter, SlDetailPanelIdFactory, SlDetailPanelMessage, SlDetailPanelSection, SlDetailPanelTabs, injectDetailPanelDefaults, provideDetailPanelDefaults };
+export type { DetailPanelAside, DetailPanelDefaults, DetailPanelIdentity, DetailPanelLayout, DetailPanelLevel, DetailPanelMount, DetailPanelScroll, DetailPanelSectionReason, DetailPanelSize, DetailPanelStatus };
+//# sourceMappingURL=slotted-angular-detail-panel.d.ts.map

package/types/slotted-angular-detail-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-detail-panel.d.ts","sources":["../../detail-panel/src/detail-panel-defaults.ts","../../detail-panel/src/detail-panel.ts","../../detail-panel/src/detail-panel-parts.ts"],"mappings":";;;;;;;;;;AAEA;KACY,iBAAiB;AAE7B;AACM,KAAM,gBAAgB;AAE5B;AACM,KAAM,gBAAgB;AAE5B;AACM,KAAM,eAAe;AAE3B;KACY,iBAAiB;AAE7B;AACM,KAAM,gBAAgB;AAE5B;AACM,KAAM,iBAAiB;AAE7B;AACM,KAAM,wBAAwB;UAEnB,mBAAmB;WAC3B,gBAAgB;YACf,iBAAiB;WAClB,gBAAgB;WAChB,gBAAgB;YACf,iBAAiB;UACnB,eAAe;AACtB;AAWD,cAAa,qBAAqB,EAAA,cAAA,CAAA,mBAAA;AAKlC;;;;;AAKG;AACH,iBAAgB,0BAA0B,WAAW,OAAO,CAAC,mBAAmB;;sBAG5D,mBAAmB;AAEtC;AAED,iBAAgB,yBAAyB,IAAI,mBAAmB;AAIhE,cACa,sBAAsB;;;oDAAtB,sBAAsB;;AAOlC;;AClBD;UACiB,mBAAmB;;;AAGnC;AAKD;;;;;;;;;AASG;AACH,cAKa,oBAAoB;;mBAElB,aAAA,CAAA,WAAA;;oBAEC,aAAA,CAAA,WAAA;;oBAEA,aAAA,CAAA,WAAA;;uBAEG,aAAA,CAAA,wBAAA;;sBAED,aAAA,CAAA,WAAA,CAAA,WAAA;uBAEC,WAAA;oDAZN,oBAAoB;sDAApB,oBAAoB;AAahC;AAED;;;;;;;;;;;;;;;;;;;AAmBG;AACH,cAkDa,aAAa;qBACT,aAAA,CAAA,WAAA,CAAA,iBAAA;oBACD,aAAA,CAAA,WAAA,CAAA,gBAAA;oBACA,aAAA,CAAA,WAAA,CAAA,gBAAA;mBACD,aAAA,CAAA,WAAA,CAAA,eAAA;qBACE,aAAA,CAAA,WAAA,CAAA,iBAAA;oBACD,aAAA,CAAA,WAAA,CAAA,gBAAA;qBACC,aAAA,CAAA,WAAA,CAAA,iBAAA;;sBAEC,aAAA,CAAA,wBAAA;;wBAEE,aAAA,CAAA,WAAA;AAClB;;;AAGG;uBACc,aAAA,CAAA,WAAA,CAAA,eAAA,CAAA,mBAAA;;sBAED,aAAA,CAAA,WAAA;;6BAGO,aAAA,CAAA,gBAAA,CAAA,aAAA;AAEvB;AACA;AACA;AACA;;;uBAMiB,aAAA,CAAA,MAAA,UAAA,oBAAA;;AAEjB,uBAAiB,aAAA,CAAA,cAAA,oBAA6B,mBAAmB;AACjE;AACA;6BAEuB,aAAA,CAAA,MAAA,CAAA,iBAAA;4BACD,aAAA,CAAA,MAAA,CAAA,gBAAA;4BACA,aAAA,CAAA,MAAA,CAAA,gBAAA;2BACD,aAAA,CAAA,MAAA,CAAA,eAAA;6BACE,aAAA,CAAA,MAAA,CAAA,iBAAA;4BACD,aAAA,CAAA,MAAA,CAAA,gBAAA;;gBAEZ,kBAAA,CAAA,gBAAA,CAAA,mBAAA;;sBAEM,aAAA,CAAA,MAAA;AAMhB,mCAA6B,aAAA,CAAA,MAAA;AAK7B,8BAAwB,aAAA,CAAA,MAAA;;;AA0DxB;;AAKA,iCAA6B,wBAAwB,WAAW,KAAK;;;;;AA4BrE;oDArJW,aAAa;sDAAb,aAAa;AAwJzB;;ACtRD;AACA,cACa,mBAAmB;oDAAnB,mBAAmB;sDAAnB,mBAAmB;AAAG;AAEnC;AACA,cAKa,oBAAoB;oDAApB,oBAAoB;sDAApB,oBAAoB;AAAG;AAEpC;;;;AAIG;AACH,cAiBa,kBAAkB;AAC7B,8BAAwB,aAAA;AACxB;AACA;AACA,6BAAuB,aAAA,CAAA,MAAA;oDAJZ,kBAAkB;sDAAlB,kBAAkB;AAK9B;AAED;;;AAGG;AACH,cAYa,mBAAmB;AAC9B,6BAAuB,MAAA;oDADZ,mBAAmB;sDAAnB,mBAAmB;AAE/B;AAED;;;;;;;;;;AAUG;AACH,cAmGa,iBAAiB;AAC5B,8BAAwB,aAAA;AACxB,6BAAuB,MAAA;AACvB,8BAAwB,aAAA,CAAA,MAAA,CAAA,kBAAA;AACxB;AAEA,+BAAyB,aAAA,CAAA,MAAA;AACzB,qCAA+B,aAAA,CAAA,MAAA,CAAA,YAAA;AAI/B,sCAA+B,6BAAA,CAAA,mBAAA;;AAK/B;oDAhBW,iBAAiB;sDAAjB,iBAAiB;AAsB7B;AAED;;;;;;;;AAQG;AACH,cA+Ba,iBAAiB;;oBAEd,aAAA,CAAA,WAAA;AAEd,8BAAwB,aAAA;AACxB;;+BAa2B,aAAa;oDAlB7B,iBAAiB;sDAAjB,iBAAiB,mLAAA,EAAA,CAAA,gBAAA;AA0B7B;;","names":[]}