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

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

@@ -0,0 +1,373 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, SideNavigationMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import * as i1 from '@slotted/angular/tooltip';
+import { SlTooltip } from '@slotted/angular/tooltip';
+
+/** The row height step. `md` reads the geometry `app-shell` publishes. */
+type SideNavigationSize = 'sm' | 'md' | 'lg';
+/**
+ * How the column reads the room it has. `auto` is compact below `compactAt`
+ * pixels of its own width and labelled above; the other two force one.
+ */
+type SideNavigationMode = 'auto' | 'expanded' | 'compact';
+/**
+ * Where a label that does not fit is cut. `end` is the stylesheet's ellipsis;
+ * `middle` keeps the start and the tail, measured by the binding; `none` wraps.
+ */
+type SideNavigationTruncate = 'end' | 'middle' | 'none';
+/** Why the set of open groups moved. */
+type SideNavigationExpandedReason = 'pointer' | 'keyboard' | 'select' | 'escape' | 'programmatic';
+/** Why the flyout opened or closed. */
+type SideNavigationFlyoutReason = 'pointer' | 'keyboard' | 'select' | 'escape' | 'outsidePress' | 'blur' | 'resize' | 'programmatic';
+/** Why the current destination moved. */
+type SideNavigationValueReason = 'pointer' | 'keyboard' | 'programmatic';
+interface SideNavigationDefaults {
+    autoExpand: boolean;
+    compactAt: number;
+    guides: boolean;
+    landmark: boolean;
+    mode: SideNavigationMode;
+    multiple: boolean;
+    size: SideNavigationSize;
+    truncate: SideNavigationTruncate;
+}
+/** The contract's defaults, and the width the rail is read at. */
+declare const SIDE_NAVIGATION_FALLBACK: SideNavigationDefaults;
+declare const SIDE_NAVIGATION_DEFAULTS: InjectionToken<SideNavigationDefaults>;
+/**
+ * An application decides once how its columns read — the rail's width, the
+ * cut, whether groups open one at a time — rather than repeating it on every
+ * navigation in a product. A column that states any of them itself still wins.
+ * Its words come from the language in force (`provideSlotted`).
+ */
+declare function provideSideNavigationDefaults(defaults: Partial<SideNavigationDefaults>): {
+    provide: InjectionToken<SideNavigationDefaults>;
+    useFactory: () => SideNavigationDefaults;
+};
+/** What a column renders as here, before it states anything of its own. */
+declare function injectSideNavigationDefaults(): SideNavigationDefaults;
+/**
+ * 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 SlSideNavigationIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/** Every row a reader can land on, in the order the DOM holds them. */
+declare const SIDE_NAVIGATION_ROW_SELECTOR = "[data-part=\"link\"], [data-part=\"trigger\"]";
+/**
+ * A column of destinations: nested groups, a current destination, and a rail
+ * when the room it has is under `compactAt` pixels.
+ *
+ * The directive goes on the consumer's own element — `<nav slSideNavigation>`
+ * standing alone, `<div slSideNavigation>` inside `app-shell`'s nav region,
+ * which is already the navigation landmark. `landmark` decides whether the
+ * name is written; the element is the consumer's, as it is everywhere in this
+ * ecosystem.
+ *
+ * **Three values, three models.** `value` is the current destination and
+ * `expanded` the set of open groups; `flyout` is the one group shown beside the
+ * rail, transient by design, and it never writes into `expanded`.
+ *
+ * **The rail is a width.** The stylesheet decides the picture from the root's
+ * own inline size, before any script; the width gate here writes
+ * `data-compact` afterwards, and that is what turns on the tooltip and the
+ * flyout.
+ */
+declare class SlSideNavigation {
+    /** The current destination's value. Two-way, so a template may bind it directly. */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    /** The set of open groups. */
+    readonly expanded: _angular_core.ModelSignal<readonly string[]>;
+    /** The one group presented beside the rail, or null. */
+    readonly flyout: _angular_core.ModelSignal<string | null>;
+    readonly size: _angular_core.InputSignal<SideNavigationSize | undefined>;
+    readonly mode: _angular_core.InputSignal<SideNavigationMode | undefined>;
+    readonly truncate: _angular_core.InputSignal<SideNavigationTruncate | undefined>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly autoExpand: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly guides: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /**
+     * Whether the root is the navigation landmark. Unstated, it is one on its
+     * own and not inside `app-shell`'s nav region, which already is.
+     */
+    readonly landmark: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** The width, in CSS pixels, under which `mode="auto"` is compact. */
+    readonly compactAt: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /**
+     * Words laid over the catalog of the language in force: the landmark's name
+     * (`navigation`). A static `aria-label` still wins.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<SideNavigationMessages> | undefined>;
+    /** One output for one transition, carrying the reason and the event. */
+    readonly valueChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<string | null>>;
+    readonly expandedChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<readonly string[]>>;
+    readonly flyoutChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<string | null>>;
+    private readonly defaults;
+    private readonly shell;
+    /** The name the consumer wrote, kept over the family's own. */
+    private readonly writtenLabel;
+    readonly host: HTMLElement;
+    readonly resolvedSize: _angular_core.Signal<SideNavigationSize>;
+    readonly resolvedMode: _angular_core.Signal<SideNavigationMode>;
+    readonly resolvedTruncate: _angular_core.Signal<SideNavigationTruncate>;
+    readonly resolvedMultiple: _angular_core.Signal<boolean>;
+    readonly resolvedAutoExpand: _angular_core.Signal<boolean>;
+    readonly resolvedGuides: _angular_core.Signal<boolean>;
+    readonly resolvedCompactAt: _angular_core.Signal<number>;
+    readonly resolvedLandmark: _angular_core.Signal<boolean>;
+    /** The family's words in the language in force, with this column's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<SideNavigationMessages>;
+    protected readonly ariaLabel: _angular_core.Signal<string | null>;
+    /** Whether the root is under `compactAt`, measured. */
+    private readonly narrow;
+    readonly compact: _angular_core.Signal<boolean>;
+    /** Moves when the root was resized or the fonts arrived, so a label measures again. */
+    readonly measureTick: _angular_core.WritableSignal<number>;
+    /** The layer the flyout is drawn in, so the keyboard can walk into it. */
+    readonly flyoutNode: _angular_core.WritableSignal<HTMLElement | null>;
+    /** Every item's parent, so the ancestors of a destination can be opened. */
+    private readonly parents;
+    constructor();
+    isExpanded(value: string): boolean;
+    /** An item says where it stands. */
+    registerItem(value: string, parent: string | null): () => void;
+    private requestExpanded;
+    /** Asks the set of open groups to include or drop one value. */
+    toggleExpanded(value: string, next: boolean, reason: SideNavigationExpandedReason, source?: Event): void;
+    /** Asks the flyout to show one group, or none. */
+    setFlyout(next: string | null, reason: SideNavigationFlyoutReason, source?: Event): void;
+    /** Asks the current destination to move. */
+    select(next: string, reason: SideNavigationValueReason, source?: Event): void;
+    /** Opens one group, with the reason `programmatic`. */
+    expand(value: string): void;
+    /** Closes one group, with the reason `programmatic`. */
+    collapse(value: string): void;
+    /** Focuses the first link or trigger in the column. */
+    focus(): void;
+    /** The rows the arrow keys walk, with the flyout's spliced in after its trigger. */
+    rows(): HTMLElement[];
+    protected onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigation, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSideNavigation, "[slSideNavigation]", ["slSideNavigation"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "flyout": { "alias": "flyout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "truncate": { "alias": "truncate"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "autoExpand": { "alias": "autoExpand"; "required": false; "isSignal": true; }; "guides": { "alias": "guides"; "required": false; "isSignal": true; }; "landmark": { "alias": "landmark"; "required": false; "isSignal": true; }; "compactAt": { "alias": "compactAt"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "expanded": "expandedChange"; "flyout": "flyoutChange"; "valueChangeRequest": "valueChangeRequest"; "expandedChangeRequest": "expandedChangeRequest"; "flyoutChangeRequest": "flyoutChangeRequest"; }, never, ["*"], true, never>;
+}
+
+/** A titled run of destinations. Several may stand under one root. */
+declare class SlSideNavigationSection {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationSection, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationSection, "[slSideNavigationSection]", never, {}, {}, never, never, true, never>;
+}
+/** The section's title. In compact mode it becomes a rule. */
+declare class SlSideNavigationSectionLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationSectionLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationSectionLabel, "[slSideNavigationSectionLabel]", never, {}, {}, never, never, true, never>;
+}
+/** The items of one level: the top level, or a section's. */
+declare class SlSideNavigationList {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationList, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationList, "ul[slSideNavigationList]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A row: a link, a trigger, or both, with optional actions and a group.
+ *
+ * It carries the states the stylesheet reads. `data-current` is on it while
+ * its own link is the destination, and while a descendant is and the group is
+ * closed or the column is a rail — the reader sees where they are when the
+ * destination itself is out of sight.
+ */
+declare class SlSideNavigationItem {
+    /** The item's identity: what `value`, `expanded` and `flyout` name it by. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** The row and everything in it refuse interaction. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly navigation: SlSideNavigation;
+    /** The item above, or nothing at the top level. */
+    readonly parent: SlSideNavigationItem | null;
+    private readonly generated;
+    readonly ids: {
+        groupId: string;
+        labelId: string;
+        triggerId: string;
+    };
+    readonly hasLink: _angular_core.WritableSignal<boolean>;
+    readonly hasGroup: _angular_core.WritableSignal<boolean>;
+    /** Whether the label was measured as clipped, which is what opens the tooltip. */
+    readonly clipped: _angular_core.WritableSignal<boolean>;
+    /** The label's whole text, for the tooltip and for `aria-label` under a middle cut. */
+    readonly labelText: _angular_core.WritableSignal<string>;
+    readonly descriptionText: _angular_core.WritableSignal<string>;
+    readonly triggerNode: _angular_core.WritableSignal<HTMLElement | null>;
+    private readonly descendants;
+    readonly expanded: Signal<boolean>;
+    readonly flyoutOpen: Signal<boolean>;
+    /** Whether the current destination is this item's own link. */
+    readonly current: Signal<boolean>;
+    /** Whether the current destination is somewhere under this item. */
+    readonly holdsCurrent: Signal<boolean>;
+    readonly resolvedDisabled: Signal<boolean>;
+    protected readonly marked: Signal<boolean>;
+    constructor();
+    /** A descendant says whether it holds the current destination. */
+    reportCurrent(descendant: string, isCurrent: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationItem, "li[slSideNavigationItem]", ["slSideNavigationItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * What a link and a trigger share: the tooltip a row opens when it cannot
+ * show its own words. `SlTooltip` is a host directive holding the state and
+ * the delays; the row dispatches the pointer and the focus to it only while a
+ * hint is due, because the family — not the consumer's template — decides
+ * when a row is a trigger. The layer is stamped under `@if`, so an idle row
+ * mounts nothing.
+ */
+declare abstract class SideNavigationRow {
+    readonly item: SlSideNavigationItem;
+    readonly navigation: SlSideNavigation;
+    protected readonly tooltip: SlTooltip;
+    protected readonly native: HTMLElement;
+    abstract readonly hint: () => boolean;
+    constructor();
+    protected readonly describedBy: Signal<string | null>;
+    protected onPointerEnter(event: PointerEvent): void;
+    protected onPointerLeave(event: PointerEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerUp(): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SideNavigationRow, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SideNavigationRow, never, never, {}, {}, never, never, true, never>;
+}
+/**
+ * The destination, or a command. On an `a` with an `href` it is a destination
+ * and takes `aria-current`; on a `button` it is a command in the column with
+ * the same row. `routerLink` and `routerLinkActive` live on the same element,
+ * and an `aria-current` the router wrote is read and kept.
+ */
+declare class SlSideNavigationLink extends SideNavigationRow {
+    /**
+     * Whether this is the current destination, stated on the row itself. It
+     * wins over the root's `value`; unstated, an `aria-current` the router wrote
+     * on the element is read instead.
+     */
+    readonly current: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    private readonly isDestination;
+    private readonly writtenCurrent;
+    readonly resolvedCurrent: Signal<boolean>;
+    readonly hint: Signal<boolean>;
+    protected readonly ariaLabel: Signal<string | null>;
+    constructor();
+    protected onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationLink, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSideNavigationLink, "a[slSideNavigationLink], button[slSideNavigationLink]", ["slSideNavigationLink"], { "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.SlTooltip; inputs: {}; outputs: {}; }]>;
+}
+/**
+ * The disclosure button of the group. Alone, it is the whole row and carries
+ * the label; beside a link it is a mark-only button named by the row's label
+ * through `aria-labelledby`. In the rail, a trigger without a link opens the
+ * flyout instead of the inline group.
+ */
+declare class SlSideNavigationTrigger extends SideNavigationRow {
+    readonly hint: Signal<boolean>;
+    constructor();
+    protected onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationTrigger, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSideNavigationTrigger, "button[slSideNavigationTrigger]", ["slSideNavigationTrigger"], {}, {}, never, ["*"], true, [{ directive: typeof i1.SlTooltip; inputs: {}; outputs: {}; }]>;
+}
+/** The box the mark stands in. What is left of a row in the rail. */
+declare class SlSideNavigationIcon {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationIcon, "[slSideNavigationIcon]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The row's text. It registers its words with the item, for the tooltip and
+ * for the accessible name under a middle cut, and measures itself whenever
+ * the column was resized: a label that overflows its box marks the row
+ * clipped, which is what opens the tooltip on a row that fits nothing.
+ */
+declare class SlSideNavigationLabel {
+    protected readonly item: SlSideNavigationItem;
+    private readonly navigation;
+    private readonly native;
+    /** The words as the consumer wrote them, kept while a middle cut is shown. */
+    private whole;
+    constructor();
+    private measure;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationLabel, "[slSideNavigationLabel]", never, {}, {}, never, never, true, never>;
+}
+/** The second line under the title. */
+declare class SlSideNavigationDescription {
+    private readonly item;
+    private readonly native;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationDescription, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationDescription, "[slSideNavigationDescription]", never, {}, {}, never, never, true, never>;
+}
+/** A quantity beside a destination, drawn as tabular figures. Never cut. */
+declare class SlSideNavigationCount {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationCount, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationCount, "[slSideNavigationCount]", never, {}, {}, never, never, true, never>;
+}
+/** The suffix with a tone: a badge, a key. */
+declare class SlSideNavigationEnd {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationEnd, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationEnd, "[slSideNavigationEnd]", never, {}, {}, never, never, true, never>;
+}
+/** Controls beside the row, outside its `a` or `button`. */
+declare class SlSideNavigationActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationActions, "[slSideNavigationActions]", never, {}, {}, never, never, true, never>;
+}
+/** A rule between items that keeps the list a list. */
+declare class SlSideNavigationDivider {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationDivider, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationDivider, "li[slSideNavigationDivider]", never, {}, {}, never, never, true, never>;
+}
+/** A row still arriving: an item's geometry with `skeleton` boxes in it. */
+declare class SlSideNavigationSkeleton {
+    /** How wide the label's bar is drawn, as any CSS length. */
+    readonly labelSize: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationSkeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSideNavigationSkeleton, "li[slSideNavigationSkeleton]", never, { "labelSize": { "alias": "labelSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * An item's children. Inline, it is the second track of the item's grid and
+ * opens with it. In the rail the same `ul` is moved into a layer beside the
+ * trigger — composed from `portal`, `positioner`, `presence` and
+ * `dismissable-layer`, the four modules every overlay in the library takes —
+ * and moved back when the layer has left, which is what the CDK's
+ * `DomPortalOutlet` does with a template's nodes.
+ */
+declare class SlSideNavigationGroup {
+    protected readonly item: SlSideNavigationItem;
+    private readonly navigation;
+    private readonly native;
+    private layer;
+    private home;
+    private portal;
+    private positioner;
+    private dismissable;
+    private readonly status;
+    private readonly presence;
+    constructor();
+    private build;
+    /** The layer joins the single stack only while it is open; the trigger is a branch. */
+    private stack;
+    private readonly onFocusOut;
+    private teardown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSideNavigationGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlSideNavigationGroup, "ul[slSideNavigationGroup]", ["slSideNavigationGroup"], {}, {}, never, never, true, never>;
+}
+
+export { SIDE_NAVIGATION_DEFAULTS, SIDE_NAVIGATION_FALLBACK, SIDE_NAVIGATION_ROW_SELECTOR, SlSideNavigation, SlSideNavigationActions, SlSideNavigationCount, SlSideNavigationDescription, SlSideNavigationDivider, SlSideNavigationEnd, SlSideNavigationGroup, SlSideNavigationIcon, SlSideNavigationIdFactory, SlSideNavigationItem, SlSideNavigationLabel, SlSideNavigationLink, SlSideNavigationList, SlSideNavigationSection, SlSideNavigationSectionLabel, SlSideNavigationSkeleton, SlSideNavigationTrigger, injectSideNavigationDefaults, provideSideNavigationDefaults };
+export type { SideNavigationDefaults, SideNavigationExpandedReason, SideNavigationFlyoutReason, SideNavigationMode, SideNavigationSize, SideNavigationTruncate, SideNavigationValueReason };
+//# sourceMappingURL=slotted-angular-side-navigation.d.ts.map

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

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

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

@@ -0,0 +1,198 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, SkeletonMessages } from '@slotted/core/i18n';
+
+type SkeletonShape = 'text' | 'block' | 'circle' | 'square';
+type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+type SkeletonLive = 'polite' | 'off';
+
+/**
+ * One placeholder box.
+ *
+ * With no projected content it draws the geometry `shape` and `size` describe.
+ * With content it takes *that* content's geometry and covers it, which is the
+ * only form in which the reserved space cannot disagree with what replaces it
+ * — MUI infers the box from `children` and React Spectrum clones the child
+ * with a skeleton class, and both arrive here. The stylesheet tells the two
+ * apart with `:empty`, so nothing has to be declared about which one this is.
+ *
+ * Hidden from assistive technology and taken out of the tab order while it is
+ * painted: reading out the absence of something is noise, and focus must not
+ * fall into content that is not ready. An `aria-hidden` the consumer wrote on
+ * their own element is read once through `HostAttributeToken` and kept, which
+ * is the escape hatch this family established in August.
+ *
+ * The selector is a bare attribute, so the element stays the consumer's: a
+ * placeholder standing in for a word belongs in a `span` and one standing in
+ * for a card belongs in whatever the card is.
+ */
+declare class SlSkeleton {
+    readonly shape: _angular_core.InputSignal<SkeletonShape>;
+    readonly size: _angular_core.InputSignal<SkeletonSize>;
+    readonly animation: _angular_core.InputSignal<SkeletonAnimation | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * The geometry, named for the axes the layout is written in rather than for
+     * the screen's. Every rule in this library is logical, and a `width` input
+     * feeding an `inline-size` declaration would be one word lying about the
+     * other.
+     */
+    readonly inlineSize: _angular_core.InputSignal<string | undefined>;
+    readonly blockSize: _angular_core.InputSignal<string | undefined>;
+    private readonly defaults;
+    /** `null` outside a region, which is how "nobody said" differs from "false". */
+    private readonly region;
+    private readonly ownAriaHidden;
+    readonly painted: _angular_core.Signal<boolean>;
+    readonly animationValue: _angular_core.Signal<SkeletonAnimation>;
+    readonly ariaHidden: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSkeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSkeleton, "[slSkeleton]", ["slSkeleton"], { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "inlineSize": { "alias": "inlineSize"; "required": false; "isSignal": true; }; "blockSize": { "alias": "blockSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The thing that is loading, rather than the shapes drawn on it.
+ *
+ * It owns four facts the boxes inside it cannot own on their own. It carries
+ * `aria-busy`, which is the platform's own answer — ARIA 1.2 asks an author to
+ * set it "on the container element before the first change" and clear it "when
+ * the last change is complete". It holds the one announcement: twelve
+ * placeholders are one wait, and PatternFly, the only surveyed library that
+ * announces at all, puts the text on each box and then has to warn its readers
+ * to give every one of them different words. It takes its whole subtree out of
+ * the tab order. And it drives the animation phase every placeholder inside it
+ * reads, so a region pulses as one surface instead of as twelve blinks.
+ *
+ * The selector is a bare attribute, so the element stays the consumer's: a
+ * region is whatever already wraps the content — a `section`, a `tbody`, a
+ * list item — and wrapping it in a second element would change their layout to
+ * carry an attribute.
+ *
+ * The region itself is never `inert`, and that is deliberate rather than an
+ * omission: an inert subtree is not announced, so marking the region would
+ * silence the one thing it has to say.
+ */
+declare class SlSkeletonRegion {
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly animation: _angular_core.InputSignal<SkeletonAnimation | undefined>;
+    readonly live: _angular_core.InputSignal<SkeletonLive | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: what a
+     * screen reader hears once, while the region is waiting (`label`).
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<SkeletonMessages> | undefined>;
+    readonly loadedLabel: _angular_core.InputSignal<string | undefined>;
+    readonly delay: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly minDuration: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * The moment the placeholders are actually withdrawn, which is later than
+     * `loading` turning false whenever `minDuration` is holding them. An
+     * application moving focus on the input alone would move it into
+     * placeholders.
+     */
+    readonly reveal: _angular_core.OutputEmitterRef<void>;
+    private readonly defaults;
+    /** The family's words in the language in force, with this region's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<SkeletonMessages>;
+    readonly animationValue: _angular_core.Signal<SkeletonAnimation>;
+    readonly liveValue: _angular_core.Signal<SkeletonLive>;
+    private readonly delayValue;
+    private readonly holdValue;
+    /** Whether the placeholders are painted, which is not the `loading` input. */
+    readonly painted: _angular_core.WritableSignal<boolean>;
+    /**
+     * Emptying a live region announces nothing, which is what makes one load one
+     * announcement rather than two. A completion message is opt-in for the same
+     * reason: a page of six regions would otherwise say six things nobody asked
+     * to hear.
+     */
+    readonly announcement: _angular_core.Signal<string>;
+    private machine;
+    private timer;
+    constructor();
+    /**
+     * One step of the shared machine, plus at most one timer. The rule lives in
+     * `@slotted/core/loading` rather than here so React and Angular cannot
+     * disagree about when a placeholder appears — a difference no test that
+     * looked at either binding alone would report.
+     */
+    private settle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSkeletonRegion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSkeletonRegion, "[slSkeletonRegion]", ["slSkeletonRegion"], { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "loadedLabel": { "alias": "loadedLabel"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "minDuration": { "alias": "minDuration"; "required": false; "isSignal": true; }; }, { "reveal": "reveal"; }, never, ["*"], true, never>;
+}
+
+/**
+ * The rows of a paragraph that has not arrived.
+ *
+ * Each row is exactly one line box and the bar inside it is one em, so `lines`
+ * rows occupy exactly the `lines` lines of the paragraph they stand in — at
+ * every type size and every density, because both come from the type the rows
+ * are placed in rather than from a number typed here. Every implementation
+ * surveyed while this family was rebuilt states a pixel height instead, and is
+ * therefore right at one density and wrong at the others.
+ *
+ * The last row is drawn short, which is what makes a stack of bars read as
+ * prose rather than as a barcode — and only when there is more than one, since
+ * a lone row cut to 62% stands for a sentence that was never there. The widths
+ * are fixed rather than random: Carbon randomises them, and a randomised width
+ * is a hydration mismatch waiting for its first server-rendered page.
+ */
+declare class SlSkeletonText {
+    readonly lines: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly animation: _angular_core.InputSignal<SkeletonAnimation | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly lastLineSize: _angular_core.InputSignal<string | undefined>;
+    readonly inlineSize: _angular_core.InputSignal<string | undefined>;
+    private readonly defaults;
+    private readonly region;
+    readonly painted: _angular_core.Signal<boolean>;
+    readonly animationValue: _angular_core.Signal<SkeletonAnimation>;
+    readonly lastLineSizeValue: _angular_core.Signal<string | undefined>;
+    /**
+     * No rows at all once the paragraph has arrived. The element stays, and the
+     * stylesheet takes it out of layout, so nothing the consumer wrote beside it
+     * is remounted on the way through.
+     *
+     * A paragraph of no rows is not a paragraph, whatever arithmetic produced
+     * the number, so the count never falls below one.
+     */
+    readonly rows: _angular_core.Signal<number[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSkeletonText, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSkeletonText, "[slSkeletonText]", ["slSkeletonText"], { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "lastLineSize": { "alias": "lastLineSize"; "required": false; "isSignal": true; }; "inlineSize": { "alias": "inlineSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * What every placeholder in an application looks like, and how a load is
+ * timed, before any of them states anything of its own. The two durations are
+ * here rather than on a box because the policy is an application's: a team
+ * decides once that a wait under two hundred milliseconds is not worth
+ * reporting, and every region inherits it.
+ */
+interface SkeletonDefaults {
+    animation?: SkeletonAnimation;
+    delay?: number;
+    lastLineSize?: string;
+    live?: SkeletonLive;
+    loadedLabel?: string;
+    minDuration?: number;
+}
+declare const SKELETON_DEFAULTS_TOKEN: InjectionToken<SkeletonDefaults>;
+/**
+ * An application decides once how its placeholders are animated, how long a
+ * wait has to last before one appears, how long one is held once it has, and
+ * what a screen reader hears when the content arrives. A region or a box that
+ * states any of those still wins: an explicit input is never overridden by the
+ * token. The words the family writes come from the language in force
+ * (`provideSlotted`).
+ */
+declare function provideSkeletonDefaults(defaults: SkeletonDefaults): {
+    provide: InjectionToken<SkeletonDefaults>;
+    useValue: SkeletonDefaults;
+};
+declare function injectSkeletonDefaults(): SkeletonDefaults;
+
+export { SKELETON_DEFAULTS_TOKEN, SlSkeleton, SlSkeletonRegion, SlSkeletonText, injectSkeletonDefaults, provideSkeletonDefaults };
+export type { SkeletonAnimation, SkeletonDefaults, SkeletonLive, SkeletonShape, SkeletonSize };
+//# sourceMappingURL=slotted-angular-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-skeleton.d.ts","sources":["../../skeleton/src/skeleton.constants.ts","../../skeleton/src/skeleton.ts","../../skeleton/src/skeleton-region.ts","../../skeleton/src/skeleton-text.ts","../../skeleton/src/skeleton-defaults.ts"],"mappings":";;;;;AAAM,KAAM,aAAa;AACnB,KAAM,YAAY;AAClB,KAAM,iBAAiB;KACjB,YAAY;;ACmBxB;;;;;;;;;;;;;;;;;;;AAmBG;AACH,cAqBa,UAAU;oBACP,aAAA,CAAA,WAAA,CAAA,aAAA;mBACD,aAAA,CAAA,WAAA,CAAA,YAAA;wBACK,aAAA,CAAA,WAAA,CAAA,iBAAA;sBACF,aAAA,CAAA,wBAAA;AAChB;;;;;AAKG;yBACgB,aAAA,CAAA,WAAA;wBACD,aAAA,CAAA,WAAA;AAElB;;AAEA;AACA;sBAIgB,aAAA,CAAA,MAAA;6BACO,aAAA,CAAA,MAAA,CAAA,iBAAA;yBAQJ,aAAA,CAAA,MAAA;oDA9BR,UAAU;sDAAV,UAAU;AAiCtB;;ACpED;;;;;;;;;;;;;;;;;;;;;AAqBG;AACH,cAwBa,gBAAgB;sBACX,aAAA,CAAA,wBAAA;wBACE,aAAA,CAAA,WAAA,CAAA,iBAAA;mBACL,aAAA,CAAA,WAAA,CAAA,YAAA;AACb;;;AAGG;uBACc,aAAA,CAAA,WAAA,CAAA,eAAA,CAAA,gBAAA;0BACG,aAAA,CAAA,WAAA;oBACN,aAAA,CAAA,wBAAA;0BACM,aAAA,CAAA,wBAAA;AAIpB;;;;;AAKG;qBACY,aAAA,CAAA,gBAAA;AAEf;;gBAEU,kBAAA,CAAA,gBAAA,CAAA,gBAAA;6BAEa,aAAA,CAAA,MAAA,CAAA,iBAAA;wBAGL,aAAA,CAAA,MAAA,CAAA,YAAA;AAClB;AACA;;sBAGgB,aAAA,CAAA,cAAA;AAEhB;;;;;AAKG;2BACkB,aAAA,CAAA,MAAA;;;;AAoBrB;;;;;AAKG;AACH;oDArEW,gBAAgB;sDAAhB,gBAAgB;AAiF5B;;ACxID;;;;;;;;;;;;;;;AAeG;AACH,cAqBa,cAAc;oBACX,aAAA,CAAA,wBAAA;wBACI,aAAA,CAAA,WAAA,CAAA,iBAAA;sBACF,aAAA,CAAA,wBAAA;2BACK,aAAA,CAAA,WAAA;yBACF,aAAA,CAAA,WAAA;AAEnB;AACA;sBAEgB,aAAA,CAAA,MAAA;6BACO,aAAA,CAAA,MAAA,CAAA,iBAAA;gCAOG,aAAA,CAAA,MAAA;AAE1B;;;;;;;AAOG;mBACU,aAAA,CAAA,MAAA;oDA5BF,cAAc;sDAAd,cAAc;AAiC1B;;ACrFD;;;;;;AAMG;UACc,gBAAgB;gBACnB,iBAAiB;;;WAGtB,YAAY;;;AAGpB;AAED,cAAa,uBAAuB,EAAA,cAAA,CAAA,gBAAA;AAKpC;;;;;;;AAOG;AACH,iBAAgB,uBAAuB,WAAW,gBAAgB;;;AAEjE;AAED,iBAAgB,sBAAsB,IAAI,gBAAgB;;","names":[]}