@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-select.mjs

@@ -1,59 +1,141 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, inject, InjectionToken, ChangeDetectorRef, NgZone, Renderer2, ElementRef, DestroyRef, viewChild, contentChild, TemplateRef, QueryList, contentChildren, EventEmitter, output, numberAttribute, computed, signal, effect, afterNextRender, Input, Output, ContentChildren, ViewChildren, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
+import { inject, Renderer2, Injectable, ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, InjectionToken, ChangeDetectorRef, NgZone, Injector, ElementRef, DestroyRef, signal, viewChild, contentChild, viewChildren, TemplateRef, contentChildren, QueryList, computed, EventEmitter, output, numberAttribute, linkedSignal, untracked, effect, afterNextRender, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i1$1 from '@koobiq/components/core';
+import { KBQ_WINDOW, KbqOption, KbqAbstractSelect, getSelectAllState, runClearPredicate, KbqComponentColors, ErrorStateMatcher, KBQ_OVERLAY_LAYERS, KBQ_SELECT_SCROLL_STRATEGY, KbqLocaleOverridesDirective, KBQ_SELECT_LOCALE_CONFIGURATION, KbqErrorStateTracker, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectFooter, kbqQueryListFrom, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, getKbqSelectNonFunctionValueError, kbqSelectAllHandlerTransform, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, KBQ_A11Y_LOCALE_CONFIGURATION, getKbqSelectDynamicMultipleError, toggleSelectAll, KbqSelectAllEvent, isUndefined, kbqGetElementHeight, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, runCompareWith, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, KbqPseudoCheckbox, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqOptionModule, KbqSelectFooterItem } from '@koobiq/components/core';
+import { SizeXxs } from '@koobiq/design-tokens';
 import * as i1 from '@koobiq/components/progress-spinner';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
-import { KbqOption, KBQ_WINDOW, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getSelectAllState, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, ruRULocaleData, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, toggleSelectAll, KbqSelectAllEvent, isUndefined, kbqGetElementHeight, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, runCompareWith, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, kbqSelectAnimations, KbqPseudoCheckbox, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqOptionModule, KbqSelectFooterItem } from '@koobiq/components/core';
+import { Platform, _getEventTarget, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { Subscription, throttleTime, Subject, defer, merge, EMPTY, BehaviorSubject, fromEvent } from 'rxjs';
-import { debounceTime, switchMap, startWith, take, filter, map, delay, distinctUntilChanged, auditTime, takeUntil } from 'rxjs/operators';
+import { debounceTime, switchMap, startWith, filter, map, delay, distinctUntilChanged, take, takeUntil, auditTime } from 'rxjs/operators';
 import { InteractivityChecker, CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
-import { OverlayContainer, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { OverlayContainer, CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { NgTemplateOutlet } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { KBQ_FORM_FIELD, KbqCleaner, KbqFormFieldControl, kbqCleanerFactoryProvider, KbqFormFieldModule } from '@koobiq/components/form-field';
-import * as i1$1 from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import { KbqTag, KbqTagsModule } from '@koobiq/components/tags';
-import { SizeXxs } from '@koobiq/design-tokens';
+import { KBQ_SCROLLBAR_OPTIONS, KbqScrollbarViewport } from '@koobiq/components/scrollbar';
+import { KbqTag, KbqTagRemove, KbqTagsModule } from '@koobiq/components/tags';
+
+/** Class that reveals the "+N" counter the matcher reserves room for. */
+const KBQ_SELECT_HIDDEN_TEXT_VISIBLE_CLASS = 'kbq-select__match-hidden-text_visible';
+/**
+ * Measures how much room the selected values take in a multiple select's trigger.
+ *
+ * Provided by the select rather than injected globally: it writes into (and reads back from) that
+ * select's own trigger element. Kept apart from the component because it is pure DOM geometry with no
+ * bearing on the select's state — and because the two measurements it makes have to share a single
+ * layout pass, which is easy to lose sight of when they live among the component's other concerns.
+ *
+ * @docs-private
+ */
+class KbqSelectHiddenItemsMeasurer {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.window = inject(KBQ_WINDOW);
+    }
+    /**
+     * Measures the trigger against two layouts: one without the "+N" counter and one with it.
+     *
+     * Both clones are attached before either is read, so the browser resolves layout once for the pair
+     * instead of once per clone.
+     *
+     * @param trigger Trigger element of the select, used both as the source of the clones and as their host.
+     */
+    measure(trigger) {
+        const withoutCounter = this.buildTriggerClone(trigger);
+        const withCounter = this.buildTriggerClone(trigger);
+        withoutCounter.querySelector('.kbq-select__match-hidden-text')?.remove();
+        const counter = withCounter.querySelector('.kbq-select__match-hidden-text');
+        if (counter) {
+            this.renderer.addClass(counter, KBQ_SELECT_HIDDEN_TEXT_VISIBLE_CLASS);
+        }
+        this.renderer.appendChild(trigger, withoutCounter);
+        this.renderer.appendChild(trigger, withCounter);
+        let totalItemsWidth = 0;
+        let totalVisibleItemsWidth = 0;
+        let visibleItems = 0;
+        withoutCounter.querySelectorAll('kbq-tag').forEach((item) => {
+            totalItemsWidth += this.getItemWidth(item);
+        });
+        withCounter.querySelectorAll('kbq-tag').forEach((item) => {
+            if (item.offsetTop < item.offsetHeight) {
+                totalVisibleItemsWidth += this.getItemWidth(item);
+                visibleItems++;
+            }
+        });
+        withoutCounter.remove();
+        withCounter.remove();
+        return { totalItemsWidth, totalVisibleItemsWidth, visibleItems };
+    }
+    /**
+     * Calculates the width of a single item including margins.
+     *
+     * The elements measured here are `kbq-tag`s, which are `border-box` and carry horizontal
+     * padding. `getComputedStyle().width` resolves to the used content-box width whatever
+     * `box-sizing` says, so it dropped that padding from every tag and the matcher believed more
+     * tags fit than actually do. `getBoundingClientRect()` is always the border box — the same fix
+     * `kbqGetPanelWidthOrigin()` carries.
+     */
+    getItemWidth(element) {
+        const { marginLeft, marginRight } = this.window.getComputedStyle(element);
+        return (element.getBoundingClientRect().width +
+            (parseFloat(marginLeft) || 0) +
+            (parseFloat(marginRight) || 0) +
+            parseInt(SizeXxs));
+    }
+    /** Creates a hidden clone of the trigger element, positioned so that it cannot affect the layout. */
+    buildTriggerClone(trigger) {
+        const triggerClone = trigger.cloneNode(true);
+        this.renderer.setStyle(triggerClone, 'position', 'absolute');
+        this.renderer.setStyle(triggerClone, 'visibility', 'hidden');
+        this.renderer.setStyle(triggerClone, 'top', '-100%');
+        this.renderer.setStyle(triggerClone, 'left', '0');
+        this.renderer.setStyle(triggerClone, 'max-width', '100%');
+        return triggerClone;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectHiddenItemsMeasurer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectHiddenItemsMeasurer }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectHiddenItemsMeasurer, decorators: [{
+            type: Injectable
+        }] });
 
 class KbqSelectLoading {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectLoading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectLoading, isStandalone: true, selector: "kbq-select-loading, [kbq-select-loading]", host: { classAttribute: "kbq-select-loading" }, exportAs: ["kbqSelectLoading"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectLoading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSelectLoading, isStandalone: true, selector: "kbq-select-loading, [kbq-select-loading]", host: { classAttribute: "kbq-select-loading" }, exportAs: ["kbqSelectLoading"], ngImport: i0, template: `
+        <!-- Scoped styles rather than the global layout utilities: the fallback has to look right in an
+             application that does not ship them. -->
         <ng-content select="kbq-progress-spinner">
-            <div class="layout-row layout-margin-top-4xl layout-margin-bottom-4xl layout-align-center-center">
+            <div class="kbq-select-loading__spinner">
                 <kbq-progress-spinner [mode]="'indeterminate'" />
             </div>
         </ng-content>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i1.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".kbq-select-loading__spinner{display:flex;align-items:center;justify-content:center;margin-top:var(--kbq-size-4xl);margin-bottom:var(--kbq-size-4xl)}\n"], dependencies: [{ kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i1.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectLoading, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'kbq-select-loading, [kbq-select-loading]',
-                    imports: [
+            args: [{ selector: 'kbq-select-loading, [kbq-select-loading]', imports: [
                         KbqProgressSpinnerModule
-                    ],
-                    template: `
+                    ], template: `
+        <!-- Scoped styles rather than the global layout utilities: the fallback has to look right in an
+             application that does not ship them. -->
         <ng-content select="kbq-progress-spinner">
-            <div class="layout-row layout-margin-top-4xl layout-margin-bottom-4xl layout-align-center-center">
+            <div class="kbq-select-loading__spinner">
                 <kbq-progress-spinner [mode]="'indeterminate'" />
             </div>
         </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-select-loading'
-                    },
-                    exportAs: 'kbqSelectLoading'
-                }]
+                    }, exportAs: 'kbqSelectLoading', styles: [".kbq-select-loading__spinner{display:flex;align-items:center;justify-content:center;margin-top:var(--kbq-size-4xl);margin-bottom:var(--kbq-size-4xl)}\n"] }]
         }] });
 /**
  * This component renders the error for a Select component.
@@ -63,14 +145,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 class KbqSelectError {
     constructor() {
         /** Indicates whether styles for pagination controls should be used. */
-        this.paging = input(false, ...(ngDevMode ? [{ debugName: "paging", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.paging = input(false, { ...(ngDevMode ? { debugName: "paging" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqSelectError, isStandalone: true, selector: "kbq-select-error, [kbq-select-error]", inputs: { paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-select-error_default": "!paging()", "class.kbq-select-error_paging": "paging()" }, classAttribute: "kbq-select-error" }, exportAs: ["kbqSelectError"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqSelectError, isStandalone: true, selector: "kbq-select-error, [kbq-select-error]", inputs: { paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-select-error_default": "!paging()", "class.kbq-select-error_paging": "paging()" }, classAttribute: "kbq-select-error" }, exportAs: ["kbqSelectError"], ngImport: i0, template: `
         <ng-content />
-    `, isInline: true, styles: [":host{display:flex;flex-direction:column}:host.kbq-select-error_default{align-items:center;justify-content:center;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl)}:host.kbq-select-error_paging{justify-content:start}:host.kbq-select-error_paging ::ng-deep .kbq-select-error__text{padding-left:var(--kbq-size-l)}::ng-deep .kbq-select-error__text{margin-top:var(--kbq-size-xs);margin-bottom:var(--kbq-size-3xs);color:var(--kbq-foreground-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [":host{display:flex;flex-direction:column}:host.kbq-select-error_default{align-items:center;justify-content:center;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl)}:host.kbq-select-error_paging{justify-content:start}:host.kbq-select-error_paging ::ng-deep .kbq-select-error__text{padding-left:var(--kbq-size-l)}:host ::ng-deep .kbq-select-error__text{margin-top:var(--kbq-size-xs);margin-bottom:var(--kbq-size-3xs);color:var(--kbq-foreground-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectError, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select-error, [kbq-select-error]', template: `
         <ng-content />
@@ -78,16 +160,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-select-error',
                         '[class.kbq-select-error_default]': '!paging()',
                         '[class.kbq-select-error_paging]': 'paging()'
-                    }, exportAs: 'kbqSelectError', styles: [":host{display:flex;flex-direction:column}:host.kbq-select-error_default{align-items:center;justify-content:center;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl)}:host.kbq-select-error_paging{justify-content:start}:host.kbq-select-error_paging ::ng-deep .kbq-select-error__text{padding-left:var(--kbq-size-l)}::ng-deep .kbq-select-error__text{margin-top:var(--kbq-size-xs);margin-bottom:var(--kbq-size-3xs);color:var(--kbq-foreground-error)}\n"] }]
+                    }, exportAs: 'kbqSelectError', styles: [":host{display:flex;flex-direction:column}:host.kbq-select-error_default{align-items:center;justify-content:center;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl)}:host.kbq-select-error_paging{justify-content:start}:host.kbq-select-error_paging ::ng-deep .kbq-select-error__text{padding-left:var(--kbq-size-l)}:host ::ng-deep .kbq-select-error__text{margin-top:var(--kbq-size-xs);margin-bottom:var(--kbq-size-3xs);color:var(--kbq-foreground-error)}\n"] }]
         }], propDecorators: { paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }] } });
 /**
  * Marks an element as the error text container for a *KbqSelect* component.
  */
 class KbqSelectErrorText {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectErrorText, isStandalone: true, selector: "[kbq-select-error-text]", host: { classAttribute: "kbq-select-error__text" }, exportAs: ["kbqSelectErrorText"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSelectErrorText, isStandalone: true, selector: "[kbq-select-error-text]", host: { classAttribute: "kbq-select-error__text" }, exportAs: ["kbqSelectErrorText"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectErrorText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectErrorText, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-select-error-text]',
@@ -101,12 +183,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Component that represents the empty state of a select dropdown.
  */
 class KbqSelectNoOptions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectNoOptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectNoOptions, isStandalone: true, selector: "kbq-select-no-options, [kbq-select-no-options]", host: { classAttribute: "kbq-select-no-options" }, exportAs: ["kbqSelectNoOptions"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectNoOptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSelectNoOptions, isStandalone: true, selector: "kbq-select-no-options, [kbq-select-no-options]", host: { classAttribute: "kbq-select-no-options" }, exportAs: ["kbqSelectNoOptions"], ngImport: i0, template: `
         <ng-content />
     `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--kbq-size-3xl);padding-top:var(--kbq-size-3xl);color:var(--kbq-foreground-contrast-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectNoOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectNoOptions, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select-no-options, [kbq-select-no-options]', template: `
         <ng-content />
@@ -152,20 +234,32 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
         this.resizeSubscription = Subscription.EMPTY;
         this.contentObserverSubscription = Subscription.EMPTY;
         this.focusMonitorSubscription = Subscription.EMPTY;
+        /**
+         * Overrides the tooltip's hoverable default. The overflow hint floats over the neighbouring options of a
+         * scrolling list, so a pointer-capturing pane would swallow the click that selects them.
+         */
+        this.ignoreTooltipPointerEvents = input(true, ...(ngDevMode ? [{ debugName: "ignoreTooltipPointerEvents" }] : /* istanbul ignore next */ []));
+        /**
+         * The hint repeats text the option had to clip, so `kbqTooltipDisabled="false"` cannot conjure one for an
+         * option that fits.
+         *
+         * @docs-private
+         */
+        this.derivedDisabledWins = true;
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.content = this.option.viewValue;
-        this.disabled = !this.isOverflown;
+        this.setDerivedDisabled(!this.isOverflown);
         this.resizeSubscription = this.resizeObserver
             .observe(this.textElement)
             .pipe(debounceTime(this.debounceInterval))
-            .subscribe(() => (this.disabled = !this.isOverflown));
+            .subscribe(() => this.setDerivedDisabled(!this.isOverflown));
         this.contentObserverSubscription = this.contentObserver
             .observe(this.textElement)
             .pipe(throttleTime(this.debounceInterval))
             .subscribe(() => {
-            this.disabled = !this.isOverflown;
+            this.setDerivedDisabled(!this.isOverflown);
             this.content = this.option.viewValue;
         });
         this.focusMonitorSubscription = this.focusMonitor
@@ -179,15 +273,15 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
         super.ngOnDestroy();
     }
     handleElementEnter() {
-        this.disabled = !this.isOverflown;
+        this.setDerivedDisabled(!this.isOverflown);
     }
     handleElementLeave() {
-        this.disabled = true;
+        this.setDerivedDisabled(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", host: { listeners: { "mouseenter": "handleElementEnter()", "mouseleave": "handleElementLeave()" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqOptionTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", inputs: { ignoreTooltipPointerEvents: { classPropertyName: "ignoreTooltipPointerEvents", publicName: "ignoreTooltipPointerEvents", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleElementEnter()", "mouseleave": "handleElementLeave()" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqOptionTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-option',
@@ -196,7 +290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '(mouseleave)': 'handleElementLeave()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { ignoreTooltipPointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreTooltipPointerEvents", required: false }] }] } });
 
 let nextUniqueId = 0;
 /** Marks a footer control the consumer has disabled without the `disabled` attribute, which an `a` cannot carry. */
@@ -223,187 +317,59 @@ const delayBeforeDisplayingResultWithoutOptions = 101;
 /** Minimum time in milliseconds to display the loading state. */
 const minimumTimeToDisplayLoading = 300;
 class KbqSelect extends KbqAbstractSelect {
-    /**
-     * Controls when the search functionality is displayed based on the number of available options.
-     *
-     * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
-     * @default undefined
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set searchMinOptionsThreshold(value) {
-        this._searchMinOptionsThreshold =
-            this.resolveSearchMinOptionsThreshold(value) ??
-                this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
-    }
-    get searchMinOptionsThreshold() {
-        return this._searchMinOptionsThreshold;
-    }
-    /**
-     * Whether the overlay should have a backdrop.
-     * When true, clicking the backdrop will close the select.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get hasBackdrop() {
-        return this._hasBackdrop;
+    /** Reference to the CDK connected overlay directive. */
+    get overlayDir() {
+        return this.overlayDirQuery();
     }
-    set hasBackdrop(value) {
-        this._hasBackdrop = coerceBooleanProperty(value);
+    /** Query list of tags displayed in multiple selection mode. */
+    get tags() {
+        return this.tagsList();
     }
-    /**
-     * Placeholder text to be shown when no value is selected.
-     * Displayed in the trigger when the select is closed and no value is selected.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
+    /** All of the defined select options. */
+    get options() {
+        return this.optionsList();
     }
-    /**
-     * Whether the select is required. Affects validation and display of placeholder.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get required() {
-        return this._required;
+    /** Rendered hidden items counter. */
+    get hiddenItemsLabel() {
+        const template = this.hiddenItemsText() ?? this.localeConfiguration().hiddenItemsText;
+        return this.hiddenItemsTextFormatter()(template, this.hiddenItems());
     }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
+    /** Label of the "select all" row. Follows the active locale. */
+    get selectAllText() {
+        return this.localeConfiguration().selectAll;
     }
     /**
      * Whether multiple options can be selected.
      * Note: This cannot be changed dynamically after initialization.
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get multiple() {
-        return this._multiple;
-    }
-    set multiple(value) {
-        if (this.selectionModel) {
-            throw getKbqSelectDynamicMultipleError();
-        }
-        this._multiple = value;
-    }
-    /**
-     * Function to compare the option values with the selected values.
-     * The first argument is a value from an option.
-     * The second is a value from the selection.
-     * Should return true if the values match.
-     * Defaults to strict equality comparison.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get compareWith() {
-        return this._compareWith;
-    }
-    set compareWith(fn) {
-        if (typeof fn !== 'function') {
-            throw getKbqSelectNonFunctionValueError();
-        }
-        this._compareWith = fn;
-        if (this.selectionModel) {
-            // A different comparator means the selection could change.
-            this.initializeSelection();
-        }
+        return this.multipleValue ?? this.multipleInput();
     }
     /**
      * Function for handling the Ctrl + A (select all) keyboard combination.
      * By default, the internal handler selects all options.
-     * @param event The keyboard event that triggered the handler.
-     * @param select Reference to this select component.
+     * It is called with the keyboard event that triggered it and a reference to this select component.
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get selectAllHandler() {
-        return this._selectAllHandler;
-    }
-    set selectAllHandler(fn) {
-        if (typeof fn !== 'function') {
-            throw Error('`selectAllHandler` must be a function.');
-        }
-        this._selectAllHandler = fn;
-    }
-    /** Value of the select control. Can be a single value or array of values for multiple selection. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if (newValue !== this._value) {
-            this.writeValue(newValue);
-            this._value = newValue;
-        }
+        return this.selectAllHandlerInput() ?? this.defaultSelectAllHandler;
     }
-    /**
-     * Unique identifier for the select component.
-     * Auto-generates an ID if not provided.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this.uid;
-        this.stateChanges.next();
-    }
-    /**
-     * Sets the tabIndex of the select element.
-     * Automatically set to -1 when disabled.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
-        return this.disabled ? -1 : this._tabIndex;
-    }
-    set tabIndex(value) {
-        this._tabIndex = value;
+        return this.resolvedTabIndex();
     }
-    /**
-     * Whether the select is disabled.
-     * When disabled, the select cannot be opened and its value cannot be changed.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-            if (this.parentFormField) {
-                Promise.resolve().then(() => {
-                    if (this._disabled) {
-                        this.parentFormField.stopFocusMonitor();
-                    }
-                    else {
-                        this.parentFormField.runFocusMonitor();
-                    }
-                });
-            }
-            // Let the parent form field know to run change detection when the disabled state changes.
-            this.stateChanges.next();
-        }
+    /** Whether the select panel is currently open. */
+    get panelOpen() {
+        return this.panelOpenValue();
     }
-    /** Whether the select is focused. */
-    get focused() {
-        return this._focused || this.panelOpen;
-    }
-    set focused(value) {
-        this._focused = value;
+    set panelOpen(value) {
+        this.panelOpenValue.set(value);
     }
     /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
     get isAttached() {
         return this.panelOpen;
     }
+    get scrollbarMode() {
+        return this.withVirtualScroll ? 'native' : this.scrollbarOptions.mode;
+    }
     /** Whether the search returned no results. */
     get isEmptySearchResult() {
         const search = this.search();
@@ -456,11 +422,31 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /**
      * Whether the cleaner (clear button) should be shown.
+     *
      * @docs-private
      */
     get canShowCleaner() {
         return !!this.cleaner()?.canShow;
     }
+    /**
+     * Whether the cleaner still has an option to remove.
+     *
+     * @docs-private
+     */
+    get canClear() {
+        return !!this.selectionModel?.selected.some((option) => this.shouldClear(option));
+    }
+    /** Selected options the cleaner removes, in selection order. */
+    get clearTargets() {
+        return this.selectionModel?.selected.filter((option) => this.shouldClear(option)) ?? [];
+    }
+    /**
+     * Passes the resolved option, so a view recycled by `cdk-virtual-scroll` cannot answer for another
+     * item.
+     */
+    shouldClear(option) {
+        return runClearPredicate(this.clearPredicate(), this.resolveSelectedOption(option));
+    }
     /** Returns the currently selected option(s). Single value or array for multiple selection. */
     get selected() {
         const selected = this.selectionModel.selected;
@@ -470,24 +456,36 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Returns the display value for the trigger element. */
     get triggerValue() {
-        if (this.empty)
+        if (this.empty())
             return '';
         return this.resolveSelectedOption(this.selectionModel.selected[0]).viewValue;
     }
     /** Returns all selected options in display order. */
     get triggerValues() {
-        if (this.empty) {
+        if (this.empty()) {
             return [];
         }
+        // `map` also makes the copy that the in-place `reverse()` below needs: `SelectionModel.selected`
+        // is memoised by CDK, and reversing it would reorder the selection itself.
         const selectedOptions = this.selectionModel.selected.map((option) => this.resolveSelectedOption(option));
         if (this.isRtl()) {
             selectedOptions.reverse();
         }
         return this.triggerValuesLimit() > 0 ? selectedOptions.slice(0, this.triggerValuesLimit()) : selectedOptions;
     }
-    /** Whether no option is currently selected. */
-    get empty() {
-        return !!this.selectionModel?.isEmpty();
+    /**
+     * Whether the tag at `index` is one the trigger actually shows.
+     *
+     * The trigger renders every selected value and clips the overflow with `overflow: hidden`, so a tag
+     * that wrapped past the single line is still in the DOM. Its remove control has to leave the tab order
+     * with it, or focus lands on something the user cannot see — and the browser scrolls the clipped list
+     * to reveal it, shifting the row that is on screen.
+     *
+     * @docs-private
+     */
+    isTriggerValueVisible(index) {
+        const visibleTriggerItems = this.visibleTriggerItems();
+        return visibleTriggerItems === null || index < visibleTriggerItems;
     }
     /** Whether there are no options available. */
     get noOptions() {
@@ -505,69 +503,115 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** @docs-private */
     get colorForState() {
-        if (this.disabled)
+        if (this.disabled())
             return KbqComponentColors.Empty;
-        return this.invalidState() ? KbqComponentColors.Error : KbqComponentColors.ContrastFade;
+        return this.errorState() ? KbqComponentColors.Error : KbqComponentColors.ContrastFade;
     }
     /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */
     get multiSelection() {
         return this.multiple || this.multiline();
     }
+    /**
+     * Id of the `kbq-form-field` label naming this select, when it has one.
+     *
+     * A `<label for>` does not associate with a custom element, so the relationship is expressed the
+     * other way around — from the control to the label.
+     *
+     * @docs-private
+     */
+    get ariaLabelledby() {
+        return this.parentFormField?.labelId() ?? null;
+    }
+    /**
+     * Accessible name put on the trigger and on the option list.
+     *
+     * Both a `combobox` and a `listbox` are required to have one, and neither takes its name from its
+     * contents — the placeholder is rendered as a plain `<span>`, so it names nothing. Falling back to it
+     * keeps the ordinary label-less select named. A form-field label still wins: it names the select
+     * through `aria-labelledby`, which takes precedence over `aria-label`.
+     *
+     * @docs-private
+     */
+    get resolvedAriaLabel() {
+        return this.resolvedAriaLabelValue();
+    }
+    /**
+     * Whether the option list is currently showing something other than options — the loading, error or
+     * empty state, or an empty search result.
+     *
+     * The same container is both the `listbox` and the projection target for those states, and a `listbox`
+     * is required to own `option` children. `aria-busy` says the list is still being filled in rather than
+     * malformed, and keeps it from being announced as an option list with nothing in it.
+     *
+     * @docs-private
+     */
+    get isOptionsListBusy() {
+        return this.noOptions && !this.showSelectAll;
+    }
     constructor() {
         super();
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._ngZone = inject(NgZone);
-        this._renderer = inject(Renderer2);
+        this.injector = inject(Injector);
+        this.hiddenItemsMeasurer = inject(KbqSelectHiddenItemsMeasurer);
         this.interactivityChecker = inject(InteractivityChecker);
         this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
         this.elementRef = inject(ElementRef);
         this.overlayContainer = inject(OverlayContainer);
+        this.overlayLayers = inject(KBQ_OVERLAY_LAYERS);
         this._dir = inject(Directionality, { optional: true });
         this.parentForm = inject(NgForm, { optional: true });
         this.parentFormGroup = inject(FormGroupDirective, { optional: true });
         this.parentFormField = inject(KBQ_FORM_FIELD, { host: true, optional: true });
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this.scrollStrategyFactory = inject(KBQ_SELECT_SCROLL_STRATEGY);
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.carrier = inject(KbqLocaleOverridesDirective, { self: true });
+        /** Localized strings of the select, following the active locale. */
+        this.localeConfiguration = this.carrier.read('select', KBQ_SELECT_LOCALE_CONFIGURATION);
         /** @docs-private */
         this.destroyRef = inject(DestroyRef);
         this.isBrowser = inject(Platform).isBrowser;
         this.defaultOptions = inject(KBQ_SELECT_OPTIONS, { optional: true });
+        this.scrollbarOptions = inject(KBQ_SCROLLBAR_OPTIONS);
+        this.errorStateTracker = new KbqErrorStateTracker(this.defaultErrorStateMatcher, this.ngControl, this.parentFormGroup, this.parentForm);
         /** Whether the component is in an error state. */
-        this.errorState = false;
-        /**
-         * Emits whenever the component state changes and should cause the parent
-         * form-field to update. Implemented as part of `KbqFormFieldControl`.
-         * @docs-private
-         */
-        this.stateChanges = new Subject();
+        this.errorState = this.errorStateTracker.errorState;
         /** A name for this control that can be used by `kbq-form-field`. */
         this.controlType = 'select';
-        this.hiddenItems = 0;
+        /**
+         * A `kbq-select` is not a native labelable element, so the form-field's `<label for>` cannot
+         * associate with it. The select is named through `aria-labelledby` instead.
+         */
+        this.isNativeLabelSupported = false;
+        this.hiddenItemsCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenItemsCount" }] : /* istanbul ignore next */ []));
+        /** Number of the selected items that do not fit into the trigger. */
+        this.hiddenItems = this.hiddenItemsCount.asReadonly();
+        /**
+         * How many of the rendered tags stay on the trigger's single line.
+         *
+         * `null` while the answer is unknown — the trigger has not been measured yet, or the measurement found
+         * no tag on the first line at all, which a laid-out trigger never does and so means there was no layout
+         * to measure. Both cases leave every tag treated as visible.
+         */
+        this.visibleTriggerItems = signal(null, ...(ngDevMode ? [{ debugName: "visibleTriggerItems" }] : /* istanbul ignore next */ []));
         /** The cached font-size of the trigger element in pixels. */
         this.triggerFontSize = 0;
         /** Previously selected options before the current selection was made. */
         this.previousSelectionModelSelected = [];
+        /** Whether the selection is being set to a written value, which is no selection of the user. */
+        this.writingValue = false;
         /**
          * Detached copies of the selected options, captured while the option was still rendered.
          * `cdk-virtual-scroll` recycles option views, so a `KbqOption` kept in `selectionModel` can
          * silently start carrying another item's value and label — the copy preserves the original ones.
          */
         this.selectedOptionCopies = new WeakMap();
-        /** The value of the select panel's transform-origin property for animations. */
+        /** The value of the select panel's transform-origin property. */
         this.transformOrigin = 'top';
-        /** Emits when the panel element is finished transforming in. */
+        /** Emits once the panel has rendered (`'showing'`) or has been removed (`'void'`). */
         this.panelDoneAnimatingStream = new Subject();
         /** Strategy that will be used to handle scrolling while the select panel is open. */
         this.scrollStrategy = this.scrollStrategyFactory();
-        /**
-         * The y-offset of the overlay panel in relation to the trigger.
-         *
-         * @deprecated noop. The trigger↔panel gap is now controlled by the `--kbq-connected-overlay-gap` CSS
-         * variable (transparent padding inside the pane via the `kbq-connected-overlay_below/_above` panel
-         * classes), not by a physical overlay offset — so setting this has no effect. Will be removed in 21.0.0.
-         */
-        this.offsetY = 0;
         /**
          * Minimum space to keep between the overlay and the viewport edge.
          * At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above`
@@ -600,30 +644,41 @@ class KbqSelect extends KbqAbstractSelect {
         /**
          * Trigger - is a clickable field to open select dropdown panel
          */
-        this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+        this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         /** Reference to the overlay panel element. */
-        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
         /** Reference to the container element that holds the options. */
         this.optionsContainer = viewChild.required('optionsContainer');
+        this.scrollbarViewport = viewChild(KbqScrollbarViewport, ...(ngDevMode ? [{ debugName: "scrollbarViewport" }] : /* istanbul ignore next */ []));
+        // Virtual scroll projects its own viewport, which is the actual scrolling element.
+        this.projectedScrollbarViewport = contentChild(KbqScrollbarViewport, { ...(ngDevMode ? { debugName: "projectedScrollbarViewport" } : /* istanbul ignore next */ {}), descendants: true });
         /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
-        this.selectAllOption = viewChild(KbqOption, ...(ngDevMode ? [{ debugName: "selectAllOption" }] : []));
+        this.selectAllOption = viewChild(KbqOption, ...(ngDevMode ? [{ debugName: "selectAllOption" }] : /* istanbul ignore next */ []));
+        this.overlayDirQuery = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlayDirQuery" }] : /* istanbul ignore next */ []));
         /** Reference to the optional footer element in the panel. */
-        this.footer = contentChild(KbqSelectFooter, ...(ngDevMode ? [{ debugName: "footer", read: ElementRef }] : [{ read: ElementRef }]));
+        this.footer = contentChild(KbqSelectFooter, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), read: ElementRef });
         /** Reference to the CDK virtual scroll directive for virtual scrolling support. */
-        this.cdkVirtualForOf = contentChild(CdkVirtualForOf, ...(ngDevMode ? [{ debugName: "cdkVirtualForOf" }] : []));
+        this.cdkVirtualForOf = contentChild(CdkVirtualForOf, ...(ngDevMode ? [{ debugName: "cdkVirtualForOf" }] : /* istanbul ignore next */ []));
         /** Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode. */
-        this.virtualScrollViewport = contentChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "virtualScrollViewport" }] : []));
+        this.virtualScrollViewport = contentChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "virtualScrollViewport" }] : /* istanbul ignore next */ []));
+        this.tagsQuery = viewChildren(KbqTag, ...(ngDevMode ? [{ debugName: "tagsQuery" }] : /* istanbul ignore next */ []));
+        this.tagsList = kbqQueryListFrom(this.tagsQuery);
         /** User-supplied override of the trigger element for custom rendering. */
-        this.customTrigger = contentChild(KbqSelectTrigger, ...(ngDevMode ? [{ debugName: "customTrigger" }] : []));
+        this.customTrigger = contentChild(KbqSelectTrigger, ...(ngDevMode ? [{ debugName: "customTrigger" }] : /* istanbul ignore next */ []));
         /** User-supplied matcher component for custom value matching logic. */
-        this.customMatcher = contentChild(KbqSelectMatcher, ...(ngDevMode ? [{ debugName: "customMatcher" }] : []));
+        this.customMatcher = contentChild(KbqSelectMatcher, ...(ngDevMode ? [{ debugName: "customMatcher" }] : /* istanbul ignore next */ []));
         /** Custom template reference for rendering tag content. */
-        this.customTagTemplateRef = contentChild('kbqSelectTagContent', ...(ngDevMode ? [{ debugName: "customTagTemplateRef", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.customTagTemplateRef = contentChild('kbqSelectTagContent', { ...(ngDevMode ? { debugName: "customTagTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /**
          * Reference to the optional cleaner element for clearing selection.
+         *
          * @docs-private
          */
-        this.cleaner = contentChild(KbqCleaner, ...(ngDevMode ? [{ debugName: "cleaner", descendants: false }] : [{ descendants: false }]));
+        this.cleaner = contentChild(KbqCleaner, { ...(ngDevMode ? { debugName: "cleaner" } : /* istanbul ignore next */ {}), descendants: false });
+        this.optionsQuery = contentChildren(KbqOption, { ...(ngDevMode ? { debugName: "optionsQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.optionsList = kbqQueryListFrom(this.optionsQuery);
+        /** Whether `ngAfterContentInit` has run. The options are not settled before that, so nothing reads them. */
+        this.contentReady = false;
         /**
          * Everything the key manager navigates: the built-in "select all" row first, then `options`.
          *
@@ -631,48 +686,80 @@ class KbqSelect extends KbqAbstractSelect {
          * Kept as a separate list rather than folded into `options` because `options` is public API — the
          * filter-bar pipes, `firstFiltered` and the tallies below all mean "the options the consumer
          * projected", and a synthetic entry there would quietly corrupt every one of them.
+         *
          * @docs-private
          */
         this.navigableOptions = new QueryList();
         /** All of the defined groups of options. */
-        this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
+        this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
         /** Reference to the optional search component. */
-        this.search = contentChild(KbqSelectSearch, ...(ngDevMode ? [{ debugName: "search" }] : []));
+        this.search = contentChild(KbqSelectSearch, ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
         /** Reference to the optional empty search result component. */
-        this.searchEmpty = contentChild(KbqSelectSearchEmptyResult, ...(ngDevMode ? [{ debugName: "searchEmpty" }] : []));
-        /** Template string for hidden items text. Supports {{ number }} placeholder. */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.hiddenItemsText = '+{{ number }}';
-        /** Label of the "select all" row. Kept in step with the locale service. */
-        this.selectAllText = ruRULocaleData.select.selectAll;
+        this.searchEmpty = contentChild(KbqSelectSearchEmptyResult, ...(ngDevMode ? [{ debugName: "searchEmpty" }] : /* istanbul ignore next */ []));
+        /**
+         * Template string for the hidden items counter. Supports the `{{ number }}` placeholder.
+         *
+         * Takes precedence over the value the locale service provides, and keeps it for the whole lifetime of
+         * the select — switching the locale no longer overwrites what the consumer asked for.
+         */
+        this.hiddenItemsText = input(...(ngDevMode ? [undefined, { debugName: "hiddenItemsText" }] : /* istanbul ignore next */ []));
+        /**
+         * Formats the hidden items counter.
+         *
+         * @param hiddenItemsText Template string with the `{{ number }}` placeholder.
+         * @param hiddenItems Number of hidden items to display.
+         */
+        this.hiddenItemsTextFormatter = input((hiddenItemsText, hiddenItems) => hiddenItemsText.replace('{{ number }}', hiddenItems.toString()), ...(ngDevMode ? [{ debugName: "hiddenItemsTextFormatter" }] : /* istanbul ignore next */ []));
+        /**
+         * Accessible name of the trigger and of the option list.
+         *
+         * Only needed for a select rendered without a `kbq-form-field` label — with one, the label names both.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         /** Determines whether preselected values are displayed. */
-        this.showPreselectedValues = input(false, ...(ngDevMode ? [{ debugName: "showPreselectedValues" }] : []));
+        this.showPreselectedValues = input(false, ...(ngDevMode ? [{ debugName: "showPreselectedValues" }] : /* istanbul ignore next */ []));
         /**
          * Specifies the maximum number of trigger values allowed.
          * This constant limits the size of the trigger values array to ensure performance
          * and prevent excessive memory usage.
          * A value of `0` indicates that there is no limit.
          */
-        this.triggerValuesLimit = input(0, ...(ngDevMode ? [{ debugName: "triggerValuesLimit" }] : []));
+        this.triggerValuesLimit = input(0, ...(ngDevMode ? [{ debugName: "triggerValuesLimit" }] : /* istanbul ignore next */ []));
         /** Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding. */
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
         /** Classes to be passed to the overlay backdrop. */
-        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
+        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+        /** Object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
         /**
          * Function used to sort the values in a select in multiple mode.
          * Follows the same logic as `Array.prototype.sort`.
+         *
+         * Without one the values are emitted in panel order — the order the options are declared in, not the
+         * order they were picked in. A value whose option is not rendered (a `KbqVirtualOption` under virtual
+         * scroll or `showPreselectedValues`) has no place in that order and sorts after everything that has.
          */
-        this.sortComparator = input(undefined, ...(ngDevMode ? [{ debugName: "sortComparator" }] : []));
+        this.sortComparator = input(undefined, ...(ngDevMode ? [{ debugName: "sortComparator" }] : /* istanbul ignore next */ []));
         /**
          * Whether to use a multiline matcher or not. Default is false.
          * When true, allows multiple lines of text in the selected value display.
          */
-        this.multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this._searchMinOptionsThreshold = this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
+        this.multiline = input(false, { ...(ngDevMode ? { debugName: "multiline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Controls when the search functionality is displayed based on the number of available options.
+         *
+         * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
+         *
+         * Accepts `'auto'`, which resolves to `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD`; the getter therefore
+         * reports the resolved number, never `'auto'`. Defaults to `undefined`.
+         */
+        this.searchMinOptionsThreshold = computed(() => this.resolveSearchMinOptionsThreshold(this.searchMinOptionsThresholdInput()) ??
+            this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold), ...(ngDevMode ? [{ debugName: "searchMinOptionsThreshold" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.searchMinOptionsThresholdInput = input(undefined, { ...(ngDevMode ? { debugName: "searchMinOptionsThresholdInput" } : /* istanbul ignore next */ {}), alias: 'searchMinOptionsThreshold' });
         /** Combined stream of all of the child options' change events. */
         this.optionSelectionChanges = defer(() => {
-            if (this.options) {
+            if (this.contentReady) {
                 return merge(...this.options.map((option) => option.onSelectionChange), this.options.changes.pipe(switchMap((list) => list.length ? merge(...list.map((option) => option.onSelectionChange)) : EMPTY)), this.selectionModel.changed.pipe(startWith(null), switchMap(() => {
                     const optionsSet = new Set(this.options.toArray());
                     const virtualSelected = this.selectionModel.selected.filter((option) => !optionsSet.has(option));
@@ -681,8 +768,10 @@ class KbqSelect extends KbqAbstractSelect {
                         : EMPTY;
                 })));
             }
-            return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
+            return this.contentInitialized.pipe(switchMap(() => this.optionSelectionChanges));
         });
+        /** Emits once the content queries are resolved, for subscribers that arrive before `options` exist. */
+        this.contentInitialized = new Subject();
         /**
          * Event emitted when the select panel has been toggled. Emits true when opened, false when closed.
          * Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing
@@ -690,12 +779,18 @@ class KbqSelect extends KbqAbstractSelect {
          * `ngOnInit`) matters beyond this output's original consumers.
          */
         this.openedChange = new EventEmitter();
+        /** @docs-private */
+        this.openedChangeOutput = outputFromObservable(this.openedChange, { alias: 'openedChange' });
         /** Event emitted before the select panel starts opening. */
         this.beforeOpened = output();
         /** Event emitted when the select has been opened. */
         this.openedStream = this.openedChange.pipe(filter((o) => o), map(() => { }));
+        /** @docs-private */
+        this.openedOutput = outputFromObservable(this.openedStream, { alias: 'opened' });
         /** Event emitted when the select has been closed. */
         this.closedStream = this.openedChange.pipe(filter((o) => !o), map(() => { }));
+        /** @docs-private */
+        this.closedOutput = outputFromObservable(this.closedStream, { alias: 'closed' });
         /** Event emitted when the selected value has been changed by the user. */
         this.selectionChange = output();
         /**
@@ -706,6 +801,7 @@ class KbqSelect extends KbqAbstractSelect {
         /**
          * Event that emits whenever the raw value of the select changes. This is here primarily
          * to facilitate the two-way binding for the `value` input.
+         *
          * @docs-private
          */
         this.valueChange = output();
@@ -713,12 +809,39 @@ class KbqSelect extends KbqAbstractSelect {
          * Distance in pixels from the bottom of the options panel at which `scrolledToBottom` fires.
          * Default `0` — emits only when the panel is fully scrolled to the bottom.
          */
-        this.scrolledToBottomOffset = input(0, ...(ngDevMode ? [{ debugName: "scrolledToBottomOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.scrolledToBottomOffset = input(0, { ...(ngDevMode ? { debugName: "scrolledToBottomOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** Emits when the options panel is scrolled to (or within `scrolledToBottomOffset` of) the bottom. */
         this.scrolledToBottom = output();
-        this._hasBackdrop = false;
-        this._required = false;
-        this._multiple = false;
+        /**
+         * Whether the overlay should have a backdrop.
+         * When true, clicking the backdrop will close the select.
+         */
+        this.hasBackdrop = input(false, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Placeholder text to be shown when no value is selected.
+         * Displayed in the trigger when the select is closed and no value is selected.
+         */
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the select is required. Affects validation and display of placeholder.
+         */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple',
+            transform: booleanAttribute });
+        /**
+         * Function to compare the option values with the selected values.
+         * The first argument is a value from an option.
+         * The second is a value from the selection.
+         * Should return true if the values match.
+         * Defaults to strict equality comparison.
+         */
+        this.compareWith = input((o1, o2) => o1 === o2, { ...(ngDevMode ? { debugName: "compareWith" } : /* istanbul ignore next */ {}), transform: (fn) => {
+                if (typeof fn !== 'function') {
+                    throw getKbqSelectNonFunctionValueError();
+                }
+                return fn;
+            } });
         /**
          * Factory used to construct a `KbqVirtualOption` for selected values whose
          * `KbqOption` is not currently rendered (e.g. virtual scroll out of viewport,
@@ -729,12 +852,25 @@ class KbqSelect extends KbqAbstractSelect {
          * customise per-value `disabled` state or any future `KbqVirtualOption`
          * fields without adding new `@Input`s.
          *
-         * Defaults to `new KbqVirtualOption(value, this.disabled)`, which is correct
+         * Defaults to `new KbqVirtualOption(value, this.disabled())`, which is correct
          * for primitive values where `value` itself is the display label.
          */
-        this.virtualOptionFactory = input(...(ngDevMode ? [undefined, { debugName: "virtualOptionFactory" }] : []));
+        this.virtualOptionFactory = input(...(ngDevMode ? [undefined, { debugName: "virtualOptionFactory" }] : /* istanbul ignore next */ []));
+        /**
+         * Decides which selected options the projected `KbqCleaner` removes: return `true` to clear the
+         * option, `false` to keep it. Disabled options are kept by default. Bind a stable reference — a new
+         * function on every change detection re-runs the predicate over the whole selection.
+         *
+         * Not consulted by `writeValue` / `reset()`, which always clear everything.
+         */
+        this.clearPredicate = input(this.defaultOptions?.clearPredicate ?? ((option) => !option.disabled), { ...(ngDevMode ? { debugName: "clearPredicate" } : /* istanbul ignore next */ {}), transform: (fn) => {
+                if (typeof fn !== 'function') {
+                    throw Error('`clearPredicate` must be a function.');
+                }
+                return fn;
+            } });
         /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
-        this.selectAllToggle = input(false, ...(ngDevMode ? [{ debugName: "selectAllToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectAllToggle = input(false, { ...(ngDevMode ? { debugName: "selectAllToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether to render the "select all" master checkbox above the options. Multiple selection only.
          *
@@ -743,26 +879,29 @@ class KbqSelect extends KbqAbstractSelect {
          * matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox
          * never disagree (`selectAllToggle` is implied).
          */
-        this.selectAll = input(false, ...(ngDevMode ? [{ debugName: "selectAll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectAll = input(false, { ...(ngDevMode ? { debugName: "selectAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.selectAllHandlerInput = input(undefined, { ...(ngDevMode ? { debugName: "selectAllHandlerInput" } : /* istanbul ignore next */ {}), alias: 'selectAllHandler',
+            transform: kbqSelectAllHandlerTransform });
         /**
          * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
          * narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the
          * longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
          */
-        this.panelWidth = input(this.defaultOptions?.panelWidth ?? null, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+        this.panelWidth = input(this.defaultOptions?.panelWidth ?? null, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
         /**
          * Minimum width of the panel in pixels.
          * If minWidth is larger than window width, it will be ignored.
          */
         this.panelMinWidth = input(this.defaultOptions?.panelMinWidth === undefined
             ? KBQ_PANEL_DEFAULT_MIN_WIDTH
-            : this.defaultOptions.panelMinWidth, ...(ngDevMode ? [{ debugName: "panelMinWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+            : this.defaultOptions.panelMinWidth, { ...(ngDevMode ? { debugName: "panelMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
          * the panel narrower than the trigger, and never clamps an explicit `panelWidth`.
          * When null, the `--kbq-panel-size-width-max` token applies.
          */
-        this.panelMaxWidth = input(this.defaultOptions?.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, ...(ngDevMode ? [{ debugName: "panelMaxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.panelMaxWidth = input(this.defaultOptions?.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, { ...(ngDevMode ? { debugName: "panelMaxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * Maximum height of the panel's scrollable option list, in pixels. Applied as the
          * `--kbq-select-panel-size-max-height` custom property on the panel, so it also drives the pinned height
@@ -771,26 +910,75 @@ class KbqSelect extends KbqAbstractSelect {
          * The search field and the footer sit outside the scrollable area and add to the panel's total height.
          * When null, the token default (256px) applies.
          */
-        this.panelMaxHeight = input(this.defaultOptions?.panelMaxHeight === undefined ? null : this.defaultOptions.panelMaxHeight, ...(ngDevMode ? [{ debugName: "panelMaxHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.panelMaxHeight = input(this.defaultOptions?.panelMaxHeight === undefined ? null : this.defaultOptions.panelMaxHeight, { ...(ngDevMode ? { debugName: "panelMaxHeight" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * `panelMaxHeight` rendered as a CSS length for the `--kbq-select-panel-size-max-height` token.
          * A non-finite value (e.g. `null`) leaves the stylesheet default in place.
+         *
          * @docs-private
          */
-        this.panelMaxHeightToken = computed(() => kbqResolvePanelMaxHeightToken(this.panelMaxHeight()), ...(ngDevMode ? [{ debugName: "panelMaxHeightToken" }] : []));
-        this._tabIndex = 0;
-        this._disabled = false;
-        /** Whether the select panel is currently open. */
-        this.panelOpen = false;
-        this._focused = false;
+        this.panelMaxHeightToken = computed(() => kbqResolvePanelMaxHeightToken(this.panelMaxHeight()), ...(ngDevMode ? [{ debugName: "panelMaxHeightToken" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /**
+         * Value of the select control. Can be a single value or array of values for multiple selection. Follows
+         * `[value]`, the form control and the user's selection. A value set in code selects its options on the next
+         * change detection, without emitting `valueChange`.
+         */
+        this.value = linkedSignal(() => this.valueInput(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /**
+         * Unique identifier for the select component.
+         * Auto-generates an ID if not provided.
+         */
+        this.id = computed(() => this.idInput() || this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Sets the tabIndex of the select element.
+         * Automatically set to -1 when disabled.
+         */
+        /** @docs-private */
+        this.tabIndexInput = input(0, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+            transform: numberAttribute });
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         /**
-         * Whether the legacy `KbqValidateDirective` marks this control. The class it writes never changes
-         * after the host is created, so it is probed once instead of on every change detection pass.
+         * Whether the select is disabled.
+         * When disabled, the select cannot be opened and its value cannot be changed. Also set by the bound form
+         * control.
          */
-        this.hasLegacyValidateDirective = false;
-        // Mirror of the state the error colour is derived from. That state changes in `ngDoCheck`, while the
-        // parent is checked, and nothing marks this OnPush view for it — the signal is what repaints the trigger.
-        this.invalidState = signal(false, ...(ngDevMode ? [{ debugName: "invalidState" }] : []));
+        this.disabled = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        // One signal per host value. The host bindings of every select in a view run in that view's reactive consumer,
+        // where a signal read again by another binding costs a scan of everything the view has read.
+        this.resolvedTabIndex = computed(() => (this.disabled() ? -1 : this.tabIndexInput()), ...(ngDevMode ? [{ debugName: "resolvedTabIndex" }] : /* istanbul ignore next */ []));
+        this.resolvedAriaLabelValue = computed(() => this.ariaLabel() ?? (this.ariaLabelledby ? null : this.placeholder() || null), ...(ngDevMode ? [{ debugName: "resolvedAriaLabelValue" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.disabledAttribute = computed(() => this.disabled() || null, ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.disabledClass = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "disabledClass" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.invalidClass = computed(() => this.errorState(), ...(ngDevMode ? [{ debugName: "invalidClass" }] : /* istanbul ignore next */ []));
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
+        this.panelOpenValue = signal(false, ...(ngDevMode ? [{ debugName: "panelOpenValue" }] : /* istanbul ignore next */ []));
+        /** Whether the select is focused. */
+        this.focused = computed(() => this.focusedValue() || this.panelOpenValue(), ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.emptyValue = signal(false, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /** Whether no option is currently selected. */
+        this.empty = this.emptyValue.asReadonly();
+        /** `panelClass` flattened into a class string. */
+        this.customPanelClasses = computed(() => {
+            const panelClass = this.panelClass();
+            if (!panelClass)
+                return '';
+            if (typeof panelClass === 'string')
+                return panelClass;
+            if (Array.isArray(panelClass) || panelClass instanceof Set)
+                return [...panelClass].filter(Boolean).join(' ');
+            return Object.keys(panelClass)
+                .filter((key) => panelClass[key])
+                .join(' ');
+        }, ...(ngDevMode ? [{ debugName: "customPanelClasses" }] : /* istanbul ignore next */ []));
         /** Whether a "select all" batch is running, so the per-option changes propagate only once. */
         this.selectAllInProgress = false;
         /** Subscription to the close event of the overlay. */
@@ -801,82 +989,83 @@ class KbqSelect extends KbqAbstractSelect {
         this.scrollTop = 0;
         /** Unique id for this input. Auto-incremented for each instance. */
         this.uid = `kbq-select-${nextUniqueId++}`;
+        /**
+         * Id of the listbox the trigger owns, referenced by `aria-controls` while the panel is open.
+         *
+         * @docs-private
+         */
+        this.panelId = `${this.uid}-panel`;
         /** Subject that emits when the component visibility changes. */
         this.visibleChanges = new BehaviorSubject(false);
-        /** Flag indicating if the dropdown class has been added to the overlay container. */
-        this.classAddedToOverlayContainer = false;
-        /** `View -> model callback called when value changes` */
+        /** Accessible names of the controls the select renders itself. */
+        this.a11yLocaleConfiguration = this.carrier.read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        /**
+         * Called when the value changes. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onChange = () => { };
-        /** `View -> model callback called when select has been touched` */
-        this.onTouched = () => { };
         /**
-         * Calculates the number of hidden items in multiple selection mode.
-         * Updates the hiddenItems property and triggers change detection.
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
          */
-        this.calculateHiddenItems = () => {
-            if (!this.isBrowser ||
-                this.customTrigger() ||
-                this.customMatcher() ||
-                this.empty ||
-                !this.multiple ||
-                this.multiline())
-                return;
-            const totalItemsWidth = this.getTotalItemsWidthInMatcher();
-            const [totalVisibleItemsWidth, visibleItems] = this.getTotalVisibleItems();
-            this.hiddenItems = this.selected.length - visibleItems;
-            this._changeDetectorRef.detectChanges();
-            if (this.hiddenItems) {
-                const itemsCounter = this.trigger().nativeElement.querySelector('.kbq-select__match-hidden-text');
-                const matcherList = this.trigger().nativeElement.querySelector('.kbq-select__match-list');
-                if (!itemsCounter || !matcherList) {
-                    this._changeDetectorRef.markForCheck();
-                    return;
-                }
-                const itemsCounterShowed = itemsCounter.offsetTop < itemsCounter.offsetHeight;
-                const itemsCounterWidth = Math.floor(itemsCounter.getBoundingClientRect().width);
-                const matcherListWidth = Math.floor(matcherList.getBoundingClientRect().width);
-                const matcherWidth = matcherListWidth + (itemsCounterShowed ? itemsCounterWidth : 0);
-                if (itemsCounterShowed && totalItemsWidth < matcherWidth) {
-                    this.hiddenItems = 0;
-                    this._changeDetectorRef.detectChanges();
-                }
-                if (totalVisibleItemsWidth === matcherListWidth ||
-                    totalVisibleItemsWidth + itemsCounterWidth < matcherListWidth) {
-                    this._changeDetectorRef.markForCheck();
-                    return;
+        this.onTouched = () => { };
+        /** Calculates the number of hidden items in multiple selection mode and updates `hiddenItems`. */
+        this.calculateHiddenItems = () => untracked(() => this.measureHiddenItems());
+        // A different comparator means a different set of options can match the value.
+        let comparatorBound = false;
+        effect(() => {
+            this.compareWith();
+            untracked(() => {
+                if (comparatorBound && this.selectionModel)
+                    this.initializeSelection();
+                comparatorBound = true;
+            });
+        });
+        // The selection model is created with the multiplicity of the first binding and cannot follow a change.
+        effect(() => {
+            const multiple = this.multipleInput();
+            if (this.multipleValue !== undefined && multiple !== this.multipleValue) {
+                throw getKbqSelectDynamicMultipleError();
+            }
+        });
+        // A value bound or set in code selects its options, as long as it differs from the one the selection holds.
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value !== this.selectionValue) {
+                    this.applyValue(value);
                 }
+            });
+        });
+        // A disabled select reports no focus to its form field.
+        let wasDisabled = false;
+        effect(() => {
+            const disabled = this.disabled();
+            if (disabled === wasDisabled)
+                return;
+            wasDisabled = disabled;
+            const formField = this.parentFormField;
+            if (formField) {
+                Promise.resolve().then(() => this.disabled() ? formField.stopFocusMonitor() : formField.runFocusMonitor());
             }
-            this._changeDetectorRef.markForCheck();
-        };
-        /** Updates locale parameters from the locale service. */
-        this.updateLocaleParams = () => {
-            // A consumer-supplied locale (`KBQ_LOCALE_DATA`/`addLocale`) may predate the `select` section
-            // entirely, not just the `selectAll` key within it — guard the lookup itself, not just its fields.
-            const params = this.localeService?.getParams('select');
-            this.hiddenItemsText = params?.hiddenItemsText ?? this.hiddenItemsText;
-            this.selectAllText = params?.selectAll ?? ruRULocaleData.select.selectAll;
-            this._changeDetectorRef.markForCheck();
-        };
-        /** Comparison function to specify which option is displayed. Defaults to object equality. */
-        this._compareWith = (o1, o2) => o1 === o2;
-        this.localeService?.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.updateLocaleParams);
+        });
         // The "select all" row only exists while the panel is attached, so the key manager's list has to
         // be rebuilt whenever the view query resolves or drops it — `options.changes` alone never fires
         // for it.
         effect(() => {
             this.selectAllOption();
-            this.syncNavigableOptions();
+            // Untracked: the options are read here too, and their changes are handled by `options.changes`.
+            untracked(() => this.syncNavigableOptions());
         });
         if (this.ngControl) {
             // Note: we provide the value accessor through here, instead of
             // the `providers` to avoid running into a circular import.
             this.ngControl.valueAccessor = this;
         }
-        // Force setter to be called in case id was not specified.
-        this.id = this.id;
         afterNextRender(() => {
-            this.hasLegacyValidateDirective = this.elementRef.nativeElement.classList.contains('kbq-control_has-validate-directive');
-            this.syncInvalidState();
+            this.observeVisibility();
             if (this.multiple && !this.multiline()) {
                 merge(fromEvent(this.window, 'resize'), this.tags.changes)
                     .pipe(delay(0), debounceTime(50), takeUntilDestroyed(this.destroyRef))
@@ -886,11 +1075,14 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Lifecycle hook called after component initialization. Initializes selection model and subscriptions. */
     ngOnInit() {
+        this.multipleValue = this.multipleInput();
         this.selectionModel = new SelectionModel(this.multiSelection);
-        this.stateChanges.next();
-        // We need `distinctUntilChanged` here, because some browsers will
-        // fire the animation end event twice for the same animation. See:
-        // https://github.com/angular/angular/issues/24084
+        this.emptyValue.set(this.selectionModel.isEmpty());
+        this.selectionModel.changed
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.emptyValue.set(this.selectionModel.isEmpty()));
+        // Only the latest report of a frame is delivered, so a close and a reopen within one frame repeat the
+        // state delivered before; `distinctUntilChanged` keeps `openedChange` from emitting it twice.
         this.panelDoneAnimatingStream
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
@@ -900,13 +1092,17 @@ class KbqSelect extends KbqAbstractSelect {
                 if (search) {
                     search.focus();
                 }
+                this.scrollbarViewport()?.flashScrollIndicators();
+                this.projectedScrollbarViewport()?.flashScrollIndicators();
                 this.openedChange.emit(true);
             }
             else {
                 this.openedChange.emit(false);
-                this._changeDetectorRef.markForCheck();
             }
         });
+        // `debounceTime(0)` rather than a `setTimeout` per event: a burst (Ctrl + A over a long list) then
+        // costs one measurement instead of one per option, and the pending work is owned by the pipe —
+        // `takeUntilDestroyed` cancels it instead of leaving a timer to run against a destroyed view.
         merge(this.optionSelectionChanges, this.visibleChanges)
             // `delay(0)` rather than a `setTimeout` inside the subscriber: `takeUntilDestroyed` cancels a
             // scheduled emission, but not a timer the subscriber has already started, which would then run
@@ -923,18 +1119,15 @@ class KbqSelect extends KbqAbstractSelect {
             }
         });
     }
-    /** Lifecycle hook for change detection. Updates visibility and error state. */
+    /** Lifecycle hook for change detection. Updates the error state. */
     ngDoCheck() {
-        this.visibleChanges.next(this.isVisible());
         if (this.ngControl) {
             this.updateErrorState();
         }
-        else {
-            this.syncInvalidState();
-        }
     }
     /** Lifecycle hook after content initialization. Sets up key manager and option subscriptions. */
     ngAfterContentInit() {
+        this.contentReady = true;
         this.withVirtualScroll = !!this.cdkVirtualForOf();
         this.initKeyManager();
         this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
@@ -954,38 +1147,32 @@ class KbqSelect extends KbqAbstractSelect {
         // keyboard navigation of a closed select and silently overwrites the value.
         filter(() => this.panelOpen && this.isActiveItemStale()))
             .subscribe(() => this.keyManager.setFirstItemActive());
+        this.contentInitialized.next();
+        this.contentInitialized.complete();
+    }
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.optionsList();
+    }
+    ngAfterViewChecked() {
+        // Syncs the list here so `changes` emits once this view is checked.
+        this.tagsList();
     }
     /** Lifecycle hook when component is destroyed. Cleans up subscriptions. */
     ngOnDestroy() {
-        this.stateChanges.complete();
+        this.visibleChanges.complete();
+        // Before `openedChange`: the panel stream is what emits into it.
+        this.panelDoneAnimatingStream.complete();
+        this.openedChange.complete();
         this.closeSubscription.unsubscribe();
         this.unsubscribeFromPanelResize();
         clearTimeout(this.openPanelTimeout);
+        clearTimeout(this.highlightOptionTimeout);
     }
     /** Updates the error state based on the error state matcher. */
     updateErrorState() {
-        const oldState = this.errorState;
-        const parent = this.parentFormGroup || this.parentForm;
-        const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
-        const control = this.ngControl ? this.ngControl.control : null;
-        const newState = matcher.isErrorState(control, parent);
-        if (newState !== oldState) {
-            this.errorState = newState;
-            this.stateChanges.next();
-        }
-        this.syncInvalidState();
-    }
-    syncInvalidState() {
-        this.invalidState.set((this.hasLegacyValidateDirective && !!this.ngControl?.invalid) || this.errorState);
-    }
-    /**
-     * Formats the hidden items text with the number of hidden items.
-     * @param hiddenItemsText Template string with {{ number }} placeholder.
-     * @param hiddenItems Number of hidden items to display.
-     * @returns Formatted string with the number of hidden items.
-     */
-    hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) {
-        return hiddenItemsText.replace('{{ number }}', hiddenItems.toString());
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
     }
     /**
      * Selects every option "select all" can act on, or deselects them all when they are already selected.
@@ -1008,57 +1195,49 @@ class KbqSelect extends KbqAbstractSelect {
             this.selectAllInProgress = false;
         }
         this.propagateChanges();
-        this.stateChanges.next();
         this.onSelectAll.emit(new KbqSelectAllEvent(this, targets, this.allOptionsSelected));
     }
     /**
-     * Clears the current selection.
+     * Clears the options `clearPredicate` accepts, which by default leaves the disabled ones selected.
+     *
      * @docs-private
      */
     clear() {
-        this.selectionModel.clear();
-        this.keyManager.setActiveItem(-1);
-        this.propagateChanges();
-    }
-    /**
-     * Clears the current selection.
-     * @deprecated Activate the projected `KbqCleaner` instead.
-     * @docs-private
-     */
-    clearValue(event) {
-        const cleaner = this.cleaner();
-        if (cleaner) {
-            cleaner.clear(event);
-        }
-        else {
-            event.stopPropagation();
-            event.preventDefault();
-            this.clear();
-            this.focus();
-        }
+        untracked(() => {
+            this.selectionModel.deselect(...this.clearTargets);
+            this.keyManager.setActiveItem(-1);
+            this.propagateChanges();
+        });
     }
     /** Resets the search component if present. */
     resetSearch() {
-        const search = this.search();
-        if (!search) {
-            return;
-        }
-        search.reset();
-        /*
-        todo the incorrect behaviour of keyManager is possible here
-        to avoid first item selection (to provide correct options flipping on closed select)
-        we should process options update like it is the first options appearance
-        */
-        search.isSearchChanged = false;
+        untracked(() => {
+            const search = this.search();
+            if (!search) {
+                return;
+            }
+            search.reset();
+            /*
+            todo the incorrect behaviour of keyManager is possible here
+            to avoid first item selection (to provide correct options flipping on closed select)
+            we should process options update like it is the first options appearance
+            */
+            search.isSearchChanged = false;
+        });
     }
     /** Toggles the overlay panel open or closed. */
     toggle() {
-        if (this.panelOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+        // Untracked, like the other imperative methods: called from a consumer's `effect()`, the state read on the
+        // way — `panelOpen`, `disabled`, the options, the inputs — would make the effect run again on every open
+        // and close.
+        untracked(() => {
+            if (this.panelOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        });
     }
     /**
      * Triggers the opening of the panel component.
@@ -1068,22 +1247,27 @@ class KbqSelect extends KbqAbstractSelect {
      * if options exist, it opens immediately.
      */
     open() {
-        if (this.disabled || this.panelOpen)
-            return;
-        this.beforeOpened.emit();
-        if (this.noOptions) {
-            clearTimeout(this.openPanelTimeout);
-            this.openPanelTimeout = setTimeout(() => this.openPanel(), delayBeforeDisplayingResultWithoutOptions);
-        }
-        else {
-            this.openPanel();
-        }
+        untracked(() => {
+            if (this.disabled() || this.panelOpen)
+                return;
+            this.beforeOpened.emit();
+            if (this.noOptions) {
+                clearTimeout(this.openPanelTimeout);
+                this.openPanelTimeout = setTimeout(() => this.openPanel(), delayBeforeDisplayingResultWithoutOptions);
+            }
+            else {
+                this.openPanel();
+            }
+        });
     }
     /**
      * Internal method to open the panel. Handles overlay positioning and sizing.
      * Sets up the overlay dimensions based on trigger size and configured options.
      */
     openPanel() {
+        untracked(() => this.attachPanel());
+    }
+    attachPanel() {
         const trigger = this.trigger();
         if (!trigger || !this.keyManager)
             return;
@@ -1104,35 +1288,47 @@ class KbqSelect extends KbqAbstractSelect {
         this.highlightCorrectOption();
         this._changeDetectorRef.markForCheck();
         // Set the font size on the panel element once it exists.
-        this._ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
+        afterNextRender(() => {
             this.scrollActiveOptionIntoView();
             if (this.triggerFontSize && this.overlayDir.overlayRef && this.overlayDir.overlayRef.overlayElement) {
                 this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this.triggerFontSize}px`;
             }
-            this.addClassToOverlayContainer();
             if (this.search()) {
                 this.lockOverlayWidthForSearch(this.panel());
             }
-        });
+        }, { injector: this.injector });
+        this.reportPanelRendered('showing');
     }
     /** Closes the overlay panel. */
     close() {
-        if (!this.panelOpen)
+        untracked(() => {
+            if (!this.panelOpen)
+                return;
+            // the order of calls is important
+            this.resetSearch();
+            this.panelOpen = false;
+            this.unsubscribeFromPanelResize();
+            // Back to the two default sides, so the next open is not resolved against a first row that has since
+            // changed height.
+            this.positions = this.withOverlapPosition(this.positions, null) ?? this.positions;
+            this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
+            this._changeDetectorRef.markForCheck();
+            this.onTouched();
+            this.reportPanelRendered('void');
+        });
+    }
+    /**
+     * Reports the panel rendered or removed once the next render has applied `panelOpen`; only the latest
+     * report of a frame is delivered.
+     */
+    reportPanelRendered(state) {
+        this.panelRender?.destroy();
+        // The overlay detaching while the select is destroyed closes it too.
+        if (this.destroyRef.destroyed)
             return;
-        // the order of calls is important
-        this.resetSearch();
-        this.panelOpen = false;
-        this.unsubscribeFromPanelResize();
-        // Back to the two default sides, so the next open is not resolved against a first row that has since
-        // changed height.
-        this.positions = this.withOverlapPosition(this.positions, null) ?? this.positions;
-        this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
-        this._changeDetectorRef.markForCheck();
-        this.onTouched();
-        this.removeClassFromOverlayContainer();
+        this.panelRender = afterNextRender(() => this.panelDoneAnimatingStream.next(state), {
+            injector: this.injector
+        });
     }
     /**
      * Sets the select's value. Part of the ControlValueAccessor interface
@@ -1141,9 +1337,9 @@ class KbqSelect extends KbqAbstractSelect {
      * @param value New value to be written to the model.
      */
     writeValue(value) {
-        if (this.options) {
-            this.setSelectionByValue(value);
-        }
+        // Untracked: a form control set from an `effect()` writes here synchronously.
+        untracked(() => this.applyValue(value));
+        this.value.set(value);
     }
     /**
      * Saves a callback function to be invoked when the select's value
@@ -1173,12 +1369,11 @@ class KbqSelect extends KbqAbstractSelect {
      * @param isDisabled Sets whether the component is disabled.
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this._changeDetectorRef.markForCheck();
-        this.stateChanges.next();
+        this.disabled.set(isDisabled);
     }
     /**
      * Checks if the current direction is RTL (right-to-left).
+     *
      * @returns True if RTL mode is active, false otherwise.
      */
     isRtl() {
@@ -1187,10 +1382,11 @@ class KbqSelect extends KbqAbstractSelect {
     /**
      * Handles all keyboard events for the select.
      * Delegates to appropriate handler based on panel state.
+     *
      * @param event The keyboard event to handle.
      */
     handleKeydown(event) {
-        if (this.disabled)
+        if (this.disabled())
             return;
         if (this.panelOpen) {
             this.handleOpenKeydown(event);
@@ -1201,9 +1397,8 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Handles focus event on the select element. */
     onFocus() {
-        if (!this.disabled) {
-            this._focused = true;
-            this.stateChanges.next();
+        if (!this.disabled()) {
+            this.focusedValue.set(true);
         }
     }
     /**
@@ -1211,11 +1406,9 @@ class KbqSelect extends KbqAbstractSelect {
      * "blur" to the panel when it opens, causing a false positive.
      */
     onBlur() {
-        this._focused = false;
-        if (!this.disabled && !this.panelOpen) {
+        this.focusedValue.set(false);
+        if (!this.disabled() && !this.panelOpen) {
             this.onTouched();
-            this._changeDetectorRef.markForCheck();
-            this.stateChanges.next();
         }
     }
     /**
@@ -1223,10 +1416,12 @@ class KbqSelect extends KbqAbstractSelect {
      * Sets up position change subscription and closing actions.
      */
     onAttached() {
+        // `cdkConnectedOverlay` creates and attaches the overlay in one go, so this is the first point it exists.
+        this.overlayLayers.adopt(this.overlayDir.overlayRef, this.elementRef.nativeElement);
         this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
             this._changeDetectorRef.detectChanges();
             this.setOverlayPosition();
-            this.optionsContainer().nativeElement.scrollTop = this.scrollTop;
+            this.scrollbarViewport()?.scrollTo({ top: this.scrollTop });
             this.updateScrollSize();
             this.subscribeToScrolledToBottom();
             // Deliberately out of this frame — see `reanchorPanel`. A microtask still lands before paint.
@@ -1234,11 +1429,19 @@ class KbqSelect extends KbqAbstractSelect {
         });
         // The option list drives the panel's height, so a change to it can settle the anchor question
         // differently — and the panel is realigned on every such change regardless.
-        this.options.changes.pipe(delay(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+        //
+        // Both subscriptions belong to this panel session: `onAttached` runs again on every open, and
+        // without the per-session teardown each one would be layered on top of the previous ones. The
+        // teardown sits after `delay(1)`, so closing also drops a repositioning that was scheduled but
+        // has not fired yet — by then there is no overlay left to position.
+        this.options.changes
+            .pipe(delay(1), takeUntilDestroyed(this.destroyRef), takeUntil(this.closedStream))
+            .subscribe(() => {
             this.updatePanelAnchor();
             this.setOverlayPosition();
         });
         this.subscribeToPanelResize();
+        this.closeSubscription.unsubscribe();
         this.closeSubscription = this.closingActions().subscribe(() => this.close());
     }
     /** Element the overlay is positioned and sized against. */
@@ -1257,22 +1460,16 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme() {
-        return this.parentFormField ? `kbq-${this.parentFormField.color}` : '';
+        return this.parentFormField ? `kbq-${this.parentFormField.color()}` : '';
     }
-    /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
+    /**
+     * Returns the full set of classes for the panel: base class, theme and custom `panelClass`.
+     *
+     * Only the theme is read per change detection — it comes from the form field, which does not expose
+     * its color as a signal — while the `panelClass` expansion is memoised.
+     */
     getPanelClasses() {
-        const panelClass = this.panelClass();
-        const classes = ['kbq-select__panel', this.getPanelTheme()];
-        if (typeof panelClass === 'string') {
-            classes.push(panelClass);
-        }
-        else if (Array.isArray(panelClass) || panelClass instanceof Set) {
-            classes.push(...panelClass);
-        }
-        else if (panelClass) {
-            classes.push(...Object.keys(panelClass).filter((key) => panelClass[key]));
-        }
-        return classes.filter(Boolean).join(' ');
+        return ['kbq-select__panel', this.getPanelTheme(), this.customPanelClasses()].filter(Boolean).join(' ');
     }
     /** Focuses the select element. */
     focus() {
@@ -1280,30 +1477,76 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
-    onContainerClick() {
+    onContainerClick(event) {
+        // The click that opened the panel reaches the form field after the select. In an application with zone.js
+        // the panel has rendered and focused its active option by then, so the focus is left to the panel. Any
+        // other click on the field, such as one on a prefix that blurred the panel to the body, brings the focus back.
+        const target = event && _getEventTarget(event);
+        if (this.panelOpen && target instanceof Node && this.elementRef.nativeElement.contains(target))
+            return;
         this.focus();
     }
     /**
      * Handles removal of a matched item in the trigger.
+     *
      * @param option The option to remove from selection.
-     * @param $event The mouse event that triggered the removal.
+     * @param $event The mouse or keyboard event that triggered the removal.
      */
     onRemoveMatcherItem(option, $event) {
+        // The trigger toggles the panel on click and on Enter/Space — neither belongs to this control.
         $event.stopPropagation();
+        $event.preventDefault();
         option.deselect();
     }
+    /** Accessible name of the control that removes a selected value from the trigger. */
+    removeItemAriaLabel(option) {
+        return `${this.a11yLocaleConfiguration().remove} ${option.viewValue}`.trim();
+    }
+    measureHiddenItems() {
+        if (!this.isBrowser ||
+            this.customTrigger() ||
+            this.customMatcher() ||
+            this.empty() ||
+            !this.multiple ||
+            this.multiline())
+            return;
+        const { totalItemsWidth, visibleItems } = this.hiddenItemsMeasurer.measure(this.trigger().nativeElement);
+        this.hiddenItemsCount.set(this.selected.length - visibleItems);
+        this.visibleTriggerItems.set(visibleItems || null);
+        if (!this.hiddenItems())
+            return;
+        // The counter is measured below, so it has to be rendered with the new count first.
+        this._changeDetectorRef.detectChanges();
+        const itemsCounter = this.trigger().nativeElement.querySelector('.kbq-select__match-hidden-text');
+        const matcherList = this.trigger().nativeElement.querySelector('.kbq-select__match-list');
+        if (!itemsCounter || !matcherList)
+            return;
+        const itemsCounterShowed = itemsCounter.offsetTop < itemsCounter.offsetHeight;
+        const itemsCounterWidth = Math.floor(itemsCounter.getBoundingClientRect().width);
+        const matcherListWidth = Math.floor(matcherList.getBoundingClientRect().width);
+        const matcherWidth = matcherListWidth + (itemsCounterShowed ? itemsCounterWidth : 0);
+        if (itemsCounterShowed && totalItemsWidth < matcherWidth) {
+            // Everything fits once the counter goes away, so nothing is clipped after all.
+            this.hiddenItemsCount.set(0);
+            this.visibleTriggerItems.set(null);
+        }
+    }
     /**
      * Gets the height of a single option item.
+     *
      * @returns The height in pixels of the first option, or 0 if no options exist.
      */
     getItemHeight() {
+        // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
         return this.options.first ? this.options.first.getHeight() : 0;
     }
     /**
      * Handles click events on the select.
      * Closes the panel if click is inside the footer.
+     *
      * @param $event The mouse event to handle.
      */
     handleClick($event) {
@@ -1379,9 +1622,15 @@ class KbqSelect extends KbqAbstractSelect {
             const options = this.navigableOptions.toArray();
             let fromIndex = this.keyManager.previousActiveItemIndex;
             let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
+            // There is no anchor to build a range from — `clear()` resets the active item to `-1`, and
+            // `slice(-1, …)` would silently resolve to an empty range and select nothing at all.
+            if (fromIndex < 0) {
+                this.toggleOption(option);
+                return;
+            }
             const selectedOptionState = options[fromIndex]?.selected;
             if (toIndex === fromIndex) {
-                this.selectionModel.toggle(option);
+                this.toggleOption(option);
                 return;
             }
             if (fromIndex > toIndex) {
@@ -1400,31 +1649,57 @@ class KbqSelect extends KbqAbstractSelect {
             });
         }
         else {
-            this.selectionModel.toggle(option);
+            this.toggleOption(option);
+        }
+    }
+    /**
+     * Flips the selected state of a single option through the option itself.
+     *
+     * Toggling the selection model directly would not do: only the option's own selection change reaches
+     * `onSelect`, which is what writes the value back to the form control — every branch above relies on
+     * the same path.
+     */
+    toggleOption(option) {
+        if (option.selected) {
+            option.deselect();
+        }
+        else {
+            option.select();
         }
     }
     /** @docs-private */
     shouldShowSearch() {
-        return (isUndefined(this.searchMinOptionsThreshold) ||
+        return (isUndefined(this.searchMinOptionsThreshold()) ||
             !!this.search()?.value() ||
-            this.options.length >= this.searchMinOptionsThreshold);
+            this.options.length >= this.searchMinOptionsThreshold());
     }
-    /** Checks if the component is currently visible in the viewport. */
-    isVisible() {
-        if (!this.isBrowser)
+    /**
+     * Reports whether the trigger is on screen, so the hidden items are re-measured once it appears.
+     *
+     * An `IntersectionObserver` rather than a geometry probe in `ngDoCheck`: reading `offsetTop` forces a
+     * synchronous layout, and `ngDoCheck` runs on every change detection cycle of every ancestor.
+     */
+    observeVisibility() {
+        // TypeScript declares the observer constructors on `globalThis` rather than on `Window`, so the
+        // injected window has to be widened before one of them can be read off it.
+        const view = this.window;
+        if (!this.isBrowser || typeof view.IntersectionObserver !== 'function')
+            return;
+        const observer = new view.IntersectionObserver(([entry]) => this.visibleChanges.next(entry.isIntersecting));
+        observer.observe(this.elementRef.nativeElement);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+    }
+    /** Whether a modal paints over the panel, so that clicks inside the modal leave the panel open. */
+    isCoveredByModal() {
+        const host = this.overlayDir.overlayRef.hostElement;
+        const overlays = Array.from(this.overlayContainer.getContainerElement().children);
+        const modalIndex = overlays.findIndex((overlay) => overlay.classList.contains('kbq-modal-overlay'));
+        if (modalIndex === -1) {
             return false;
-        return this.elementRef.nativeElement.offsetTop < this.elementRef.nativeElement.offsetHeight;
-    }
-    /** Gets the current overlay position index in the container. */
-    currentOverlayPosition() {
-        const element = this.overlayDir.overlayRef.hostElement;
-        return Array.from(this.overlayContainer.getContainerElement().childNodes).findIndex((node) => {
-            return node.firstChild?.['id'] === element.firstChild?.['id'];
-        });
-    }
-    /** Gets the position index of modal overlay in the container. */
-    modalOverlayPosition() {
-        return Array.from(this.overlayContainer.getContainerElement().childNodes).findIndex((childNode) => childNode.classList.contains('kbq-modal-overlay'));
+        }
+        const panelIndex = overlays.indexOf(host);
+        // A panel on an overlay layer paints under the whole application-wide container.
+        return panelIndex === -1 || panelIndex < modalIndex;
     }
     /**
      * Creates an observable of actions that should close the select panel.
@@ -1435,12 +1710,7 @@ class KbqSelect extends KbqAbstractSelect {
         const outsidePointerEvents = this.overlayDir
             .overlayRef.outsidePointerEvents()
             .pipe(delay(0))
-            .pipe(filter(() => {
-            if (this.overlayContainer.getContainerElement().childElementCount > 1) {
-                return this.currentOverlayPosition() > this.modalOverlayPosition();
-            }
-            return true;
-        }));
+            .pipe(filter(() => !this.isCoveredByModal()));
         return merge(outsidePointerEvents, this.overlayDir.overlayRef.detachments());
     }
     /** Gets the height of the options container element. */
@@ -1483,35 +1753,6 @@ class KbqSelect extends KbqAbstractSelect {
                 .subscribe(() => this._ngZone.run(() => this.scrolledToBottom.emit()));
         });
     }
-    /** Calculates the total width of all selected items in the matcher. */
-    getTotalItemsWidthInMatcher() {
-        const triggerClone = this.buildTriggerClone();
-        triggerClone.querySelector('.kbq-select__match-hidden-text')?.remove();
-        this._renderer.appendChild(this.trigger().nativeElement, triggerClone);
-        let totalItemsWidth = 0;
-        const selectedItemsViewValueContainers = triggerClone.querySelectorAll('kbq-tag');
-        selectedItemsViewValueContainers.forEach((item) => (totalItemsWidth += this.getItemWidth(item)));
-        triggerClone.remove();
-        return totalItemsWidth;
-    }
-    /**
-     * Calculates the width of a single item including margins.
-     *
-     * The elements measured here are `kbq-tag`s, which are `border-box` and carry horizontal
-     * padding. `getComputedStyle().width` resolves to the used content-box width whatever
-     * `box-sizing` says, so it dropped that padding from every tag and the matcher believed more
-     * tags fit than actually do. `getBoundingClientRect()` is always the border box — the same fix
-     * `kbqGetPanelWidthOrigin()` carries for the dropdown trigger.
-     * @param element The DOM element to measure.
-     * @returns Total width including margins and gap.
-     */
-    getItemWidth(element) {
-        const computedStyle = this.window.getComputedStyle(element);
-        const width = element.getBoundingClientRect().width;
-        const marginLeft = parseFloat(computedStyle.marginLeft) || 0;
-        const marginRight = parseFloat(computedStyle.marginRight) || 0;
-        return width + marginLeft + marginRight + parseInt(SizeXxs);
-    }
     /** Handles keyboard events while the select is closed. */
     handleClosedKeydown(event) {
         const keyCode = event.keyCode;
@@ -1615,7 +1856,8 @@ class KbqSelect extends KbqAbstractSelect {
                 search.focus();
             }
             if (search && (this.keyManager.isTyping() || [BACKSPACE, DELETE].includes(keyCode))) {
-                setTimeout(() => this.highlightCorrectOption());
+                clearTimeout(this.highlightOptionTimeout);
+                this.highlightOptionTimeout = setTimeout(() => this.highlightCorrectOption());
             }
         }
     }
@@ -1627,7 +1869,7 @@ class KbqSelect extends KbqAbstractSelect {
         // Defer setting the value in order to avoid the "Expression
         // has changed after it was checked" errors from Angular.
         Promise.resolve().then(() => {
-            this.setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);
+            this.setSelectionByValue(this.ngControl ? this.ngControl.value : this.value());
         });
     }
     /** Whether the key manager has no active item, or its active item is missing from the current options list. */
@@ -1656,38 +1898,55 @@ class KbqSelect extends KbqAbstractSelect {
             this.highlightCorrectOption();
         }
     }
+    /** Selects the options of `value` once the options are settled; until then `initializeSelection` does. */
+    applyValue(value) {
+        this.selectionValue = value;
+        if (this.contentReady) {
+            this.setSelectionByValue(value);
+        }
+    }
     /**
      * Sets the selected option based on a value.
      * If no option can be found with the designated value, the select trigger is cleared.
+     *
      * @param value The value to select. Can be a single value or array for multiple selection.
      */
     setSelectionByValue(value) {
-        this.previousSelectionModelSelected = this.selectionModel.selected;
-        if (this.multiSelection && value) {
-            if (!Array.isArray(value)) {
-                throw getKbqSelectNonArrayValueError();
+        // Restored rather than cleared: a value written while this one is applied must not end the outer write.
+        const wasWritingValue = this.writingValue;
+        this.writingValue = true;
+        try {
+            this.previousSelectionModelSelected = this.selectionModel.selected;
+            if (this.multiSelection && value) {
+                if (!Array.isArray(value)) {
+                    throw getKbqSelectNonArrayValueError();
+                }
+                this.selectionModel.clear();
+                value.forEach((currentValue) => this.selectValue(currentValue));
+                this.sortValues();
             }
-            this.selectionModel.clear();
-            value.forEach((currentValue) => this.selectValue(currentValue));
-            this.sortValues();
-        }
-        else {
-            this.selectionModel.clear();
-            const correspondingOption = this.selectValue(value);
-            // Shift focus to the active item. Note that we shouldn't do this in multiple
-            // mode, because we don't know what option the user interacted with last.
-            // While the panel is open and the user is already navigating a still-present
-            // active item, keep it as is: `options.changes` re-runs this method on every
-            // appended chunk (e.g. paging), and re-activating the selected option would
-            // focus it and scroll the list back to it.
-            if (correspondingOption && !this.withVirtualScroll && (!this.panelOpen || this.isActiveItemStale())) {
-                this.keyManager.setActiveItem(correspondingOption);
+            else {
+                this.selectionModel.clear();
+                const correspondingOption = this.selectValue(value);
+                // Shift focus to the active item. Note that we shouldn't do this in multiple
+                // mode, because we don't know what option the user interacted with last.
+                // While the panel is open and the user is already navigating a still-present
+                // active item, keep it as is: `options.changes` re-runs this method on every
+                // appended chunk (e.g. paging), and re-activating the selected option would
+                // focus it and scroll the list back to it.
+                if (correspondingOption && !this.withVirtualScroll && (!this.panelOpen || this.isActiveItemStale())) {
+                    this.keyManager.setActiveItem(correspondingOption);
+                }
             }
         }
+        finally {
+            this.writingValue = wasWritingValue;
+        }
         this._changeDetectorRef.markForCheck();
     }
     /**
      * Finds the option that corresponds to the given value.
+     *
      * @param value The value to find.
      * @returns The matching option or undefined if not found.
      */
@@ -1696,10 +1955,11 @@ class KbqSelect extends KbqAbstractSelect {
             ...this.options.toArray(),
             ...this.previousSelectionModelSelected.map((option) => this.resolveSelectedOption(option))
             // Treat null as a special reset value.
-        ].find((option) => option.value != null && runCompareWith(this.compareWith, option.value, value));
+        ].find((option) => option.value != null && runCompareWith(this.compareWith(), option.value, value));
     }
     /**
      * Finds and selects an option based on its value.
+     *
      * @returns Option that has the corresponding value, when it is currently rendered.
      */
     selectValue(value) {
@@ -1726,7 +1986,7 @@ class KbqSelect extends KbqAbstractSelect {
             return undefined;
         if (this.withVirtualScroll) {
             const source = this.cdkVirtualForOf()?.cdkVirtualForOf;
-            const correspondingOptionVirtual = source instanceof Array ? source.find((item) => this.compareWith(item, value)) : undefined;
+            const correspondingOptionVirtual = source instanceof Array ? source.find((item) => this.compareWith()(item, value)) : undefined;
             if (correspondingOptionVirtual) {
                 return this.createVirtualOption(correspondingOptionVirtual);
             }
@@ -1745,7 +2005,7 @@ class KbqSelect extends KbqAbstractSelect {
      */
     createVirtualOption(value) {
         const virtualOptionFactory = this.virtualOptionFactory();
-        return virtualOptionFactory ? virtualOptionFactory(value) : new KbqVirtualOption(value, this.disabled);
+        return virtualOptionFactory ? virtualOptionFactory(value) : new KbqVirtualOption(value, this.disabled());
     }
     /**
      * Remembers the value and the label of a selected option while its view is still live, so that the
@@ -1763,7 +2023,7 @@ class KbqSelect extends KbqAbstractSelect {
             return option;
         // A value that no longer matches the copy means the view was recycled for another item. A
         // comparator that throws reads as "no match" here too, falling back to the value actually selected.
-        return runCompareWith(this.compareWith, option.value, copy.value) ? option : copy;
+        return runCompareWith(this.compareWith(), option.value, copy.value) ? option : copy;
     }
     /** Sets up a key manager to listen to keyboard events on the overlay panel. */
     initKeyManager() {
@@ -1777,7 +2037,11 @@ class KbqSelect extends KbqAbstractSelect {
                 this.scrollActiveOptionIntoView();
                 this.search()?.focus();
             }
-            else if (!this.panelOpen && !this.multiSelection && this.keyManager.activeItem) {
+            else if (!this.panelOpen &&
+                !this.multiSelection &&
+                this.keyManager.activeItem &&
+                // The active option follows a written value; selecting it again would report it as the user's.
+                !this.writingValue) {
                 this.keyManager.activeItem.selectViaInteraction();
             }
         });
@@ -1797,10 +2061,7 @@ class KbqSelect extends KbqAbstractSelect {
         // Handles cases like the labels of the selected options changing.
         (this.options.length ? merge(...this.options.map((option) => option.stateChanges)) : EMPTY)
             .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.options.changes))
-            .subscribe(() => {
-            this._changeDetectorRef.markForCheck();
-            this.stateChanges.next();
-        });
+            .subscribe(() => this._changeDetectorRef.markForCheck());
     }
     /** Invoked when an option is clicked. */
     onSelect(option, isUserInput) {
@@ -1829,17 +2090,35 @@ class KbqSelect extends KbqAbstractSelect {
         if (!this.selectAllInProgress && wasSelected !== this.selectionModel.isSelected(option)) {
             this.propagateChanges();
         }
-        this.stateChanges.next();
+        this._changeDetectorRef.markForCheck();
     }
     /** Sorts the selected values based on their order in the panel. */
     sortValues() {
         if (this.multiSelection) {
             const options = this.options.toArray();
-            this.selectionModel.sort((a, b) => {
-                const sortComparator = this.sortComparator();
-                return sortComparator ? sortComparator(a, b, options) : a.value - b.value;
-            });
-            this.stateChanges.next();
+            const sortComparator = this.sortComparator();
+            if (sortComparator) {
+                this.selectionModel.sort((a, b) => sortComparator(a, b, options));
+            }
+            else {
+                // Panel order is fixed for the whole sort, so it is indexed once rather than rescanned
+                // by an `indexOf` on each of the comparator's O(n log n) calls.
+                const panelOrder = new Map(options.map((option, index) => [option, index]));
+                this.selectionModel.sort((a, b) => {
+                    // See `sortComparator`. A selected value with no rendered option — a
+                    // `KbqVirtualOption` under virtual scroll or `showPreselectedValues` — is not in
+                    // `options` at all, and sorts after everything that is.
+                    const indexA = panelOrder.get(a) ?? -1;
+                    const indexB = panelOrder.get(b) ?? -1;
+                    if (indexA === indexB)
+                        return 0;
+                    if (indexA === -1)
+                        return 1;
+                    if (indexB === -1)
+                        return -1;
+                    return indexA - indexB;
+                });
+            }
         }
     }
     /** Emits change event to set the model value. */
@@ -1851,7 +2130,8 @@ class KbqSelect extends KbqAbstractSelect {
         else {
             valueToEmit = this.selected ? this.selected.value : fallbackValue;
         }
-        this._value = valueToEmit;
+        this.selectionValue = valueToEmit;
+        this.value.set(valueToEmit);
         this.valueChange.emit(valueToEmit);
         this.onChange(valueToEmit);
         this.selectionChange.emit(new KbqSelectChange(this, valueToEmit));
@@ -1863,7 +2143,7 @@ class KbqSelect extends KbqAbstractSelect {
      */
     highlightCorrectOption() {
         if (this.keyManager) {
-            if (this.empty || !this.firstSelected || this.firstFiltered) {
+            if (this.empty() || !this.firstSelected || this.firstFiltered) {
                 this.keyManager.setFirstItemActive();
             }
             else {
@@ -1875,7 +2155,7 @@ class KbqSelect extends KbqAbstractSelect {
         this.keyManager.activeItem?.focus();
     }
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
-    _selectAllHandler(event, select) {
+    defaultSelectAllHandler(event, select) {
         const searchInput = isInput(event) ? event.target : null;
         if (shouldSelectSearchText(searchInput)) {
             searchInput.select();
@@ -1905,57 +2185,8 @@ class KbqSelect extends KbqAbstractSelect {
         const selected = selectableOptions.length > 0 && selectableOptions.every((option) => option.selected);
         select.onSelectAll.emit(new KbqSelectAllEvent(select, selectableOptions, selected));
     }
-    /**
-     * Calculates the total width and count of visible items.
-     * @returns Tuple of [totalVisibleItemsWidth, visibleItemsCount].
-     */
-    getTotalVisibleItems() {
-        const triggerClone = this.buildTriggerClone();
-        const hiddenText = triggerClone.querySelector('.kbq-select__match-hidden-text');
-        if (hiddenText) {
-            this._renderer.setStyle(hiddenText, 'display', 'block');
-        }
-        this._renderer.appendChild(this.trigger().nativeElement, triggerClone);
-        let visibleItemsCount = 0;
-        let totalVisibleItemsWidth = 0;
-        triggerClone.querySelectorAll('kbq-tag').forEach((item) => {
-            if (item.offsetTop < item.offsetHeight) {
-                totalVisibleItemsWidth += this.getItemWidth(item);
-                visibleItemsCount++;
-            }
-        });
-        triggerClone.remove();
-        return [totalVisibleItemsWidth, visibleItemsCount];
-    }
-    /**
-     * Creates a hidden clone of the trigger element for width calculations.
-     * @returns Clone of the trigger element positioned off-screen.
-     */
-    buildTriggerClone() {
-        const triggerClone = this.trigger().nativeElement.cloneNode(true);
-        this._renderer.setStyle(triggerClone, 'position', 'absolute');
-        this._renderer.setStyle(triggerClone, 'visibility', 'hidden');
-        this._renderer.setStyle(triggerClone, 'top', '-100%');
-        this._renderer.setStyle(triggerClone, 'left', '0');
-        this._renderer.setStyle(triggerClone, 'max-width', '100%');
-        return triggerClone;
-    }
-    /** Adds the dropdown class to the overlay container when first select opens. */
-    addClassToOverlayContainer() {
-        const overlayContainer = this.overlayContainer?.getContainerElement();
-        if (overlayContainer.childNodes.length === 1) {
-            this.classAddedToOverlayContainer = true;
-            this._renderer.addClass(overlayContainer, 'cdk-overlay-container_dropdown');
-        }
-    }
-    /** Removes the dropdown class from the overlay container when select closes. */
-    removeClassFromOverlayContainer() {
-        if (this.classAddedToOverlayContainer) {
-            this._renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: false, isRequired: false, transformFunction: null }, showPreselectedValues: { classPropertyName: "showPreselectedValues", publicName: "showPreselectedValues", isSignal: true, isRequired: false, transformFunction: null }, triggerValuesLimit: { classPropertyName: "triggerValuesLimit", publicName: "triggerValuesLimit", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThreshold: { classPropertyName: "searchMinOptionsThreshold", publicName: "searchMinOptionsThreshold", isSignal: false, isRequired: false, transformFunction: null }, scrolledToBottomOffset: { classPropertyName: "scrolledToBottomOffset", publicName: "scrolledToBottomOffset", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, virtualOptionFactory: { classPropertyName: "virtualOptionFactory", publicName: "virtualOptionFactory", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", beforeOpened: "beforeOpened", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", onSelectAll: "onSelectAll", valueChange: "valueChange", scrolledToBottom: "scrolledToBottom" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline()", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: true, isRequired: false, transformFunction: null }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, showPreselectedValues: { classPropertyName: "showPreselectedValues", publicName: "showPreselectedValues", isSignal: true, isRequired: false, transformFunction: null }, triggerValuesLimit: { classPropertyName: "triggerValuesLimit", publicName: "triggerValuesLimit", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThresholdInput: { classPropertyName: "searchMinOptionsThresholdInput", publicName: "searchMinOptionsThreshold", isSignal: true, isRequired: false, transformFunction: null }, scrolledToBottomOffset: { classPropertyName: "scrolledToBottomOffset", publicName: "scrolledToBottomOffset", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, virtualOptionFactory: { classPropertyName: "virtualOptionFactory", publicName: "virtualOptionFactory", isSignal: true, isRequired: false, transformFunction: null }, clearPredicate: { classPropertyName: "clearPredicate", publicName: "clearPredicate", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandlerInput: { classPropertyName: "selectAllHandlerInput", publicName: "selectAllHandler", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChangeOutput: "openedChange", beforeOpened: "beforeOpened", openedOutput: "opened", closedOutput: "closed", selectionChange: "selectionChange", onSelectAll: "onSelectAll", valueChange: "valueChange", scrolledToBottom: "scrolledToBottom" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabledAttribute()", "attr.aria-expanded": "panelOpen", "attr.aria-controls": "panelOpen ? panelId : null", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-label": "resolvedAriaLabel", "attr.aria-invalid": "errorState()", "attr.aria-required": "required()", "attr.aria-disabled": "disabled()", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline()", "class.kbq-disabled": "disabledClass()", "class.kbq-invalid": "invalidClass()" }, classAttribute: "kbq-select" }, providers: [
             { provide: KbqFormFieldControl, useExisting: KbqSelect },
             kbqCleanerFactoryProvider((() => {
                 const select = inject(KbqSelect);
@@ -1963,32 +2194,30 @@ class KbqSelect extends KbqAbstractSelect {
                     get control() {
                         return select;
                     },
-                    get keydownTarget() {
-                        return select.elementRef.nativeElement;
-                    },
                     clearByEscape: false,
-                    clear: (() => select.clear())
+                    clear: (() => select.clear()),
+                    canClear: (() => select.canClear)
                 };
             })),
             { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
             { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect },
-            kbqSiblingPopupProvider(KbqSelect)
-        ], queries: [{ propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true, isSignal: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true, isSignal: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "optionGroups", predicate: KbqOptgroup, isSignal: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true, isSignal: true }, { propertyName: "searchEmpty", first: true, predicate: KbqSelectSearchEmptyResult, descendants: true, isSignal: true }, { propertyName: "options", predicate: KbqOption, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "selectAllOption", first: true, predicate: KbqOption, descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqSelect"], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (!customTagTemplateRef()) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef())\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline()) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content\"\n            [class.kbq-scrollbar]=\"!withVirtualScroll\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n            @if (showSelectAll) {\n                <!-- Every read of selectAllState re-filters the whole option list, and allOptionsSelected\n                     is that same walk asking whether the state is \"checked\" \u2014 one read covers all four. -->\n                @let selectAllCheckboxState = selectAllState;\n\n                <kbq-option\n                    class=\"kbq-select__select-all\"\n                    [selectable]=\"false\"\n                    [class.kbq-selected]=\"selectAllCheckboxState === 'checked'\"\n                    [attr.role]=\"'checkbox'\"\n                    [attr.aria-checked]=\"\n                        selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'\n                    \"\n                    (click)=\"toggleSelectAll()\"\n                >\n                    <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n                    {{ selectAllText }}\n                </kbq-option>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-select__panel .kbq-select__footer-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;flex:1 1 auto;min-height:var(--kbq-select-footer-item-size-height, var(--kbq-size-3xl));gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs));padding:0 calc(var(--kbq-size-m) - var(--kbq-size-3xs));background:transparent;cursor:pointer;text-align:left;text-decoration:none}.kbq-select__panel .kbq-select__footer:has(.kbq-select__footer-item){--kbq-select-footer-size-padding-horizontal: var(--kbq-size-xxs)}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__panel .kbq-select__footer-item{color:var(--kbq-foreground-contrast)}.kbq-select__panel .kbq-select__footer-item:focus-visible{border-color:var(--kbq-states-line-focus-theme)}.kbq-select__panel .kbq-select__footer-item:hover:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-hover)}.kbq-select__panel .kbq-select__footer-item:active:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-active)}.kbq-select__panel .kbq-select__footer-item:disabled,.kbq-select__panel .kbq-select__footer-item.kbq-disabled{color:var(--kbq-states-foreground-disabled);cursor:default;pointer-events:none}.kbq-select__panel .kbq-select__footer-item:disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-select__panel .kbq-select__footer-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-states-foreground-disabled)}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel,.kbq-select__footer-item{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)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], animations: [
-            kbqSelectAnimations.transformPanel,
-            kbqSelectAnimations.fadeInContent
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            kbqSiblingPopupProvider(KbqSelect),
+            KbqSelectHiddenItemsMeasurer
+        ], queries: [{ propertyName: "projectedScrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true, isSignal: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true, isSignal: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "optionsQuery", predicate: KbqOption, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: KbqOptgroup, isSignal: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true, isSignal: true }, { propertyName: "searchEmpty", first: true, predicate: KbqSelectSearchEmptyResult, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewport", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }, { propertyName: "selectAllOption", first: true, predicate: KbqOption, descendants: true, isSignal: true }, { propertyName: "overlayDirQuery", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "tagsQuery", predicate: KbqTag, descendants: true, isSignal: true }], exportAs: ["kbqSelect"], usesInheritance: true, hostDirectives: [{ directive: i1$1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty()\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty()) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder() || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (customTagTemplateRef(); as tagTemplate) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"tagTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled()\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled()) {\n                                                <!--\n                                                    `kbqTagRemove` now carries the role, the accessible\n                                                    name and keyboard activation itself, so this binds\n                                                    only what is select-specific. The name goes through\n                                                    the `aria-label` input rather than `[attr.aria-label]`\n                                                    \u2014 the directive renders the attribute, so writing it\n                                                    here would be overwritten by its default.\n                                                -->\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    [aria-label]=\"removeItemAriaLabel(option)\"\n                                                    [tabIndex]=\"isTriggerValueVisible($index) ? 0 : -1\"\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline()) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [class.kbq-select__match-hidden-text_visible]=\"hiddenItems() > 0\"\n                                >\n                                    {{ hiddenItemsLabel }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            kbqScrollbarViewport\n            role=\"listbox\"\n            class=\"kbq-select__content\"\n            [kbqScrollbarMode]=\"scrollbarMode\"\n            [id]=\"panelId\"\n            [attr.aria-multiselectable]=\"multiSelection\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-label]=\"resolvedAriaLabel\"\n            [attr.aria-busy]=\"isOptionsListBusy || null\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n            @if (showSelectAll) {\n                <!-- Every read of selectAllState re-filters the whole option list, and allOptionsSelected\n                     is that same walk asking whether the state is \"checked\" \u2014 one read covers all four. -->\n                @let selectAllCheckboxState = selectAllState;\n\n                <!--\n                    The row stays an `option`: a `checkbox` is not a valid child of the listbox it lives in,\n                    and `option` carries the tri-state on `aria-checked` just as well.\n                -->\n                <kbq-option\n                    class=\"kbq-select__select-all\"\n                    [selectable]=\"false\"\n                    [class.kbq-selected]=\"selectAllCheckboxState === 'checked'\"\n                    [attr.aria-checked]=\"\n                        selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'\n                    \"\n                    (click)=\"toggleSelectAll()\"\n                >\n                    <kbq-pseudo-checkbox aria-hidden=\"true\" [state]=\"selectAllCheckboxState\" />\n                    {{ selectAllText }}\n                </kbq-option>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;display:none;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text.kbq-select__match-hidden-text_visible{display:block}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}@supports (corner-shape: squircle){.kbq-select__panel{corner-shape:squircle;border-radius:clamp(var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 1.85,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2.3 - 3.6px,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2)}}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-select__panel .kbq-select__footer-item{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;flex:1 1 auto;min-height:var(--kbq-select-footer-item-size-height, var(--kbq-size-3xl));gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs))}@supports (corner-shape: squircle){.kbq-select__panel .kbq-select__footer-item{corner-shape:squircle;border-radius:clamp(var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)) * 1.85,var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)) * 2.3 - 3.6px,var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)) * 2)}}.kbq-select__panel .kbq-select__footer-item{padding:0 calc(var(--kbq-size-m) - var(--kbq-size-3xs));background:transparent;cursor:pointer;text-align:left;text-decoration:none}.kbq-select__panel .kbq-select__footer:has(.kbq-select__footer-item){--kbq-select-footer-size-padding-horizontal: var(--kbq-size-xxs)}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__panel .kbq-select__footer-item{color:var(--kbq-foreground-contrast)}.kbq-select__panel .kbq-select__footer-item:focus-visible{border-color:var(--kbq-states-line-focus-theme)}.kbq-select__panel .kbq-select__footer-item:hover:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-hover)}.kbq-select__panel .kbq-select__footer-item:active:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-active)}.kbq-select__panel .kbq-select__footer-item:disabled,.kbq-select__panel .kbq-select__footer-item.kbq-disabled{color:var(--kbq-states-foreground-disabled);cursor:default;pointer-events:none}.kbq-select__panel .kbq-select__footer-item:disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-select__panel .kbq-select__footer-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-states-foreground-disabled)}.kbq-select,.kbq-select__panel,.kbq-select__footer-item{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)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "selectable", "removable", "value", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: KbqTagRemove, selector: "[kbqTagRemove]", inputs: ["aria-label", "tabIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelect, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select', imports: [
                         CdkOverlayOrigin,
                         KbqTag,
+                        KbqTagRemove,
                         NgTemplateOutlet,
                         CdkMonitorFocus,
                         CdkConnectedOverlay,
                         KbqIconModule,
                         KbqOption,
-                        KbqPseudoCheckbox
+                        KbqPseudoCheckbox,
+                        KbqScrollbarViewport
                     ], providers: [
                         { provide: KbqFormFieldControl, useExisting: KbqSelect },
                         kbqCleanerFactoryProvider((() => {
@@ -1997,85 +2226,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                                 get control() {
                                     return select;
                                 },
-                                get keydownTarget() {
-                                    return select.elementRef.nativeElement;
-                                },
                                 clearByEscape: false,
-                                clear: (() => select.clear())
+                                clear: (() => select.clear()),
+                                canClear: (() => select.canClear)
                             };
                         })),
                         { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
                         { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect },
-                        kbqSiblingPopupProvider(KbqSelect)
+                        kbqSiblingPopupProvider(KbqSelect),
+                        KbqSelectHiddenItemsMeasurer
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'disabled || null',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        // The select is not a native control, so its role, states and the relationship with the panel it
+                        // owns have to be exposed explicitly.
+                        role: 'combobox',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-expanded]': 'panelOpen',
+                        '[attr.aria-controls]': 'panelOpen ? panelId : null',
+                        '[attr.aria-labelledby]': 'ariaLabelledby',
+                        '[attr.aria-label]': 'resolvedAriaLabel',
+                        '[attr.aria-invalid]': 'errorState()',
+                        '[attr.aria-required]': 'required()',
+                        '[attr.aria-disabled]': 'disabled()',
                         class: 'kbq-select',
                         '[class.kbq-select_multiple]': 'multiple',
                         '[class.kbq-select_multiline]': 'multiline()',
-                        '[class.kbq-disabled]': 'disabled',
-                        '[class.kbq-invalid]': 'errorState',
+                        '[class.kbq-disabled]': 'disabledClass()',
+                        '[class.kbq-invalid]': 'invalidClass()',
                         '(click)': 'toggle()',
                         '(keydown)': 'handleKeydown($event)',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()'
-                    }, animations: [
-                        kbqSelectAnimations.transformPanel,
-                        kbqSelectAnimations.fadeInContent
-                    ], exportAs: 'kbqSelect', template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (!customTagTemplateRef()) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef())\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline()) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content\"\n            [class.kbq-scrollbar]=\"!withVirtualScroll\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n            @if (showSelectAll) {\n                <!-- Every read of selectAllState re-filters the whole option list, and allOptionsSelected\n                     is that same walk asking whether the state is \"checked\" \u2014 one read covers all four. -->\n                @let selectAllCheckboxState = selectAllState;\n\n                <kbq-option\n                    class=\"kbq-select__select-all\"\n                    [selectable]=\"false\"\n                    [class.kbq-selected]=\"selectAllCheckboxState === 'checked'\"\n                    [attr.role]=\"'checkbox'\"\n                    [attr.aria-checked]=\"\n                        selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'\n                    \"\n                    (click)=\"toggleSelectAll()\"\n                >\n                    <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n                    {{ selectAllText }}\n                </kbq-option>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-select__panel .kbq-select__footer-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;flex:1 1 auto;min-height:var(--kbq-select-footer-item-size-height, var(--kbq-size-3xl));gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs));padding:0 calc(var(--kbq-size-m) - var(--kbq-size-3xs));background:transparent;cursor:pointer;text-align:left;text-decoration:none}.kbq-select__panel .kbq-select__footer:has(.kbq-select__footer-item){--kbq-select-footer-size-padding-horizontal: var(--kbq-size-xxs)}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__panel .kbq-select__footer-item{color:var(--kbq-foreground-contrast)}.kbq-select__panel .kbq-select__footer-item:focus-visible{border-color:var(--kbq-states-line-focus-theme)}.kbq-select__panel .kbq-select__footer-item:hover:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-hover)}.kbq-select__panel .kbq-select__footer-item:active:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-active)}.kbq-select__panel .kbq-select__footer-item:disabled,.kbq-select__panel .kbq-select__footer-item.kbq-disabled{color:var(--kbq-states-foreground-disabled);cursor:default;pointer-events:none}.kbq-select__panel .kbq-select__footer-item:disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-select__panel .kbq-select__footer-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-states-foreground-disabled)}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel,.kbq-select__footer-item{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)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionsContainer: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], selectAllOption: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOption), { isSignal: true }] }], overlayDir: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: false }]
-            }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectFooter), { ...{ read: ElementRef }, isSignal: true }] }], cdkVirtualForOf: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualForOf), { isSignal: true }] }], virtualScrollViewport: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], tags: [{
-                type: ViewChildren,
-                args: [KbqTag]
-            }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectTrigger), { isSignal: true }] }], customMatcher: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectMatcher), { isSignal: true }] }], customTagTemplateRef: [{ type: i0.ContentChild, args: ['kbqSelectTagContent', { ...{ read: TemplateRef }, isSignal: true }] }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], options: [{
-                type: ContentChildren,
-                args: [KbqOption, { descendants: true }]
-            }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOptgroup), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearch), { isSignal: true }] }], searchEmpty: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearchEmptyResult), { isSignal: true }] }], hiddenItemsText: [{
-                type: Input
-            }], showPreselectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreselectedValues", required: false }] }], triggerValuesLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerValuesLimit", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], errorStateMatcher: [{
-                type: Input
-            }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], searchMinOptionsThreshold: [{
-                type: Input
-            }], openedChange: [{
-                type: Output
-            }], beforeOpened: [{ type: i0.Output, args: ["beforeOpened"] }], openedStream: [{
-                type: Output,
-                args: ['opened']
-            }], closedStream: [{
-                type: Output,
-                args: ['closed']
-            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scrolledToBottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolledToBottomOffset", required: false }] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], hasBackdrop: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], compareWith: [{
-                type: Input
-            }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllHandler: [{
-                type: Input
-            }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], value: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hiddenItemsTextFormatter: [{
-                type: Input
-            }] } });
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], exportAs: 'kbqSelect', template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty()\"\n    [class.kbq-select__trigger_multiline]=\"multiline()\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher()) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty()) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder() || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger()) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                #multilineMatchList\n                                [class.kbq-select__match-list]=\"!multiline()\"\n                                [class.kbq-select__multiline-match-list]=\"multiline()\"\n                            >\n                                @if (customTagTemplateRef(); as tagTemplate) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"tagTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                } @else {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled()\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled()) {\n                                                <!--\n                                                    `kbqTagRemove` now carries the role, the accessible\n                                                    name and keyboard activation itself, so this binds\n                                                    only what is select-specific. The name goes through\n                                                    the `aria-label` input rather than `[attr.aria-label]`\n                                                    \u2014 the directive renders the attribute, so writing it\n                                                    here would be overwritten by its default.\n                                                -->\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    [aria-label]=\"removeItemAriaLabel(option)\"\n                                                    [tabIndex]=\"isTriggerValueVisible($index) ? 0 : -1\"\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline()) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [class.kbq-select__match-hidden-text_visible]=\"hiddenItems() > 0\"\n                                >\n                                    {{ hiddenItemsLabel }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass()\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search() && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            kbqScrollbarViewport\n            role=\"listbox\"\n            class=\"kbq-select__content\"\n            [kbqScrollbarMode]=\"scrollbarMode\"\n            [id]=\"panelId\"\n            [attr.aria-multiselectable]=\"multiSelection\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-label]=\"resolvedAriaLabel\"\n            [attr.aria-busy]=\"isOptionsListBusy || null\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n            @if (showSelectAll) {\n                <!-- Every read of selectAllState re-filters the whole option list, and allOptionsSelected\n                     is that same walk asking whether the state is \"checked\" \u2014 one read covers all four. -->\n                @let selectAllCheckboxState = selectAllState;\n\n                <!--\n                    The row stays an `option`: a `checkbox` is not a valid child of the listbox it lives in,\n                    and `option` carries the tri-state on `aria-checked` just as well.\n                -->\n                <kbq-option\n                    class=\"kbq-select__select-all\"\n                    [selectable]=\"false\"\n                    [class.kbq-selected]=\"selectAllCheckboxState === 'checked'\"\n                    [attr.aria-checked]=\"\n                        selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'\n                    \"\n                    (click)=\"toggleSelectAll()\"\n                >\n                    <kbq-pseudo-checkbox aria-hidden=\"true\" [state]=\"selectAllCheckboxState\" />\n                    {{ selectAllText }}\n                </kbq-option>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline),.kbq-select .kbq-select__trigger.kbq-select__trigger_empty{height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_empty .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{box-sizing:content-box;display:none;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text.kbq-select__match-hidden-text_visible{display:block}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;max-width:var(--kbq-panel-size-width-max, 640px);overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}@supports (corner-shape: squircle){.kbq-select__panel{corner-shape:squircle;border-radius:clamp(var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 1.85,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2.3 - 3.6px,var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius)) * 2)}}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{box-sizing:initial;max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:var(--kbq-select-footer-size-min-height, var(--kbq-size-4xl));border-top-width:var(--kbq-select-footer-size-border-width, var(--kbq-size-border-width));border-top-style:solid;padding:var(--kbq-select-footer-size-padding-vertical, var(--kbq-size-xxs)) var(--kbq-select-footer-size-padding-horizontal, var(--kbq-size-l))}.kbq-select__panel .kbq-select__footer-item{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;flex:1 1 auto;min-height:var(--kbq-select-footer-item-size-height, var(--kbq-size-3xl));gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs))}@supports (corner-shape: squircle){.kbq-select__panel .kbq-select__footer-item{corner-shape:squircle;border-radius:clamp(var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)) * 1.85,var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)) * 2.3 - 3.6px,var(--kbq-select-footer-item-size-border-radius, var(--kbq-size-xxs)) * 2)}}.kbq-select__panel .kbq-select__footer-item{padding:0 calc(var(--kbq-size-m) - var(--kbq-size-3xs));background:transparent;cursor:pointer;text-align:left;text-decoration:none}.kbq-select__panel .kbq-select__footer:has(.kbq-select__footer-item){--kbq-select-footer-size-padding-horizontal: var(--kbq-size-xxs)}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__panel .kbq-select__footer-item{color:var(--kbq-foreground-contrast)}.kbq-select__panel .kbq-select__footer-item:focus-visible{border-color:var(--kbq-states-line-focus-theme)}.kbq-select__panel .kbq-select__footer-item:hover:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-hover)}.kbq-select__panel .kbq-select__footer-item:active:not(:disabled,.kbq-disabled){background:var(--kbq-states-background-transparent-active)}.kbq-select__panel .kbq-select__footer-item:disabled,.kbq-select__panel .kbq-select__footer-item.kbq-disabled{color:var(--kbq-states-foreground-disabled);cursor:default;pointer-events:none}.kbq-select__panel .kbq-select__footer-item:disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item),.kbq-select__panel .kbq-select__footer-item.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-icon-button,.kbq-icon-item){color:var(--kbq-states-foreground-disabled)}.kbq-select,.kbq-select__panel,.kbq-select__footer-item{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)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: 0;--kbq-select-size-single-padding-right: 0;--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionsContainer: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], scrollbarViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }], projectedScrollbarViewport: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { ...{ descendants: true }, isSignal: true }] }], selectAllOption: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOption), { isSignal: true }] }], overlayDirQuery: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectFooter), { ...{ read: ElementRef }, isSignal: true }] }], cdkVirtualForOf: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualForOf), { isSignal: true }] }], virtualScrollViewport: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], tagsQuery: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqTag), { isSignal: true }] }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectTrigger), { isSignal: true }] }], customMatcher: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectMatcher), { isSignal: true }] }], customTagTemplateRef: [{ type: i0.ContentChild, args: ['kbqSelectTagContent', { ...{ read: TemplateRef }, isSignal: true }] }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], optionsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOption), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOptgroup), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearch), { isSignal: true }] }], searchEmpty: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearchEmptyResult), { isSignal: true }] }], hiddenItemsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenItemsText", required: false }] }], hiddenItemsTextFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenItemsTextFormatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], showPreselectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreselectedValues", required: false }] }], triggerValuesLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerValuesLimit", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], searchMinOptionsThresholdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMinOptionsThreshold", required: false }] }], openedChangeOutput: [{ type: i0.Output, args: ["openedChange"] }], beforeOpened: [{ type: i0.Output, args: ["beforeOpened"] }], openedOutput: [{ type: i0.Output, args: ["opened"] }], closedOutput: [{ type: i0.Output, args: ["closed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scrolledToBottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolledToBottomOffset", required: false }] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], clearPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearPredicate", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllHandlerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllHandler", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class KbqSelectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -2107,7 +2297,7 @@ class KbqSelectModule {
             KbqSelectError,
             KbqSelectNoOptions,
             KbqSelectErrorText] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -2117,7 +2307,7 @@ class KbqSelectModule {
             KbqSelectLoading, KbqOptionModule,
             KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2164,5 +2354,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_SELECT_OPTIONS, KbqOptionTooltip, KbqSelect, KbqSelectChange, KbqSelectError, KbqSelectErrorText, KbqSelectLoading, KbqSelectModule, KbqSelectNoOptions, delayBeforeDisplayingResultWithoutOptions, kbqSelectOptionsProvider, minimumTimeToDisplayLoading };
+export { KBQ_SELECT_HIDDEN_TEXT_VISIBLE_CLASS, KBQ_SELECT_OPTIONS, KbqOptionTooltip, KbqSelect, KbqSelectChange, KbqSelectError, KbqSelectErrorText, KbqSelectHiddenItemsMeasurer, KbqSelectLoading, KbqSelectModule, KbqSelectNoOptions, delayBeforeDisplayingResultWithoutOptions, kbqSelectOptionsProvider, minimumTimeToDisplayLoading };
 //# sourceMappingURL=koobiq-components-select.mjs.map