@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-list.mjs

@@ -1,16 +1,15 @@
 import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDropList, CdkDrag, CDK_DRAG_HANDLE, CdkDragPreview, CdkDragHandle } from '@angular/cdk/drag-drop';
-import { Platform } from '@angular/cdk/platform';
+import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ElementRef, ChangeDetectorRef, output, EventEmitter, input, booleanAttribute, viewChild, QueryList, contentChild, DestroyRef, NgZone, signal, HostAttributeToken, effect, isDevMode, Input, Output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, contentChildren, ViewChild, ContentChild, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { forwardRef, inject, ElementRef, ChangeDetectorRef, contentChildren, output, EventEmitter, input, booleanAttribute, computed, viewChild, QueryList, contentChild, signal, DestroyRef, NgZone, effect, untracked, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, EnvironmentInjector, afterNextRender, NgModule } from '@angular/core';
+import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MultipleMode, getSelectAllState, ruRULocaleData, KBQ_LOCALE_SERVICE, getKbqSelectNonFunctionValueError, KBQ_WINDOW, toggleSelectAll, FocusKeyManager, kbqGetElementHeight, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey, runCompareWith, KbqPseudoCheckbox, KbqOptgroup, KbqOptionActionComponent, kbqFocusOptionActionOnTab, KbqActionContainer, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqLineSetter, KbqLine, KbqOptionModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
+import { MultipleMode, getSelectAllState, kbqQueryListFrom, kbqInjectLocaleConfiguration, KBQ_SELECT_LOCALE_CONFIGURATION, kbqOptionalNumberAttribute, getKbqSelectNonFunctionValueError, KBQ_WINDOW, kbqSelectAllHandlerTransform, toggleSelectAll, resolveMultipleMode, FocusKeyManager, kbqLeaveTabOrderOnTabOut, kbqGetElementHeight, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey, runCompareWith, KbqPseudoCheckbox, KbqOptgroup, KbqOptionActionComponent, kbqFocusOptionActionOnTab, KbqActionContainer, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqOptionModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { merge, fromEvent, Subject } from 'rxjs';
@@ -62,37 +61,27 @@ class KbqListCopyEvent {
     }
 }
 class KbqListSelection {
+    get options() {
+        return this.optionsList();
+    }
     /**
-     * Whether clicking an option clears the rest of the selection.
-     * Stays an accessor input: the constructor turns it off for `multiple="checkbox"`, which a
-     * signal `input()` cannot do (inputs are read-only from inside the component).
+     * Whether clicking an option clears the rest of the selection. Defaults to `true`, and to `false` for
+     * `multiple="checkbox"`, where a click is expected to toggle a single row. A bound value replaces the
+     * default derived from {@link multiple}.
      */
     get autoSelect() {
-        return this._autoSelect;
-    }
-    set autoSelect(value) {
-        this._autoSelect = coerceBooleanProperty(value);
+        return this.autoSelectInput() ?? this.mode() !== MultipleMode.CHECKBOX;
     }
-    /**
-     * Whether the last selected option can be deselected.
-     * Stays an accessor input for the same reason as {@link autoSelect}.
-     */
+    /** Whether the last selected option can be deselected. Derived from the mode like {@link autoSelect}. */
     get noUnselectLast() {
-        return this._noUnselectLast;
-    }
-    set noUnselectLast(value) {
-        this._noUnselectLast = coerceBooleanProperty(value);
+        return this.noUnselectLastInput() ?? this.mode() !== MultipleMode.CHECKBOX;
     }
     /**
      * Whether options can be reordered by dragging them.
      * Reordering never mutates the data — handle the `dropped` event and move the item yourself.
      */
     get draggable() {
-        return this._draggable && !this.disabled;
-    }
-    set draggable(value) {
-        this._draggable = value;
-        this.syncDraggableState();
+        return this.resolvedDraggable();
     }
     /**
      * Whether the "select all" row is currently rendered.
@@ -104,11 +93,15 @@ class KbqListSelection {
      */
     get showSelectAll() {
         return (this.selectAllEnabled() &&
-            this.multipleMode === MultipleMode.CHECKBOX &&
+            this.mode() === MultipleMode.CHECKBOX &&
             !this.horizontal() &&
             !this.virtualScroll() &&
             !!this.options?.length);
     }
+    /** Label of the "select all" row. Follows the active locale. */
+    get selectAllText() {
+        return this.selectConfiguration().selectAll;
+    }
     /** Whether every option "select all" can act on is selected. */
     get allOptionsSelected() {
         const targets = this.selectAllTargets;
@@ -125,13 +118,11 @@ class KbqListSelection {
      * {@link options}, so the row it renders itself is never among them.
      */
     get selectAllTargets() {
-        return this.options?.filter((option) => !option.disabled) ?? [];
+        return this.selectAllTargetsState();
     }
     /**
-     * Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart.
-     *
-     * Takes the items rather than reading {@link selectAllTargets} itself: the toggle needs that array for
-     * the emitted event anyway, and deriving it here as well would walk the whole option list twice.
+     * Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. Takes the
+     * items, which the toggle emits as well.
      */
     selectAllAdapter(items) {
         return {
@@ -141,37 +132,37 @@ class KbqListSelection {
             setSelected: (option, selected) => option.setSelected(selected)
         };
     }
-    get multiple() {
-        return !!this.multipleMode;
-    }
     /**
-     * Tab index of the list.
-     * Stays an accessor input: the getter is derived from {@link disabled} and the setter also
-     * records the user-provided value, which the roving focus logic restores after `tabOut`.
+     * Selection mode of the list.
+     *
+     * `checkbox` renders a checkbox in every option, `keyboard` selects without one. A bare `multiple` and
+     * `true` both mean `checkbox`; `single`, `false` and an absent attribute mean single selection. The mode
+     * can be changed at any time — narrowing it to single selection keeps the first selected option and
+     * reports the shortened value through the `ControlValueAccessor`.
+     *
+     * The getter reports whether more than one option can be selected; read {@link multipleMode} for the
+     * mode itself.
      */
-    get tabIndex() {
-        return this.disabled ? -1 : this._tabIndex;
+    get multiple() {
+        return !!this.mode();
     }
-    set tabIndex(value) {
-        this.userTabIndex = value;
-        this._tabIndex = value;
+    /** Resolved selection mode, or `null` when only one option can be selected. */
+    get multipleMode() {
+        return this.mode();
     }
-    /**
-     * Whether the list is disabled.
-     * Stays an accessor input: `setDisabledState` writes it from the `ControlValueAccessor`, which a
-     * signal `input()` cannot do.
-     */
-    get disabled() {
-        return this._disabled;
+    set multipleMode(value) {
+        this.setMultipleMode(value);
     }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-            this.syncDraggableState();
-        }
+    /** Tab index of the list, `-1` while it is disabled. */
+    get tabIndex() {
+        return this.disabled ? -1 : this.ownTabIndex();
+    }
+    /** Whether the list is disabled, bound with `[disabled]` or set by a form control. */
+    get disabled() {
+        return this.disabledState();
     }
     get showCheckbox() {
-        return this.multipleMode === MultipleMode.CHECKBOX;
+        return this.mode() === MultipleMode.CHECKBOX;
     }
     // Built over the navigable list, not `options`: the "select all" row lives in this component's own
     // view, so its focus would otherwise reach nobody and leave the key manager pointing at whichever
@@ -187,38 +178,50 @@ class KbqListSelection {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.clipboard = inject(Clipboard, { optional: true });
         this.focusMonitor = inject(FocusMonitor);
+        this.optionsQuery = contentChildren(forwardRef(() => KbqListOption), { ...(ngDevMode ? { debugName: "optionsQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.optionsList = kbqQueryListFrom(this.optionsQuery);
+        /** Whether `ngAfterContentInit` has run. The options are not settled before that, so nothing reads them. */
+        this.contentReady = false;
         this.onSelectAll = output();
         /**
-         * Kept as a decorator `@Output()`/`EventEmitter` on purpose: `copyActiveOption` branches on
-         * `onCopy.observed` to decide between the consumer handler and the built-in clipboard copy.
-         * `output()` exposes no subscriber introspection, so migrating it would silently run both
-         * paths for every existing `(onCopy)` consumer. Mirrors `KbqTreeSelection.onCopy`.
+         * Emits when the active option is copied with Ctrl/Cmd + C. Subscribing replaces the built-in clipboard
+         * copy, so the event stays an `EventEmitter`: the decision is made by reading `observed`, which
+         * `OutputEmitterRef` does not have. A template listener subscribes to it through the output below.
          */
         this.onCopy = new EventEmitter();
-        this._autoSelect = true;
-        this._noUnselectLast = true;
-        this._draggable = false;
+        /** @docs-private */
+        this.onCopyOutput = outputFromObservable(this.onCopy, { alias: 'onCopy' });
+        /** @docs-private */
+        this.autoSelectInput = input(undefined, { ...(ngDevMode ? { debugName: "autoSelectInput" } : /* istanbul ignore next */ {}), alias: 'autoSelect',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.noUnselectLastInput = input(undefined, { ...(ngDevMode ? { debugName: "noUnselectLastInput" } : /* istanbul ignore next */ {}), alias: 'noUnselectLast',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.draggableInput = input(false, { ...(ngDevMode ? { debugName: "draggableInput" } : /* istanbul ignore next */ {}), alias: 'draggable',
+            transform: booleanAttribute });
+        this.resolvedDraggable = computed(() => this.draggableInput() && !this.disabled, ...(ngDevMode ? [{ debugName: "resolvedDraggable" }] : /* istanbul ignore next */ []));
         /**
          * Lists that options of this list can be moved into. Accepts `KbqListSelection` instances or the
          * `id` of another list. `cdkDropListGroup` on a common ancestor connects lists automatically.
          */
-        this.connectedTo = input([], ...(ngDevMode ? [{ debugName: "connectedTo" }] : []));
+        this.connectedTo = input([], ...(ngDevMode ? [{ debugName: "connectedTo" }] : /* istanbul ignore next */ []));
         /**
          * What the option's floating copy looks like while it is dragged. Defaults to `text`: a compact
          * plate carrying the option's label and caption, capped at a readable width. Use `full` to drag a
          * clone of the whole row, checkbox, icons and action button included.
          */
-        this.dragPreview = input('text', ...(ngDevMode ? [{ debugName: "dragPreview" }] : []));
+        this.dragPreview = input('text', ...(ngDevMode ? [{ debugName: "dragPreview" }] : /* istanbul ignore next */ []));
         /**
          * Whether a draggable option shows the grab cursor over the whole row. Defaults to `auto`, which
          * leaves the row the cursor it has anyway. Use `grab` where the whole row is meant to read as a
          * handle. An option carrying a projected `cdkDragHandle` ignores this — the handle keeps the grab.
          */
-        this.dragCursor = input('auto', ...(ngDevMode ? [{ debugName: "dragCursor" }] : []));
+        this.dragCursor = input('auto', ...(ngDevMode ? [{ debugName: "dragCursor" }] : /* istanbul ignore next */ []));
         /** Emits when an option changes its position by dragging. */
         this.dropped = output();
         /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
-        this.selectAllToggle = input(false, ...(ngDevMode ? [{ debugName: "selectAllToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectAllToggle = input(false, { ...(ngDevMode ? { debugName: "selectAllToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether to render the "select all" master checkbox above the options. `multiple="checkbox"` only —
          * a vertical list, since the row is a full-width heading of the column it governs.
@@ -229,7 +232,7 @@ class KbqListSelection {
          *
          * Aliased rather than named `selectAll`, which is already taken by the imperative method of that name.
          */
-        this.selectAllEnabled = input(false, ...(ngDevMode ? [{ debugName: "selectAllEnabled", alias: 'selectAll', transform: booleanAttribute }] : [{ alias: 'selectAll', transform: booleanAttribute }]));
+        this.selectAllEnabled = input(false, { ...(ngDevMode ? { debugName: "selectAllEnabled" } : /* istanbul ignore next */ {}), alias: 'selectAll', transform: booleanAttribute });
         /**
          * Reference to the built-in "select all" row, rendered only while `selectAll` is on.
          *
@@ -237,13 +240,14 @@ class KbqListSelection {
          * below this one in the same file, and a query locator is evaluated while this class is being
          * defined, which would read it in its temporal dead zone.
          */
-        this.selectAllOption = viewChild('selectAllRow', ...(ngDevMode ? [{ debugName: "selectAllOption" }] : []));
+        this.selectAllOption = viewChild('selectAllRow', ...(ngDevMode ? [{ debugName: "selectAllOption" }] : /* istanbul ignore next */ []));
         /**
          * The options the key manager navigates: the "select all" row first, then the projected ones.
          *
          * Kept apart from {@link options} because that query is public API and means "the options the consumer
          * projected" — a synthetic entry there would corrupt `getSelectedOptionValues`, the drop-indicator
          * geometry and every consumer tally built on it.
+         *
          * @docs-private
          */
         this.navigableOptions = new QueryList();
@@ -254,19 +258,29 @@ class KbqListSelection {
          * server as well as in the browser, and it follows a viewport that appears later behind the
          * consumer's own `@if`.
          */
-        this.virtualScroll = contentChild(CdkVirtualForOf, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : []));
-        /** Label of the "select all" row. Follows the active locale. */
-        this.selectAllText = ruRULocaleData.select.selectAll;
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        /** Updates locale parameters from the locale service. */
-        this.updateLocaleParams = () => {
-            // Locale data registered by a consumer through `KBQ_LOCALE_DATA`/`addLocale` may predate this key.
-            this.selectAllText = this.localeService?.getParams('select')?.selectAll ?? ruRULocaleData.select.selectAll;
-            this.changeDetectorRef.markForCheck();
-        };
-        this.horizontal = input(false, ...(ngDevMode ? [{ debugName: "horizontal", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this._tabIndex = 0;
-        this._disabled = false;
+        this.virtualScroll = contentChild(CdkVirtualForOf, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
+        this.selectConfiguration = kbqInjectLocaleConfiguration('select', KBQ_SELECT_LOCALE_CONFIGURATION);
+        // A signal of its own: the template and the row's `aria-checked` host binding both read the targets in the list's
+        // view, where the `disabled` state of every option read twice would cost a scan of all that view has read so far.
+        this.selectAllTargetsState = computed(() => this.optionsQuery().filter((option) => !option.disabled), ...(ngDevMode ? [{ debugName: "selectAllTargetsState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.multipleInput = input(undefined, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
+        /**
+         * Backing signal of {@link multipleMode}. A signal rather than a field because the mode is also written
+         * from inside the component: options read it through `multiple` and `showCheckbox`, and only a signal
+         * read re-runs their `OnPush` views and host bindings.
+         */
+        this.mode = signal(null, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+            transform: kbqOptionalNumberAttribute });
+        /** Tab index the list holds while enabled. Also written outside any listener, hence a signal. */
+        this.ownTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "ownTabIndex" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         /**
          * Function used for comparing an option against the selected value when determining which
          * options should appear as selected. The first argument is the value of an options. The second
@@ -275,24 +289,15 @@ class KbqListSelection {
          * Bind a stable reference — a field or a bound method. An expression that builds a new function on
          * every change detection pass makes the list re-resolve every value against every option each pass.
          */
-        this.compareWith = input((a1, a2) => a1 === a2, ...(ngDevMode ? [{ debugName: "compareWith", 
-                // Mirrors `KbqSelect`, which throws from its setter: a comparator that is not callable would
-                // otherwise surface as an empty selection and a warning per option.
-                transform: (fn) => {
-                    if (typeof fn !== 'function') {
-                        throw getKbqSelectNonFunctionValueError();
-                    }
-                    return fn;
-                } }] : [{
-                // Mirrors `KbqSelect`, which throws from its setter: a comparator that is not callable would
-                // otherwise surface as an empty selection and a warning per option.
-                transform: (fn) => {
-                    if (typeof fn !== 'function') {
-                        throw getKbqSelectNonFunctionValueError();
-                    }
-                    return fn;
+        this.compareWith = input((a1, a2) => a1 === a2, { ...(ngDevMode ? { debugName: "compareWith" } : /* istanbul ignore next */ {}), 
+            // Mirrors `KbqSelect`, which throws from its transform too: a comparator that is not callable would
+            // otherwise surface as an empty selection and a warning per option.
+            transform: (fn) => {
+                if (typeof fn !== 'function') {
+                    throw getKbqSelectNonFunctionValueError();
                 }
-            }]));
+                return fn;
+            } });
         this.userTabIndex = null;
         // Emits a change event whenever the selected state of an option changes.
         this.selectionChange = output();
@@ -305,7 +310,7 @@ class KbqListSelection {
          * Distance from the list's content box to the gap the dragged option would land in, or `null`
          * while no drag is hovering this list. Drives the insertion indicator.
          */
-        this.dropIndicatorOffset = signal(null, ...(ngDevMode ? [{ debugName: "dropIndicatorOffset" }] : []));
+        this.dropIndicatorOffset = signal(null, ...(ngDevMode ? [{ debugName: "dropIndicatorOffset" }] : /* istanbul ignore next */ []));
         /** Gap the indicator currently marks, used as `currentIndex` when the drag is dropped here. */
         this.dropIndex = null;
         this.hasWarnedOnDragContainer = false;
@@ -313,36 +318,66 @@ class KbqListSelection {
         this.pendingSelectionInit = false;
         /** Whether a form control has ever written to the list, i.e. whether {@link _value} speaks for a model. */
         this.hasWrittenValue = false;
-        // View to model callback that should be called if the list or its options lost focus.
+        this.selectionModelSubscription = null;
+        /** Whether a value report is already queued for the end of the current tick. */
+        this.pendingValueReport = false;
+        this.destroyed = false;
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onTouched = () => { };
         // View to model callback that should be called whenever the selected options change.
         this.onChange = () => { };
-        const multiple = inject(new HostAttributeToken('multiple'), { optional: true });
-        if (multiple === MultipleMode.CHECKBOX || multiple === MultipleMode.KEYBOARD) {
-            this.multipleMode = multiple;
-        }
-        else if (multiple !== null) {
-            this.multipleMode = MultipleMode.CHECKBOX;
-        }
-        if (this.multipleMode === MultipleMode.CHECKBOX) {
-            this.autoSelect = false;
-            this.noUnselectLast = false;
-        }
-        this.selectionModel = new SelectionModel(this.multiple);
-        // A different comparator means a different set of options can match the model value. `compareWith`
-        // is a signal input, so there is no setter to re-run matching from the way `KbqSelect` does.
+        /** @docs-private */
+        this.selectAllHandlerInput = input(undefined, { ...(ngDevMode ? { debugName: "selectAllHandlerInput" } : /* istanbul ignore next */ {}), alias: 'selectAllHandler',
+            transform: kbqSelectAllHandlerTransform });
+        this.destroyRef.onDestroy(() => (this.destroyed = true));
+        // Single selection until the `multiple` input says otherwise. A model has to exist this early
+        // because `KbqListOption.setSelected` refuses to touch the selection without one, and a static
+        // `multiple` attribute reaches the input right after the constructor, before any option exists.
+        this.selectionModel = new SelectionModel(false);
+        // A different comparator means a different set of options can match the model value.
         effect(() => {
             this.compareWith();
             this.initializeSelection();
         });
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
         // The "select all" row is rendered by this component's own template, so `options.changes` never
         // fires for it — the navigable list has to be rebuilt whenever the view query resolves or drops it.
         effect(() => {
             this.selectAllOption();
-            this.syncNavigableOptions();
+            // Untracked: the options are read here too, and their changes are handled by `options.changes`.
+            untracked(() => this.syncNavigableOptions());
         });
         this.setupDropListInitialProperties();
+        effect(() => {
+            this.multipleInput();
+            untracked(() => this.applyMultipleInput());
+        });
+        effect(() => {
+            this.disabledInput();
+            untracked(() => this.applyDisabledInput());
+        });
+        // Unbound, the input leaves the default, which follows the options; bound back to `undefined` or `null`, it
+        // restores that default.
+        effect(() => {
+            const tabIndex = this.tabIndexInput();
+            untracked(() => {
+                if (tabIndex !== undefined) {
+                    this.userTabIndex = tabIndex;
+                    this.ownTabIndex.set(tabIndex);
+                }
+                else if (this.userTabIndex !== null) {
+                    this.userTabIndex = null;
+                    this.updateTabIndex();
+                }
+            });
+        });
+        effect(() => {
+            this.resolvedDraggable();
+            untracked(() => this.syncDraggableState());
+        });
     }
     /** Rebuilds {@link navigableOptions}: the "select all" row, when rendered, leads the projected options. */
     syncNavigableOptions() {
@@ -359,6 +394,7 @@ class KbqListSelection {
      * their own bindings. Without this the row keeps painting a state the options have already left, and
      * a click on a checkbox showing `indeterminate` over an already-full selection takes the deselect
      * branch — doing the opposite of what the user was shown.
+     *
      * @docs-private
      */
     refreshSelectAllState() {
@@ -377,18 +413,23 @@ class KbqListSelection {
      * once for the whole batch instead of once per option.
      */
     toggleSelectAll() {
-        // The row's own `(click)` and the shortcut both funnel through here, so this is the single place
-        // to refuse acting on a disabled list — the guard every option already gets in `handleClick`.
-        if (this.disabled)
-            return;
-        const targets = this.selectAllTargets;
-        toggleSelectAll(this.selectAllAdapter(targets), { allowDeselect: this.allowSelectAllDeselect });
-        // Reported unconditionally, as the shortcut has always done: a repeat that flips nothing still
-        // re-reports the value, which is what normalizes a form value holding entries no option matches.
-        this.reportValueChange();
-        // Deliberately no `selectionChange`: that event carries a single option, and a batch is
-        // reported through `onSelectAll` instead — the contract Ctrl/Cmd + A has always had.
-        this.onSelectAll.emit(new KbqListSelectAllEvent(this, targets));
+        // Untracked, like the other imperative methods: called from a consumer's `effect()`, the state read on the
+        // way — the options, `disabled`, the mode, the inputs — would make the effect run again on every change.
+        untracked(() => {
+            // The row's own `(click)` and the shortcut both funnel through here, so this is the single place
+            // to refuse acting on a disabled list — the guard every option already gets in `handleClick`.
+            if (this.disabled)
+                return;
+            const targets = this.selectAllTargets;
+            toggleSelectAll(this.selectAllAdapter(targets), { allowDeselect: this.allowSelectAllDeselect });
+            // Reported unconditionally, as the shortcut has always done: a repeat that flips nothing still
+            // re-reports the value, which is what normalizes a form value holding entries no option matches.
+            this.reportValueChange();
+            // Deliberately no `selectionChange`: that event carries a single option, and a batch is
+            // reported through `onSelectAll` instead — the contract Ctrl/Cmd + A has always had. A copy, since the
+            // targets are memoized and the event hands its array to the consumer.
+            this.onSelectAll.emit(new KbqListSelectAllEvent(this, [...targets]));
+        });
     }
     /**
      * Whether a repeated toggle deselects. Keyed on {@link showSelectAll} rather than on the raw input:
@@ -398,18 +439,114 @@ class KbqListSelection {
     get allowSelectAllDeselect() {
         return this.showSelectAll || this.selectAllToggle();
     }
+    /**
+     * Sets the mode from the `multiple` binding, once per bound value: an unbound input leaves what the
+     * {@link multipleMode} setter wrote, and a value bound back to `undefined` means single selection.
+     *
+     * Called by an effect, and by `writeValue` ahead of it: a forms directive on this element writes the
+     * value from its own `ngOnChanges`, which runs before any effect of the view.
+     */
+    applyMultipleInput() {
+        const multiple = this.multipleInput();
+        if (multiple === this.appliedMultipleInput)
+            return;
+        this.appliedMultipleInput = multiple;
+        this.setMultipleMode(resolveMultipleMode(multiple));
+    }
+    /**
+     * Sets the disabled state from the `disabled` binding, once per bound value, so that whichever of the binding
+     * and the form control changed last wins. An unbound input leaves what the form control wrote.
+     *
+     * Called by an effect, and by `setDisabledState` ahead of it: a forms directive on this element calls that
+     * from its own `ngOnChanges`, after the binding is set but before any effect of the view runs.
+     */
+    applyDisabledInput() {
+        const disabled = this.disabledInput();
+        if (disabled === this.appliedDisabledInput)
+            return;
+        this.appliedDisabledInput = disabled;
+        this.disabledState.set(!!disabled);
+    }
+    /**
+     * Applies a new selection mode, rebuilding the `SelectionModel` when the multiplicity itself changes —
+     * CDK freezes that flag at construction, so the model has to be replaced rather than reconfigured.
+     */
+    setMultipleMode(next) {
+        if (next === this.mode()) {
+            return;
+        }
+        this.mode.set(next);
+        if (this.selectionModel.isMultipleSelection() !== !!next) {
+            this.rebuildSelectionModel(!!next);
+        }
+    }
+    /** Replaces the `SelectionModel` with one of the given multiplicity, keeping what the new one can hold. */
+    rebuildSelectionModel(multiple) {
+        // Read from the model rather than from the content query: inside a virtual scroll only the options
+        // in view are instantiated, and the ones outside it are selected just the same. Copied because
+        // CDK hands back its own cached array.
+        const selected = [...this.selectionModel.selected];
+        // Narrowing keeps one option: the first selected one in DOM order, falling back to the model's own
+        // order when that option is not currently rendered.
+        const rendered = this.options?.find((option) => this.selectionModel.isSelected(option));
+        const kept = multiple ? selected : selected.slice(0, 1);
+        if (!multiple && rendered && selected.includes(rendered)) {
+            kept[0] = rendered;
+        }
+        const dropped = selected.filter((option) => !kept.includes(option));
+        // `initiallySelectedValues` seeds the model without emitting.
+        this.selectionModel = new SelectionModel(multiple, kept);
+        this.bindSelectionModel();
+        // Reconciles both directions against the model that is actually in use now, so no option is left
+        // painted by a stale mirror.
+        this.options?.forEach((option) => option.setSelected(this.selectionModel.isSelected(option)));
+        if (dropped.length) {
+            // The options lost their selection without going through the model, so nothing else would
+            // announce it.
+            dropped.forEach((option) => this.emitChangeEvent(option));
+            this.scheduleValueReport();
+        }
+    }
+    /**
+     * Reports the value once the current change-detection pass is over: a bound `[multiple]` is written
+     * during change detection, and reporting straight back to the form control there would raise
+     * "Expression has changed after it was checked". Coalesced so that several mode changes in one tick
+     * produce one notification, and dropped if the list is gone by the time it runs.
+     */
+    scheduleValueReport() {
+        if (this.pendingValueReport) {
+            return;
+        }
+        this.pendingValueReport = true;
+        Promise.resolve().then(() => {
+            this.pendingValueReport = false;
+            if (!this.destroyed) {
+                this.reportValueChange();
+            }
+        });
+    }
+    /** (Re)points the change subscription at the current {@link selectionModel}. */
+    bindSelectionModel() {
+        this.selectionModelSubscription?.unsubscribe();
+        this.selectionModelSubscription = this.selectionModel.changed
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            for (const item of event.added) {
+                item.setSelected(true);
+            }
+            for (const item of event.removed) {
+                item.setSelected(false);
+            }
+            this.refreshSelectAllState();
+        });
+    }
     ngAfterContentInit() {
+        this.contentReady = true;
         this.keyManager = new FocusKeyManager(this.navigableOptions)
             .withTypeAhead()
             .withVerticalOrientation(!this.horizontal())
             .withHorizontalOrientation(this.horizontal() ? 'ltr' : null);
-        this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this._tabIndex = -1;
-            setTimeout(() => {
-                this._tabIndex = this.userTabIndex || 0;
-                this.changeDetectorRef.markForCheck();
-            });
-        });
+        kbqLeaveTabOrderOnTabOut(this.keyManager.tabOut, this.elementRef.nativeElement, () => this.tabIndex, this.destroyRef);
         // The initial value is applied by the `options.changes` subscription below, which starts with the
         // options already present. Applying it synchronously here instead would settle the selection after
         // the parent view was checked and raise NG0100.
@@ -417,24 +554,12 @@ class KbqListSelection {
         // mode drops the previous winner whenever another option is selected. Deliberately not moved
         // earlier: writes that happen during input binding would flip a host binding mid-pass (NG0100).
         // `setSelected` consults the model too, so a write that lands before this is still recoverable.
-        this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-            for (const item of event.added) {
-                item.selected = true;
-            }
-            for (const item of event.removed) {
-                item.selected = false;
-            }
-            this.refreshSelectAllState();
-        });
+        this.bindSelectionModel();
         this.listenToOptionsFocus();
         this.options.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.syncNavigableOptions();
             this.updateTabIndex();
             this.initializeSelection();
-            // `showSelectAll` is derived from the option count, and nothing else in this view changes
-            // when an option is added or removed — without this the row would not appear on the first
-            // option, nor go away with the last one.
-            this.changeDetectorRef.markForCheck();
         });
         if (!this.platform.isBrowser)
             return;
@@ -450,30 +575,46 @@ class KbqListSelection {
                 .subscribe(() => this.updateScrollSize());
         });
     }
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.optionsList();
+    }
     ngAfterViewInit() {
-        this.focusMonitor.monitor(this.elementRef, true);
+        // Reports the focus leaving only when it lands outside the list (or nowhere): the host hands it to an option
+        // on entry, and options hand it on to each other or to their action buttons, none of which blurs the list.
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((origin) => {
+            if (!origin)
+                this.blur();
+        });
     }
     ngOnDestroy() {
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
     focus() {
-        if (this.options.length === 0) {
-            return;
-        }
-        if (this.selectionModel.selected.length) {
-            this.options.find((option) => option.selected)?.focus();
-        }
-        else {
-            this.keyManager.setFirstItemActive();
-        }
+        untracked(() => {
+            if (this.options.length === 0) {
+                return;
+            }
+            if (this.selectionModel.selected.length) {
+                this.options.find((option) => option.selected)?.focus();
+            }
+            else {
+                this.keyManager.setFirstItemActive();
+            }
+        });
     }
     /** Clears the active key-manager item (unless an option is still focused) and marks the list as touched. */
     blur() {
-        if (!this.hasFocusedOption()) {
-            this.keyManager.setActiveItem(-1);
-        }
-        this.onTouched();
-        this.changeDetectorRef.markForCheck();
+        untracked(() => {
+            if (!this.hasFocusedOption()) {
+                this.keyManager.setActiveItem(-1);
+            }
+            this.onTouched();
+            this.changeDetectorRef.markForCheck();
+        });
     }
     /**
      * Selects every option and reports the new value to the `ControlValueAccessor`.
@@ -483,13 +624,17 @@ class KbqListSelection {
      * behaviour the master checkbox has.
      */
     selectAll() {
-        this.options.forEach((option) => option.setSelected(true));
-        this.reportValueChange();
+        untracked(() => {
+            this.options.forEach((option) => option.setSelected(true));
+            this.reportValueChange();
+        });
     }
     /** Deselects every option, disabled ones included, and reports the new value. See {@link selectAll}. */
     deselectAll() {
-        this.options.forEach((option) => option.setSelected(false));
-        this.reportValueChange();
+        untracked(() => {
+            this.options.forEach((option) => option.setSelected(false));
+            this.reportValueChange();
+        });
     }
     updateScrollSize() {
         if (this.horizontal() || !this.options.first) {
@@ -574,13 +719,16 @@ class KbqListSelection {
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(values) {
-        this.hasWrittenValue = true;
-        // A form control may push a bare value instead of an array; normalize it here so that
-        // `_value` always matches its declared type and stays safe to iterate over.
-        this._value = values == null ? null : Array.isArray(values) ? values : [values];
-        if (this.options) {
-            this.setOptionsFromValues(this._value ?? []);
-        }
+        untracked(() => {
+            this.applyMultipleInput();
+            this.hasWrittenValue = true;
+            // A form control may push a bare value instead of an array; normalize it here so that
+            // `_value` always matches its declared type and stays safe to iterate over.
+            this._value = values == null ? null : Array.isArray(values) ? values : [values];
+            if (this.contentReady) {
+                this.setOptionsFromValues(this._value ?? []);
+            }
+        });
     }
     // Implemented as part of ControlValueAccessor.
     registerOnChange(fn) {
@@ -592,10 +740,12 @@ class KbqListSelection {
     }
     // Implemented as a part of ControlValueAccessor.
     setDisabledState(isDisabled) {
-        // `KbqListOption.disabled` reads the list through its getter, so disabling the list cascades
-        // to every option without overwriting their own `disabled` inputs.
-        this.disabled = isDisabled;
-        this.changeDetectorRef.markForCheck();
+        untracked(() => {
+            this.applyDisabledInput();
+            // `KbqListOption.disabled` reads the list through its getter, so disabling the list cascades
+            // to every option without overwriting their own `disabled` inputs.
+            this.disabledState.set(isDisabled);
+        });
     }
     /** Values of the currently selected options. */
     getSelectedOptionValues() {
@@ -603,22 +753,24 @@ class KbqListSelection {
     }
     // Toggles the selected state of the currently focused option.
     toggleFocusedOption() {
-        const focusedIndex = this.keyManager.activeItemIndex;
-        if (focusedIndex != null && this.isValidIndex(focusedIndex)) {
-            const focusedOption = this.navigableOptions.toArray()[focusedIndex];
-            // The row holds no selection of its own, so `toggle()` would be a no-op on it. Space and
-            // Enter have to reach the batch toggle instead, exactly as a click on the row does.
-            if (this.isSelectAllRow(focusedOption)) {
-                this.toggleSelectAll();
-                return;
-            }
-            if (focusedOption && !focusedOption.disabled && this.canDeselectLast(focusedOption)) {
-                focusedOption.toggle();
-                // Emit a change event because the focused option changed its state through user interaction.
-                this.emitChangeEvent(focusedOption);
-                this.reportValueChange();
+        untracked(() => {
+            const focusedIndex = this.keyManager.activeItemIndex;
+            if (focusedIndex != null && this.isValidIndex(focusedIndex)) {
+                const focusedOption = this.navigableOptions.toArray()[focusedIndex];
+                // The row holds no selection of its own, so `toggle()` would be a no-op on it. Space and
+                // Enter have to reach the batch toggle instead, exactly as a click on the row does.
+                if (this.isSelectAllRow(focusedOption)) {
+                    this.toggleSelectAll();
+                    return;
+                }
+                if (focusedOption && !focusedOption.disabled && this.canDeselectLast(focusedOption)) {
+                    focusedOption.toggle();
+                    // Emit a change event because the focused option changed its state through user interaction.
+                    this.emitChangeEvent(focusedOption);
+                    this.reportValueChange();
+                }
             }
-        }
+        });
     }
     /** Whether `listOption` is allowed to be deselected, given {@link noUnselectLast}. */
     canDeselectLast(listOption) {
@@ -626,6 +778,7 @@ class KbqListSelection {
     }
     /**
      * Rendered height of the element, or 0 when it is not laid out (SSR, jsdom, `display: none`).
+     *
      * @docs-private
      */
     getHeight() {
@@ -633,17 +786,19 @@ class KbqListSelection {
     }
     // Removes an option from the selection list and updates the active item.
     removeOptionFromList(option) {
-        if (!option.hasFocus) {
-            return;
-        }
-        const optionIndex = this.navigableOptions.toArray().indexOf(option);
-        // Check whether the option is the last item
-        if (optionIndex === this.navigableOptions.length - 1) {
-            this.keyManager.setPreviousItemActive();
-        }
-        else {
-            this.keyManager.setNextItemActive();
-        }
+        untracked(() => {
+            if (!option.hasFocus) {
+                return;
+            }
+            const optionIndex = this.navigableOptions.toArray().indexOf(option);
+            // Check whether the option is the last item
+            if (optionIndex === this.navigableOptions.length - 1) {
+                this.keyManager.setPreviousItemActive();
+            }
+            else {
+                this.keyManager.setNextItemActive();
+            }
+        });
     }
     /** Handles keydown events on the list. */
     onKeyDown(event) {
@@ -710,11 +865,13 @@ class KbqListSelection {
     }
     // Reports a value change to the ControlValueAccessor
     reportValueChange() {
-        if (this.options) {
-            const value = this.getSelectedOptionValues();
-            this.onChange(value);
-            this._value = value;
-        }
+        untracked(() => {
+            if (this.contentReady) {
+                const value = this.getSelectedOptionValues();
+                this.onChange(value);
+                this._value = value;
+            }
+        });
     }
     // Emits a change event if the selected state of an option changed.
     emitChangeEvent(option) {
@@ -735,7 +892,7 @@ class KbqListSelection {
             // Once a form control has written, an empty value applies as an empty selection instead of
             // being skipped, so that swapping the comparator also clears what the previous one matched.
             // Without a control the list has no model to speak for, and `[selected]` options stand.
-            if (this.options && (this._value || this.hasWrittenValue)) {
+            if (this.contentReady && (this._value || this.hasWrittenValue)) {
                 this.setOptionsFromValues(this._value ?? []);
             }
         });
@@ -744,7 +901,7 @@ class KbqListSelection {
         // Counted over `options`, not the navigable list: the "select all" row only renders when there
         // is at least one option, so the two are empty together — and `navigableOptions` is rebuilt a
         // pass later, which would leave an emptied list holding a tab stop with nothing to focus.
-        this._tabIndex = this.userTabIndex || (this.options.length === 0 ? -1 : 0);
+        this.ownTabIndex.set(this.userTabIndex || (this.options.length === 0 ? -1 : 0));
     }
     onCopyDefaultHandler() {
         this.clipboard?.copy(String(this.keyManager.activeItem.value));
@@ -766,7 +923,11 @@ class KbqListSelection {
         });
         this.navigableOptions.changes
             .pipe(startWith(null), switchMap(() => this.optionBlurChanges), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.blur());
+            .subscribe(() => {
+            if (!this.hasFocusedOption()) {
+                this.keyManager.setActiveItem(-1);
+            }
+        });
     }
     /** Checks whether any of the options is focused. */
     hasFocusedOption() {
@@ -792,6 +953,7 @@ class KbqListSelection {
     }
     /**
      * Utility to ensure all indexes are valid.
+     *
      * @param index The index to be checked.
      * @returns True if the index is valid for our list of options.
      */
@@ -976,7 +1138,6 @@ class KbqListSelection {
         }
         this.dropIndex = index;
         this.dropIndicatorOffset.set(boundary - startOf(container) + scrolled);
-        this.changeDetectorRef.markForCheck();
     }
     /**
      * Points the key manager at the option's new place, but only once the consumer has actually applied
@@ -1011,15 +1172,9 @@ class KbqListSelection {
      * which toggles the selection of all non-disabled options.
      */
     get selectAllHandler() {
-        return this._selectAllHandler;
-    }
-    set selectAllHandler(fn) {
-        if (typeof fn !== 'function') {
-            throw Error('`selectAllHandler` must be a function.');
-        }
-        this._selectAllHandler = fn;
+        return this.selectAllHandlerInput() ?? this.defaultSelectAllHandler;
     }
-    _selectAllHandler(event, list) {
+    defaultSelectAllHandler(event, list) {
         event.preventDefault();
         // Funnelled through the same method the master checkbox uses, so the shortcut and the row can
         // never disagree about what "select all" acted on.
@@ -1042,10 +1197,10 @@ class KbqListSelection {
         }
         option.preventBlur = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListSelection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqListSelection, isStandalone: true, selector: "kbq-list-selection", inputs: { autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: false, isRequired: false, transformFunction: null }, noUnselectLast: { classPropertyName: "noUnselectLast", publicName: "noUnselectLast", isSignal: false, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, dragPreview: { classPropertyName: "dragPreview", publicName: "dragPreview", isSignal: true, isRequired: false, transformFunction: null }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", onCopy: "onCopy", dropped: "dropped", selectionChange: "selectionChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-list-selection_horizontal": "horizontal()", "class.kbq-list-selection_draggable": "draggable", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "horizontal() ? \"horizontal\" : null", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-selection" }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "virtualScroll", first: true, predicate: CdkVirtualForOf, descendants: true, isSignal: true }, { propertyName: "options", predicate: i0.forwardRef(() => KbqListOption), descendants: true }], viewQueries: [{ propertyName: "selectAllOption", first: true, predicate: ["selectAllRow"], descendants: true, isSignal: true }], exportAs: ["kbqListSelection"], hostDirectives: [{ directive: i1.CdkDropList, inputs: ["id", "id"] }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListSelection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqListSelection, isStandalone: true, selector: "kbq-list-selection", inputs: { autoSelectInput: { classPropertyName: "autoSelectInput", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, noUnselectLastInput: { classPropertyName: "noUnselectLastInput", publicName: "noUnselectLast", isSignal: true, isRequired: false, transformFunction: null }, draggableInput: { classPropertyName: "draggableInput", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, dragPreview: { classPropertyName: "dragPreview", publicName: "dragPreview", isSignal: true, isRequired: false, transformFunction: null }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandlerInput: { classPropertyName: "selectAllHandlerInput", publicName: "selectAllHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", onCopyOutput: "onCopy", dropped: "dropped", selectionChange: "selectionChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "focus": "focus()" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-list-selection_horizontal": "horizontal()", "class.kbq-list-selection_draggable": "draggable", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "horizontal() ? \"horizontal\" : null", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-selection" }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "optionsQuery", predicate: i0.forwardRef(() => KbqListOption), descendants: true, isSignal: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualForOf, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "selectAllOption", first: true, predicate: ["selectAllRow"], descendants: true, isSignal: true }], exportAs: ["kbqListSelection"], hostDirectives: [{ directive: i1.CdkDropList, inputs: ["id", "id"] }], ngImport: i0, template: `
         @if (showSelectAll) {
-            <!-- Every read of selectAllState re-filters the whole option list, so the two bindings below
+            <!-- Every read of selectAllState walks the whole option list, so the two bindings below
                  share one through @let. The row's own aria-checked host binding walks it a second time:
                  Ivy evaluates that binding after this template, and the option reads the state off the
                  list rather than from here. -->
@@ -1076,16 +1231,16 @@ class KbqListSelection {
                 [style.--kbq-list-drop-indicator-offset.px]="dropIndicatorOffset()"
             ></div>
         }
-    `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius);gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius);padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => KbqListOption), selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i0.forwardRef(() => KbqPseudoCheckbox), selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-item,.kbq-list-option{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-item,.kbq-list-option{gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-drag-preview_text{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-drag-preview_text{padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => KbqListOption), selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i0.forwardRef(() => KbqPseudoCheckbox), selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListSelection, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-list-selection', imports: [
                         forwardRef((() => KbqListOption)),
                         KbqPseudoCheckbox
                     ], template: `
         @if (showSelectAll) {
-            <!-- Every read of selectAllState re-filters the whole option list, so the two bindings below
+            <!-- Every read of selectAllState walks the whole option list, so the two bindings below
                  share one through @let. The row's own aria-checked host binding walks it a second time:
                  Ivy evaluates that binding after this template, and the option reads the state off the
                  list rather than from here. -->
@@ -1127,29 +1282,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[attr.aria-disabled]': 'disabled || null',
                         '[attr.tabindex]': 'tabIndex',
                         '(keydown)': 'onKeyDown($event)',
-                        '(focus)': 'focus()',
-                        '(blur)': 'blur()'
-                    }, hostDirectives: [{ directive: CdkDropList, inputs: ['id'] }], exportAs: 'kbqListSelection', preserveWhitespaces: false, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius);gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius);padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqListOption), { descendants: true }]
-            }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], onCopy: [{
-                type: Output
-            }], autoSelect: [{
-                type: Input
-            }], noUnselectLast: [{
-                type: Input
-            }], draggable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], dragPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreview", required: false }] }], dragCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragCursor", required: false }] }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAllEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllOption: [{ type: i0.ViewChild, args: ['selectAllRow', { isSignal: true }] }], virtualScroll: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualForOf), { isSignal: true }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], tabIndex: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectAllHandler: [{
-                type: Input
-            }] } });
+                        '(focus)': 'focus()'
+                    }, hostDirectives: [{ directive: CdkDropList, inputs: ['id'] }], exportAs: 'kbqListSelection', preserveWhitespaces: false, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-item,.kbq-list-option{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-item,.kbq-list-option{gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-drag-preview_text{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-drag-preview_text{padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { optionsQuery: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqListOption), { ...{ descendants: true }, isSignal: true }] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], onCopyOutput: [{ type: i0.Output, args: ["onCopy"] }], autoSelectInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], noUnselectLastInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "noUnselectLast", required: false }] }], draggableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], dragPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreview", required: false }] }], dragCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragCursor", required: false }] }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAllEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllOption: [{ type: i0.ViewChild, args: ['selectAllRow', { isSignal: true }] }], virtualScroll: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualForOf), { isSignal: true }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectAllHandlerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllHandler", required: false }] }] } });
 /**
  * Marker directive for the secondary line of a `kbq-list-option`.
  *
@@ -1157,10 +1292,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * muted caption typography and per-state colors off.
  */
 class KbqListOptionCaption {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOptionCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqListOptionCaption, isStandalone: true, selector: "[kbq-list-option-caption]", host: { classAttribute: "kbq-list-option-caption" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListOptionCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqListOptionCaption, isStandalone: true, selector: "[kbq-list-option-caption]", host: { classAttribute: "kbq-list-option-caption" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOptionCaption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListOptionCaption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-list-option-caption]',
@@ -1175,89 +1310,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * if the current item is selected.
  */
 class KbqListOption {
-    /**
-     * Value of the option, reported through the list's `ControlValueAccessor`.
-     * Stays an accessor input: the setter drops the selection when the value is replaced.
-     */
-    get value() {
-        return this._value;
+    get hasFocus() {
+        return this.focused();
     }
-    set value(newValue) {
-        // An equal-but-new object — an immutable refetch, a `@for` tracked by id — must not drop the
-        // selection, so the incoming value is put to the model rather than to the value it replaces.
-        // That keeps the comparator in its documented `(optionValue, modelValue)` order, which an
-        // asymmetric comparator (options carry objects, the model carries ids) depends on.
-        //
-        // The reference check ahead of it is not just a fast path: it is what keeps an unchanged value
-        // from being dropped when the comparator throws, since a swallowed throw also reads as "no match".
-        const modelValues = this.listSelection._value;
-        if (this.inputsInitialized &&
-            this.selected &&
-            newValue !== this._value &&
-            modelValues != null &&
-            !modelValues.some((modelValue) => runCompareWith(this.listSelection.compareWith(), newValue, modelValue))) {
-            this.selected = false;
-        }
-        this._value = newValue;
+    set hasFocus(value) {
+        this.focused.set(value);
+    }
+    // Getters rather than the signal queries themselves: `KbqOptionActionComponent` reads the triggers as
+    // directive instances through KBQ_OPTION_ACTION_PARENT — see #DS-5079.
+    /** Tooltip trigger projected into the option. */
+    get tooltipTrigger() {
+        return this.tooltipTriggerQuery();
+    }
+    /** Dropdown trigger projected into the option. */
+    get dropdownTrigger() {
+        return this.dropdownTriggerQuery();
     }
     /**
-     * Whether the option is disabled.
-     * Stays an accessor input: the getter also reports the disabled state inherited from the list
-     * and the option group, which a signal `input()` cannot express.
+     * Not a duplicate of {@link text}: this is the `KbqTitleTextRef` property that `title.directive.ts`
+     * reads through `KBQ_TITLE_TEXT_REF`, a plain `ElementRef` rather than a signal.
      */
+    get textElement() {
+        return this.titleText();
+    }
+    /** Value of the option, reported through the list's `ControlValueAccessor`. */
+    get value() {
+        return this.valueInput();
+    }
+    /** Whether the option is disabled, through its own input, its group or the list. */
     get disabled() {
-        const listSelectionDisabled = this.listSelection && this.listSelection.disabled;
-        const groupDisabled = this.group && this.group.disabled;
-        return listSelectionDisabled || groupDisabled || this._disabled;
-    }
-    set disabled(value) {
-        if (value !== this._disabled) {
-            this._disabled = value;
-            this.syncDraggableState();
-            // A disabled option leaves the set "select all" acts on, which changes the row's checkbox.
-            this.listSelection.refreshSelectAllState();
-        }
+        return this.disabledState();
     }
     /**
      * Whether the option can be reordered by dragging. Set it to `false` to pin a single option while
      * the rest of the list stays draggable. Unrelated to `disabled`: the option keeps taking focus and
-     * selection.
-     *
-     * Stays an accessor input: the getter reports the resolved state, which the option can only narrow —
-     * the list gates its whole drop list, so an option cannot opt back in on its own.
+     * selection. Reads the resolved state, which the option can only narrow — the list gates its whole drop
+     * list, so an option cannot opt back in on its own.
      */
     get draggable() {
-        // The "select all" row is a command, not one of the items being ordered.
-        return !this.selectAllRow() && this._draggable && this.listSelection.draggable && !this.disabled;
+        return this.resolvedDraggable();
     }
-    set draggable(value) {
-        this._draggable = value;
-        this.syncDraggableState();
-    }
-    /**
-     * Whether the option renders a pseudo-checkbox.
-     * Stays an accessor input: when unset the getter falls back to the list's own mode.
-     */
+    /** Whether the option renders a pseudo-checkbox. Falls back to the list's own mode until bound. */
     get showCheckbox() {
-        return this._showCheckbox !== undefined ? this._showCheckbox : this.listSelection.showCheckbox;
-    }
-    set showCheckbox(value) {
-        this._showCheckbox = coerceBooleanProperty(value);
+        return this.showCheckboxInput() ?? this.listSelection.showCheckbox;
     }
     /**
-     * Whether the option is selected.
-     * Stays an accessor input: the state lives in the list's `SelectionModel`, not on the option.
+     * Whether the option is selected. The state lives in the list's `SelectionModel`, not on the option,
+     * so it can also be set from code.
      */
     get selected() {
         return this.listSelection.selectionModel?.isSelected(this) || false;
     }
     set selected(value) {
-        if (value !== this._selected) {
-            this.setSelected(value);
-        }
+        this.setSelected(value);
     }
     get tabIndex() {
-        return this.disabled ? null : -1;
+        return this.tabIndexState();
     }
     /** `aria-selected` of the row. The "select all" row reports `aria-checked` instead. */
     get ariaSelected() {
@@ -1283,48 +1391,114 @@ class KbqListOption {
      * CSS, which already hands the grab over to a projected `cdkDragHandle`.
      */
     get showsGrabCursor() {
-        return this.draggable && this.listSelection.dragCursor() === 'grab';
+        return this.grabCursorState();
     }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.changeDetector = inject(ChangeDetectorRef);
-        this.ngZone = inject(NgZone);
+        this.environmentInjector = inject(EnvironmentInjector);
         this.drag = inject(CdkDrag, { host: true });
         this.destroyRef = inject(DestroyRef);
         this.listSelection = inject(KbqListSelection);
         this.group = inject(KbqOptgroup, { optional: true });
-        this.hasFocus = false;
+        // A signal, as on `KbqTreeOption`: focus can arrive while a view is being checked, which a `markForCheck` misses.
+        this.focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         this.preventBlur = false;
         this.onFocus = new Subject();
         this.onBlur = new Subject();
-        this.actionButton = contentChild(KbqOptionActionComponent, ...(ngDevMode ? [{ debugName: "actionButton" }] : []));
-        this.pseudoCheckbox = contentChild(KbqPseudoCheckbox, ...(ngDevMode ? [{ debugName: "pseudoCheckbox" }] : []));
+        this.actionButton = contentChild(KbqOptionActionComponent, ...(ngDevMode ? [{ debugName: "actionButton" }] : /* istanbul ignore next */ []));
+        this.tooltipTriggerQuery = contentChild(KbqTooltipTrigger, ...(ngDevMode ? [{ debugName: "tooltipTriggerQuery" }] : /* istanbul ignore next */ []));
+        this.dropdownTriggerQuery = contentChild(KbqDropdownTrigger, ...(ngDevMode ? [{ debugName: "dropdownTriggerQuery" }] : /* istanbul ignore next */ []));
+        this.pseudoCheckbox = contentChild(KbqPseudoCheckbox, ...(ngDevMode ? [{ debugName: "pseudoCheckbox" }] : /* istanbul ignore next */ []));
         /**
          * Drag handles the consumer has projected into the option. Nothing else reads them — `CdkDrag`
          * collects its own through DI — they only tell the option whether the whole row starts a drag.
          */
-        this.dragHandles = contentChildren(CDK_DRAG_HANDLE, ...(ngDevMode ? [{ debugName: "dragHandles", descendants: true }] : [{ descendants: true }]));
+        this.dragHandles = contentChildren(CDK_DRAG_HANDLE, { ...(ngDevMode ? { debugName: "dragHandles" } : /* istanbul ignore next */ {}), descendants: true });
         this.text = viewChild.required('text');
+        this.titleText = viewChild('kbqTitleText', ...(ngDevMode ? [{ debugName: "titleText" }] : /* istanbul ignore next */ []));
         // Whether the label should appear before or after the checkbox. Defaults to 'after'
-        this.checkboxPosition = input(undefined, ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
+        this.checkboxPosition = input(undefined, ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : /* istanbul ignore next */ []));
         /**
          * Whether this option is the list's "select all" row rather than one the consumer projected.
          *
          * Such a row has no `value` and no place in the `SelectionModel`, so everything that would resolve
          * it against the list's selection is skipped; its checkbox state and its selected look are driven
          * from the outside instead. It also stays out of the drag-and-drop registry — see the constructor.
+         *
          * @docs-private
          */
-        this.selectAllRow = input(false, ...(ngDevMode ? [{ debugName: "selectAllRow", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectAllRow = input(false, { ...(ngDevMode ? { debugName: "selectAllRow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        // A signal per option for the host bindings, since the list's and the group's are the same for all its options.
+        this.disabledState = computed(() => this.listSelection.disabled || !!this.group?.disabled() || this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         /**
-         * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
-         * in the first cycle.
+         * Value of `aria-disabled`: the disabled state, but a signal of its own, since `kbq-disabled` reads that one.
+         *
+         * @internal
          */
-        this.inputsInitialized = false;
-        this._disabled = false;
-        this._draggable = true;
+        this.ariaDisabled = computed(() => this.disabled || null, ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.draggableInput = input(true, { ...(ngDevMode ? { debugName: "draggableInput" } : /* istanbul ignore next */ {}), alias: 'draggable',
+            transform: booleanAttribute });
+        this.resolvedDraggable = computed(
+        // The "select all" row is a command, not one of the items being ordered.
+        () => !this.selectAllRow() && this.draggableInput() && this.listSelection.draggable && !this.disabled, ...(ngDevMode ? [{ debugName: "resolvedDraggable" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.showCheckboxInput = input(undefined, { ...(ngDevMode ? { debugName: "showCheckboxInput" } : /* istanbul ignore next */ {}), alias: 'showCheckbox',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.selectedInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected',
+            transform: booleanAttribute });
         this._selected = false;
-        this.syncDraggableState();
+        this.tabIndexState = computed(() => (this.disabled ? null : -1), ...(ngDevMode ? [{ debugName: "tabIndexState" }] : /* istanbul ignore next */ []));
+        this.grabCursorState = computed(() => this.draggable && this.listSelection.dragCursor() === 'grab', ...(ngDevMode ? [{ debugName: "grabCursorState" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.resolvedDraggable();
+            untracked(() => this.syncDraggableState());
+        });
+        // An equal-but-new object — an immutable refetch, a `@for` tracked by id — must not drop the
+        // selection, so the incoming value is put to the model rather than to the value it replaces.
+        // That keeps the comparator in its documented `(optionValue, modelValue)` order, which an
+        // asymmetric comparator (options carry objects, the model carries ids) depends on.
+        //
+        // The reference check ahead of it is not just a fast path: it is what keeps an unchanged value
+        // from being dropped when the comparator throws, since a swallowed throw also reads as "no match".
+        let previousValue;
+        let valueBound = false;
+        effect(() => {
+            const value = this.valueInput();
+            untracked(() => {
+                const modelValues = this.listSelection._value;
+                if (valueBound &&
+                    this.selected &&
+                    value !== previousValue &&
+                    modelValues != null &&
+                    !modelValues.some((modelValue) => runCompareWith(this.listSelection.compareWith(), value, modelValue))) {
+                    this.setSelected(false);
+                }
+                valueBound = true;
+                previousValue = value;
+            });
+        });
+        // A disabled option leaves the set "select all" acts on, which changes the row's checkbox.
+        let wasDisabled;
+        effect(() => {
+            const disabled = this.disabledInput();
+            if (wasDisabled !== undefined && disabled !== wasDisabled) {
+                untracked(() => this.listSelection.refreshSelectAllState());
+            }
+            wasDisabled = disabled;
+        });
+        effect(() => {
+            const selected = this.selectedInput();
+            if (selected !== undefined)
+                untracked(() => this.setSelected(selected));
+        });
         // The only class that lands on the preview in both modes: the text one is a plate of our own,
         // the full one a clone of the option. Styling keys "a drag is in progress" off it.
         this.drag.previewClass = DRAG_PREVIEW_CLASS;
@@ -1366,12 +1540,9 @@ class KbqListOption {
             // would stay put. `disabled` alone does not unregister it. Deferred to here rather than done
             // in the constructor because a signal input is not set yet at construction time.
             this.drag.dropContainer?.removeItem(this.drag);
-            // `syncDraggableState()` already ran from the constructor, where this input still read its
-            // default — so on a list that was draggable from the first render the row was left with an
-            // enabled `CdkDrag`. Unregistering it is not enough: `removeItem` leaves `DragRef` pointing
-            // at the drop container, so a pointer-down would still start a drag reporting index -1.
-            this.syncDraggableState();
-            this.inputsInitialized = true;
+            // Unregistering it is not enough: `removeItem` leaves `DragRef` pointing at the drop container,
+            // so a pointer-down would still start a drag reporting index -1 — the `draggable` effect, which
+            // reads `selectAllRow`, keeps its `CdkDrag` disabled.
             return;
         }
         // Resolving the model value is the list's job, not the option's. An option that matched itself
@@ -1386,11 +1557,9 @@ class KbqListOption {
         // that the form control value is not being overwritten.
         Promise.resolve().then(() => {
             if (this._selected || wasSelected) {
-                this.selected = true;
-                this.changeDetector.markForCheck();
+                this.setSelected(true);
             }
         });
-        this.inputsInitialized = true;
     }
     ngOnDestroy() {
         // The row owns no selection, so there is nothing to release — but it does hold a place in the
@@ -1402,13 +1571,15 @@ class KbqListOption {
         if (this.selected) {
             // We have to delay this until the next tick in order
             // to avoid changed after checked errors.
-            Promise.resolve().then(() => (this.selected = false));
+            Promise.resolve().then(() => this.setSelected(false));
         }
         this.listSelection.removeOptionFromList(this);
     }
     /** Toggles the selected state of this option. */
     toggle() {
-        this.selected = !this.selected;
+        // Untracked, as in `setSelected()` and `focus()`: called from a consumer's `effect()`, the state read on the
+        // way — the list's options, mode and inputs — would make the effect run again whenever it changes.
+        untracked(() => this.setSelected(!this.selected));
     }
     getLabel() {
         // The "select all" row is kept out of type-ahead: its localized label would otherwise shadow
@@ -1440,30 +1611,33 @@ class KbqListOption {
         caption?.remove();
         return { label: (clone.textContent ?? '').trim(), caption: (caption?.textContent ?? '').trim() };
     }
-    /** Sets the selected state directly on the list's `SelectionModel`, bypassing the `selected` input setter. */
+    /** Sets the selected state on the list's `SelectionModel`; the `selected` property and input go through it. */
     setSelected(selected) {
-        const { selectionModel } = this.listSelection;
-        // The row has no place in the selection model — its look is driven by `selectAllState`.
-        if (!selectionModel || this.selectAllRow()) {
-            return;
-        }
-        // The model is consulted alongside the mirror so that an option the model dropped behind the
-        // mirror's back — single-selection mode does that whenever another option is selected — can still
-        // be re-applied instead of being early-returned away.
-        if (this._selected === selected && selectionModel.isSelected(this) === selected) {
-            return;
-        }
-        this._selected = selected;
-        if (selected) {
-            this.listSelection.selectionModel.select(this);
-        }
-        else {
-            this.listSelection.selectionModel.deselect(this);
-        }
-        this.changeDetector.markForCheck();
+        untracked(() => {
+            const { selectionModel } = this.listSelection;
+            // The row has no place in the selection model — its look is driven by `selectAllState`.
+            if (!selectionModel || this.selectAllRow()) {
+                return;
+            }
+            // The model is consulted alongside the mirror so that an option the model dropped behind the
+            // mirror's back — single-selection mode does that whenever another option is selected — can still
+            // be re-applied instead of being early-returned away.
+            if (this._selected === selected && selectionModel.isSelected(this) === selected) {
+                return;
+            }
+            this._selected = selected;
+            if (selected) {
+                this.listSelection.selectionModel.select(this);
+            }
+            else {
+                this.listSelection.selectionModel.deselect(this);
+            }
+            this.changeDetector.markForCheck();
+        });
     }
     /**
      * Rendered height of the element, or 0 when it is not laid out (SSR, jsdom, `display: none`).
+     *
      * @docs-private
      */
     getHeight() {
@@ -1486,49 +1660,51 @@ class KbqListOption {
     }
     /** Moves DOM focus to this option, unless it is disabled or already focused. */
     focus() {
-        if (this.disabled || this.hasFocus || this.actionButton()?.hasFocus) {
-            return;
-        }
-        this.elementRef.nativeElement.focus();
-        this.onFocus.next({ option: this });
-        Promise.resolve().then(() => {
-            this.hasFocus = true;
-            this.changeDetector.markForCheck();
+        untracked(() => {
+            // `hasFocus` alone lags behind the DOM until the deferred blur runs: a key pressed in that window would
+            // find the option "focused" and leave the focus where it was. Focus on an element nested in the option
+            // is the option's own, or the `focusin` it bubbles would pull it back onto the host.
+            const focused = this.hasFocus && this.elementRef.nativeElement.contains(_getFocusedElementPierceShadowDom());
+            if (this.disabled || focused || this.actionButton()?.hasFocus) {
+                return;
+            }
+            this.elementRef.nativeElement.focus();
+            this.onFocus.next({ option: this });
+            Promise.resolve().then(() => (this.hasFocus = true));
         });
     }
-    /** Marks this option as blurred once the zone stabilizes, unless {@link preventBlur} is set. */
+    /** Marks this option as blurred after the next render, unless {@link preventBlur} is set. */
     blur() {
         if (this.preventBlur) {
             return;
         }
-        // When animations are enabled, Angular may end up removing the option from the DOM a little
-        // earlier than usual, causing it to be blurred and throwing off the logic in the list
-        // that moves focus not the next item. To work around the issue, we defer marking the option
-        // as not focused until the next time the zone stabilizes.
-        this.ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
-            this.ngZone.run(() => {
-                this.hasFocus = false;
-                if (this.actionButton()?.hasFocus) {
-                    return;
-                }
-                this.onBlur.next({ option: this });
-            });
-        });
+        // Deferred until the focus has settled: the option it moves to marks itself focused on a microtask, and a
+        // blur reported before that would read as no option being focused and clear the list's active item.
+        afterNextRender(() => {
+            // Focus can be back by the time this runs (a blur and a focus in the same task): then nothing was lost.
+            if (_getFocusedElementPierceShadowDom() === this.elementRef.nativeElement)
+                return;
+            this.hasFocus = false;
+            if (this.actionButton()?.hasFocus) {
+                return;
+            }
+            this.onBlur.next({ option: this });
+        }, 
+        // The environment injector, not the option's: an option removed while focused is blurred as its view is
+        // destroyed, and the list still has to hear about it to move focus.
+        { injector: this.environmentInjector });
     }
     /** The option's host DOM element. */
     getHostElement() {
         return this.elementRef.nativeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqListOption, isStandalone: true, selector: "kbq-list-option", inputs: { checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { attributes: { "role": "option" }, listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-list-option_multiple": "listSelection.multiple", "class.kbq-list-option_draggable": "draggable", "class.kbq-list-option_grab-cursor": "showsGrabCursor", "class.kbq-disabled": "disabled", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton()?.active", "attr.aria-selected": "ariaSelected", "attr.aria-checked": "ariaChecked", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-option" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqListOption, isStandalone: true, selector: "kbq-list-option", inputs: { checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, draggableInput: { classPropertyName: "draggableInput", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, showCheckboxInput: { classPropertyName: "showCheckboxInput", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-list-option_multiple": "listSelection.multiple", "class.kbq-list-option_draggable": "draggable", "class.kbq-list-option_grab-cursor": "showsGrabCursor", "class.kbq-disabled": "disabled", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton()?.active", "attr.aria-selected": "ariaSelected", "attr.aria-checked": "ariaChecked", "attr.aria-disabled": "ariaDisabled()", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-option" }, providers: [
             { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqListOption },
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqListOption }
-        ], queries: [{ propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true, isSignal: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true, isSignal: true }, { propertyName: "dragHandles", predicate: CDK_DRAG_HANDLE, descendants: true, isSignal: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true, isSignal: true }, { propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqListOption"], hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: "@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <!-- Decorative: assistive technology reads the selected state from the option's own aria-selected. -->\n    <kbq-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n}\n\n<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText #text class=\"kbq-list-text\">\n    <ng-content />\n    <ng-content select=\"[kbq-list-option-caption]\" />\n</div>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n\n@if (listSelection.dragPreview() === 'text') {\n    <!--\n        Registers with the host `CdkDrag` through `CDK_DRAG_PARENT`, not through a content query, which\n        is why it can live in the option's own view. The template body is a single element and nothing\n        else: CDK wraps the view in a plain div otherwise, and that wrapper \u2014 not this plate \u2014 would\n        become the preview. The plate is decorative, it repeats text the listbox already exposes.\n    -->\n    <ng-template cdkDragPreview>\n        <div class=\"kbq-list-drag-preview_text\" aria-hidden=\"true\">\n            <!-- Read on render rather than cached on `started`: CDK builds the preview before it emits. -->\n            @let text = getDragPreviewText();\n            <div class=\"kbq-list-drag-preview__label\">{{ text.label }}</div>\n            @if (text.caption) {\n                <div class=\"kbq-list-drag-preview__caption\">{{ text.caption }}</div>\n            }\n        </div>\n    </ng-template>\n}\n", dependencies: [{ kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "component", type: KbqActionContainer, selector: "kbq-action-container", exportAs: ["kbqActionContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true, isSignal: true }, { propertyName: "tooltipTriggerQuery", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "dropdownTriggerQuery", first: true, predicate: KbqDropdownTrigger, descendants: true, isSignal: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true, isSignal: true }, { propertyName: "dragHandles", predicate: CDK_DRAG_HANDLE, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true, isSignal: true }, { propertyName: "titleText", first: true, predicate: ["kbqTitleText"], descendants: true, isSignal: true }], exportAs: ["kbqListOption"], hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: "@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <!-- Decorative: assistive technology reads the selected state from the option's own aria-selected. -->\n    <kbq-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n}\n\n<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText #text class=\"kbq-list-text\">\n    <ng-content />\n    <ng-content select=\"[kbq-list-option-caption]\" />\n</div>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n\n@if (listSelection.dragPreview() === 'text') {\n    <!--\n        Registers with the host `CdkDrag` through `CDK_DRAG_PARENT`, not through a content query, which\n        is why it can live in the option's own view. The template body is a single element and nothing\n        else: CDK wraps the view in a plain div otherwise, and that wrapper \u2014 not this plate \u2014 would\n        become the preview. The plate is decorative, it repeats text the listbox already exposes.\n    -->\n    <ng-template cdkDragPreview>\n        <div class=\"kbq-list-drag-preview_text\" aria-hidden=\"true\">\n            <!-- Read on render rather than cached on `started`: CDK builds the preview before it emits. -->\n            @let text = getDragPreviewText();\n            <div class=\"kbq-list-drag-preview__label\">{{ text.label }}</div>\n            @if (text.caption) {\n                <div class=\"kbq-list-drag-preview__caption\">{{ text.caption }}</div>\n            }\n        </div>\n    </ng-template>\n}\n", dependencies: [{ kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "component", type: KbqActionContainer, selector: "kbq-action-container", exportAs: ["kbqActionContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListOption, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-list-option', imports: [
                         CdkDragPreview,
@@ -1538,6 +1714,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqListOption },
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqListOption }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        // A signal is read by one of these bindings, or by two with nothing read in between (`selectAllRow`, by the two
+                        // ARIA states). Host bindings run in the reactive consumer of the declaring view, shared by every option in it,
+                        // and a signal that consumer reads again after others is found by a scan of all it has read so far: a repeated
+                        // read costs O(N²) per check across N options.
                         class: 'kbq-list-option',
                         role: 'option',
                         '[class.kbq-selected]': 'selected',
@@ -1549,36 +1729,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[class.kbq-action-button-focused]': 'actionButton()?.active',
                         '[attr.aria-selected]': 'ariaSelected',
                         '[attr.aria-checked]': 'ariaChecked',
-                        '[attr.aria-disabled]': 'disabled || null',
+                        '[attr.aria-disabled]': 'ariaDisabled()',
                         '[attr.tabindex]': 'tabIndex',
                         '(focusin)': 'focus()',
                         '(blur)': 'blur()',
                         '(click)': 'handleClick($event)',
                         '(keydown)': 'onKeydown($event)'
                     }, hostDirectives: [CdkDrag], exportAs: 'kbqListOption', preserveWhitespaces: false, template: "@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <!-- Decorative: assistive technology reads the selected state from the option's own aria-selected. -->\n    <kbq-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n}\n\n<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText #text class=\"kbq-list-text\">\n    <ng-content />\n    <ng-content select=\"[kbq-list-option-caption]\" />\n</div>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n\n@if (listSelection.dragPreview() === 'text') {\n    <!--\n        Registers with the host `CdkDrag` through `CDK_DRAG_PARENT`, not through a content query, which\n        is why it can live in the option's own view. The template body is a single element and nothing\n        else: CDK wraps the view in a plain div otherwise, and that wrapper \u2014 not this plate \u2014 would\n        become the preview. The plate is decorative, it repeats text the listbox already exposes.\n    -->\n    <ng-template cdkDragPreview>\n        <div class=\"kbq-list-drag-preview_text\" aria-hidden=\"true\">\n            <!-- Read on render rather than cached on `started`: CDK builds the preview before it emits. -->\n            @let text = getDragPreviewText();\n            <div class=\"kbq-list-drag-preview__label\">{{ text.label }}</div>\n            @if (text.caption) {\n                <div class=\"kbq-list-drag-preview__caption\">{{ text.caption }}</div>\n            }\n        </div>\n    </ng-template>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTrigger: [{
-                type: ContentChild,
-                args: [KbqTooltipTrigger]
-            }], dropdownTrigger: [{
-                type: ContentChild,
-                args: [KbqDropdownTrigger]
-            }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], dragHandles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CDK_DRAG_HANDLE), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], textElement: [{
-                type: ViewChild,
-                args: ['kbqTitleText', { static: false }]
-            }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], draggable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showCheckbox: [{
-                type: Input
-            }], selected: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], dropdownTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownTrigger), { isSignal: true }] }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], dragHandles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CDK_DRAG_HANDLE), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], titleText: [{ type: i0.ViewChild, args: ['kbqTitleText', { isSignal: true }] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], draggableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], showCheckboxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
 
 /**
  * A plain, non-selectable list container.
@@ -1588,21 +1746,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * For a selectable listbox use `kbq-list-selection` instead.
  */
 class KbqList {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqList, isStandalone: true, selector: "kbq-list", host: { classAttribute: "kbq-list" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius);gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius);padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqList, isStandalone: true, selector: "kbq-list", host: { classAttribute: "kbq-list" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-item,.kbq-list-option{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-item,.kbq-list-option{gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-drag-preview_text{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-drag-preview_text{padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqList, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-list', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'kbq-list' }, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius);gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius);padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"] }]
+            args: [{ selector: 'kbq-list', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'kbq-list' }, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-item,.kbq-list-option{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-item,.kbq-list-option{gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-list-drag-preview_text{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-list-drag-preview_text{padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"] }]
         }] });
 /** A single row of a `kbq-list`. Non-selectable — see `kbq-list-option` for the selectable variant. */
 class KbqListItem {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    ngAfterContentInit() {
-        new KbqLineSetter(this.lines, this.elementRef);
-    }
     getHostElement() {
         return this.elementRef.nativeElement;
     }
@@ -1612,29 +1767,25 @@ class KbqListItem {
     handleBlur() {
         this.elementRef.nativeElement.classList.remove('kbq-focused');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqListItem, isStandalone: true, selector: "kbq-list-item, a[kbq-list-item]", host: { listeners: { "focus": "handleFocus()", "blur": "handleBlur()" }, classAttribute: "kbq-list-item" }, queries: [{ propertyName: "lines", predicate: KbqLine }], ngImport: i0, template: "<ng-content select=\"[kbq-list-icon], [mcListIcon]\" />\n\n<div class=\"kbq-list-text\">\n    <ng-content select=\"[kbq-line], [mcLine]\" />\n</div>\n\n<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqListItem, isStandalone: true, selector: "kbq-list-item, a[kbq-list-item]", host: { listeners: { "focus": "handleFocus()", "blur": "handleBlur()" }, classAttribute: "kbq-list-item" }, ngImport: i0, template: "<ng-content select=\"[kbq-list-icon]\" />\n\n<div class=\"kbq-list-text\">\n    <ng-content select=\"[kbq-line]\" />\n</div>\n\n<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-list-item, a[kbq-list-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-list-item',
                         '(focus)': 'handleFocus()',
                         '(blur)': 'handleBlur()'
-                    }, preserveWhitespaces: false, template: "<ng-content select=\"[kbq-list-icon], [mcListIcon]\" />\n\n<div class=\"kbq-list-text\">\n    <ng-content select=\"[kbq-line], [mcLine]\" />\n</div>\n\n<ng-content />\n" }]
-        }], propDecorators: { lines: [{
-                type: ContentChildren,
-                args: [KbqLine]
-            }] } });
+                    }, preserveWhitespaces: false, template: "<ng-content select=\"[kbq-list-icon]\" />\n\n<div class=\"kbq-list-text\">\n    <ng-content select=\"[kbq-line]\" />\n</div>\n\n<ng-content />\n" }]
+        }] });
 
 class KbqListModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqListModule, imports: [A11yModule,
             // Re-exported so that a drag handle can be projected into an option without the consumer
             // reaching into `@angular/cdk/drag-drop` — the list hides CDK everywhere else.
             CdkDragHandle,
             KbqPseudoCheckboxModule,
-            KbqLine,
             KbqOptionModule,
             KbqActionContainer,
             KbqIconModule,
@@ -1649,7 +1800,7 @@ class KbqListModule {
             KbqListOption,
             KbqListOptionCaption,
             KbqOptionModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListModule, imports: [A11yModule,
             KbqPseudoCheckboxModule,
             KbqOptionModule,
             KbqActionContainer,
@@ -1657,7 +1808,7 @@ class KbqListModule {
             KbqListSelection,
             KbqListOption, KbqOptionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1666,7 +1817,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         // reaching into `@angular/cdk/drag-drop` — the list hides CDK everywhere else.
                         CdkDragHandle,
                         KbqPseudoCheckboxModule,
-                        KbqLine,
                         KbqOptionModule,
                         KbqActionContainer,
                         KbqIconModule,