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

package/fesm2022/slotted-angular-listbox.mjs

@@ -0,0 +1,1274 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, numberAttribute, output, ElementRef, DestroyRef, HostAttributeToken, contentChild, TemplateRef, signal, afterNextRender, forwardRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { createCollection, createRowMetrics, virtualWindow, nextSelection, offsetForIndex, moveIndex, shouldLoadMore } from '@slotted/core/collection';
+import { createControllable } from '@slotted/core/state';
+import { isPrintable, createTypeahead } from '@slotted/core/typeahead';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+/**
+ * `loop` is off because React Aria and Zag both default it off and only the
+ * Angular CDK defaults it on, and a list of two hundred options that jumps from
+ * the last to the first loses the reader. `selectOnFocus` is off because the
+ * pattern names the accessibility cost of the other answer.
+ */
+const FALLBACK = {
+    columns: 1,
+    disallowEmptySelection: false,
+    disallowSelectAll: false,
+    focusMode: 'auto',
+    indicator: 'check',
+    loadMoreThreshold: 0,
+    loop: false,
+    navigateDisabled: false,
+    orientation: 'vertical',
+    overscan: 4,
+    pageSize: 10,
+    rows: 7,
+    selectOnFocus: false,
+    selectionBehavior: 'toggle',
+    selectionMode: 'single',
+    size: 'md',
+    typeahead: true,
+    typeaheadTimeout: 500,
+    variant: 'framed',
+};
+const LISTBOX_DEFAULTS = new InjectionToken('slotted listbox defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * 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.
+ */
+function provideListboxDefaults(defaults) {
+    return {
+        provide: LISTBOX_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a listbox behaves as here, before it states anything of its own. */
+function injectListboxDefaults() {
+    return inject(LISTBOX_DEFAULTS);
+}
+/**
+ * `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.
+ */
+class SlListboxIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-listbox-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * 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.
+ */
+class SlListboxContext {
+}
+
+/** The selector the listbox reads its collection through, in DOM order. */
+const OPTION_SELECTOR = "[data-part='option']";
+/**
+ * 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.
+ */
+class SlListboxOption {
+    /** The key this option chooses. It is what the listbox value holds. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    textValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the option defers to the listbox. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * 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.
+     */
+    pinned = input(false, { ...(ngDevMode ? { debugName: "pinned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    listbox = inject(SlListboxContext);
+    id = computed(() => this.listbox.optionId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.listbox.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.listbox.isActive(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => (this.disabled() ?? false) === true || this.listbox.listboxDisabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    ariaSelected = computed(() => this.listbox.selection() === 'none' ? null : this.selected() ? 'true' : 'false', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSelected" }] : /* istanbul ignore next */ []));
+    setSize = computed(() => this.listbox.setSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setSize" }] : /* istanbul ignore next */ []));
+    posInSet = computed(() => this.listbox.posInSet(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "posInSet" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.listbox.optionTabIndex(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.listbox.press(this.value(), event);
+    }
+    /**
+     * 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.
+     */
+    onPointerDown(event) {
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlListboxOption, isStandalone: true, selector: "[slListboxOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "option", "role": "option" }, listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "attr.id": "id()", "attr.data-key": "value()", "attr.data-text-value": "textValue() ?? null", "attr.data-selected": "selected() ? '' : null", "attr.data-current": "current() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-pinned": "pinned() ? '' : null", "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "resolvedDisabled() ? 'true' : null", "attr.aria-setsize": "setSize()", "attr.aria-posinset": "posInSet()", "attr.tabindex": "tabIndex()" } }, exportAs: ["slListboxOption"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slListboxOption]',
+                    standalone: true,
+                    exportAs: 'slListboxOption',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'option',
+                        role: 'option',
+                        '[attr.id]': 'id()',
+                        '[attr.data-key]': 'value()',
+                        '[attr.data-text-value]': 'textValue() ?? null',
+                        '[attr.data-selected]': "selected() ? '' : null",
+                        '[attr.data-current]': "current() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
+                        '[attr.data-pinned]': "pinned() ? '' : null",
+                        '[attr.aria-selected]': 'ariaSelected()',
+                        '[attr.aria-disabled]': "resolvedDisabled() ? 'true' : null",
+                        '[attr.aria-setsize]': 'setSize()',
+                        '[attr.aria-posinset]': 'posInSet()',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '(click)': 'onClick($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }] } });
+/**
+ * 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.
+ */
+class SlListboxGroup {
+    /** The group's accessible name, rendered as its own label row. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'groupLabel' });
+    labelId = inject(SlListboxIdFactory).next();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlListboxGroup, isStandalone: true, selector: "[slListboxGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "role": "group" }, properties: { "attr.aria-labelledby": "label() ? labelId : null", "attr.aria-label": "label() ? null : ariaLabel()" } }, exportAs: ["slListboxGroup"], ngImport: i0, template: `@if (label()) {
+      <div data-part="group-label" [attr.id]="labelId">{{ label() }}</div>
+    }
+    <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slListboxGroup]',
+                    standalone: true,
+                    exportAs: 'slListboxGroup',
+                    template: `@if (label()) {
+      <div data-part="group-label" [attr.id]="labelId">{{ label() }}</div>
+    }
+    <ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'group',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'label() ? labelId : null',
+                        '[attr.aria-label]': 'label() ? null : ariaLabel()',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabel", required: false }] }] } });
+/**
+ * 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.
+ */
+class SlListboxIndicator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxIndicator, isStandalone: true, selector: "[slListboxIndicator]", host: { attributes: { "data-part": "indicator", "aria-hidden": "true" } }, ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph name="check"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIndicator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slListboxIndicator]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph name="check"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'indicator', 'aria-hidden': 'true' },
+                }]
+        }] });
+/**
+ * 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.
+ */
+class SlListboxIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxIcon, isStandalone: true, selector: "[slListboxIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slListboxIcon]',
+                    standalone: true,
+                    host: { 'data-part': 'icon', 'aria-hidden': 'true' },
+                }]
+        }] });
+/** The option's primary text, and the only one of the three columns that gives way. */
+class SlListboxLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxLabel, isStandalone: true, selector: "[slListboxLabel]", host: { attributes: { "data-part": "label" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxLabel, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slListboxLabel]', standalone: true, host: { 'data-part': 'label' } }]
+        }] });
+/** A second line under the label, for what the label cannot say on its own. */
+class SlListboxDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxDescription, isStandalone: true, selector: "[slListboxDescription]", host: { attributes: { "data-part": "description" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slListboxDescription]',
+                    standalone: true,
+                    host: { 'data-part': 'description' },
+                }]
+        }] });
+/**
+ * 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.
+ */
+class SlListboxMeta {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxMeta, isStandalone: true, selector: "[slListboxMeta]", host: { attributes: { "data-part": "meta" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxMeta, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slListboxMeta]', standalone: true, host: { 'data-part': 'meta' } }]
+        }] });
+/**
+ * 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.
+ */
+class SlListboxEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxEmpty, isStandalone: true, selector: "[slListboxEmpty]", host: { attributes: { "data-part": "empty" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slListboxEmpty]', standalone: true, host: { 'data-part': 'empty' } }]
+        }] });
+/**
+ * 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`.
+ */
+class SlListboxLoader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxLoader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxLoader, isStandalone: true, selector: "[slListboxLoader]", host: { attributes: { "data-part": "loader", "role": "option", "aria-disabled": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxLoader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slListboxLoader]',
+                    standalone: true,
+                    host: { 'data-part': 'loader', role: 'option', 'aria-disabled': 'true' },
+                }]
+        }] });
+/**
+ * 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.
+ */
+class SlListboxOptionContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxOptionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListboxOptionContent, isStandalone: true, selector: "[slListboxOptionContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListboxOptionContent, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slListboxOptionContent]', standalone: true }]
+        }] });
+
+const EMPTY_SNAPSHOT = { keys: [], labels: [], disabled: [] };
+function toKeys(value) {
+    if (value === undefined || value === null)
+        return [];
+    return typeof value === 'string' ? [value] : value;
+}
+function sameKeys(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+/**
+ * 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.
+ */
+class SlListbox {
+    /* ── Inputs ───────────────────────────────────────────────────────── */
+    /** Present means the consumer owns the choice, for the life of the component. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** What an uncontrolled listbox starts from, read once. */
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Present means the consumer owns which option the keyboard is on. */
+    activeKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    defaultActiveKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultActiveKey" }] : /* istanbul ignore next */ []));
+    selectionMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    selectionBehavior = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    focusMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusMode" }] : /* istanbul ignore next */ []));
+    indicator = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+    loop = input(undefined, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    typeahead = input(undefined, { ...(ngDevMode ? { debugName: "typeahead" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    selectOnFocus = input(undefined, { ...(ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    navigateDisabled = input(undefined, { ...(ngDevMode ? { debugName: "navigateDisabled" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    disallowEmptySelection = input(undefined, { ...(ngDevMode ? { debugName: "disallowEmptySelection" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    disallowSelectAll = input(undefined, { ...(ngDevMode ? { debugName: "disallowSelectAll" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    rows = input(undefined, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    columns = input(undefined, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    pageSize = input(undefined, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    typeaheadTimeout = input(undefined, { ...(ngDevMode ? { debugName: "typeaheadTimeout" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    /** Unstated rather than `false`, so the listbox defers to the form around it. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    required = input(undefined, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The whole collection, when the listbox is to window it or to report a set larger than the DOM. */
+    items = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** A grouped collection. Mutually exclusive with `items`. */
+    sections = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    getKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getKey" }] : /* istanbul ignore next */ []));
+    getLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getLabel" }] : /* istanbul ignore next */ []));
+    isItemDisabled = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isItemDisabled" }] : /* istanbul ignore next */ []));
+    /** How large the whole set is when only part of it has been loaded. */
+    totalCount = input(undefined, { ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    /** Renders only the options the viewport covers, plus the pinned ones. */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The block size of one option. Required whenever `virtual` is set. */
+    itemSize = input(undefined, { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    /** The block size of a group label row. Defaults to `itemSize`. */
+    sectionSize = input(undefined, { ...(ngDevMode ? { debugName: "sectionSize" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    overscan = input(undefined, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loadMoreThreshold = input(undefined, { ...(ngDevMode ? { debugName: "loadMoreThreshold" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    /* ── Outputs ──────────────────────────────────────────────────────── */
+    /** Emitted before the selection moves, with the request that carries the reason. */
+    valueChange = output();
+    /** Emitted before the option the keyboard is on moves. */
+    activeKeyChange = output();
+    /** Asked when the rendered window reaches the end of what has been loaded. */
+    loadMore = output();
+    /* ── Wiring ───────────────────────────────────────────────────────── */
+    defaults = injectListboxDefaults();
+    host = inject(ElementRef);
+    idPrefix = inject(SlListboxIdFactory).next();
+    destroyRef = inject(DestroyRef);
+    /** A role the consumer wrote is never replaced by the family's. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    /* The consumer's `<ng-template slListboxOptionContent let-item>`: what one
+       option of a handed collection holds, so the template says what an option is
+       made of and never how it is wired. */
+    optionContent = contentChild(SlListboxOptionContent, { ...(ngDevMode ? { debugName: "optionContent" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    ownKeys = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownKeys" }] : /* istanbul ignore next */ []));
+    ownActive = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownActive" }] : /* istanbul ignore next */ []));
+    formKeys = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formKeys" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    anchor = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    typeaheadHandle = null;
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    viewportSize = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
+    scrollOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollOffset" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            const element = this.host.nativeElement;
+            this.readViewport();
+            /* A `ResizeObserver` where there is one, and the viewport's own resize
+               where there is not: a test environment and an old browser both answer
+               the second, and a window that never re-measured would render the first
+               frame's slice forever. */
+            if (typeof ResizeObserver === 'undefined') {
+                const view = element.ownerDocument.defaultView;
+                const read = () => this.readViewport();
+                view?.addEventListener('resize', read);
+                this.destroyRef.onDestroy(() => view?.removeEventListener('resize', read));
+                return;
+            }
+            const observer = new ResizeObserver(() => this.readViewport());
+            observer.observe(element);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+        this.destroyRef.onDestroy(() => this.typeaheadHandle?.destroy());
+    }
+    /**
+     * 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() {
+        this.ownKeys.set(toKeys(this.defaultValue()));
+        this.ownActive.set(this.defaultActiveKey() ?? null);
+    }
+    /* ── Resolved axes ────────────────────────────────────────────────── */
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    indicatorMode = computed(() => this.indicator() ?? this.defaults.indicator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
+    selection = computed(() => this.selectionMode() ?? this.defaults.selectionMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    resolvedBehavior = computed(() => this.selectionBehavior() ?? this.defaults.selectionBehavior, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBehavior" }] : /* istanbul ignore next */ []));
+    resolvedRows = computed(() => this.rows() ?? this.defaults.rows, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
+    resolvedColumns = computed(() => Math.max(Math.floor(this.columns() ?? this.defaults.columns), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => (this.readOnly() ?? false) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedRequired = computed(() => (this.required() ?? false) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRequired" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => (this.invalid() ?? false) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    listboxDisabled = computed(() => (this.disabled() ?? this.formDisabled()) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxDisabled" }] : /* istanbul ignore next */ []));
+    windowed = computed(() => this.virtual() && (this.itemSize() ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowed" }] : /* istanbul ignore next */ []));
+    mode = computed(() => {
+        const asked = this.focusMode() ?? this.defaults.focusMode;
+        return asked === 'auto' ? (this.windowed() ? 'activedescendant' : 'roving') : asked;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /* ── State ────────────────────────────────────────────────────────── */
+    selectedKeys = computed(() => {
+        const controlled = this.value();
+        if (controlled !== undefined)
+            return toKeys(controlled);
+        return this.formKeys() ?? this.ownKeys();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    active = computed(() => {
+        const controlled = this.activeKey();
+        return controlled === undefined ? this.ownActive() : controlled;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    activeDescendant = computed(() => {
+        const key = this.active();
+        return this.mode() === 'activedescendant' && key !== null ? this.optionId(key) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    rootTabIndex = computed(() => this.mode() === 'activedescendant' || this.active() === null ? 0 : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootTabIndex" }] : /* istanbul ignore next */ []));
+    /* ── The collection ───────────────────────────────────────────────── */
+    collection = computed(() => {
+        const items = this.items();
+        const sections = this.sections();
+        if (items === undefined && sections === undefined)
+            return undefined;
+        const key = this.getKey();
+        const label = this.getLabel();
+        const disabled = this.isItemDisabled();
+        const total = this.totalCount();
+        return createCollection({
+            ...(items === undefined ? {} : { items }),
+            ...(sections === undefined ? {} : { sections }),
+            getKey: key === undefined ? (_item, index) => String(index) : (item) => key(item),
+            ...(label === undefined ? {} : { getLabel: label }),
+            ...(disabled === undefined ? {} : { isDisabled: disabled }),
+            ...(total === undefined ? {} : { totalCount: total }),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collection" }] : /* istanbul ignore next */ []));
+    rowMetrics = computed(() => {
+        const held = this.collection();
+        if (!this.windowed() || held === undefined || this.sections() === undefined)
+            return undefined;
+        const option = this.itemSize() ?? 0;
+        const label = this.sectionSize() ?? option;
+        return createRowMetrics(held.rows.map((row) => (row.kind === 'option' ? option : label)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowMetrics" }] : /* istanbul ignore next */ []));
+    slice = computed(() => {
+        const held = this.collection();
+        const metrics = this.rowMetrics();
+        const activeRow = this.active() === null ? -1 : (held?.optionFor(this.active())?.row ?? -1);
+        const anchorKey = this.anchor();
+        const anchorRow = anchorKey === undefined ? -1 : (held?.optionFor(anchorKey)?.row ?? -1);
+        return virtualWindow({
+            itemCount: held?.rows.length ?? 0,
+            ...(metrics === undefined ? { itemSize: this.itemSize() ?? 0 } : { metrics }),
+            overscan: this.overscan() ?? this.defaults.overscan,
+            scrollOffset: this.scrollOffset(),
+            viewportSize: this.viewportSize(),
+            pinned: [activeRow, anchorRow],
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slice" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    plan = computed(() => {
+        const held = this.collection();
+        if (held === undefined)
+            return [];
+        const metrics = this.rowMetrics();
+        const size = this.itemSize() ?? 0;
+        const offsetOf = (row) => metrics?.offsetOf(row) ?? row * size;
+        const toOption = (index, pinned) => {
+            const option = held.options[index];
+            if (option === undefined)
+                return null;
+            return {
+                kind: 'option',
+                id: `${option.key}-${pinned ? 'pinned' : 'row'}`,
+                key: option.key,
+                item: option.item,
+                label: option.label,
+                disabled: option.disabled,
+                offset: pinned ? offsetOf(option.row) : null,
+            };
+        };
+        const window_ = this.slice();
+        const rows = this.windowed()
+            ? held.rows.slice(window_.startIndex, window_.endIndex)
+            : held.rows;
+        const entries = [];
+        if (this.windowed()) {
+            for (const row of [...window_.pinnedBefore, ...window_.pinnedAfter]) {
+                const held_ = held.rows[row];
+                if (held_?.kind !== 'option')
+                    continue;
+                const option = toOption(held_.option.index, true);
+                if (option !== null)
+                    entries.push(option);
+            }
+        }
+        const group = (sectionKey, label, showLabel) => {
+            const made = {
+                kind: 'group',
+                id: `group-${sectionKey}-${window_.startIndex}`,
+                sectionKey,
+                label,
+                showLabel,
+                options: [],
+            };
+            entries.push(made);
+            return made;
+        };
+        let run;
+        for (const row of rows) {
+            if (row.kind === 'section-label') {
+                run = group(row.section.key, row.section.label ?? '', true);
+                continue;
+            }
+            const option = toOption(row.option.index, false);
+            if (option === null)
+                continue;
+            const section = row.option.section;
+            if (section === undefined) {
+                run = undefined;
+                entries.push(option);
+                continue;
+            }
+            if (run === undefined || run.sectionKey !== section) {
+                run = group(section, held.sections.find((s) => s.key === section)?.label ?? '', false);
+            }
+            run.options.push(option);
+        }
+        return entries;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plan" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    snapshot() {
+        const held = this.collection();
+        if (held !== undefined) {
+            return {
+                keys: held.keys,
+                labels: held.labels,
+                disabled: held.options.map((option) => option.disabled),
+            };
+        }
+        const nodes = [...this.host.nativeElement.querySelectorAll(OPTION_SELECTOR)];
+        if (nodes.length === 0)
+            return EMPTY_SNAPSHOT;
+        return {
+            keys: nodes.map((node) => node.dataset['key'] ?? ''),
+            labels: nodes.map((node) => node.dataset['textValue'] ?? node.textContent?.trim() ?? ''),
+            disabled: nodes.map((node) => node.getAttribute('aria-disabled') === 'true'),
+        };
+    }
+    /* ── What the parts are told ──────────────────────────────────────── */
+    isSelected(key) {
+        return this.selectedKeys().includes(key);
+    }
+    isActive(key) {
+        return this.active() === key;
+    }
+    optionId(key) {
+        return `${this.idPrefix}-${key}`;
+    }
+    optionTabIndex(key) {
+        if (this.mode() !== 'roving')
+            return null;
+        return this.active() === key ? 0 : -1;
+    }
+    setSize() {
+        return this.collection()?.setSize ?? null;
+    }
+    posInSet(key) {
+        const position = this.collection()?.posInSet(key);
+        return position === undefined || position === -1 ? null : position;
+    }
+    press(key, event) {
+        if (this.listboxDisabled())
+            return;
+        const snap = this.snapshot();
+        const index = snap.keys.indexOf(key);
+        const optionDisabled = index !== -1 && snap.disabled[index] === true;
+        const navigateDisabled = this.navigateDisabled() ?? this.defaults.navigateDisabled;
+        if (this.mode() === 'roving')
+            this.focusOption(key);
+        else
+            this.host.nativeElement.focus();
+        if (optionDisabled && !navigateDisabled)
+            return;
+        this.requestActive(key, 'pointer', event);
+        if (optionDisabled)
+            return;
+        if (event.shiftKey)
+            this.applySelection('range', key, 'pointer', event);
+        /* Control or Command adds one, whichever model is in force: it is the press
+           that says "this one as well", and it means that in both. */
+        else if (event.ctrlKey || event.metaKey) {
+            this.applySelection('toggle', key, 'pointer', event, 'toggle');
+        }
+        else
+            this.applySelection('toggle', key, 'pointer', event);
+    }
+    /* ── Moving and choosing ──────────────────────────────────────────── */
+    focusOption(key) {
+        this.host.nativeElement
+            .querySelector(`${OPTION_SELECTOR}[data-key="${CSS.escape(key)}"]`)
+            ?.focus();
+    }
+    requestActive(key, reason, source) {
+        let cancelled = false;
+        const controlled = this.activeKey();
+        const state = createControllable({
+            ...(controlled === undefined ? {} : { controlled }),
+            initial: this.active(),
+            onRequest: (request) => {
+                this.activeKeyChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(key, reason, source);
+        if (cancelled)
+            return;
+        if (moved)
+            this.ownActive.set(key);
+    }
+    applySelection(action, key, reason, source, behavior = this.resolvedBehavior()) {
+        if (this.selection() === 'none' || this.resolvedReadOnly())
+            return;
+        const snap = this.snapshot();
+        const selected = this.selectedKeys();
+        const result = nextSelection({
+            action,
+            behavior,
+            mode: this.selection(),
+            selected,
+            keys: snap.keys,
+            ...(key === undefined ? {} : { key }),
+            ...(this.anchor() === undefined ? {} : { anchor: this.anchor() }),
+            disabled: (candidate) => snap.disabled[snap.keys.indexOf(candidate)] === true,
+            disallowEmpty: this.disallowEmptySelection() ?? this.defaults.disallowEmptySelection,
+            disallowSelectAll: this.disallowSelectAll() ?? this.defaults.disallowSelectAll,
+        });
+        this.anchor.set(result.anchor);
+        if (!result.changed)
+            return;
+        let cancelled = false;
+        const controlled = this.value();
+        const outward = (keys) => this.selection() === 'multiple' ? keys : (keys[0] ?? null);
+        const state = createControllable({
+            ...(controlled === undefined ? {} : { controlled: toKeys(controlled) }),
+            initial: selected,
+            equals: sameKeys,
+            onRequest: (request) => {
+                /* The request the consumer sees carries the shape the consumer gave:
+                   one key in single selection, the set in multiple. The reducer works in
+                   arrays throughout, and this is the one place the two meet. */
+                this.valueChange.emit({
+                    value: outward(request.value),
+                    previous: outward(request.previous),
+                    reason: request.reason,
+                    source: request.source,
+                    get cancelled() {
+                        return request.cancelled;
+                    },
+                    cancel: () => request.cancel(),
+                });
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(result.selected, reason, source);
+        if (cancelled)
+            return;
+        if (moved) {
+            this.ownKeys.set(result.selected);
+            this.formKeys.set(result.selected);
+        }
+        this.onChangeFn(outward(result.selected));
+    }
+    moveActive(index, source, keys) {
+        const key = keys[index];
+        if (key === undefined)
+            return;
+        this.requestActive(key, 'keyboard', source);
+        this.revealIndex(index, 'nearest');
+        if (this.mode() === 'roving')
+            this.focusOption(key);
+    }
+    revealIndex(index, align) {
+        const element = this.host.nativeElement;
+        if (index < 0)
+            return;
+        if (!this.windowed()) {
+            const key = this.snapshot().keys[index];
+            if (key === undefined)
+                return;
+            element
+                .querySelector(`${OPTION_SELECTOR}[data-key="${CSS.escape(key)}"]`)
+                /* Optional-called: `scrollIntoView` is absent in a test environment. */
+                ?.scrollIntoView?.({ block: align === 'nearest' ? 'nearest' : 'center' });
+            return;
+        }
+        const held = this.collection();
+        const metrics = this.rowMetrics();
+        element.scrollTop = offsetForIndex({
+            index: held?.options[index]?.row ?? index,
+            itemCount: held?.rows.length ?? 0,
+            ...(metrics === undefined ? { itemSize: this.itemSize() ?? 0 } : { metrics }),
+            scrollOffset: element.scrollTop,
+            viewportSize: element.clientHeight,
+            align,
+        });
+    }
+    /* ── The keyboard ─────────────────────────────────────────────────── */
+    handleKeyDown(event) {
+        if (event.defaultPrevented || this.listboxDisabled())
+            return;
+        const snap = this.snapshot();
+        if (snap.keys.length === 0)
+            return;
+        const navigateDisabled = this.navigateDisabled() ?? this.defaults.navigateDisabled;
+        const enabled = snap.keys.map((_, index) => navigateDisabled || snap.disabled[index] !== true);
+        const active = this.active();
+        const from = active === null ? -1 : snap.keys.indexOf(active);
+        const modifier = event.ctrlKey || event.metaKey;
+        const element = this.host.nativeElement;
+        const rtl = element.ownerDocument.defaultView?.getComputedStyle(element).direction === 'rtl';
+        const loop = this.loop() ?? this.defaults.loop;
+        const columns = this.resolvedColumns();
+        const pageSize = this.pageSize() ?? this.defaults.pageSize;
+        const selectOnFocus = this.selectOnFocus() ?? this.defaults.selectOnFocus;
+        /**
+         * A row in a two-dimensional arrangement is `pageDown` with the page set to
+         * `columns`: the engine's page arithmetic already clamps rather than
+         * wrapping and lands on the nearest enabled option inward, which is exactly
+         * what a row step needs.
+         */
+        const step = (intent, page) => {
+            const index = moveIndex({
+                enabled,
+                from,
+                intent,
+                loop,
+                ...(page === undefined ? {} : { page }),
+            });
+            if (index === -1 || index === from)
+                return;
+            event.preventDefault();
+            this.moveActive(index, event, snap.keys);
+            const key = snap.keys[index];
+            if (key === undefined || snap.disabled[index] === true)
+                return;
+            if (event.shiftKey && this.selection() === 'multiple') {
+                this.applySelection('toggle', key, 'keyboard', event, 'toggle');
+            }
+            else if (!modifier && selectOnFocus) {
+                this.applySelection('replace', key, 'keyboard', event);
+            }
+        };
+        const edge = (intent) => {
+            const index = moveIndex({ enabled, from, intent });
+            if (index === -1)
+                return;
+            event.preventDefault();
+            const key = snap.keys[index];
+            this.moveActive(index, event, snap.keys);
+            if (modifier && event.shiftKey && key !== undefined) {
+                this.applySelection('range', key, 'keyboard', event, 'toggle');
+            }
+            else if (!modifier && selectOnFocus && key !== undefined) {
+                this.applySelection('replace', key, 'keyboard', event);
+            }
+        };
+        const inlineNext = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const inlinePrevious = rtl ? 'ArrowRight' : 'ArrowLeft';
+        const horizontal = this.resolvedOrientation() === 'horizontal';
+        const grid = columns > 1;
+        if (event.key === 'ArrowDown' && !horizontal) {
+            return grid ? step('pageDown', columns) : step('next');
+        }
+        if (event.key === 'ArrowUp' && !horizontal) {
+            return grid ? step('pageUp', columns) : step('previous');
+        }
+        if (event.key === inlineNext && (horizontal || grid))
+            return step('next');
+        if (event.key === inlinePrevious && (horizontal || grid))
+            return step('previous');
+        if (event.key === 'Home')
+            return edge('first');
+        if (event.key === 'End')
+            return edge('last');
+        if (event.key === 'PageDown')
+            return step('pageDown', pageSize);
+        if (event.key === 'PageUp')
+            return step('pageUp', pageSize);
+        const sequenceOpen = (this.typeaheadHandle?.query.length ?? 0) > 0;
+        if ((event.key === ' ' && !sequenceOpen) || event.key === 'Enter') {
+            if (active === null)
+                return;
+            event.preventDefault();
+            if (event.shiftKey && this.selection() === 'multiple') {
+                this.applySelection('range', active, 'keyboard', event, 'toggle');
+            }
+            else {
+                /* Control+Space toggles even under the alternative model, where a plain
+                   Space replaces. It is the one key that says "this one as well". */
+                this.applySelection('toggle', active, 'keyboard', event, modifier ? 'toggle' : this.resolvedBehavior());
+            }
+            return;
+        }
+        if (modifier && (event.key === 'a' || event.key === 'A')) {
+            event.preventDefault();
+            this.applySelection('all', undefined, 'select', event);
+            return;
+        }
+        const typeahead = this.typeahead() ?? this.defaults.typeahead;
+        if (typeahead && !modifier && isPrintable(event.key, sequenceOpen)) {
+            this.typeaheadHandle ??= createTypeahead({
+                timeout: this.typeaheadTimeout() ?? this.defaults.typeaheadTimeout,
+            });
+            const index = this.typeaheadHandle.match(event.key, snap.labels, from);
+            if (index === -1)
+                return;
+            event.preventDefault();
+            this.moveActive(index, event, snap.keys);
+            const key = snap.keys[index];
+            if (selectOnFocus && key !== undefined) {
+                this.applySelection('replace', key, 'keyboard', event);
+            }
+        }
+    }
+    handleFocusIn(event) {
+        if (this.listboxDisabled())
+            return;
+        if (event.target !== this.host.nativeElement || this.active() !== null)
+            return;
+        /* The pattern: focus lands on the selected option when there is one, and on
+           the first option otherwise, in both single and multiple selection. */
+        const snap = this.snapshot();
+        const navigateDisabled = this.navigateDisabled() ?? this.defaults.navigateDisabled;
+        const enabled = snap.keys.map((_, index) => navigateDisabled || snap.disabled[index] !== true);
+        const selected = this.selectedKeys();
+        const chosen = selected.length > 0 ? snap.keys.indexOf(selected[0]) : -1;
+        const index = chosen !== -1 && enabled[chosen] === true
+            ? chosen
+            : moveIndex({ enabled, from: -1, intent: 'first' });
+        if (index !== -1)
+            this.moveActive(index, event, snap.keys);
+    }
+    handleFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next !== null && this.host.nativeElement.contains(next))
+            return;
+        /**
+         * Only when focus has actually left. Under the roving model the family
+         * moves focus from option to option on every key, and each of those moves
+         * raises a `focusout` on the root: resetting on all of them cleared the
+         * typeahead buffer after every character, so a sequence longer than one
+         * letter could never be typed.
+         */
+        this.typeaheadHandle?.reset();
+        this.onTouchedFn();
+    }
+    readViewport() {
+        const element = this.host.nativeElement;
+        this.viewportSize.set(element.clientHeight);
+        this.scrollOffset.set(element.scrollTop);
+        if (!this.windowed())
+            return;
+        this.askForMore();
+    }
+    askForMore() {
+        const held = this.collection();
+        if (held === undefined)
+            return;
+        if (shouldLoadMore({
+            endIndex: this.windowed() ? this.slice().endIndex : held.rows.length,
+            loadedCount: held.rows.length,
+            threshold: this.loadMoreThreshold() ?? this.defaults.loadMoreThreshold,
+            hasMore: this.hasMore(),
+            loading: this.loading(),
+        })) {
+            this.loadMore.emit();
+        }
+    }
+    /* ── The imperative actions ───────────────────────────────────────── */
+    /** Moves real focus into the listbox, under either focus model. */
+    focus() {
+        const active = this.active();
+        if (this.mode() === 'activedescendant' || active === null) {
+            this.host.nativeElement.focus();
+            return;
+        }
+        this.focusOption(active);
+    }
+    /** Reveals an option, whether or not it is currently rendered. */
+    scrollToKey(key, align = 'nearest') {
+        const index = this.snapshot().keys.indexOf(key);
+        if (index !== -1)
+            this.revealIndex(index, align);
+    }
+    /** Which option the keyboard is on, or `null`. */
+    getActiveKey() {
+        return this.active();
+    }
+    /* ── Forms ────────────────────────────────────────────────────────── */
+    writeValue(value) {
+        this.formKeys.set(toKeys(value));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /**
+     * 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) {
+        if (!this.resolvedRequired())
+            return null;
+        const value = control.value;
+        return toKeys(value).length === 0 ? { required: true } : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlListbox, isStandalone: true, selector: "[slListbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, defaultActiveKey: { classPropertyName: "defaultActiveKey", publicName: "defaultActiveKey", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, navigateDisabled: { classPropertyName: "navigateDisabled", publicName: "navigateDisabled", isSignal: true, isRequired: false, transformFunction: null }, disallowEmptySelection: { classPropertyName: "disallowEmptySelection", publicName: "disallowEmptySelection", isSignal: true, isRequired: false, transformFunction: null }, disallowSelectAll: { classPropertyName: "disallowSelectAll", publicName: "disallowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, getKey: { classPropertyName: "getKey", publicName: "getKey", isSignal: true, isRequired: false, transformFunction: null }, getLabel: { classPropertyName: "getLabel", publicName: "getLabel", isSignal: true, isRequired: false, transformFunction: null }, isItemDisabled: { classPropertyName: "isItemDisabled", publicName: "isItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, sectionSize: { classPropertyName: "sectionSize", publicName: "sectionSize", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreThreshold: { classPropertyName: "loadMoreThreshold", publicName: "loadMoreThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", activeKeyChange: "activeKeyChange", loadMore: "loadMore" }, host: { attributes: { "data-ui": "listbox", "data-part": "root" }, listeners: { "keydown": "handleKeyDown($event)", "focusin": "handleFocusIn($event)", "focusout": "handleFocusOut($event)", "scroll": "readViewport()" }, properties: { "attr.role": "writtenRole ?? \"listbox\"", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-orientation": "resolvedOrientation()", "attr.data-indicator": "indicatorMode()", "attr.data-focus-mode": "mode()", "attr.data-layout": "resolvedColumns() > 1 ? \"grid\" : null", "attr.data-disabled": "listboxDisabled() ? \"\" : null", "attr.data-readonly": "resolvedReadOnly() ? \"\" : null", "attr.data-invalid": "resolvedInvalid() ? \"\" : null", "attr.data-required": "resolvedRequired() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.aria-multiselectable": "selection() === \"multiple\" ? \"true\" : null", "attr.aria-orientation": "resolvedOrientation() === \"horizontal\" ? \"horizontal\" : null", "attr.aria-activedescendant": "activeDescendant()", "attr.aria-disabled": "listboxDisabled() ? \"true\" : null", "attr.aria-readonly": "resolvedReadOnly() ? \"true\" : null", "attr.aria-required": "resolvedRequired() ? \"true\" : null", "attr.aria-invalid": "resolvedInvalid() ? \"true\" : null", "attr.aria-busy": "loading() ? \"true\" : null", "attr.tabindex": "rootTabIndex()", "style.--slotted-listbox-rows": "resolvedRows()", "style.--slotted-listbox-columns": "resolvedColumns()" } }, providers: [
+            { provide: SlListboxContext, useExisting: forwardRef(() => SlListbox) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlListbox), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlListbox), multi: true },
+        ], queries: [{ propertyName: "optionContent", first: true, predicate: SlListboxOptionContent, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["slListbox"], ngImport: i0, template: `@if (collection(); as held) {
+      @if (windowed()) {
+        <div
+          data-part="canvas"
+          role="presentation"
+          [style.--_canvas-size]="slice().totalSize + 'px'"
+          [style.--_canvas-offset]="slice().startOffset + 'px'"
+        >
+          <ng-container
+            [ngTemplateOutlet]="planRows"
+            [ngTemplateOutletContext]="{ $implicit: plan() }"
+          />
+        </div>
+      } @else {
+        <ng-container
+          [ngTemplateOutlet]="planRows"
+          [ngTemplateOutletContext]="{ $implicit: plan() }"
+        />
+      }
+    }
+    <ng-content />
+
+    <ng-template #planRows let-entries>
+      @for (entry of entries; track entry.id) {
+        @if (entry.kind === 'group') {
+          <div
+            slListboxGroup
+            [label]="entry.showLabel ? entry.label : undefined"
+            [groupLabel]="entry.label"
+          >
+            @for (option of entry.options; track option.id) {
+              <ng-container
+                [ngTemplateOutlet]="optionRow"
+                [ngTemplateOutletContext]="{ $implicit: option }"
+              />
+            }
+          </div>
+        } @else {
+          <ng-container
+            [ngTemplateOutlet]="optionRow"
+            [ngTemplateOutletContext]="{ $implicit: entry }"
+          />
+        }
+      }
+    </ng-template>
+
+    <ng-template #optionRow let-option>
+      <div
+        slListboxOption
+        [value]="option.key"
+        [textValue]="option.label"
+        [disabled]="option.disabled"
+        [pinned]="option.offset !== null"
+        [style.inset-block-start.px]="option.offset"
+      >
+        @if (optionContent(); as content) {
+          <ng-container
+            [ngTemplateOutlet]="content"
+            [ngTemplateOutletContext]="{ $implicit: option.item }"
+          />
+        }
+      </div>
+    </ng-template>`, isInline: true, styles: ["@layer slotted.components{[data-ui=listbox]{--_surface: var(--slotted-listbox-surface, var(--slotted-surface, #ffffff));--_text: var(--slotted-listbox-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-listbox-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-listbox-border-color, var(--slotted-control-border-color));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-listbox-radius, var(--slotted-radius-md, 6px));--_shadow: var(--slotted-listbox-shadow, var(--slotted-control-shadow));--_highlight: var(--slotted-listbox-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-listbox-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_selected-surface: var( --slotted-listbox-selected-surface, var(--slotted-tone-accent-surface) );--_selected-text: var(--slotted-listbox-selected-text, var(--slotted-tone-accent-text));--_inset-block: var(--slotted-listbox-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-listbox-padding-inline, var(--slotted-space-2, .25rem));--_option-inset: var(--slotted-control-padding-inline-md, .8125rem);--_option-height: var(--slotted-control-height-md, 34px);--_option-radius: var(--slotted-listbox-option-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_rows: var(--slotted-listbox-rows, 7);--_columns: var(--slotted-listbox-columns, 1);--_measure: var(--slotted-listbox-measure, 24rem);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-auto-rows:min-content;grid-template-columns:auto minmax(0,1fr) auto;inline-size:100%;max-inline-size:var(--_measure);max-block-size:calc(var(--_rows) * var(--_option-height) + 2 * var(--_inset-block));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);scroll-behavior:auto}[data-ui=listbox][data-size=sm]{--_option-inset: var(--slotted-control-padding-inline-sm, .625rem);--_option-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem)}[data-ui=listbox][data-size=lg]{--_option-inset: var(--slotted-control-padding-inline-lg, 1rem);--_option-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem)}[data-ui=listbox][data-variant=framed]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow)}[data-ui=listbox][data-variant=plain]{background:transparent;border:0}[data-ui=listbox][data-focus-mode=activedescendant]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, #2563eb);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=listbox][data-focus-mode=roving]:focus{outline:none}[data-ui=listbox][data-invalid]{--_border-color: var(--slotted-tone-danger-border);--slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid)}[data-ui=listbox][data-invalid]:not([data-disabled]){--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border)}[data-ui=listbox][data-disabled]{--_surface: var(--slotted-disabled-background, #e2e8f0);--_text: var(--slotted-disabled-foreground, #64748b);--_border-color: var(--slotted-disabled-border, #cbd5e1);cursor:not-allowed}[data-ui=listbox][data-loading]{cursor:progress}[data-ui=listbox][data-layout=grid]{column-gap:var(--_column-gap);grid-template-columns:repeat(var(--_columns),minmax(0,1fr));max-block-size:none}[data-ui=listbox][data-layout=grid] [data-part=option]{grid-column:auto;grid-template-columns:auto minmax(0,1fr) auto}[data-ui=listbox][data-layout=grid] :is([data-part=group],[data-part=canvas]){grid-template-columns:repeat(var(--_columns),minmax(0,1fr))}[data-ui=listbox][data-orientation=horizontal]{display:flex;flex-direction:row;max-block-size:none;overflow-x:auto;overflow-y:hidden}[data-ui=listbox][data-orientation=horizontal] [data-part=option]{flex:0 0 auto;grid-template-columns:auto auto auto}[data-ui=listbox]>[data-part=canvas]{align-content:start;block-size:var(--_canvas-size, auto);box-sizing:border-box;display:grid;grid-auto-rows:min-content;grid-column:1 / -1;grid-template-columns:subgrid;padding-block-start:var(--_canvas-offset, 0);position:relative}[data-ui=listbox] [data-part=option][data-pinned]{grid-template-columns:auto minmax(0,1fr) auto;inset-inline:0;position:absolute}[data-ui=listbox] [data-part=group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui=listbox] [data-part=group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--slotted-line-height-sm, 1.45);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_option-inset)}[data-ui=listbox] [data-part=group]+[data-part=group]{border-block-start:var(--_border-width) solid var(--slotted-listbox-group-border-color, var(--slotted-border-subtle, #e2e8f0));margin-block-start:var(--slotted-space-2, .25rem);padding-block-start:var(--slotted-space-2, .25rem)}[data-ui=listbox] [data-part=option]{align-content:center;background:transparent;border-radius:var(--_option-radius);box-sizing:border-box;color:inherit;cursor:default;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;line-height:var(--slotted-line-height-md, 1.5);min-block-size:var(--_option-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_option-inset);position:relative;row-gap:var(--slotted-space-1, .125rem);text-align:start;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=listbox]:not([data-disabled]) [data-part=option]:not([data-disabled]):hover{background-color:var(--_highlight)}[data-ui=listbox]:not([data-disabled]) [data-part=option]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui=listbox][data-focus-mode=roving]:focus-within [data-part=option][data-current],[data-ui=listbox][data-focus-mode=activedescendant] [data-part=option][data-current]{background-color:var(--_highlight)}[data-ui=listbox]:focus-within [data-part=option][data-current]{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, #2563eb);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=listbox] [data-part=option]:focus{outline:none}[data-ui=listbox] [data-part=option][data-selected]{background-color:var(--_selected-surface);color:var(--_selected-text)}[data-ui=listbox] [data-part=option][data-selected]+[data-part=option][data-selected]{border-start-end-radius:0;border-start-start-radius:0}[data-ui=listbox] [data-part=option][data-selected]:has(+[data-part=option][data-selected]){border-end-end-radius:0;border-end-start-radius:0}[data-ui=listbox]:not([data-disabled]) [data-part=option][data-selected]:not([data-disabled]):hover{background-color:var(--slotted-tone-accent-subtle-hover)}[data-ui=listbox]:not([data-disabled]) [data-part=option][data-selected]:not([data-disabled]):active{background-color:var(--slotted-tone-accent-subtle-active)}[data-ui=listbox] [data-part=option][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui=listbox] [data-part=option][data-disabled]:is([data-selected],[data-current]){background-color:var(--slotted-disabled-background, #e2e8f0);color:var(--slotted-disabled-foreground, #64748b)}[data-ui=listbox][data-readonly] [data-part=option]{cursor:default}[data-ui=listbox] :is([data-part=indicator],[data-part=icon]){block-size:1lh;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui=listbox] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;justify-content:center;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=listbox] [data-part=option][data-selected]>[data-part=indicator]{opacity:1}[data-ui=listbox] [data-part=icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;justify-content:center}[data-ui=listbox] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=listbox] [data-part=description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}[data-ui=listbox] [data-part=option]:is([data-disabled],[data-selected])>[data-part=description]{color:inherit}[data-ui=listbox] [data-part=meta]{color:var(--_muted);font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=listbox] [data-part=option]:is([data-disabled],[data-selected])>[data-part=meta]{color:inherit}[data-ui=listbox] :is([data-part=empty],[data-part=loader]){align-content:center;color:var(--_muted);display:grid;grid-column:1 / -1;min-block-size:var(--_option-height);padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_option-inset);text-align:center}[data-ui=listbox] [data-part=loader]{animation:slotted-listbox-loader var(--slotted-duration-loop) ease-in-out infinite}@keyframes slotted-listbox-loader{0%,to{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){[data-ui=listbox] [data-part=loader]{animation:none;opacity:.7}}@media(forced-colors:active){[data-ui=listbox] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=listbox] [data-part=option][data-disabled]{color:GrayText}}@media(forced-colors:active){[data-ui=listbox][data-variant=framed][data-invalid]:not([data-disabled]){outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=listbox][data-variant=framed][data-invalid]:not([data-disabled])[data-focus-mode=activedescendant]:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlListboxGroup, selector: "[slListboxGroup]", inputs: ["label", "groupLabel"], exportAs: ["slListboxGroup"] }, { kind: "component", type: SlListboxOption, selector: "[slListboxOption]", inputs: ["value", "textValue", "disabled", "pinned"], exportAs: ["slListboxOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListbox, decorators: [{
+            type: Component,
+            args: [{ selector: '[slListbox]', standalone: true, exportAs: 'slListbox', imports: [NgTemplateOutlet, SlListboxGroup, SlListboxOption], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: SlListboxContext, useExisting: forwardRef(() => SlListbox) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlListbox), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlListbox), multi: true },
+                    ], template: `@if (collection(); as held) {
+      @if (windowed()) {
+        <div
+          data-part="canvas"
+          role="presentation"
+          [style.--_canvas-size]="slice().totalSize + 'px'"
+          [style.--_canvas-offset]="slice().startOffset + 'px'"
+        >
+          <ng-container
+            [ngTemplateOutlet]="planRows"
+            [ngTemplateOutletContext]="{ $implicit: plan() }"
+          />
+        </div>
+      } @else {
+        <ng-container
+          [ngTemplateOutlet]="planRows"
+          [ngTemplateOutletContext]="{ $implicit: plan() }"
+        />
+      }
+    }
+    <ng-content />
+
+    <ng-template #planRows let-entries>
+      @for (entry of entries; track entry.id) {
+        @if (entry.kind === 'group') {
+          <div
+            slListboxGroup
+            [label]="entry.showLabel ? entry.label : undefined"
+            [groupLabel]="entry.label"
+          >
+            @for (option of entry.options; track option.id) {
+              <ng-container
+                [ngTemplateOutlet]="optionRow"
+                [ngTemplateOutletContext]="{ $implicit: option }"
+              />
+            }
+          </div>
+        } @else {
+          <ng-container
+            [ngTemplateOutlet]="optionRow"
+            [ngTemplateOutletContext]="{ $implicit: entry }"
+          />
+        }
+      }
+    </ng-template>
+
+    <ng-template #optionRow let-option>
+      <div
+        slListboxOption
+        [value]="option.key"
+        [textValue]="option.label"
+        [disabled]="option.disabled"
+        [pinned]="option.offset !== null"
+        [style.inset-block-start.px]="option.offset"
+      >
+        @if (optionContent(); as content) {
+          <ng-container
+            [ngTemplateOutlet]="content"
+            [ngTemplateOutletContext]="{ $implicit: option.item }"
+          />
+        }
+      </div>
+    </ng-template>`, host: {
+                        'data-ui': 'listbox',
+                        'data-part': 'root',
+                        '[attr.role]': 'writtenRole ?? "listbox"',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-indicator]': 'indicatorMode()',
+                        '[attr.data-focus-mode]': 'mode()',
+                        '[attr.data-layout]': 'resolvedColumns() > 1 ? "grid" : null',
+                        '[attr.data-disabled]': 'listboxDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'resolvedReadOnly() ? "" : null',
+                        '[attr.data-invalid]': 'resolvedInvalid() ? "" : null',
+                        '[attr.data-required]': 'resolvedRequired() ? "" : null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                        '[attr.aria-multiselectable]': 'selection() === "multiple" ? "true" : null',
+                        '[attr.aria-orientation]': 'resolvedOrientation() === "horizontal" ? "horizontal" : null',
+                        '[attr.aria-activedescendant]': 'activeDescendant()',
+                        '[attr.aria-disabled]': 'listboxDisabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'resolvedReadOnly() ? "true" : null',
+                        '[attr.aria-required]': 'resolvedRequired() ? "true" : null',
+                        '[attr.aria-invalid]': 'resolvedInvalid() ? "true" : null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '[attr.tabindex]': 'rootTabIndex()',
+                        '[style.--slotted-listbox-rows]': 'resolvedRows()',
+                        '[style.--slotted-listbox-columns]': 'resolvedColumns()',
+                        '(keydown)': 'handleKeyDown($event)',
+                        '(focusin)': 'handleFocusIn($event)',
+                        '(focusout)': 'handleFocusOut($event)',
+                        '(scroll)': 'readViewport()',
+                    }, styles: ["@layer slotted.components{[data-ui=listbox]{--_surface: var(--slotted-listbox-surface, var(--slotted-surface, #ffffff));--_text: var(--slotted-listbox-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-listbox-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-listbox-border-color, var(--slotted-control-border-color));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-listbox-radius, var(--slotted-radius-md, 6px));--_shadow: var(--slotted-listbox-shadow, var(--slotted-control-shadow));--_highlight: var(--slotted-listbox-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-listbox-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_selected-surface: var( --slotted-listbox-selected-surface, var(--slotted-tone-accent-surface) );--_selected-text: var(--slotted-listbox-selected-text, var(--slotted-tone-accent-text));--_inset-block: var(--slotted-listbox-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-listbox-padding-inline, var(--slotted-space-2, .25rem));--_option-inset: var(--slotted-control-padding-inline-md, .8125rem);--_option-height: var(--slotted-control-height-md, 34px);--_option-radius: var(--slotted-listbox-option-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_rows: var(--slotted-listbox-rows, 7);--_columns: var(--slotted-listbox-columns, 1);--_measure: var(--slotted-listbox-measure, 24rem);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-auto-rows:min-content;grid-template-columns:auto minmax(0,1fr) auto;inline-size:100%;max-inline-size:var(--_measure);max-block-size:calc(var(--_rows) * var(--_option-height) + 2 * var(--_inset-block));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);scroll-behavior:auto}[data-ui=listbox][data-size=sm]{--_option-inset: var(--slotted-control-padding-inline-sm, .625rem);--_option-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem)}[data-ui=listbox][data-size=lg]{--_option-inset: var(--slotted-control-padding-inline-lg, 1rem);--_option-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem)}[data-ui=listbox][data-variant=framed]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow)}[data-ui=listbox][data-variant=plain]{background:transparent;border:0}[data-ui=listbox][data-focus-mode=activedescendant]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, #2563eb);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=listbox][data-focus-mode=roving]:focus{outline:none}[data-ui=listbox][data-invalid]{--_border-color: var(--slotted-tone-danger-border);--slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid)}[data-ui=listbox][data-invalid]:not([data-disabled]){--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border)}[data-ui=listbox][data-disabled]{--_surface: var(--slotted-disabled-background, #e2e8f0);--_text: var(--slotted-disabled-foreground, #64748b);--_border-color: var(--slotted-disabled-border, #cbd5e1);cursor:not-allowed}[data-ui=listbox][data-loading]{cursor:progress}[data-ui=listbox][data-layout=grid]{column-gap:var(--_column-gap);grid-template-columns:repeat(var(--_columns),minmax(0,1fr));max-block-size:none}[data-ui=listbox][data-layout=grid] [data-part=option]{grid-column:auto;grid-template-columns:auto minmax(0,1fr) auto}[data-ui=listbox][data-layout=grid] :is([data-part=group],[data-part=canvas]){grid-template-columns:repeat(var(--_columns),minmax(0,1fr))}[data-ui=listbox][data-orientation=horizontal]{display:flex;flex-direction:row;max-block-size:none;overflow-x:auto;overflow-y:hidden}[data-ui=listbox][data-orientation=horizontal] [data-part=option]{flex:0 0 auto;grid-template-columns:auto auto auto}[data-ui=listbox]>[data-part=canvas]{align-content:start;block-size:var(--_canvas-size, auto);box-sizing:border-box;display:grid;grid-auto-rows:min-content;grid-column:1 / -1;grid-template-columns:subgrid;padding-block-start:var(--_canvas-offset, 0);position:relative}[data-ui=listbox] [data-part=option][data-pinned]{grid-template-columns:auto minmax(0,1fr) auto;inset-inline:0;position:absolute}[data-ui=listbox] [data-part=group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui=listbox] [data-part=group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--slotted-line-height-sm, 1.45);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_option-inset)}[data-ui=listbox] [data-part=group]+[data-part=group]{border-block-start:var(--_border-width) solid var(--slotted-listbox-group-border-color, var(--slotted-border-subtle, #e2e8f0));margin-block-start:var(--slotted-space-2, .25rem);padding-block-start:var(--slotted-space-2, .25rem)}[data-ui=listbox] [data-part=option]{align-content:center;background:transparent;border-radius:var(--_option-radius);box-sizing:border-box;color:inherit;cursor:default;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;line-height:var(--slotted-line-height-md, 1.5);min-block-size:var(--_option-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_option-inset);position:relative;row-gap:var(--slotted-space-1, .125rem);text-align:start;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=listbox]:not([data-disabled]) [data-part=option]:not([data-disabled]):hover{background-color:var(--_highlight)}[data-ui=listbox]:not([data-disabled]) [data-part=option]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui=listbox][data-focus-mode=roving]:focus-within [data-part=option][data-current],[data-ui=listbox][data-focus-mode=activedescendant] [data-part=option][data-current]{background-color:var(--_highlight)}[data-ui=listbox]:focus-within [data-part=option][data-current]{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, #2563eb);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=listbox] [data-part=option]:focus{outline:none}[data-ui=listbox] [data-part=option][data-selected]{background-color:var(--_selected-surface);color:var(--_selected-text)}[data-ui=listbox] [data-part=option][data-selected]+[data-part=option][data-selected]{border-start-end-radius:0;border-start-start-radius:0}[data-ui=listbox] [data-part=option][data-selected]:has(+[data-part=option][data-selected]){border-end-end-radius:0;border-end-start-radius:0}[data-ui=listbox]:not([data-disabled]) [data-part=option][data-selected]:not([data-disabled]):hover{background-color:var(--slotted-tone-accent-subtle-hover)}[data-ui=listbox]:not([data-disabled]) [data-part=option][data-selected]:not([data-disabled]):active{background-color:var(--slotted-tone-accent-subtle-active)}[data-ui=listbox] [data-part=option][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui=listbox] [data-part=option][data-disabled]:is([data-selected],[data-current]){background-color:var(--slotted-disabled-background, #e2e8f0);color:var(--slotted-disabled-foreground, #64748b)}[data-ui=listbox][data-readonly] [data-part=option]{cursor:default}[data-ui=listbox] :is([data-part=indicator],[data-part=icon]){block-size:1lh;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui=listbox] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;justify-content:center;opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=listbox] [data-part=option][data-selected]>[data-part=indicator]{opacity:1}[data-ui=listbox] [data-part=icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;justify-content:center}[data-ui=listbox] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=listbox] [data-part=description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--slotted-line-height-sm, 1.45);min-inline-size:0;overflow-wrap:anywhere}[data-ui=listbox] [data-part=option]:is([data-disabled],[data-selected])>[data-part=description]{color:inherit}[data-ui=listbox] [data-part=meta]{color:var(--_muted);font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=listbox] [data-part=option]:is([data-disabled],[data-selected])>[data-part=meta]{color:inherit}[data-ui=listbox] :is([data-part=empty],[data-part=loader]){align-content:center;color:var(--_muted);display:grid;grid-column:1 / -1;min-block-size:var(--_option-height);padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_option-inset);text-align:center}[data-ui=listbox] [data-part=loader]{animation:slotted-listbox-loader var(--slotted-duration-loop) ease-in-out infinite}@keyframes slotted-listbox-loader{0%,to{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){[data-ui=listbox] [data-part=loader]{animation:none;opacity:.7}}@media(forced-colors:active){[data-ui=listbox] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=listbox] [data-part=option][data-disabled]{color:GrayText}}@media(forced-colors:active){[data-ui=listbox][data-variant=framed][data-invalid]:not([data-disabled]){outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=listbox][data-variant=framed][data-invalid]:not([data-disabled])[data-focus-mode=activedescendant]:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], defaultActiveKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultActiveKey", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], navigateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateDisabled", required: false }] }], disallowEmptySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowEmptySelection", required: false }] }], disallowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowSelectAll", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], typeaheadTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadTimeout", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], getKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "getKey", required: false }] }], getLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "getLabel", required: false }] }], isItemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemDisabled", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], sectionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionSize", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], loadMoreThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreThreshold", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], activeKeyChange: [{ type: i0.Output, args: ["activeKeyChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], optionContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlListboxOptionContent), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LISTBOX_DEFAULTS, SlListbox, SlListboxContext, SlListboxDescription, SlListboxEmpty, SlListboxGroup, SlListboxIcon, SlListboxIdFactory, SlListboxIndicator, SlListboxLabel, SlListboxLoader, SlListboxMeta, SlListboxOption, SlListboxOptionContent, injectListboxDefaults, provideListboxDefaults };
+//# sourceMappingURL=slotted-angular-listbox.mjs.map