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

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

@@ -0,0 +1,176 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/** How the rows are told apart. The vocabulary is `accordion`'s. */
+type ListVariant = 'plain' | 'ruled' | 'framed' | 'separated';
+/** The room a row gets. Density is the application's choice; this is not. */
+type ListSize = 'sm' | 'md' | 'lg';
+/**
+ * What is painted in the marker column. It is a separate question from
+ * `ordered`: an ordered set whose rows carry their own badges paints no number
+ * and still reads in order.
+ */
+type ListMarker = 'none' | 'bullet' | 'number';
+interface ListDefaults {
+    inset: boolean;
+    marker: ListMarker;
+    size: ListSize;
+    variant: ListVariant;
+}
+declare const LIST_DEFAULTS: InjectionToken<ListDefaults>;
+/**
+ * An application decides once how its lists are told apart and how much room a
+ * row gets, rather than repeating four inputs on every list. A list that states
+ * any of them itself still wins: an explicit input is never overridden by the
+ * token.
+ */
+declare function provideListDefaults(defaults: Partial<ListDefaults>): {
+    provide: InjectionToken<ListDefaults>;
+    useFactory: () => ListDefaults;
+};
+/** What a list renders as here, before it states anything of its own. */
+declare function injectListDefaults(): ListDefaults;
+/**
+ * A group's heading names its own nested list, so the heading needs an id and
+ * the id has to be the same string on the server and in the browser. A counter
+ * held by the injector produces one; `Math.random` would not match for
+ * hydration.
+ */
+declare class SlListIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * A vertical run of related rows. The rows are `slListItem`, a family of its
+ * own; this one decides how they are told apart, how much room each gets, what
+ * is painted in the marker column and whether they keep their inline padding,
+ * and hands those four down through the injector.
+ *
+ * The directive goes on the element the page wrote — `<ul slList>` or
+ * `<ol slList>` — because the element carries the reading order and that is the
+ * page's decision, not the family's.
+ *
+ * **`role="list"` is written, and it is not redundant.** The family draws its
+ * own marker, because a row is a content box beside its independent targets and
+ * CSS has no `display` that is both `list-item` and a grid. Safari and
+ * VoiceOver drop list semantics the moment CSS removes the marker, so the role
+ * restores what the layout costs. A `role` the consumer wrote themselves — a
+ * `menu`, a `listbox` they are wiring — survives.
+ *
+ * The set holds no state a consumer can own. Selection with roving focus is
+ * `listbox`'s and `table`'s: ARIA 1.2 does not allow `aria-selected` on
+ * `listitem`, so a selection model here would announce nothing.
+ */
+declare class SlList {
+    /** How the rows are told apart. Falls back to the injected default. */
+    readonly variant: _angular_core.InputSignal<ListVariant | undefined>;
+    /** The room a row gets. Falls back to the injected default. */
+    readonly size: _angular_core.InputSignal<ListSize | undefined>;
+    /** What is painted in the marker column. Falls back to the injected default. */
+    readonly marker: _angular_core.InputSignal<ListMarker | undefined>;
+    /**
+     * Takes the rows' inline padding away, for a list inside a box that already
+     * pads its own content. The rule and the fill still run edge to edge.
+     */
+    readonly inset: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /**
+     * `aria-busy` on the set, which ARIA 1.2 §5.2.6 asks of a container whose
+     * rows have not arrived. The family draws no placeholder: `skeleton` owns
+     * that geometry and goes inside the rows.
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly defaults;
+    /** A role the consumer wrote is never replaced by the family's. */
+    private readonly writtenRole;
+    protected readonly role: _angular_core.Signal<string>;
+    readonly resolvedVariant: _angular_core.Signal<ListVariant>;
+    readonly resolvedSize: _angular_core.Signal<ListSize>;
+    readonly resolvedMarker: _angular_core.Signal<ListMarker>;
+    /**
+     * Read by every row under this set, and by the row's own input first. The
+     * input stays `undefined` until it is written, so a list that states
+     * `inset="false"` under a provider that states `true` keeps its own answer —
+     * `booleanAttribute` alone would fold the two together.
+     */
+    readonly resolvedInset: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlList, "ul[slList], ol[slList]", ["slList"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "marker": { "alias": "marker"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * A group inside the set: the `li` holding a heading and a nested list, which
+ * is the grouping HTML already has. MUI, Angular Material, Primer and React
+ * Aria each leave the heading loose among the rows instead, so a reader hears a
+ * heading inside a set rather than a set with a name.
+ *
+ * The three elements are the consumer's own, which is what this ecosystem
+ * composes with: the heading keeps whichever level the document needs, and the
+ * nested list keeps `ul` or `ol` to match the set around it. React reads the
+ * heading element off a `level` input instead, because there the component owns
+ * the tag; both reach the same accessibility tree.
+ */
+declare class SlListSection {
+    /**
+     * The id the heading carries and the nested list names itself by. It is held
+     * here rather than passed between the two, because the pair is the group and
+     * neither half can name the other on its own.
+     */
+    readonly labelId: _angular_core.WritableSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListSection, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListSection, "li[slListSection]", ["slListSection"], {}, {}, never, never, true, never>;
+}
+/**
+ * The group's name. It shares the row's inline inset, so the heading and the
+ * titles under it stand in one column — the alignment that makes a grouped list
+ * read as one list rather than as several.
+ */
+declare class SlListSectionLabel {
+    /**
+     * Keeps the name in place while its own rows scroll past it. It takes the
+     * set's surface and the library's sticky stack level, which is what a
+     * consumer writing `position: sticky` alone does not get.
+     */
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly section;
+    /** An id the consumer wrote is never replaced by the family's. */
+    private readonly written;
+    readonly id: string;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListSectionLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListSectionLabel, "[slListSectionLabel]", ["slListSectionLabel"], { "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * The rows of one group. `role="list"` for the same reason the set writes it:
+ * the family draws its own marker, and the native one is what Safari and
+ * VoiceOver read the semantics from.
+ */
+declare class SlListSectionList {
+    private readonly section;
+    /** A role the consumer wrote is never replaced by the family's. */
+    private readonly writtenRole;
+    private readonly writtenLabelledBy;
+    readonly role: string;
+    readonly labelledBy: () => string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListSectionList, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListSectionList, "ul[slListSectionList], ol[slListSectionList]", ["slListSectionList"], {}, {}, never, never, true, never>;
+}
+/**
+ * What the set says when it holds nothing. It is an `li`, so the reader hears
+ * "list, one item" and then the message; a message outside the list leaves them
+ * with "list, zero items" and silence, and leaves the words outside the box a
+ * framed set paints.
+ *
+ * The family supplies the box, the height and the muted ink. The words are the
+ * page's, and `result-state` is what goes in here.
+ */
+declare class SlListEmpty {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListEmpty, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListEmpty, "li[slListEmpty]", ["slListEmpty"], {}, {}, never, never, true, never>;
+}
+
+export { LIST_DEFAULTS, SlList, SlListEmpty, SlListIdFactory, SlListSection, SlListSectionLabel, SlListSectionList, injectListDefaults, provideListDefaults };
+export type { ListDefaults, ListMarker, ListSize, ListVariant };
+//# sourceMappingURL=slotted-angular-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-list.d.ts","sources":["../../list/src/list-defaults.ts","../../list/src/list.ts","../../list/src/list-parts.ts"],"mappings":";;;AAEA;AACM,KAAM,WAAW;AAEvB;AACM,KAAM,QAAQ;AAEpB;;;;AAIG;AACG,KAAM,UAAU;UAEL,YAAY;;YAEnB,UAAU;UACZ,QAAQ;aACL,WAAW;AACrB;AAID,cAAa,aAAa,EAAA,cAAA,CAAA,YAAA;AAK1B;;;;;AAKG;AACH,iBAAgB,mBAAmB,WAAW,OAAO,CAAC,YAAY;;sBAG9C,YAAY;AAO/B;AAED;AACA,iBAAgB,kBAAkB,IAAI,YAAY;AAIlD;;;;;AAKG;AACH,cACa,eAAe;;;oDAAf,eAAe;;AAO3B;;AClDD;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,cAoBa,MAAM;;sBAED,aAAA,CAAA,WAAA,CAAA,WAAA;;mBAEH,aAAA,CAAA,WAAA,CAAA,QAAA;;qBAEE,aAAA,CAAA,WAAA,CAAA,UAAA;AACf;;;AAGG;oBACW,aAAA,CAAA,wBAAA;AAGd;;;;AAIG;sBACa,aAAA,CAAA,wBAAA;AAEhB;;AAGA;AAEA,6BAAuB,aAAA,CAAA,MAAA;8BAGC,aAAA,CAAA,MAAA,CAAA,WAAA;2BACH,aAAA,CAAA,MAAA,CAAA,QAAA;6BACE,aAAA,CAAA,MAAA,CAAA,UAAA;AAEvB;;;;;AAKG;4BACmB,aAAA,CAAA,MAAA;oDAvCX,MAAM;sDAAN,MAAM;AAwClB;;ACtFD;;;;;;;;;;;AAWG;AACH,cAMa,aAAa;AACxB;;;;AAIG;sBACa,aAAA,CAAA,cAAA;oDANL,aAAa;sDAAb,aAAa;AAOzB;AAED;;;;AAIG;AACH,cAUa,kBAAkB;AAC7B;;;;AAIG;qBACY,aAAA,CAAA,wBAAA;AAEf;;AAEA;;;oDAVW,kBAAkB;sDAAlB,kBAAkB;AAiB9B;AAED;;;;AAIG;AACH,cAUa,iBAAiB;AAC5B;;AAEA;AACA;;;oDAJW,iBAAiB;sDAAjB,iBAAiB;AAW7B;AAED;;;;;;;;AAQG;AACH,cAMa,WAAW;oDAAX,WAAW;sDAAX,WAAW;AAAG;;","names":[]}

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

@@ -0,0 +1,470 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, OnInit, TemplateRef } from '@angular/core';
+import * as _slotted_core_collection from '@slotted/core/collection';
+import { SelectionBehavior, Collection } from '@slotted/core/collection';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { ChangeRequest } from '@slotted/core/state';
+
+/** The type step the listbox and every option inside it sit at. */
+type ListboxSize = 'sm' | 'md' | 'lg';
+/**
+ * Whether the listbox draws its own box. `framed` is the standalone control —
+ * what `<select multiple>` looks like — and `plain` is what a layer that
+ * already has an edge renders inside itself.
+ */
+type ListboxVariant = 'plain' | 'framed';
+/** How many options may be chosen at once. */
+type ListboxSelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * Which of the two models the pattern offers is in force. `toggle` is the
+ * recommended one and holds no modifier; `replace` is the alternative, where a
+ * plain press replaces the selection and Control extends it.
+ */
+type ListboxSelectionBehavior = 'toggle' | 'replace';
+type ListboxOrientation = 'vertical' | 'horizontal';
+/**
+ * How the keyboard's position is expressed. `auto` reads one fact — whether the
+ * set is windowed — and answers `activedescendant` when it is, because a roving
+ * tab stop cannot survive its own element being recycled.
+ */
+type ListboxFocusMode = 'auto' | 'roving' | 'activedescendant';
+/** Whether a chosen option draws a mark as well as its ground and its bar. */
+type ListboxIndicatorMode = 'check' | 'none';
+/** Where `scrollToKey` puts the option it reveals. */
+type ListboxAlignment = 'start' | 'center' | 'end' | 'nearest';
+interface ListboxDefaults {
+    columns: number;
+    disallowEmptySelection: boolean;
+    disallowSelectAll: boolean;
+    focusMode: ListboxFocusMode;
+    indicator: ListboxIndicatorMode;
+    loadMoreThreshold: number;
+    loop: boolean;
+    navigateDisabled: boolean;
+    orientation: ListboxOrientation;
+    overscan: number;
+    pageSize: number;
+    rows: number;
+    selectOnFocus: boolean;
+    selectionBehavior: ListboxSelectionBehavior;
+    selectionMode: ListboxSelectionMode;
+    size: ListboxSize;
+    typeahead: boolean;
+    typeaheadTimeout: number;
+    variant: ListboxVariant;
+}
+declare const LISTBOX_DEFAULTS: InjectionToken<ListboxDefaults>;
+/**
+ * An application decides once how its listboxes behave, rather than repeating
+ * nineteen inputs on every collection in a product. A listbox that states any
+ * of them itself still wins: an explicit input is never overridden by the
+ * token.
+ */
+declare function provideListboxDefaults(defaults: Partial<ListboxDefaults>): {
+    provide: InjectionToken<ListboxDefaults>;
+    useFactory: () => ListboxDefaults;
+};
+/** What a listbox behaves as here, before it states anything of its own. */
+declare function injectListboxDefaults(): ListboxDefaults;
+/**
+ * `aria-activedescendant` names an option by its id, so every option needs one
+ * and the same string has to be produced on the server and in the browser. A
+ * counter held by the injector produces one; `Math.random` would not match for
+ * hydration.
+ */
+declare class SlListboxIdFactory {
+    private count;
+    next(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxIdFactory, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * What a part asks the listbox around it.
+ *
+ * It is an abstract class rather than an interface so it can be the injection
+ * token as well as the type, and it exists in a file of its own so the parts do
+ * not import the component that renders them: the component's own template
+ * applies the option directive, and a direct import each way is a cycle.
+ */
+declare abstract class SlListboxContext {
+    abstract readonly indicatorMode: Signal<ListboxIndicatorMode>;
+    abstract readonly selection: Signal<ListboxSelectionMode>;
+    abstract readonly listboxDisabled: Signal<boolean>;
+    /** Whether this key is chosen. */
+    abstract isSelected(key: string): boolean;
+    /** Whether this key is the one the keyboard is on. */
+    abstract isActive(key: string): boolean;
+    /** The id an option carries, so `aria-activedescendant` can name it. */
+    abstract optionId(key: string): string;
+    /** The tab stop under the roving model, and `null` under the other one. */
+    abstract optionTabIndex(key: string): number | null;
+    /**
+     * How large the whole set is, and where one option sits in it. Both are
+     * `null` unless the collection is one the family was handed, which is exactly
+     * when the pattern requires them: with options written in the template the
+     * whole set is in the DOM and the platform counts it.
+     */
+    abstract setSize(): number | null;
+    abstract posInSet(key: string): number | null;
+    /** A press on an option, with the modifiers it was pressed with. */
+    abstract press(key: string, event: MouseEvent): void;
+}
+
+/**
+ * What the listbox holds: one key in `single` and `none`, a set of them in
+ * `multiple`. Three of the four surveyed implementations give single selection
+ * a scalar; the array-always shape is what makes a consumer write `value[0]`.
+ */
+type ListboxValue = string | readonly string[] | null;
+type ListboxChangeRequest = ChangeRequest<ListboxValue>;
+type ListboxActiveRequest = ChangeRequest<string | null>;
+/** One section of a collection the listbox was handed. */
+interface ListboxSection<T = unknown> {
+    key: string;
+    label: string;
+    items: readonly T[];
+}
+/** One option of the render plan the template walks. */
+interface PlanOption {
+    kind: 'option';
+    id: string;
+    key: string;
+    item: unknown;
+    label: string;
+    disabled: boolean;
+    /** Where a pinned row sits on the canvas, or `null` for a row in the slice. */
+    offset: number | null;
+}
+interface PlanGroup {
+    kind: 'group';
+    id: string;
+    sectionKey: string;
+    label: string;
+    /** Whether the label row itself is inside the window. */
+    showLabel: boolean;
+    options: PlanOption[];
+}
+type PlanEntry = PlanOption | PlanGroup;
+/**
+ * A list of options the reader chooses from, and the primitive `select`,
+ * `combobox` and the pickers are built on.
+ *
+ * ── Where the collection comes from ─────────────────────────────────────
+ *
+ * Two ways in, one shape out. Written in the template, the collection is read
+ * from the rendered options in DOM order — which is the reading order, survives
+ * nesting inside groups, and cannot disagree with what the reader sees. Handed
+ * `items` or `sections`, it is built by `@slotted/core/collection`, which is
+ * the only way a listbox can window a set larger than the DOM or report a set
+ * the DOM does not hold.
+ *
+ * ── Two mutable values ──────────────────────────────────────────────────
+ *
+ * The pattern is explicit that they are two: "DOM focus (the active element) is
+ * functionally distinct from the selected state". `value` is what the reader
+ * chose and `activeKey` is where the keyboard is, and a `select` reopening onto
+ * the option chosen last time needs the second and nothing else.
+ *
+ * ── The focus model is read, not asked for ──────────────────────────────
+ *
+ * `focusMode="auto"` answers `activedescendant` whenever the set is windowed,
+ * because a roving `tabindex` cannot survive its own element being recycled:
+ * the element carrying `tabindex="0"` is removed while it holds focus, and
+ * focus falls to the document body.
+ */
+declare class SlListbox implements ControlValueAccessor, OnInit, SlListboxContext, Validator {
+    /** Present means the consumer owns the choice, for the life of the component. */
+    readonly value: _angular_core.InputSignal<ListboxValue | undefined>;
+    /** What an uncontrolled listbox starts from, read once. */
+    readonly defaultValue: _angular_core.InputSignal<ListboxValue | undefined>;
+    /** Present means the consumer owns which option the keyboard is on. */
+    readonly activeKey: _angular_core.InputSignal<string | null | undefined>;
+    readonly defaultActiveKey: _angular_core.InputSignal<string | null | undefined>;
+    readonly selectionMode: _angular_core.InputSignal<ListboxSelectionMode | undefined>;
+    readonly selectionBehavior: _angular_core.InputSignal<ListboxSelectionBehavior | undefined>;
+    readonly size: _angular_core.InputSignal<ListboxSize | undefined>;
+    readonly variant: _angular_core.InputSignal<ListboxVariant | undefined>;
+    readonly orientation: _angular_core.InputSignal<ListboxOrientation | undefined>;
+    readonly focusMode: _angular_core.InputSignal<ListboxFocusMode | undefined>;
+    readonly indicator: _angular_core.InputSignal<ListboxIndicatorMode | undefined>;
+    readonly loop: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly typeahead: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly selectOnFocus: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly navigateDisabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly disallowEmptySelection: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly disallowSelectAll: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly rows: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly columns: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly pageSize: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly typeaheadTimeout: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** Unstated rather than `false`, so the listbox defers to the form around it. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly readOnly: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The whole collection, when the listbox is to window it or to report a set larger than the DOM. */
+    readonly items: _angular_core.InputSignal<readonly unknown[] | undefined>;
+    /** A grouped collection. Mutually exclusive with `items`. */
+    readonly sections: _angular_core.InputSignal<readonly ListboxSection<unknown>[] | undefined>;
+    readonly getKey: _angular_core.InputSignal<((item: never) => string) | undefined>;
+    readonly getLabel: _angular_core.InputSignal<((item: never) => string) | undefined>;
+    readonly isItemDisabled: _angular_core.InputSignal<((item: never) => boolean) | undefined>;
+    /** How large the whole set is when only part of it has been loaded. */
+    readonly totalCount: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** Renders only the options the viewport covers, plus the pinned ones. */
+    readonly virtual: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The block size of one option. Required whenever `virtual` is set. */
+    readonly itemSize: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** The block size of a group label row. Defaults to `itemSize`. */
+    readonly sectionSize: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly overscan: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly hasMore: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loadMoreThreshold: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** Emitted before the selection moves, with the request that carries the reason. */
+    readonly valueChange: _angular_core.OutputEmitterRef<ListboxChangeRequest>;
+    /** Emitted before the option the keyboard is on moves. */
+    readonly activeKeyChange: _angular_core.OutputEmitterRef<ListboxActiveRequest>;
+    /** Asked when the rendered window reaches the end of what has been loaded. */
+    readonly loadMore: _angular_core.OutputEmitterRef<void>;
+    private readonly defaults;
+    private readonly host;
+    private readonly idPrefix;
+    private readonly destroyRef;
+    /** A role the consumer wrote is never replaced by the family's. */
+    protected readonly writtenRole: string | null;
+    protected readonly optionContent: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private readonly ownKeys;
+    private readonly ownActive;
+    private readonly formKeys;
+    private readonly formDisabled;
+    private readonly anchor;
+    private typeaheadHandle;
+    private onChangeFn;
+    private onTouchedFn;
+    protected readonly viewportSize: _angular_core.WritableSignal<number>;
+    protected readonly scrollOffset: _angular_core.WritableSignal<number>;
+    constructor();
+    /**
+     * The uncontrolled start, read once. It is read here rather than in the
+     * constructor because that is where Angular has finished writing the inputs,
+     * and a value read a moment earlier is the input's declared default rather
+     * than the consumer's.
+     */
+    ngOnInit(): void;
+    readonly resolvedSize: _angular_core.Signal<ListboxSize>;
+    readonly resolvedVariant: _angular_core.Signal<ListboxVariant>;
+    readonly resolvedOrientation: _angular_core.Signal<ListboxOrientation>;
+    readonly indicatorMode: _angular_core.Signal<ListboxIndicatorMode>;
+    readonly selection: _angular_core.Signal<ListboxSelectionMode>;
+    readonly resolvedBehavior: _angular_core.Signal<SelectionBehavior>;
+    readonly resolvedRows: _angular_core.Signal<number>;
+    readonly resolvedColumns: _angular_core.Signal<number>;
+    readonly resolvedReadOnly: _angular_core.Signal<boolean>;
+    readonly resolvedRequired: _angular_core.Signal<boolean>;
+    readonly resolvedInvalid: _angular_core.Signal<boolean>;
+    readonly listboxDisabled: _angular_core.Signal<boolean>;
+    readonly windowed: _angular_core.Signal<boolean>;
+    readonly mode: _angular_core.Signal<"roving" | "activedescendant">;
+    readonly selectedKeys: _angular_core.Signal<readonly string[]>;
+    readonly active: _angular_core.Signal<string | null>;
+    protected readonly activeDescendant: _angular_core.Signal<string | null>;
+    protected readonly rootTabIndex: _angular_core.Signal<0 | -1>;
+    readonly collection: _angular_core.Signal<Collection<unknown> | undefined>;
+    private readonly rowMetrics;
+    readonly slice: _angular_core.Signal<_slotted_core_collection.VirtualWindow>;
+    /**
+     * What the template walks. A windowed slice starts and ends in the middle of
+     * the collection, so a group is emitted per contiguous run of rows belonging
+     * to one section rather than per section — and a run whose label row is
+     * outside the window is named by `aria-label` instead. Each run is still a
+     * group carrying the section's name, which is what the pattern asks of a
+     * grouped option.
+     */
+    protected readonly plan: _angular_core.Signal<PlanEntry[]>;
+    /**
+     * The collection as the reducers want it, read at the moment of a key press
+     * rather than held in state: an option added or removed between two presses
+     * is already accounted for, and nothing has to be registered.
+     */
+    private snapshot;
+    isSelected(key: string): boolean;
+    isActive(key: string): boolean;
+    optionId(key: string): string;
+    optionTabIndex(key: string): 0 | -1 | null;
+    setSize(): number | null;
+    posInSet(key: string): number | null;
+    press(key: string, event: MouseEvent): void;
+    private focusOption;
+    private requestActive;
+    private applySelection;
+    private moveActive;
+    private revealIndex;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    protected handleFocusIn(event: FocusEvent): void;
+    protected handleFocusOut(event: FocusEvent): void;
+    protected readViewport(): void;
+    private askForMore;
+    /** Moves real focus into the listbox, under either focus model. */
+    focus(): void;
+    /** Reveals an option, whether or not it is currently rendered. */
+    scrollToKey(key: string, align?: ListboxAlignment): void;
+    /** Which option the keyboard is on, or `null`. */
+    getActiveKey(): string | null;
+    writeValue(value: ListboxValue | undefined): void;
+    registerOnChange(fn: (value: ListboxValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * The listbox owns validity over the set, which no single option can see:
+     * "choose one" is a fact about the collection and not about any one option.
+     */
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlListbox, "[slListbox]", ["slListbox"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": false; "isSignal": true; }; "defaultActiveKey": { "alias": "defaultActiveKey"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectionBehavior": { "alias": "selectionBehavior"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "indicator": { "alias": "indicator"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "typeahead": { "alias": "typeahead"; "required": false; "isSignal": true; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "navigateDisabled": { "alias": "navigateDisabled"; "required": false; "isSignal": true; }; "disallowEmptySelection": { "alias": "disallowEmptySelection"; "required": false; "isSignal": true; }; "disallowSelectAll": { "alias": "disallowSelectAll"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "typeaheadTimeout": { "alias": "typeaheadTimeout"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "getKey": { "alias": "getKey"; "required": false; "isSignal": true; }; "getLabel": { "alias": "getLabel"; "required": false; "isSignal": true; }; "isItemDisabled": { "alias": "isItemDisabled"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "sectionSize": { "alias": "sectionSize"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadMoreThreshold": { "alias": "loadMoreThreshold"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "activeKeyChange": "activeKeyChange"; "loadMore": "loadMore"; }, ["optionContent"], ["*"], true, never>;
+}
+
+/**
+ * One option, and the four facts the listbox reads back off it.
+ *
+ * The collection is read from the DOM rather than from a registry, which is
+ * what `menu` already does for its typeahead: DOM order is the reading order,
+ * it survives arbitrary nesting inside groups, and it cannot disagree with what
+ * the reader sees. The facts travel as data attributes, so nothing has to be
+ * registered, unregistered or ordered by the time it was created.
+ *
+ * `aria-disabled` and never the native attribute: the pattern needs a disabled
+ * option to keep its place in the set, and `navigateDisabled` is what decides
+ * whether the arrows land on it.
+ */
+declare class SlListboxOption {
+    /** The key this option chooses. It is what the listbox value holds. */
+    readonly value: _angular_core.InputSignal<string>;
+    /**
+     * What typeahead matches and what a reader hears. Defaults to the option's
+     * own text, which is wrong exactly when the option holds a mark, a badge or
+     * a number the reader would not type.
+     */
+    readonly textValue: _angular_core.InputSignal<string | undefined>;
+    /** Unstated rather than `false`, so the option defers to the listbox. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /**
+     * Rendered outside the window that covers it, at its own place on the canvas.
+     * The listbox pins the active option and the range anchor; nothing else sets
+     * it, because an `aria-activedescendant` whose target has been recycled names
+     * an id that is not in the document.
+     */
+    readonly pinned: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly listbox;
+    protected readonly id: _angular_core.Signal<string>;
+    protected readonly selected: _angular_core.Signal<boolean>;
+    protected readonly current: _angular_core.Signal<boolean>;
+    protected readonly resolvedDisabled: _angular_core.Signal<boolean>;
+    protected readonly ariaSelected: _angular_core.Signal<"true" | "false" | null>;
+    protected readonly setSize: _angular_core.Signal<number | null>;
+    protected readonly posInSet: _angular_core.Signal<number | null>;
+    protected readonly tabIndex: _angular_core.Signal<number | null>;
+    protected onClick(event: MouseEvent): void;
+    /**
+     * Only to stop the browser moving focus off the root. Under
+     * `aria-activedescendant` the root is the focused element, and a press that
+     * took focus to the option would leave the property pointing at something
+     * that is no longer the active element.
+     */
+    protected onPointerDown(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxOption, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlListboxOption, "[slListboxOption]", ["slListboxOption"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "textValue": { "alias": "textValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pinned": { "alias": "pinned"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * A group of options, named by its own label. The pattern requires the name —
+ * "each option group has an accessible name provided via aria-label or
+ * aria-labelledby" — and requires the group to hold at least one option, which
+ * is the consumer's to honour.
+ */
+declare class SlListboxGroup {
+    /** The group's accessible name, rendered as its own label row. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The name without the row, which is what a windowed group takes when its
+     * label has scrolled out of the slice: the run of options is still a group
+     * and still has to be named.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    protected readonly labelId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlListboxGroup, "[slListboxGroup]", ["slListboxGroup"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "groupLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * The mark that says an option is chosen. The listbox reserves its column
+ * whether or not the mark is painted, so a list does not shift sideways as one
+ * option is chosen; `indicator="none"` removes the element and the column with
+ * it. The tick is a `Glyph` sized by the column, and content the consumer
+ * wrote replaces it.
+ */
+declare class SlListboxIndicator {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxIndicator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlListboxIndicator, "[slListboxIndicator]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The option's own artwork, in the same column the mark uses and never beside
+ * it: a `span[slIcon]` holding an `svg[slGlyph]`, or an element of the page's
+ * own. The column sizes and centres it; no stylesheet fills it.
+ */
+declare class SlListboxIcon {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxIcon, "[slListboxIcon]", never, {}, {}, never, never, true, never>;
+}
+/** The option's primary text, and the only one of the three columns that gives way. */
+declare class SlListboxLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxLabel, "[slListboxLabel]", never, {}, {}, never, never, true, never>;
+}
+/** A second line under the label, for what the label cannot say on its own. */
+declare class SlListboxDescription {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxDescription, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxDescription, "[slListboxDescription]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The value beside the name — a count, a price, a status word. `menu` calls the
+ * same column `shortcut`, because a menu's third column holds a key binding.
+ */
+declare class SlListboxMeta {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxMeta, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxMeta, "[slListboxMeta]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * What the listbox says when it holds nothing. It lives inside the listbox for
+ * the reason `list` records: outside it a reader hears "listbox, zero items"
+ * and then nothing, and the words fall outside the box a framed listbox paints.
+ *
+ * It carries no role: `listbox` owns `option` and `group` and nothing else, so
+ * a message with a role of its own would be an owned element ARIA does not
+ * permit.
+ */
+declare class SlListboxEmpty {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxEmpty, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxEmpty, "[slListboxEmpty]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The row at the end of a page that has not arrived. It is an `option` by role
+ * and disabled, because a listbox owns nothing else and the row is not a
+ * choice — which is also why it is not counted in `aria-setsize`.
+ */
+declare class SlListboxLoader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxLoader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxLoader, "[slListboxLoader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The content of one option of a collection the listbox was handed. The family
+ * renders the option element around it, so the template says what an option
+ * holds and never how it is wired.
+ */
+declare class SlListboxOptionContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlListboxOptionContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlListboxOptionContent, "[slListboxOptionContent]", never, {}, {}, never, never, true, never>;
+}
+
+export { LISTBOX_DEFAULTS, SlListbox, SlListboxContext, SlListboxDescription, SlListboxEmpty, SlListboxGroup, SlListboxIcon, SlListboxIdFactory, SlListboxIndicator, SlListboxLabel, SlListboxLoader, SlListboxMeta, SlListboxOption, SlListboxOptionContent, injectListboxDefaults, provideListboxDefaults };
+export type { ListboxActiveRequest, ListboxAlignment, ListboxChangeRequest, ListboxDefaults, ListboxFocusMode, ListboxIndicatorMode, ListboxOrientation, ListboxSection, ListboxSelectionBehavior, ListboxSelectionMode, ListboxSize, ListboxValue, ListboxVariant };
+//# sourceMappingURL=slotted-angular-listbox.d.ts.map