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

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

@@ -0,0 +1,206 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Which way the bar's own line runs.
+ *
+ * The family holds no panels, so there is nothing else for `orientation` to
+ * describe and `aria-orientation` takes the same value. A family that held
+ * panels would have to say which of the two the word means — the panes are side
+ * by side while the separator between them is vertical — and the two readings
+ * are perpendicular. Here they cannot disagree.
+ */
+type SplitterOrientation = 'vertical' | 'horizontal';
+/**
+ * A limit on how far the bar goes: a fraction of the container in `[0, 1]`, or
+ * any CSS length resolved against the container at the moment of the clamp.
+ *
+ * Both, because both are real. Zag, Ark, PrimeNG and allotment are
+ * percentage-only — Zag states the limitation outright — and none of them can
+ * express "this navigation panel never goes below two hundred pixels", which is
+ * the commonest constraint the family has.
+ */
+type SplitterLimit = number | string;
+/** Why the bar moved. */
+type SplitterValueReason = 'pointer' | 'keyboard' | 'programmatic';
+interface Request<Value> {
+    readonly value: Value;
+    readonly previous: Value;
+    readonly reason: SplitterValueReason;
+    readonly source?: unknown;
+    readonly cancelled: boolean;
+    cancel(): void;
+}
+/** The request the bar emits before its position moves. */
+type SplitterValueRequest = Request<number>;
+/** The request the bar emits before it collapses or comes back. */
+type SplitterCollapsedRequest = Request<boolean>;
+interface SplitterDefaults {
+    orientation: SplitterOrientation;
+    min: SplitterLimit;
+    max: SplitterLimit;
+    collapsedValue: number;
+}
+declare const SPLITTER_DEFAULTS: InjectionToken<SplitterDefaults>;
+/**
+ * An application decides once how far its bars may travel, rather than
+ * repeating the same floor on every one in a product. A workspace whose
+ * navigation never goes below two hundred pixels says so here and nowhere else.
+ *
+ * None of the seven surveyed implementations has an equivalent: each takes its
+ * limits per instance, so a product changing its floor changes every call site.
+ */
+declare function provideSplitterDefaults(defaults: Partial<SplitterDefaults>): {
+    provide: InjectionToken<SplitterDefaults>;
+    useFactory: () => SplitterDefaults;
+};
+/** What a splitter is here, before it states anything of its own. */
+declare function injectSplitterDefaults(): SplitterDefaults;
+/**
+ * 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 SlSplitterIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSplitterIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * A focusable separator between two regions the consumer owns.
+ *
+ * It holds the position, the limits, the stops, the keyboard and the whole ARIA
+ * contract of the WAI-ARIA Window Splitter pattern. It holds no layout: the
+ * fraction is written as `--slotted-splitter-value` on the element `for` names,
+ * and a rule in the consumer's own stylesheet turns it into a measure. A
+ * separator that sized the boxes beside it would be deciding a layout it was
+ * only handed a position in.
+ *
+ * A directive on the consumer's own element rather than a component with a tag
+ * of its own, because the bar sits inside a layout the consumer wrote and the
+ * element it should be is theirs to choose.
+ */
+declare class SlSplitter {
+    /** The fraction of the container taken by the region before the bar. */
+    readonly value: _angular_core.ModelSignal<number>;
+    /** Whether the region before the bar is collapsed. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Where a double click and `reset()` return the bar, inside the limits. Not
+     * the value the bar was opened at: a layout restored from storage is where
+     * the reader left it, never where a reset should go.
+     */
+    readonly defaultValue: _angular_core.InputSignal<number>;
+    readonly orientation: _angular_core.InputSignal<SplitterOrientation | undefined>;
+    readonly min: _angular_core.InputSignal<SplitterLimit | undefined>;
+    readonly max: _angular_core.InputSignal<SplitterLimit | undefined>;
+    readonly collapsedValue: _angular_core.InputSignal<number | undefined>;
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly snapPoints: _angular_core.InputSignal<readonly number[]>;
+    /**
+     * The element the bar sizes. A template reference rather than a ref:
+     * `[for]="aside"` with `#aside` on the element.
+     *
+     * Omitted, the bar takes its own previous element sibling, which is what the
+     * DOM already says and what the React binding does too.
+     */
+    readonly for: _angular_core.InputSignal<HTMLElement | undefined>;
+    /** The cancellable requests, before anything commits. */
+    readonly valueChangeRequest: _angular_core.OutputEmitterRef<SplitterValueRequest>;
+    readonly collapsedChangeRequest: _angular_core.OutputEmitterRef<SplitterCollapsedRequest>;
+    /**
+     * Fires once, when a drag settles. `value` moves throughout one, so a
+     * consumer saving a layout saves once here rather than sixty times there.
+     */
+    readonly resizeEnd: _angular_core.OutputEmitterRef<number>;
+    private readonly defaults;
+    private readonly element;
+    private readonly ids;
+    private readonly destroyRef;
+    /**
+     * 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 — the rule
+     * `menu` records and `toolbar` learned the hard way.
+     */
+    private readonly ownRole;
+    private readonly ownTabIndex;
+    private readonly ownControls;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    private readonly regionId;
+    /** The fraction to come back to after a collapse; the value at the moment of the collapse. */
+    private restore;
+    private release;
+    protected readonly resolvedOrientation: _angular_core.Signal<SplitterOrientation>;
+    protected readonly role: _angular_core.Signal<string>;
+    protected readonly tabIndex: _angular_core.Signal<string>;
+    protected readonly ariaOrientation: _angular_core.Signal<"vertical" | null>;
+    protected readonly ariaControls: _angular_core.Signal<string | null>;
+    protected readonly ariaValueNow: _angular_core.Signal<number>;
+    protected readonly ariaValueMin: _angular_core.Signal<number>;
+    protected readonly ariaValueMax: _angular_core.Signal<number>;
+    /**
+     * A signal the geometry can invalidate. The limits depend on the container's
+     * measure, which no signal can see change, so the observer below bumps this
+     * and every computed that reads it recomputes.
+     */
+    private readonly measured;
+    constructor();
+    /** A fraction brought inside the limits as they resolve now. */
+    private clamp;
+    /** The box the fraction is a fraction *of*: whatever holds the bar. */
+    private container;
+    /** The element the bar sizes, announces, and writes the fraction on. */
+    private sized;
+    private geometry;
+    /**
+     * The bar's own axis, in the vocabulary `@slotted/core/extent` speaks. The
+     * region the bar sizes is the one before it, so it is anchored at the
+     * container's first edge on that axis.
+     */
+    private side;
+    /**
+     * A limit as a fraction. A number is already one; a string is a CSS length,
+     * and only the browser knows what `18rem` or `25%` come to — so it is
+     * measured where it will be used rather than parsed here.
+     */
+    private resolve;
+    protected readonly bounds: _angular_core.Signal<{
+        min: number;
+        max: number;
+    }>;
+    private requestValue;
+    private requestCollapsed;
+    /**
+     * `Enter`, from the pattern: "If the primary pane is not collapsed, collapses
+     * the pane. If the pane is collapsed, restores the splitter to its previous
+     * position."
+     *
+     * Both halves move together: a collapse that changed the state and not the
+     * measure would leave the bar where it was, and a restore that changed the
+     * measure and not the state would leave a region that is open and says it is
+     * not.
+     */
+    private toggle;
+    /** Collapses to `collapsedValue`, carrying `programmatic`. */
+    collapse(): void;
+    /** Restores the fraction held before the collapse. */
+    expand(): void;
+    /** Returns the bar to `defaultValue`, inside the limits, which is what a double click does. */
+    reset(): void;
+    /** Moves focus to the bar. */
+    focus(): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onDoubleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlSplitter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlSplitter, "[slSplitter]", ["slSplitter"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "collapsedValue": { "alias": "collapsedValue"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "snapPoints": { "alias": "snapPoints"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "collapsed": "collapsedChange"; "valueChangeRequest": "valueChangeRequest"; "collapsedChangeRequest": "collapsedChangeRequest"; "resizeEnd": "resizeEnd"; }, never, never, true, never>;
+}
+
+export { SPLITTER_DEFAULTS, SlSplitter, SlSplitterIdFactory, injectSplitterDefaults, provideSplitterDefaults };
+export type { SplitterCollapsedRequest, SplitterDefaults, SplitterLimit, SplitterOrientation, SplitterValueReason, SplitterValueRequest };
+//# sourceMappingURL=slotted-angular-splitter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-splitter.d.ts","sources":["../../splitter/src/splitter-defaults.ts","../../splitter/src/splitter.ts"],"mappings":";;;AAEA;;;;;;;;AAQG;KACS,mBAAmB;AAE/B;;;;;;;;AAQG;KACS,aAAa;AAEzB;AACM,KAAM,mBAAmB;AAE/B,UAAU,OAAO;AACf;AACA;AACA,qBAAiB,mBAAmB;AACpC;AACA;;AAED;AAED;KACY,oBAAoB,GAAG,OAAO;AAE1C;KACY,wBAAwB,GAAG,OAAO;UAE7B,gBAAgB;iBAClB,mBAAmB;SAC3B,aAAa;SACb,aAAa;;AAEnB;AASD,cAAa,iBAAiB,EAAA,cAAA,CAAA,gBAAA;AAK9B;;;;;;;AAOG;AACH,iBAAgB,uBAAuB,WAAW,OAAO,CAAC,gBAAgB;;sBAGtD,gBAAgB;AAEnC;AAED;AACA,iBAAgB,sBAAsB,IAAI,gBAAgB;AAI1D;;;;;AAKG;AACH,cACa,mBAAmB;;;oDAAnB,mBAAmB;;AAO/B;;ACnDD;;;;;;;;;;;;;AAaG;AACH,cAgCa,UAAU;;oBAEP,aAAA,CAAA,WAAA;;wBAEI,aAAA,CAAA,WAAA;AAClB;;;;AAIG;2BACkB,aAAA,CAAA,WAAA;0BAED,aAAA,CAAA,WAAA,CAAA,mBAAA;kBACR,aAAA,CAAA,WAAA,CAAA,aAAA;kBACA,aAAA,CAAA,WAAA,CAAA,aAAA;6BACW,aAAA,CAAA,WAAA;0BACH,aAAA,CAAA,wBAAA;uBACH,aAAA,CAAA,wBAAA;yBACE,aAAA,CAAA,WAAA;AAEnB;;;;;;AAMG;kBACS,aAAA,CAAA,WAAA,CAAA,WAAA;;iCAGe,aAAA,CAAA,gBAAA,CAAA,oBAAA;qCACI,aAAA,CAAA,gBAAA,CAAA,wBAAA;AAE/B;;;AAGG;wBACe,aAAA,CAAA,gBAAA;AAElB;AACA;AACA;AACA;AAEA;;;;;AAKG;AACH;AACA;AACA;AAIA,iCAA2B,aAAA,CAAA,cAAA;AAC3B;;;;AAKA,4CAAsC,aAAA,CAAA,MAAA,CAAA,mBAAA;AAGtC,6BAAuB,aAAA,CAAA,MAAA;AACvB,iCAA2B,aAAA,CAAA,MAAA;AAC3B,wCAAkC,aAAA,CAAA,MAAA;AAGlC,qCAA+B,aAAA,CAAA,MAAA;AAC/B,qCAA+B,aAAA,CAAA,MAAA;AAC/B,qCAA+B,aAAA,CAAA,MAAA;AAC/B,qCAA+B,aAAA,CAAA,MAAA;AAE/B;;;;AAIG;AACH;;;AA8DA;;AAMA;;AAKA;AAOA;AASA;;;;AAIG;AACH;AAIA;;;;AAIG;AACH;+BAMyB,aAAA,CAAA,MAAA;;;AAQtB;AAEH;AA8BA;AAwBA;;;;;;;;;AASG;AACH;;;;;;;;;AAqCA,mCAA+B,YAAY;AAmE3C,+BAA2B,aAAa;AA4DxC,mCAA+B,UAAU;oDA3a9B,UAAU;sDAAV,UAAU;AA+atB;;","names":[]}

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

@@ -0,0 +1,38 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * A step on the space scale. Separation is chosen from the scale rather than
+ * stated as a length, so a theme retunes every layout at once and no component
+ * invents a rhythm of its own. `0` is the absence of separation.
+ */
+type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Across the flow, which for a stack is the inline axis. */
+type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+/** Along the flow, which for a stack is the block axis. */
+type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+/**
+ * Stack arranges its children along the block axis and separates them by one
+ * step of the space scale. It paints nothing and adds no semantics: the element
+ * is the one the consumer wrote, so a list stays a list and a form stays a form.
+ *
+ * An axis reaches the stylesheet only when someone decided it. The base rule
+ * already carries the family default, and a layout is the most numerous element
+ * in a document.
+ *
+ * There is no input that reverses the children. The order they are written in
+ * is the order they are read in, by a screen reader and by the Tab key alike.
+ */
+declare class SlStack {
+    /** Positions children across the flow. Absent, they stretch. */
+    readonly align: _angular_core.InputSignal<StackAlign | undefined>;
+    /** Separation between children, as a step on the space scale. */
+    readonly gap: _angular_core.InputSignal<StackGap | undefined>;
+    /** Positions children along the flow; needs a block size to distribute. */
+    readonly justify: _angular_core.InputSignal<StackJustify | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStack, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStack, "[slStack]", ["slStack"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { SlStack };
+export type { StackAlign, StackGap, StackJustify };
+//# sourceMappingURL=slotted-angular-stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-stack.d.ts","sources":["../../stack/src/stack.ts"],"mappings":";;AAEA;;;;AAIG;AACG,KAAM,QAAQ;AAEpB;AACM,KAAM,UAAU;AAEtB;AACM,KAAM,YAAY;AAExB;;;;;;;;;;;AAWG;AACH,cAmBa,OAAO;;oBAEJ,aAAA,CAAA,WAAA,CAAA,UAAA;;kBAEF,aAAA,CAAA,WAAA,CAAA,QAAA;;sBAEI,aAAA,CAAA,WAAA,CAAA,YAAA;oDANL,OAAO;sDAAP,OAAO;AAOnB;;","names":[]}

package/types/slotted-angular-stat-card.d.ts

@@ -0,0 +1,232 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, StatCardMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import * as _slotted_angular_stat_card from '@slotted/angular/stat-card';
+
+type StatCardSize = 'sm' | 'md' | 'lg';
+type StatCardFill = 'outline' | 'elevated' | 'subtle' | 'plain';
+type StatCardLayout = 'inline' | 'stacked';
+type StatCardValueStatus = 'ready' | 'empty' | 'error';
+type StatCardGoodWhen = 'up' | 'down' | 'none';
+type StatCardTone = 'neutral' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger';
+type StatCardDirection = 'up' | 'down' | 'flat';
+type StatCardDeltaFormat = 'percent' | 'decimal';
+/** The direction of a change, from its sign. */
+declare function trendOf(value: number | undefined): StatCardDirection;
+/**
+ * The tone of a change, from what the metric means and never from the sign:
+ * a rise is good when up is good and bad when down is; a fall is the reverse;
+ * a flat change, or a metric with no valence, is neutral.
+ */
+declare function toneOf(trend: StatCardDirection, goodWhen: StatCardGoodWhen): StatCardTone;
+
+/**
+ * A metric with its name, its change and its trend, in a frame.
+ *
+ * The root holds the facts the parts read — which way is good, the change,
+ * the status, whether it is loading — and derives the one thing two parts
+ * have to agree on: the tone of the change, which the delta wears and the
+ * trend hands to its sparkline. It is derived here, from `delta` and
+ * `goodWhen`, so the first render already carries it.
+ *
+ * The root is a group named by its label, so a reader who lands on the
+ * action inside it hears which metric it belongs to; an `aria-label` or
+ * `aria-labelledby` the consumer wrote on the element wins. It carries
+ * `aria-busy` while loading; the placeholders are `skeleton`s, and a
+ * consumer who wants one announcement for a whole dashboard wraps it in a
+ * `slSkeletonRegion`.
+ */
+declare class SlStatCard {
+    readonly size: _angular_core.InputSignal<StatCardSize | undefined>;
+    readonly fill: _angular_core.InputSignal<StatCardFill | undefined>;
+    readonly layout: _angular_core.InputSignal<StatCardLayout | undefined>;
+    /** Whether there is a value to show, and if not, why. */
+    readonly status: _angular_core.InputSignal<StatCardValueStatus>;
+    /** The value is still on its way: every part stands in with a placeholder. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Which way is good for this metric. The delta's tone is derived from it, never from the sign. */
+    readonly goodWhen: _angular_core.InputSignal<StatCardGoodWhen | undefined>;
+    /**
+     * The change since the comparison period, as the first delta inside reads
+     * it: a fraction for a percentage (`0.124` is +12.4%), or a number.
+     */
+    readonly delta: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** The tone the card hands to its trend. Unset, it is the delta's. */
+    readonly tone: _angular_core.InputSignal<StatCardTone | undefined>;
+    /** The locale numbers are written in; the language in force when absent. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** How the value, the delta and the comparison read numbers. */
+    readonly formatOptions: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: what a
+     * screen reader hears beside a change (`up`, `down`, `flat`, read before the
+     * number because a sign is a glyph some readers skip) and what stands in for
+     * a value that is not there (`empty`).
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<StatCardMessages> | undefined>;
+    private readonly defaults;
+    private readonly appLocale;
+    private readonly ownLabel;
+    private readonly ownLabelledBy;
+    /** The id the label takes, and the root is named by. */
+    readonly labelId: string;
+    readonly resolvedSize: _angular_core.Signal<StatCardSize>;
+    readonly resolvedFill: _angular_core.Signal<StatCardFill>;
+    readonly resolvedLayout: _angular_core.Signal<StatCardLayout>;
+    readonly resolvedGoodWhen: _angular_core.Signal<StatCardGoodWhen>;
+    readonly resolvedLocale: _angular_core.Signal<string>;
+    readonly resolvedFormatOptions: _angular_core.Signal<Intl.NumberFormatOptions | undefined>;
+    /** The family's words in the language in force, with this card's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<StatCardMessages>;
+    readonly resolvedTone: _angular_core.Signal<StatCardTone | undefined>;
+    readonly labelledBy: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStatCard, "[slStatCard]", ["slStatCard"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "goodWhen": { "alias": "goodWhen"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "formatOptions": { "alias": "formatOptions"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The change, with the mark that says which way and the word a screen reader
+ * hears before the number. `value` is the root's `delta` unless the part
+ * states its own, so a second delta on one card — month over month beside
+ * year over year — is one more part with one more value.
+ *
+ * `percent` reads the value as a fraction, which is what a division gives;
+ * the sign is always shown except on nought. The tone is derived from the
+ * direction and from `goodWhen`, never from the sign, and an explicit `tone`
+ * wins.
+ */
+declare class SlStatCardDelta {
+    /** The change. Unset, the root's `delta`. */
+    readonly value: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** `percent` reads the value as a fraction; `decimal` reads it as it is. */
+    readonly format: _angular_core.InputSignal<StatCardDeltaFormat>;
+    readonly formatOptions: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    /** Unset, the root's. */
+    readonly goodWhen: _angular_core.InputSignal<StatCardGoodWhen | undefined>;
+    /** An explicit tone, which wins over the one derived from `goodWhen`. */
+    readonly tone: _angular_core.InputSignal<StatCardTone | undefined>;
+    protected readonly card: SlStatCard;
+    readonly change: _angular_core.Signal<number | undefined>;
+    readonly trend: _angular_core.Signal<_slotted_angular_stat_card.StatCardDirection>;
+    readonly resolvedTone: _angular_core.Signal<StatCardTone>;
+    readonly shown: _angular_core.Signal<boolean>;
+    readonly formatted: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardDelta, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStatCardDelta, "[slStatCardDelta]", ["slStatCardDelta"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "formatOptions": { "alias": "formatOptions"; "required": false; "isSignal": true; }; "goodWhen": { "alias": "goodWhen"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** The row with the name, a status beside it and an action at the end. */
+declare class SlStatCardHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardHeader, "[slStatCardHeader]", ["slStatCardHeader"], {}, {}, never, never, true, never>;
+}
+/**
+ * The name of the metric. It is the element the root is named by, so it
+ * carries the id the root points at; an `id` the consumer wrote wins, and
+ * the root then names nothing, which is the consumer's decision to make.
+ */
+declare class SlStatCardLabel {
+    private readonly card;
+    private readonly ownId;
+    readonly id: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardLabel, "[slStatCardLabel]", ["slStatCardLabel"], {}, {}, never, never, true, never>;
+}
+/** A slot beside the name for a badge or a status indicator. */
+declare class SlStatCardStatus {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardStatus, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardStatus, "[slStatCardStatus]", ["slStatCardStatus"], {}, {}, never, never, true, never>;
+}
+/** The place at the end of the header for the consumer's link or button. */
+declare class SlStatCardAction {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardAction, "[slStatCardAction]", ["slStatCardAction"], {}, {}, never, never, true, never>;
+}
+/** The value with its unit and its delta on one line, and the comparison under them. */
+declare class SlStatCardFigure {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardFigure, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardFigure, "[slStatCardFigure]", ["slStatCardFigure"], {}, {}, never, never, true, never>;
+}
+/** The unit, wherever the consumer puts it inside the value: `$` before, `%` after. */
+declare class SlStatCardUnit {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardUnit, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardUnit, "[slStatCardUnit]", ["slStatCardUnit"], {}, {}, never, never, true, never>;
+}
+declare class SlStatCardPeriod {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardPeriod, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardPeriod, "[slStatCardPeriod]", ["slStatCardPeriod"], {}, {}, never, never, true, never>;
+}
+/**
+ * The prose under the figure: what the value was, and the period. Shown
+ * only while there is a value to compare; a placeholder while loading.
+ */
+declare class SlStatCardComparison {
+    protected readonly card: SlStatCard;
+    readonly shown: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardComparison, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStatCardComparison, "[slStatCardComparison]", ["slStatCardComparison"], {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Where a sparkline goes. The stylesheet hands it the card's tone and the
+ * card's ground; while loading it holds a block the sparkline's height, so
+ * the card does not change size when the line arrives.
+ */
+declare class SlStatCardTrend {
+    protected readonly card: SlStatCard;
+    readonly shown: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardTrend, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStatCardTrend, "[slStatCardTrend]", ["slStatCardTrend"], {}, {}, never, ["*"], true, never>;
+}
+/** What is said in place of a value that is missing or failed. Shown only then. */
+declare class SlStatCardMessage {
+    private readonly card;
+    readonly shown: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardMessage, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlStatCardMessage, "[slStatCardMessage]", ["slStatCardMessage"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * The number. A numeric `value` is formatted with the card's locale and
+ * `formatOptions` — `notation: 'compact'` is how 12,900 becomes 12.9K — and
+ * projected content is the consumer's own rendering, unit and all, after
+ * it. A missing or failed value is the `empty` message, a dash; a loading
+ * one is a placeholder five figures wide, on the value's own line.
+ */
+declare class SlStatCardValue {
+    /** A number, formatted with the card's locale and `formatOptions`; the text otherwise. */
+    readonly value: _angular_core.InputSignal<string | number | undefined>;
+    readonly formatOptions: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    protected readonly card: SlStatCard;
+    readonly formatted: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatCardValue, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStatCardValue, "[slStatCardValue]", ["slStatCardValue"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "formatOptions": { "alias": "formatOptions"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * What every card in an application does before any of them states anything
+ * of its own. `goodWhen` is here because a product usually has one answer —
+ * a sales dashboard wants everything up, an operations one wants everything
+ * down — and a card that disagrees says so.
+ */
+interface StatCardDefaults {
+    fill?: StatCardFill;
+    formatOptions?: Intl.NumberFormatOptions;
+    goodWhen?: StatCardGoodWhen;
+    layout?: StatCardLayout;
+    size?: StatCardSize;
+}
+declare const STAT_CARD_DEFAULTS_TOKEN: InjectionToken<StatCardDefaults>;
+/**
+ * An explicit input is never overridden by the token. The words and the locale
+ * come from the language in force (`provideSlotted`).
+ */
+declare function provideStatCardDefaults(defaults: StatCardDefaults): {
+    provide: InjectionToken<StatCardDefaults>;
+    useValue: StatCardDefaults;
+};
+declare function injectStatCardDefaults(): StatCardDefaults;
+
+export { STAT_CARD_DEFAULTS_TOKEN, SlStatCard, SlStatCardAction, SlStatCardComparison, SlStatCardDelta, SlStatCardFigure, SlStatCardHeader, SlStatCardLabel, SlStatCardMessage, SlStatCardPeriod, SlStatCardStatus, SlStatCardTrend, SlStatCardUnit, SlStatCardValue, injectStatCardDefaults, provideStatCardDefaults, toneOf, trendOf };
+export type { StatCardDefaults, StatCardDeltaFormat, StatCardDirection, StatCardFill, StatCardGoodWhen, StatCardLayout, StatCardSize, StatCardTone, StatCardValueStatus };
+//# sourceMappingURL=slotted-angular-stat-card.d.ts.map

package/types/slotted-angular-stat-card.d.ts.map

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

package/types/slotted-angular-status-indicator.d.ts

@@ -0,0 +1,106 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, StatusIndicatorMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * The six operational states. The vocabulary is closed, and that is a decision
+ * rather than an omission: a seventh value would carry no tone, no glyph and
+ * no fallback word, which are the three things this family exists to supply.
+ */
+type StatusIndicatorStatus = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'unknown';
+/** The compact mark, and the one that says the status without colour. */
+type StatusIndicatorMark = 'dot' | 'icon';
+type StatusIndicatorSize = 'sm' | 'md' | 'lg';
+type StatusIndicatorLive = 'off' | 'polite' | 'assertive';
+declare const STATUS_INDICATOR_DEFAULT_STATUS: StatusIndicatorStatus;
+declare const STATUS_INDICATOR_DEFAULT_MARK: StatusIndicatorMark;
+declare const STATUS_INDICATOR_DEFAULT_SIZE: StatusIndicatorSize;
+declare const STATUS_INDICATOR_DEFAULT_LIVE: StatusIndicatorLive;
+
+/**
+ * The operational state of something the application observes.
+ *
+ * The family reports; it never moves the value. That is why there is no
+ * `model()` here and no output — `status` is the application's fact about a
+ * system this component cannot see, the same relationship a progress range has
+ * to the work it reports.
+ *
+ * It is always named. Given projected content, that content is the name; given
+ * none, the status's own word is rendered and clipped from view. The fallback
+ * belongs to `<ng-content>` rather than to a flag the component has to compute,
+ * which is Angular's own answer to the question React answers with
+ * `children === undefined`: the template knows whether anything was projected,
+ * so nothing has to inspect the DOM to find out.
+ *
+ * The selector is a bare attribute, so the element stays the consumer's: a
+ * status belongs in whatever a table cell, a list item or a heading already
+ * is, and wrapping it in a second element would change their layout to carry
+ * an attribute.
+ */
+declare class SlStatusIndicator {
+    readonly status: _angular_core.InputSignal<StatusIndicatorStatus>;
+    readonly mark: _angular_core.InputSignal<StatusIndicatorMark | undefined>;
+    readonly size: _angular_core.InputSignal<StatusIndicatorSize | undefined>;
+    readonly live: _angular_core.InputSignal<StatusIndicatorLive | undefined>;
+    /**
+     * A wave leaving the dot, for a change happening now. An icon mark does not
+     * pulse, and the wave is withdrawn under reduced motion and under forced
+     * colours, so nothing is ever said by the wave alone.
+     */
+    readonly pulse: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * What a reader hears when nothing was projected. Ignored when something
+     * was, because naming an element twice is how a screen reader comes to read
+     * “Success Healthy”. Falls back to the status's word in the catalog.
+     */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * word each status is heard as when nothing was projected.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<StatusIndicatorMessages> | undefined>;
+    private readonly defaults;
+    /** The family's words in the language in force, with this indicator's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<StatusIndicatorMessages>;
+    /**
+     * Read once, before the host binding writes one. A consumer who put
+     * `role="note"` on their own element keeps it, which is the rule
+     * `frameworks.md` states for every static attribute a family writes over.
+     */
+    private readonly ownRole;
+    readonly markValue: _angular_core.Signal<StatusIndicatorMark>;
+    readonly sizeValue: _angular_core.Signal<StatusIndicatorSize>;
+    readonly liveValue: _angular_core.Signal<StatusIndicatorLive>;
+    readonly glyph: _angular_core.Signal<"dot" | "check" | "minus" | "plus" | "x" | "ellipsis" | "copy" | "eye" | "eye-off" | "chevron-right" | "chevron-down" | "chevrons-right" | "panel-open" | "panel-close" | "arrow-left" | "pin" | "pin-off" | "external" | "calendar" | "clock" | "person" | "circle" | "circle-info" | "circle-check" | "triangle-alert" | "circle-alert" | "circle-x" | "circle-question" | "inbox" | "search" | "search-x" | "lock" | "caps-lock" | "arrow-up" | "stop" | "paperclip" | "pipette" | "cloud-off" | "loader-circle" | "maximize" | "minimize" | "upload" | "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">;
+    readonly roleValue: _angular_core.Signal<string | null>;
+    readonly name: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlStatusIndicator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlStatusIndicator, "[slStatusIndicator]", ["slStatusIndicator"], { "status": { "alias": "status"; "required": false; "isSignal": true; }; "mark": { "alias": "mark"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * What every status in an application looks like before any one of them states
+ * anything of its own. The six words come from the language in force
+ * (`provideSlotted`).
+ */
+interface StatusIndicatorDefaults {
+    live?: StatusIndicatorLive;
+    mark?: StatusIndicatorMark;
+    size?: StatusIndicatorSize;
+}
+declare const STATUS_INDICATOR_DEFAULTS_TOKEN: InjectionToken<StatusIndicatorDefaults>;
+/**
+ * An application decides once how its statuses are marked, how large they are
+ * and whether they announce. An indicator that states any of those still wins:
+ * an explicit input is never overridden by the token.
+ */
+declare function provideStatusIndicatorDefaults(defaults: StatusIndicatorDefaults): {
+    provide: InjectionToken<StatusIndicatorDefaults>;
+    useValue: StatusIndicatorDefaults;
+};
+declare function injectStatusIndicatorDefaults(): StatusIndicatorDefaults;
+
+export { STATUS_INDICATOR_DEFAULTS_TOKEN, STATUS_INDICATOR_DEFAULT_LIVE, STATUS_INDICATOR_DEFAULT_MARK, STATUS_INDICATOR_DEFAULT_SIZE, STATUS_INDICATOR_DEFAULT_STATUS, SlStatusIndicator, injectStatusIndicatorDefaults, provideStatusIndicatorDefaults };
+export type { StatusIndicatorDefaults, StatusIndicatorLive, StatusIndicatorMark, StatusIndicatorSize, StatusIndicatorStatus };
+//# sourceMappingURL=slotted-angular-status-indicator.d.ts.map

package/types/slotted-angular-status-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-status-indicator.d.ts","sources":["../../status-indicator/src/status-indicator.constants.ts","../../status-indicator/src/status-indicator.ts","../../status-indicator/src/status-indicator-defaults.ts"],"mappings":";;;;;AAEA;;;;AAIG;AACG,KAAM,qBAAqB;AAGjC;KACY,mBAAmB;AACzB,KAAM,mBAAmB;AACzB,KAAM,mBAAmB;AAE/B,cAAa,+BAA+B,EAAE,qBAAiC;AAe/E,cAAa,6BAA6B,EAAE,mBAA2B;AACvE,cAAa,6BAA6B,EAAE,mBAA0B;AACtE,cAAa,6BAA6B,EAAE,mBAA2B;;ACAvE;;;;;;;;;;;;;;;;;;;AAmBG;AACH,cA+Ba,iBAAiB;qBACb,aAAA,CAAA,WAAA,CAAA,qBAAA;mBACF,aAAA,CAAA,WAAA,CAAA,mBAAA;mBACA,aAAA,CAAA,WAAA,CAAA,mBAAA;mBACA,aAAA,CAAA,WAAA,CAAA,mBAAA;AACb;;;;AAIG;oBACW,aAAA,CAAA,wBAAA;AACd;;;;AAIG;oBACW,aAAA,CAAA,WAAA;AACd;;;AAGG;uBACc,aAAA,CAAA,WAAA,CAAA,eAAA,CAAA,uBAAA;AAEjB;;gBAEU,kBAAA,CAAA,gBAAA,CAAA,uBAAA;AACV;;;;AAIG;AACH;wBAEkB,aAAA,CAAA,MAAA,CAAA,mBAAA;wBAGA,aAAA,CAAA,MAAA,CAAA,mBAAA;wBAGA,aAAA,CAAA,MAAA,CAAA,mBAAA;oBAIJ,aAAA,CAAA,MAAA;wBAEI,aAAA,CAAA,MAAA;mBAEL,aAAA,CAAA,MAAA;oDA/CF,iBAAiB;sDAAjB,iBAAiB;AAgD7B;;AC3HD;;;;AAIG;UACc,uBAAuB;WAC/B,mBAAmB;WACnB,mBAAmB;WACnB,mBAAmB;AAC3B;AAED,cAAa,+BAA+B,EAAA,cAAA,CAAA,uBAAA;AAK5C;;;;AAIG;AACH,iBAAgB,8BAA8B,WAAW,uBAAuB;;;AAE/E;AAED,iBAAgB,6BAA6B,IAAI,uBAAuB;;","names":[]}