@koobiq/components 20.1.0 → 20.3.0

package/fesm2022/koobiq-components-list.mjs

@@ -2,18 +2,32 @@ 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 * as i0 from '@angular/core';
-import { forwardRef, inject, ElementRef, ChangeDetectorRef, output, EventEmitter, input, booleanAttribute, DestroyRef, HostAttributeToken, Input, Output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, NgZone, contentChild, viewChild, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { forwardRef, inject, ElementRef, ChangeDetectorRef, output, EventEmitter, input, booleanAttribute, DestroyRef, NgZone, signal, HostAttributeToken, effect, isDevMode, Input, Output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, contentChild, contentChildren, viewChild, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MultipleMode, FocusKeyManager, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey, toggleSelectAll, KbqOptgroup, KbqOptionActionComponent, KbqPseudoCheckbox, KbqActionContainer, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqLineSetter, KbqLine, KbqOptionModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
+import { MultipleMode, getKbqSelectNonFunctionValueError, KBQ_WINDOW, FocusKeyManager, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey, runCompareWith, toggleSelectAll, KbqOptgroup, KbqOptionActionComponent, KbqPseudoCheckbox, kbqFocusOptionActionOnTab, KbqActionContainer, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqLineSetter, KbqLine, KbqOptionModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
-import { merge, Subject } from 'rxjs';
-import { startWith, take } from 'rxjs/operators';
+import { merge, fromEvent, Subject } from 'rxjs';
+import { startWith, auditTime, switchMap, take } from 'rxjs/operators';
 import { KbqIconModule } from '@koobiq/components/icon';
 
+/** How long consecutive `window.resize` ticks are collapsed before the scroll size is recalculated. */
+const RESIZE_AUDIT_TIME = 100;
+/**
+ * Marks the dragged option while the pointer is over no list that would take it. Styling reads it from the
+ * body, which is what resolves the cursor once the options are out of hit testing.
+ */
+const DROP_FORBIDDEN_CLASS = 'kbq-list-option_drop-forbidden';
+/**
+ * Put on the drag preview whichever shape it takes, so styling has one hook that survives the
+ * `dragPreview` mode switch.
+ */
+const DRAG_PREVIEW_CLASS = 'kbq-list-drag-preview';
 const KBQ_SELECTION_LIST_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => KbqListSelection),
@@ -47,27 +61,46 @@ class KbqListCopyEvent {
     }
 }
 class KbqListSelection {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * 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).
+     */
     get autoSelect() {
         return this._autoSelect;
     }
     set autoSelect(value) {
         this._autoSelect = coerceBooleanProperty(value);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * Whether the last selected option can be deselected.
+     * Stays an accessor input for the same reason as {@link autoSelect}.
+     */
     get noUnselectLast() {
         return this._noUnselectLast;
     }
     set noUnselectLast(value) {
         this._noUnselectLast = coerceBooleanProperty(value);
     }
+    /**
+     * 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();
+    }
     get multiple() {
         return !!this.multipleMode;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * 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`.
+     */
     get tabIndex() {
         return this.disabled ? -1 : this._tabIndex;
     }
@@ -75,14 +108,18 @@ class KbqListSelection {
         this.userTabIndex = value;
         this._tabIndex = value;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * 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 disabled(value) {
         if (value !== this.disabled) {
             this._disabled = value;
+            this.syncDraggableState();
         }
     }
     get showCheckbox() {
@@ -100,9 +137,35 @@ class KbqListSelection {
         this.clipboard = inject(Clipboard, { optional: true });
         this.focusMonitor = inject(FocusMonitor);
         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`.
+         */
         this.onCopy = new EventEmitter();
         this._autoSelect = true;
         this._noUnselectLast = true;
+        this._draggable = false;
+        /**
+         * 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" }] : []));
+        /**
+         * 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" }] : []));
+        /**
+         * 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" }] : []));
+        /** 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.horizontal = input(false, ...(ngDevMode ? [{ debugName: "horizontal", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -112,17 +175,52 @@ class KbqListSelection {
          * 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
          * one is a value from the selected value. A boolean must be returned.
+         *
+         * 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" }] : []));
+        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.userTabIndex = null;
         // Emits a change event whenever the selected state of an option changes.
         this.selectionChange = output();
         this.destroyRef = inject(DestroyRef);
         this.platform = inject(Platform);
+        this.ngZone = inject(NgZone);
+        this.window = inject(KBQ_WINDOW);
+        this.dropList = inject(CdkDropList, { host: true });
+        /**
+         * 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" }] : []));
+        /** Gap the indicator currently marks, used as `currentIndex` when the drag is dropped here. */
+        this.dropIndex = null;
+        this.hasWarnedOnDragContainer = false;
+        /** Whether a deferred {@link initializeSelection} pass is already queued for this microtask turn. */
+        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.onTouched = () => { };
         // View to model callback that should be called whenever the selected options change.
-        this.onChange = (_) => { };
+        this.onChange = () => { };
         const multiple = inject(new HostAttributeToken('multiple'), { optional: true });
         if (multiple === MultipleMode.CHECKBOX || multiple === MultipleMode.KEYBOARD) {
             this.multipleMode = multiple;
@@ -135,6 +233,13 @@ class KbqListSelection {
             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.
+        effect(() => {
+            this.compareWith();
+            this.initializeSelection();
+        });
+        this.setupDropListInitialProperties();
     }
     ngAfterContentInit() {
         this.keyManager = new FocusKeyManager(this.options)
@@ -148,9 +253,13 @@ class KbqListSelection {
                 this.changeDetectorRef.markForCheck();
             });
         });
-        if (this._value) {
-            this.setOptionsFromValues(this._value);
-        }
+        // 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.
+        // Repairs each option's `_selected` mirror after the model changes on its own — single-selection
+        // 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;
@@ -159,14 +268,23 @@ class KbqListSelection {
                 item.selected = false;
             }
         });
+        this.listenToOptionsFocus();
         this.options.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.resetOptions();
             this.updateTabIndex();
             this.initializeSelection();
         });
         if (!this.platform.isBrowser)
             return;
+        this.warnOnUnsupportedDragContainer();
         this.updateScrollSize();
+        // `updateScrollSize` only feeds the key manager's page size — nothing rendered depends on it,
+        // so the listener stays outside the zone and never schedules change detection. `auditTime`
+        // collapses a resize drag into one pair of forced layout reads per interval.
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.window, 'resize')
+                .pipe(auditTime(RESIZE_AUDIT_TIME), takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.updateScrollSize());
+        });
     }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef, true);
@@ -185,6 +303,7 @@ class KbqListSelection {
             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);
@@ -192,10 +311,12 @@ class KbqListSelection {
         this.onTouched();
         this.changeDetectorRef.markForCheck();
     }
+    /** Selects every non-disabled option and reports the new value to the `ControlValueAccessor`. */
     selectAll() {
         this.options.forEach((option) => option.setSelected(true));
         this.reportValueChange();
     }
+    /** Deselects every option and reports the new value to the `ControlValueAccessor`. */
     deselectAll() {
         this.options.forEach((option) => option.setSelected(false));
         this.reportValueChange();
@@ -204,7 +325,13 @@ class KbqListSelection {
         if (this.horizontal() || !this.options.first) {
             return;
         }
-        this.keyManager.withScrollSize(Math.floor(this.getHeight() / this.options.first.getHeight()));
+        const optionHeight = this.options.first.getHeight();
+        // `getHeight()` is 0 whenever the option is not laid out (SSR, jsdom, `display: none`);
+        // dividing by it would hand the key manager a `NaN` page size.
+        if (!optionHeight) {
+            return;
+        }
+        this.keyManager.withScrollSize(Math.floor(this.getHeight() / optionHeight));
     }
     setSelectedOptionsByClick(option, shiftKey, ctrlKey) {
         if (shiftKey && this.multiple) {
@@ -248,10 +375,12 @@ class KbqListSelection {
         const options = this.options.toArray();
         let fromIndex = this.keyManager.previousActiveItemIndex;
         let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
-        const selectedOptionState = options[fromIndex].selected;
-        if (toIndex === fromIndex) {
+        // `previousActiveItemIndex` stays -1 until the key manager has moved at least once, so a
+        // shift + click before any keyboard navigation has no anchor to extend the range from.
+        if (toIndex === fromIndex || !this.isValidIndex(fromIndex) || !this.isValidIndex(toIndex)) {
             return;
         }
+        const selectedOptionState = options[fromIndex].selected;
         if (fromIndex > toIndex) {
             [fromIndex, toIndex] = [toIndex, fromIndex];
         }
@@ -267,9 +396,12 @@ class KbqListSelection {
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(values) {
-        this._value = 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(Array.isArray(values) ? values : [values]);
+            this.setOptionsFromValues(this._value ?? []);
         }
     }
     // Implemented as part of ControlValueAccessor.
@@ -282,10 +414,12 @@ class KbqListSelection {
     }
     // Implemented as a part of ControlValueAccessor.
     setDisabledState(isDisabled) {
-        if (this.options) {
-            this.options.forEach((option) => (option.disabled = 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();
     }
+    /** Values of the currently selected options. */
     getSelectedOptionValues() {
         return this.options.filter((option) => option.selected).map((option) => option.value);
     }
@@ -294,7 +428,7 @@ class KbqListSelection {
         const focusedIndex = this.keyManager.activeItemIndex;
         if (focusedIndex != null && this.isValidIndex(focusedIndex)) {
             const focusedOption = this.options.toArray()[focusedIndex];
-            if (focusedOption && this.canDeselectLast(focusedOption)) {
+            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);
@@ -302,12 +436,16 @@ class KbqListSelection {
             }
         }
     }
+    /** Whether `listOption` is allowed to be deselected, given {@link noUnselectLast}. */
     canDeselectLast(listOption) {
         return !(this.noUnselectLast && this.selectionModel.selected.length === 1 && listOption.selected);
     }
-    /** @docs-private */
+    /**
+     * Rendered height of the element, or 0 when it is not laid out (SSR, jsdom, `display: none`).
+     * @docs-private
+     */
     getHeight() {
-        return this.elementRef.nativeElement.getClientRects()[0]?.height ?? 0;
+        return this.elementRef.nativeElement.getClientRects()?.[0]?.height ?? 0;
     }
     // Removes an option from the selection list and updates the active item.
     removeOptionFromList(option) {
@@ -345,10 +483,10 @@ class KbqListSelection {
             this.keyManager.tabOut.next();
             return;
         }
-        else if (keyCode === DOWN_ARROW) {
+        else if (this.horizontal() ? keyCode === RIGHT_ARROW : keyCode === DOWN_ARROW) {
             this.keyManager.setNextItemActive();
         }
-        else if (keyCode === UP_ARROW) {
+        else if (this.horizontal() ? keyCode === LEFT_ARROW : keyCode === UP_ARROW) {
             this.keyManager.setPreviousItemActive();
         }
         else if (keyCode === HOME) {
@@ -363,12 +501,25 @@ class KbqListSelection {
         else if (keyCode === PAGE_DOWN) {
             this.keyManager.setNextPageItemActive();
         }
-        if (this.keyManager.activeItem && isVerticalMovement(event)) {
+        else {
+            // Everything the list does not navigate on itself goes to the key manager, which is what
+            // drives type-ahead. Arrow keys never reach it — the branches above own them — so the
+            // manager's own orientation config cannot double-handle them.
+            this.keyManager.onKeydown(event);
+        }
+        if (this.keyManager.activeItem && this.isNavigationKey(event)) {
             this.setSelectedOptionsByKey(this.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), 
             // ctrlKey is for Windows, metaKey is for MacOS
             hasModifierKey(event, 'ctrlKey', 'metaKey'));
         }
     }
+    /** Whether the key just handled moved the active option, taking the list orientation into account. */
+    isNavigationKey(event) {
+        if (this.horizontal() && [LEFT_ARROW, RIGHT_ARROW].includes(event.keyCode)) {
+            return true;
+        }
+        return isVerticalMovement(event);
+    }
     // Reports a value change to the ControlValueAccessor
     reportValueChange() {
         if (this.options) {
@@ -382,11 +533,22 @@ class KbqListSelection {
         this.selectionChange.emit(new KbqListSelectionChange(this, option));
     }
     initializeSelection() {
+        // Several triggers land in the same turn — `options.changes`, the comparator effect, a form write.
+        // They would all apply the identical value, so the first one queued does the work for all of them.
+        if (this.pendingSelectionInit) {
+            return;
+        }
+        this.pendingSelectionInit = true;
         // Defer setting the value in order to avoid the "Expression
         // has changed after it was checked" errors from Angular.
         Promise.resolve().then(() => {
-            if (this._value) {
-                this.setOptionsFromValues(Array.isArray(this._value) ? this._value : [this._value]);
+            this.pendingSelectionInit = false;
+            // `options` is a content query: the comparator effect can reach this before it has settled.
+            // 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)) {
+                this.setOptionsFromValues(this._value ?? []);
             }
         });
     }
@@ -395,30 +557,24 @@ class KbqListSelection {
         this._tabIndex = this.userTabIndex || (this.options.length === 0 ? -1 : 0);
     }
     onCopyDefaultHandler() {
-        this.clipboard?.copy(this.keyManager.activeItem.value);
-    }
-    resetOptions() {
-        this.dropSubscriptions();
-        this.listenToOptionsFocus();
-    }
-    dropSubscriptions() {
-        if (this.optionFocusSubscription) {
-            this.optionFocusSubscription.unsubscribe();
-            this.optionFocusSubscription = null;
-        }
-        if (this.optionBlurSubscription) {
-            this.optionBlurSubscription.unsubscribe();
-            this.optionBlurSubscription = null;
-        }
+        this.clipboard?.copy(String(this.keyManager.activeItem.value));
     }
+    /**
+     * Re-points the focus/blur streams at the current options every time the query list changes.
+     * `switchMap` tears down the previous `merge` for us, so no manual subscription bookkeeping.
+     */
     listenToOptionsFocus() {
-        this.optionFocusSubscription = this.optionFocusChanges.subscribe((event) => {
+        this.options.changes
+            .pipe(startWith(null), switchMap(() => this.optionFocusChanges), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
             const index = this.options.toArray().indexOf(event.option);
             if (this.isValidIndex(index)) {
                 this.keyManager.updateActiveItem(index);
             }
         });
-        this.optionBlurSubscription = this.optionBlurChanges.subscribe(() => this.blur());
+        this.options.changes
+            .pipe(startWith(null), switchMap(() => this.optionBlurChanges), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.blur());
     }
     /** Checks whether any of the options is focused. */
     hasFocusedOption() {
@@ -426,15 +582,19 @@ class KbqListSelection {
     }
     // Returns the option with the specified value.
     getOptionByValue(value) {
-        return this.options.find((option) => option.value === value);
+        const compareWith = this.compareWith();
+        // `null`/`undefined` are left to the comparator rather than rejected here: an option declared
+        // without a `[value]` reports `undefined` back through the form control, and has to be able to
+        // find itself again when that value is re-applied.
+        return this.options.find((option) => runCompareWith(compareWith, option.value, value));
     }
     // Sets the selected options based on the specified values.
     setOptionsFromValues(values) {
-        this.options.forEach((option) => option.setSelected(false));
-        values
-            .map((value) => this.getOptionByValue(value))
-            .filter(Boolean)
-            .forEach((option) => option.setSelected(true));
+        // Resolved up front and applied as a delta: `setSelected` early-returns on an unchanged state, so
+        // re-applying the same value writes nothing to the `SelectionModel` and schedules no change
+        // detection. Deselecting everything first would churn both on every call.
+        const selection = new Set(values.map((value) => this.getOptionByValue(value)));
+        this.options.forEach((option) => option.setSelected(selection.has(option)));
     }
     /**
      * Utility to ensure all indexes are valid.
@@ -448,6 +608,194 @@ class KbqListSelection {
     getOptionIndex(option) {
         return this.options.toArray().indexOf(option);
     }
+    setupDropListInitialProperties() {
+        // Lets the `dropped` handler map a `CdkDropList` back to the list that owns it.
+        this.dropList.data = this;
+        // The drop position is shown by an insertion indicator instead of by opening a gap, so CDK must
+        // not sort: the options stay put and the dragged one keeps its slot as a faded placeholder.
+        // Both flags are re-read from the directive on every drag start, so assigning once is enough.
+        this.dropList.sortingDisabled = true;
+        // Without an anchor the placeholder follows the option into the connected list, leaving the
+        // origin list with a hole instead of the faded row.
+        this.dropList.hasAnchor = true;
+        this.syncDraggableState();
+        effect(() => {
+            this.dropList.orientation = this.horizontal() ? 'horizontal' : 'vertical';
+            // `CdkDropList` resolves its siblings on every drag start, so a late assignment is picked up.
+            this.dropList.connectedTo = this.resolveConnectedDropLists();
+        });
+        // `enter()` is not gated on `sortingDisabled`, so the placeholder follows the option into
+        // whichever list it is dragged over and pushes that list's options apart. Only the list the
+        // drag started in may show it — there it is the faded row left behind. Toggled imperatively
+        // because the placeholder is already in the DOM by the time this runs, and waiting for change
+        // detection would let the shifted layout paint for a frame.
+        this.dropList.entered.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ item }) => {
+            item.getPlaceholderElement().classList.toggle('kbq-list-option_foreign-placeholder', item.dropContainer.data !== this);
+        });
+        this.dropList.dropped
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ previousIndex, previousContainer, container, item, event }) => {
+            const { option } = item.data;
+            const target = container.data;
+            // Sorting is disabled, so CDK reports the untouched starting index. The gap the indicator
+            // marked is the real target; without one the pointer was either outside every list we know
+            // or over the place the option already occupies, and both resolve to a move that changes
+            // nothing.
+            const currentIndex = target.dropIndex ?? previousIndex;
+            this.clearDropIndicators(option);
+            this.dropped.emit({
+                option,
+                previousIndex,
+                currentIndex,
+                previousContainer: previousContainer.data,
+                container: target,
+                event
+            });
+            this.followMovedOption(option, target);
+        });
+    }
+    /**
+     * `CdkDropList` numbers only the options it has rendered, so inside a virtual scroll the indices
+     * `dropped` reports do not address the consumer's backing array and the move silently lands on the
+     * wrong item. Warn instead of letting it pass unnoticed.
+     */
+    warnOnUnsupportedDragContainer() {
+        // Runs on every `draggable`/`disabled` change as well as on init, so it has to tolerate being
+        // called before the content children exist and to stay quiet once it has had its say.
+        if (this.hasWarnedOnDragContainer || !isDevMode() || !this.draggable || !this.platform.isBrowser) {
+            return;
+        }
+        const insideVirtualScroll = !!this.elementRef.nativeElement.querySelector('cdk-virtual-scroll-viewport');
+        if (insideVirtualScroll) {
+            // eslint-disable-next-line no-console
+            console.warn('KbqListSelection: `draggable` is not supported inside `cdk-virtual-scroll-viewport`. The ' +
+                'indices reported by `dropped` count only the rendered options.');
+        }
+        this.hasWarnedOnDragContainer = insideVirtualScroll;
+    }
+    /** Keeps the underlying CDK directives in sync with the resolved `draggable` state. */
+    syncDraggableState() {
+        this.dropList.disabled = !this.draggable;
+        this.options?.forEach((option) => option.syncDraggableState());
+        this.warnOnUnsupportedDragContainer();
+        this.changeDetectorRef.markForCheck();
+    }
+    normalizeConnectedTo() {
+        const connectedTo = this.connectedTo();
+        return Array.isArray(connectedTo) ? connectedTo : [connectedTo];
+    }
+    resolveConnectedLists() {
+        return this.normalizeConnectedTo().filter((item) => typeof item !== 'string');
+    }
+    resolveConnectedDropLists() {
+        return this.normalizeConnectedTo().map((item) => (typeof item === 'string' ? item : item.dropList));
+    }
+    /**
+     * Tracks the dragged option and paints the insertion indicator in whichever list the pointer is
+     * over. Lists connected by `id` alone cannot be resolved to an instance, so they never light up.
+     *
+     * @docs-private
+     */
+    onOptionDragMoved(option, pointer) {
+        const lists = [this, ...this.resolveConnectedLists()];
+        const hovered = lists.find((list) => list.containsPoint(pointer));
+        for (const list of lists) {
+            if (list !== hovered) {
+                list.clearDropIndicator();
+            }
+        }
+        hovered?.showDropIndicator(option, pointer);
+        // Toggled on the element rather than through a signal: `moved` arrives outside the Angular zone,
+        // and the cursor may not lag a frame behind the pointer.
+        option.getHostElement().classList.toggle(DROP_FORBIDDEN_CLASS, !hovered);
+    }
+    /**
+     * Drops the indicator in every list that could be showing one for this drag.
+     *
+     * @docs-private
+     */
+    clearDropIndicators(option) {
+        const lists = [this, ...this.resolveConnectedLists(), option.listSelection];
+        for (const list of lists) {
+            list.clearDropIndicator();
+        }
+        option.getHostElement().classList.remove(DROP_FORBIDDEN_CLASS);
+    }
+    clearDropIndicator() {
+        this.dropIndex = null;
+        this.dropIndicatorOffset.set(null);
+    }
+    containsPoint({ x, y }) {
+        if (!this.draggable) {
+            return false;
+        }
+        const { top, right, bottom, left } = this.elementRef.nativeElement.getBoundingClientRect();
+        return x >= left && x <= right && y >= top && y <= bottom;
+    }
+    /**
+     * Resolves the gap the pointer sits in and positions the indicator on it. Geometry is read on every
+     * move rather than cached at drag start: nothing in the list reflows while dragging, but CDK
+     * auto-scrolls near the edges, which would silently invalidate a cache.
+     */
+    showDropIndicator(dragged, pointer) {
+        const horizontal = this.horizontal();
+        // The dragged option is left out on purpose: CDK pulls its host element out of the flow, and
+        // excluding it makes the resulting gap index directly usable as `currentIndex` — that is exactly
+        // the index space `moveItemInArray` and `transferArrayItem` expect.
+        const rects = this.options
+            .filter((option) => option !== dragged)
+            .map((option) => option.getHostElement().getBoundingClientRect());
+        const startOf = (rect) => (horizontal ? rect.left : rect.top);
+        const endOf = (rect) => (horizontal ? rect.right : rect.bottom);
+        const midpointOf = (rect) => (startOf(rect) + endOf(rect)) / 2;
+        const position = horizontal ? pointer.x : pointer.y;
+        const index = rects.filter((rect) => position >= midpointOf(rect)).length;
+        // The dragged option is not among `rects`, so the gaps above and below it collapse into the one
+        // carrying its own index — the place it already occupies. Marking it would promise a move that
+        // changes nothing, so the indicator stays hidden and the drop falls back to `previousIndex`.
+        if (index === this.getOptionIndex(dragged)) {
+            this.clearDropIndicator();
+            return;
+        }
+        const container = this.elementRef.nativeElement.getBoundingClientRect();
+        const scrolled = horizontal
+            ? this.elementRef.nativeElement.scrollLeft
+            : this.elementRef.nativeElement.scrollTop;
+        // The gap sits before the first option, or right after the one that precedes it. An empty list
+        // has no options to measure, so the indicator goes to the top of its content box.
+        let boundary = startOf(container);
+        if (rects.length) {
+            boundary = index === 0 ? startOf(rects[0]) : endOf(rects[index - 1]);
+        }
+        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
+     * the move — the list never reorders its own content, so nothing happens if `dropped` is left
+     * unhandled. `setActiveItem` also re-anchors `previousActiveItemIndex`, which `options.changes`
+     * leaves behind on the slot the option came from and shift-range selection would extend from.
+     */
+    followMovedOption(option, container) {
+        const { value } = option;
+        // Tracked on the list the move is awaited on, so that a move into a connected list does not
+        // cancel one still pending here. A move that is never applied leaves its subscription pending,
+        // so drop the previous one first.
+        container.pendingMoveSubscription?.unsubscribe();
+        container.pendingMoveSubscription = container.options.changes
+            .pipe(take(1), takeUntilDestroyed(container.destroyRef))
+            .subscribe(() => {
+            const options = container.options.toArray();
+            // Reordering within a list keeps the instance; moving between lists recreates it.
+            const index = options.includes(option)
+                ? options.indexOf(option)
+                : options.findIndex((item) => runCompareWith(container.compareWith(), item.value, value));
+            if (index !== -1) {
+                container.keyManager.setActiveItem(index);
+            }
+        });
+    }
     /**
      * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used,
      * which toggles the selection of all non-disabled options.
@@ -487,24 +835,45 @@ class KbqListSelection {
         }
         option.preventBlur = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListSelection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", 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 }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", 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", selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "focus": "focus()", "blur": "blur()", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-list-selection" }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "options", predicate: i0.forwardRef(() => KbqListOption), descendants: true }], exportAs: ["kbqListSelection"], ngImport: i0, template: `
+    /** @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 }, 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: "options", predicate: i0.forwardRef(() => KbqListOption), descendants: true }], exportAs: ["kbqListSelection"], hostDirectives: [{ directive: i1.CdkDropList, inputs: ["id", "id"] }], 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-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-radius:var(--kbq-size-border-radius)}.kbq-list-item:is(.kbq-selected):has(+:is(.kbq-selected)),.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-item:is(.kbq-selected)+:is(.kbq-selected),.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}.kbq-list-item:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-item:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background);background:var(--kbq-list-default-container-background)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color)}.kbq-list-option .kbq-icon.kbq-empty{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)}.kbq-list-option .kbq-list-option-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);background:var(--kbq-list-states-hover-container-background)}.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)}.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)}.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)}.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)}.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-active:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-active-text-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-button-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-active-caption-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-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)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-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);background:var(--kbq-list-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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-selected:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-states-selected-active-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-button-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-states-selected-active-caption-color)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background);background:var(--kbq-list-states-disabled-container-background)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color)}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-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)}.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)}.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)}.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);background:var(--kbq-list-multiple-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-multiple-states-selected-active-text-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-button-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-active-caption-color)}.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{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{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)}\n", ".kbq-list,.kbq-list-selection{--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-xs);--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-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--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-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-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-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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        @if (dropIndicatorOffset() !== null) {
+            <!-- Purely decorative: the drop target is a pointer affordance, not a status message. -->
+            <div
+                class="kbq-list-selection__drop-indicator"
+                aria-hidden="true"
+                [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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListSelection, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-list-selection', template: `
         <ng-content />
+        @if (dropIndicatorOffset() !== null) {
+            <!-- Purely decorative: the drop target is a pointer affordance, not a status message. -->
+            <div
+                class="kbq-list-selection__drop-indicator"
+                aria-hidden="true"
+                [style.--kbq-list-drop-indicator-offset.px]="dropIndicatorOffset()"
+            ></div>
+        }
     `, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-list-selection',
+                        role: 'listbox',
+                        '[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',
-                        '[attr.disabled]': 'disabled || null',
                         '(keydown)': 'onKeyDown($event)',
                         '(focus)': 'focus()',
-                        '(blur)': 'blur()',
-                        '(window:resize)': 'updateScrollSize()'
-                    }, 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-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-radius:var(--kbq-size-border-radius)}.kbq-list-item:is(.kbq-selected):has(+:is(.kbq-selected)),.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-item:is(.kbq-selected)+:is(.kbq-selected),.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}.kbq-list-item:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-item:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background);background:var(--kbq-list-default-container-background)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color)}.kbq-list-option .kbq-icon.kbq-empty{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)}.kbq-list-option .kbq-list-option-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);background:var(--kbq-list-states-hover-container-background)}.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)}.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)}.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)}.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)}.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-active:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-active-text-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-button-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-active-caption-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-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)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-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);background:var(--kbq-list-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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-selected:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-states-selected-active-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-button-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-states-selected-active-caption-color)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background);background:var(--kbq-list-states-disabled-container-background)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color)}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-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)}.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)}.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)}.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);background:var(--kbq-list-multiple-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-multiple-states-selected-active-text-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-button-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-active-caption-color)}.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{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{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)}\n", ".kbq-list,.kbq-list-selection{--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-xs);--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-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--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-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-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-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)}\n"] }]
+                        '(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 }]
@@ -514,7 +883,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], noUnselectLast: [{
                 type: Input
-            }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], tabIndex: [{
+            }], 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 }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], tabIndex: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -522,11 +894,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectAllHandler: [{
                 type: Input
             }] } });
+/**
+ * Marker directive for the secondary line of a `kbq-list-option`.
+ *
+ * Purely a styling hook: it adds the `kbq-list-option-caption` class the list theme keys its
+ * muted caption typography and per-state colors off.
+ */
 class KbqListOptionCaption {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListOptionCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListOptionCaption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOptionCaption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-list-option-caption]',
@@ -541,43 +919,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * if the current item is selected.
  */
 class KbqListOption {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.changeDetector = inject(ChangeDetectorRef);
-        this.ngZone = inject(NgZone);
-        this.listSelection = inject(KbqListSelection);
-        this.group = inject(KbqOptgroup, { optional: true });
-        this.hasFocus = false;
-        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.text = viewChild.required('text');
-        // Whether the label should appear before or after the checkbox. Defaults to 'after'
-        this.checkboxPosition = input(undefined, ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
-        /**
-         * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
-         * in the first cycle.
-         */
-        this.inputsInitialized = false;
-        this._disabled = false;
-        this._selected = false;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * 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;
     }
     set value(newValue) {
-        if (this.selected && newValue !== this.value && this.inputsInitialized) {
+        // 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;
     }
-    /** Whether list is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * 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.
+     */
     get disabled() {
         const listSelectionDisabled = this.listSelection && this.listSelection.disabled;
         const groupDisabled = this.group && this.group.disabled;
@@ -586,19 +957,38 @@ class KbqListOption {
     set disabled(value) {
         if (value !== this._disabled) {
             this._disabled = value;
-            this.changeDetector.markForCheck();
+            this.syncDraggableState();
         }
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * 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.
+     */
+    get draggable() {
+        return this._draggable && this.listSelection.draggable && !this.disabled;
+    }
+    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.
+     */
     get showCheckbox() {
         return this._showCheckbox !== undefined ? this._showCheckbox : this.listSelection.showCheckbox;
     }
     set showCheckbox(value) {
         this._showCheckbox = coerceBooleanProperty(value);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * Whether the option is selected.
+     * Stays an accessor input: the state lives in the list's `SelectionModel`, not on the option.
+     */
     get selected() {
         return this.listSelection.selectionModel?.isSelected(this) || false;
     }
@@ -613,11 +1003,82 @@ class KbqListOption {
     get externalPseudoCheckbox() {
         return !!this.pseudoCheckbox();
     }
+    /**
+     * Whether the row itself advertises the grab. Gated on `draggable` so that a pinned option inside a
+     * `dragCursor="grab"` list does not promise a pick-up it would refuse. The handle case is left to
+     * CSS, which already hands the grab over to a projected `cdkDragHandle`.
+     */
+    get showsGrabCursor() {
+        return this.draggable && this.listSelection.dragCursor() === 'grab';
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.ngZone = inject(NgZone);
+        this.drag = inject(CdkDrag, { host: true });
+        this.destroyRef = inject(DestroyRef);
+        this.listSelection = inject(KbqListSelection);
+        this.group = inject(KbqOptgroup, { optional: true });
+        this.hasFocus = false;
+        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" }] : []));
+        /**
+         * 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.text = viewChild.required('text');
+        // Whether the label should appear before or after the checkbox. Defaults to 'after'
+        this.checkboxPosition = input(undefined, ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
+        /**
+         * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
+         * in the first cycle.
+         */
+        this.inputsInitialized = false;
+        this._disabled = false;
+        this._draggable = true;
+        this._selected = false;
+        this.syncDraggableState();
+        // 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;
+        // Without a projected handle the whole row starts the drag, so a touch has to lose to a scroll
+        // gesture first. A handle is unambiguous and may start immediately. `CdkDrag` re-reads the delay
+        // on every `beforeStarted`, so assigning it whenever the query settles is enough.
+        effect(() => {
+            this.drag.dragStartDelay = this.dragHandles().length ? 0 : { touch: 300, mouse: 0 };
+        });
+        // Assigned lazily: referencing `this` while the host directive is still being constructed
+        // would capture a half-initialized option.
+        // Nothing is cleared on `ended`: it fires *before* `dropped`, so tearing the indicator down
+        // there would take the resolved target index with it and turn every drop into a no-op.
+        this.drag.started.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.drag.data = { option: this };
+            this.listSelection.clearDropIndicators(this);
+        });
+        // Sorting is disabled, so CDK gives no running feedback about where the option would land —
+        // the owning list derives it from the pointer and paints the insertion indicator itself.
+        this.drag.moved.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ pointerPosition }) => {
+            this.listSelection.onOptionDragMoved(this, pointerPosition);
+        });
+    }
+    /**
+     * Keeps the underlying `CdkDrag` in sync with the resolved `draggable` state.
+     *
+     * @docs-private
+     */
+    syncDraggableState() {
+        this.drag.disabled = !this.draggable;
+        this.changeDetector.markForCheck();
+    }
     ngOnInit() {
-        const list = this.listSelection;
-        if (list._value && list._value.some((value) => list.compareWith()(value, this._value))) {
-            this.setSelected(true);
-        }
+        // Resolving the model value is the list's job, not the option's. An option that matched itself
+        // here answered a different question than `getOptionByValue` does — every match self-selected,
+        // while the list picks the first — so a comparator that matches more than one option produced a
+        // different selection depending on which path ran. The list re-resolves on `options.changes`.
         const wasSelected = this._selected;
         // List options that are selected at initialization can't be reported properly to the form
         // control. This is because it takes some time until the selection-list knows about all
@@ -640,15 +1101,45 @@ class KbqListOption {
         }
         this.listSelection.removeOptionFromList(this);
     }
+    /** Toggles the selected state of this option. */
     toggle() {
         this.selected = !this.selected;
     }
     getLabel() {
         const text = this.text();
-        return text ? text.nativeElement.textContent : '';
+        return text ? (text.nativeElement.textContent ?? '') : '';
     }
+    /**
+     * Splits the option's text into the two lines the `text` drag preview shows. The caption is
+     * projected into the same container as the label, so the label is whatever that container holds
+     * apart from the caption — subtracting one string from the other would be guesswork.
+     *
+     * Taken off a clone rather than by walking the container's children, the way `KbqDropdownItem`
+     * drops icons out of its own label: `textContent` on an element skips the comment nodes Angular
+     * leaves behind for its anchors, while reading one of those nodes directly would hand back the
+     * anchor's name.
+     *
+     * Trimmed because `htmlWhitespaceSensitivity: 'ignore'` lets the indentation of the consumer's
+     * template into the projected text.
+     *
+     * @docs-private
+     */
+    getDragPreviewText() {
+        const clone = this.text().nativeElement.cloneNode(true);
+        const caption = clone.querySelector('.kbq-list-option-caption');
+        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. */
     setSelected(selected) {
-        if (this._selected === selected || !this.listSelection.selectionModel) {
+        const { selectionModel } = this.listSelection;
+        if (!selectionModel) {
+            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;
@@ -660,9 +1151,12 @@ class KbqListOption {
         }
         this.changeDetector.markForCheck();
     }
-    /** @docs-private */
+    /**
+     * Rendered height of the element, or 0 when it is not laid out (SSR, jsdom, `display: none`).
+     * @docs-private
+     */
     getHeight() {
-        return this.elementRef.nativeElement.getClientRects()[0]?.height ?? 0;
+        return this.elementRef.nativeElement.getClientRects()?.[0]?.height ?? 0;
     }
     /** Handles click events on the list option. */
     handleClick($event) {
@@ -673,16 +1167,11 @@ class KbqListOption {
         // ctrlKey is for Windows, metaKey is for MacOS
         hasModifierKey($event, 'ctrlKey', 'metaKey'));
     }
+    /** Handles keydown events on the list option. */
     onKeydown($event) {
-        const actionButton = this.actionButton();
-        if (!actionButton) {
-            return;
-        }
-        if ($event.keyCode === TAB && !$event.shiftKey && !actionButton.hasFocus) {
-            actionButton.focus();
-            $event.preventDefault();
-        }
+        kbqFocusOptionActionOnTab($event, this.actionButton());
     }
+    /** Moves DOM focus to this option, unless it is disabled or already focused. */
     focus() {
         if (this.disabled || this.hasFocus || this.actionButton()?.hasFocus) {
             return;
@@ -694,6 +1183,7 @@ class KbqListOption {
             this.changeDetector.markForCheck();
         });
     }
+    /** Marks this option as blurred once the zone stabilizes, unless {@link preventBlur} is set. */
     blur() {
         if (this.preventBlur) {
             return;
@@ -715,18 +1205,20 @@ class KbqListOption {
             });
         });
     }
+    /** The option's host DOM element. */
     getHostElement() {
         return this.elementRef.nativeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqListOption, isStandalone: true, selector: "kbq-list-option", inputs: { checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", 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 }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { 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-disabled": "disabled", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton()?.active", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-list-option" }, providers: [
+    /** @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 }, 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": "selected", "attr.aria-disabled": "disabled || null", "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: "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"], ngImport: i0, template: "@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [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", dependencies: [{ 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOption, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-list-option', imports: [
+                        CdkDragPreview,
                         KbqPseudoCheckbox,
                         KbqActionContainer
                     ], providers: [
@@ -734,25 +1226,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqListOption }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-list-option',
+                        role: 'option',
                         '[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]': 'selected',
+                        '[attr.aria-disabled]': 'disabled || null',
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'disabled || null',
                         '(focusin)': 'focus()',
                         '(blur)': 'blur()',
                         '(click)': 'handleClick($event)',
                         '(keydown)': 'onKeydown($event)'
-                    }, exportAs: 'kbqListOption', preserveWhitespaces: false, template: "@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [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" }]
-        }], propDecorators: { actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTrigger: [{
+                    }, 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 }] }], text: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], textElement: [{
+            }], 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 }] }], value: [{
@@ -760,6 +1256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], draggable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showCheckbox: [{
                 type: Input
             }], selected: [{
@@ -767,15 +1266,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
 
-// todo пока не делаем, перенесено из материала, но у нас в доках таких простых списков нет.
+/**
+ * A plain, non-selectable list container.
+ *
+ * Intentionally carries no ARIA role: it is used both as a semantic list (consumers add
+ * `role="list"` themselves, as `kbq-file-upload` does) and as a purely visual grouping.
+ * For a selectable listbox use `kbq-list-selection` instead.
+ */
 class KbqList {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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-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-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-radius:var(--kbq-size-border-radius)}.kbq-list-item:is(.kbq-selected):has(+:is(.kbq-selected)),.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-item:is(.kbq-selected)+:is(.kbq-selected),.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}.kbq-list-item:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-item:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background);background:var(--kbq-list-default-container-background)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color)}.kbq-list-option .kbq-icon.kbq-empty{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)}.kbq-list-option .kbq-list-option-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);background:var(--kbq-list-states-hover-container-background)}.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)}.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)}.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)}.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)}.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-active:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-active-text-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-button-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-active-caption-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-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)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-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);background:var(--kbq-list-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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-selected:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-states-selected-active-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-button-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-states-selected-active-caption-color)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background);background:var(--kbq-list-states-disabled-container-background)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color)}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-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)}.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)}.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)}.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);background:var(--kbq-list-multiple-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-multiple-states-selected-active-text-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-button-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-active-caption-color)}.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{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{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)}\n", ".kbq-list,.kbq-list-selection{--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-xs);--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-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--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-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-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-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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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-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-radius:var(--kbq-size-border-radius)}.kbq-list-item:is(.kbq-selected):has(+:is(.kbq-selected)),.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-item:is(.kbq-selected)+:is(.kbq-selected),.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}.kbq-list-item:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-item:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-item:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background);background:var(--kbq-list-default-container-background)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color)}.kbq-list-option .kbq-icon.kbq-empty{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)}.kbq-list-option .kbq-list-option-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);background:var(--kbq-list-states-hover-container-background)}.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)}.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)}.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)}.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)}.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-active:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-active-text-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-active-icon-button-color)}.kbq-list-option.kbq-active:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:active:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-active-caption-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-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)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-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);background:var(--kbq-list-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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-selected:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-states-selected-active-text-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-active-icon-button-color)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-states-selected-active-caption-color)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background);background:var(--kbq-list-states-disabled-container-background)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color)}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-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)}.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)}.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)}.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);background:var(--kbq-list-multiple-states-selected-hover-container-background)}.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)}.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)}.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)}.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)}.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:not(.kbq-disabled).kbq-active .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-text{color:var(--kbq-list-multiple-states-selected-active-text-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-active-icon-button-color)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-active-caption-color)}.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{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{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)}\n", ".kbq-list,.kbq-list-selection{--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-xs);--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-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--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-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-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-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)}\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-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"] }]
         }] });
+/** A single row of a `kbq-list`. Non-selectable — see `kbq-list-option` for the selectable variant. */
 class KbqListItem {
     constructor() {
         this.elementRef = inject(ElementRef);
@@ -783,19 +1289,19 @@ class KbqListItem {
     ngAfterContentInit() {
         new KbqLineSetter(this.lines, this.elementRef);
     }
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
     handleFocus() {
         this.elementRef.nativeElement.classList.add('kbq-focused');
     }
     handleBlur() {
         this.elementRef.nativeElement.classList.remove('kbq-focused');
     }
-    getHostElement() {
-        return this.elementRef.nativeElement;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", 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',
@@ -808,8 +1314,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class KbqListModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqListModule, imports: [A11yModule,
+    /** @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,
+            // 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,
@@ -819,24 +1328,28 @@ class KbqListModule {
             KbqListSelection,
             KbqListItem,
             KbqListOption,
-            KbqListOptionCaption], exports: [KbqList,
+            KbqListOptionCaption], exports: [CdkDragHandle,
+            KbqList,
             KbqListSelection,
             KbqListItem,
             KbqListOption,
             KbqListOptionCaption,
             KbqOptionModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, imports: [A11yModule,
             KbqPseudoCheckboxModule,
             KbqOptionModule,
             KbqActionContainer,
             KbqIconModule,
             KbqListOption, KbqOptionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, decorators: [{
             type: NgModule,
             args: [{
                     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,
@@ -849,6 +1362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqListOptionCaption
                     ],
                     exports: [
+                        CdkDragHandle,
                         KbqList,
                         KbqListSelection,
                         KbqListItem,