@koobiq/components 20.1.0 → 20.3.0

package/select/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, OnDestroy, AfterContentInit, OnInit, DoCheck, ElementRef, DestroyRef, QueryList, TemplateRef, EventEmitter, InjectionToken, Provider } from '@angular/core';
+import { AfterViewInit, OnDestroy, InjectionToken, AfterContentInit, OnInit, DoCheck, ElementRef, DestroyRef, QueryList, TemplateRef, EventEmitter, Provider } from '@angular/core';
 import * as i5 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
@@ -9,7 +9,7 @@ import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angul
 import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import * as i2 from '@koobiq/components/core';
-import { KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqLocaleService, KbqOptionBase, ActiveDescendantKeyManager, KbqOption, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptionSelectionChange, KbqSelectAllEvent, KbqVirtualOption, KbqComponentColors } from '@koobiq/components/core';
+import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqPanelMaxHeight, KbqAbstractSelect, CanUpdateErrorState, KbqSiblingPopup, ErrorStateMatcher, KbqLocaleService, KbqOptionBase, ActiveDescendantKeyManager, KbqOption, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptionSelectionChange, KbqSelectAllEvent, KbqVirtualOption, KbqPseudoCheckboxState, KbqComponentColors } from '@koobiq/components/core';
 import * as i11 from '@koobiq/components/form-field';
 import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
 import * as i4 from '@koobiq/components/tags';
@@ -75,19 +75,32 @@ declare class KbqSelectChange {
     value: any;
     constructor(source: KbqSelect, value: any);
 }
-/** Select panel width type. */
-type KbqSelectPanelWidth = 'auto' | number | null;
+/**
+ * Select panel width type.
+ * @deprecated Use `KbqPanelWidth` from `@koobiq/components/core` instead.
+ */
+type KbqSelectPanelWidth = KbqPanelWidth;
 /** Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token. */
 type KbqSelectOptions = Partial<{
     /**
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
-    panelWidth: KbqSelectPanelWidth;
+    panelWidth: KbqPanelWidth;
     /**
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
+    panelMinWidth: KbqPanelMinWidth;
+    /**
+     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+     */
+    panelMaxWidth: KbqPanelMaxWidth;
+    /**
+     * Maximum height of the panel's scrollable option list. Does not include the search field or the
+     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+     */
+    panelMaxHeight: KbqPanelMaxHeight;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -103,11 +116,21 @@ declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
-    panelWidth: KbqSelectPanelWidth;
+    panelWidth: KbqPanelWidth;
     /**
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+    panelMinWidth: KbqPanelMinWidth;
+    /**
+     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+     */
+    panelMaxWidth: KbqPanelMaxWidth;
+    /**
+     * Maximum height of the panel's scrollable option list. Does not include the search field or the
+     * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+     */
+    panelMaxHeight: KbqPanelMaxHeight;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -123,7 +146,7 @@ declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
 declare const delayBeforeDisplayingResultWithoutOptions = 101;
 /** Minimum time in milliseconds to display the loading state. */
 declare const minimumTimeToDisplayLoading = 300;
-declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState {
+declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState, KbqSiblingPopup {
     private readonly _changeDetectorRef;
     private readonly _ngZone;
     private readonly _renderer;
@@ -145,11 +168,21 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
          * Width of the panel. If set to `auto`, the panel will match the trigger width.
          * If set to null or an empty string, the panel will grow to match the longest option's text.
          */
-        panelWidth: KbqSelectPanelWidth;
+        panelWidth: KbqPanelWidth;
         /**
          * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
          */
-        panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+        panelMinWidth: KbqPanelMinWidth;
+        /**
+         * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+         * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+         */
+        panelMaxWidth: KbqPanelMaxWidth;
+        /**
+         * Maximum height of the panel's scrollable option list. Does not include the search field or the
+         * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
+         */
+        panelMaxHeight: KbqPanelMaxHeight;
         /**
          * Whether to enable hiding search by default if options is less than minimum.
          *
@@ -159,7 +192,6 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
          */
         searchMinOptionsThreshold: "auto" | number;
     }> | null;
-    private readonly window;
     /** Whether the component is in an error state. */
     errorState: boolean;
     /**
@@ -179,6 +211,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     selectionModel: SelectionModel<KbqOptionBase>;
     /** Previously selected options before the current selection was made. */
     previousSelectionModelSelected: KbqOptionBase[];
+    /**
+     * 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.
+     */
+    private readonly selectedOptionCopies;
     /** Manages keyboard events for options in the panel. */
     keyManager: ActiveDescendantKeyManager<KbqOption>;
     /** The value of the select panel's transform-origin property for animations. */
@@ -188,16 +226,25 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     /** Strategy that will be used to handle scrolling while the select panel is open. */
     scrollStrategy: _angular_cdk_overlay_module_d.ScrollStrategy;
     /**
-     * The y-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text
-     * when the panel opens. Will change based on the y-position of the selected option.
+     * 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.
      */
     offsetY: number;
     /**
-     * This position config ensures that the top "start" corner of the overlay
-     * is aligned with the top "start" of the origin by default (overlapping
-     * the trigger completely). If the panel cannot fit below the trigger, it
-     * will fall back to a position above the trigger.
+     * 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`
+     * gap padding is applied to the pane — stays conservative enough to absorb that padding instead of
+     * letting the panel overflow the viewport by the size of the gap.
+     */
+    protected readonly viewportMargin: number;
+    /**
+     * Opens the panel below the trigger, falling back to above it when it does not fit.
+     *
+     * A third position is appended at runtime by `updatePanelAnchor`: a multiline trigger that has grown
+     * taller than the panel gets it anchored to its first row and drawn over the rest of it.
      */
     positions: ConnectedPosition[];
     /**
@@ -208,6 +255,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     readonly panel: _angular_core.Signal<ElementRef<any> | undefined>;
     /** Reference to the container element that holds the options. */
     readonly optionsContainer: _angular_core.Signal<ElementRef<any>>;
+    /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
+    readonly selectAllOption: _angular_core.Signal<KbqOption | undefined>;
     /** Reference to the CDK connected overlay directive. */
     overlayDir: CdkConnectedOverlay;
     /** Reference to the optional footer element in the panel. */
@@ -224,10 +273,23 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     readonly customMatcher: _angular_core.Signal<KbqSelectMatcher | undefined>;
     /** Custom template reference for rendering tag content. */
     readonly customTagTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
-    /** Reference to the optional cleaner element for clearing selection. */
+    /**
+     * Reference to the optional cleaner element for clearing selection.
+     * @docs-private
+     */
     readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
     /** All of the defined select options. */
     options: QueryList<KbqOption>;
+    /**
+     * Everything the key manager navigates: the built-in "select all" row first, then `options`.
+     *
+     * The row is rendered by the select's own template, so it never reaches the `options` content query.
+     * 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
+     */
+    readonly navigableOptions: QueryList<KbqOption>;
     /** All of the defined groups of options. */
     readonly optionGroups: _angular_core.Signal<readonly KbqOptgroup[]>;
     /** Reference to the optional search component. */
@@ -236,6 +298,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     readonly searchEmpty: _angular_core.Signal<KbqSelectSearchEmptyResult | undefined>;
     /** Template string for hidden items text. Supports {{ number }} placeholder. */
     hiddenItemsText: string;
+    /** Label of the "select all" row. Kept in step with the locale service. */
+    protected selectAllText: string;
     /** Determines whether preselected values are displayed. */
     readonly showPreselectedValues: _angular_core.InputSignal<boolean>;
     /**
@@ -274,7 +338,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     private _searchMinOptionsThreshold;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
-    /** Event emitted when the select panel has been toggled. Emits true when opened, false when closed. */
+    /**
+     * 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
+     * this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see
+     * `ngOnInit`) matters beyond this output's original consumers.
+     */
     readonly openedChange: EventEmitter<boolean>;
     /** Event emitted before the select panel starts opening. */
     readonly beforeOpened: _angular_core.OutputEmitterRef<void>;
@@ -354,6 +423,15 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     readonly virtualOptionFactory: _angular_core.InputSignal<((value: any) => KbqVirtualOption) | undefined>;
     /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
     readonly selectAllToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to render the "select all" master checkbox above the options. Multiple selection only.
+     *
+     * The row acts on the options the user can actually toggle — rendered, enabled and selectable. Since
+     * search filtering removes options from the DOM, "select all" under an active query selects only the
+     * matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox
+     * never disagree (`selectAllToggle` is implied).
+     */
+    readonly selectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Function for handling the Ctrl + A (select all) keyboard combination.
      * By default, the internal handler selects all options.
@@ -363,15 +441,37 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     get selectAllHandler(): (event: KeyboardEvent, select: KbqSelect) => void;
     set selectAllHandler(fn: (event: KeyboardEvent, select: KbqSelect) => void);
     /**
-     * Width of the panel. If set to `auto`, the panel will match the trigger width.
-     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     * 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.
      */
-    panelWidth: KbqSelectPanelWidth;
+    readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth>;
     /**
      * Minimum width of the panel in pixels.
      * If minWidth is larger than window width, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
+    readonly panelMinWidth: _angular_core.InputSignalWithTransform<KbqPanelMinWidth, unknown>;
+    /**
+     * 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.
+     */
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
+    /**
+     * 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
+     * of a `cdk-virtual-scroll-viewport` — with virtual scroll the value is an exact height, not a cap.
+     *
+     * 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.
+     */
+    readonly panelMaxHeight: _angular_core.InputSignalWithTransform<KbqPanelMaxHeight, unknown>;
+    /**
+     * `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
+     */
+    protected readonly panelMaxHeightToken: _angular_core.Signal<string | null>;
     /** Value of the select control. Can be a single value or array of values for multiple selection. */
     get value(): any;
     set value(newValue: any);
@@ -402,12 +502,40 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     set focused(value: boolean);
     /** Whether the select panel is currently open. */
     panelOpen: boolean;
+    /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached(): boolean;
     /** Whether virtual scrolling is enabled for the options panel. */
     withVirtualScroll: boolean;
     private _focused;
     /** Whether the search returned no results. */
     get isEmptySearchResult(): boolean;
-    /** Whether the cleaner (clear button) should be shown. */
+    /**
+     * Whether the "select all" row is currently rendered.
+     *
+     * Unsupported whenever a selected value can exist as a synthetic `KbqVirtualOption` instead of a
+     * real, projected `KbqOption` (see `selectValue`) — under `withVirtualScroll` or
+     * `showPreselectedValues`. `selectAllTargets` can only see `this.options`, the currently-rendered
+     * `KbqOption`s, so a checkbox built on top of it would misreport "everything selected" after only
+     * touching the values that happen to have a rendered option.
+     */
+    protected get showSelectAll(): boolean;
+    /** Whether every option "select all" can act on is selected. */
+    get allOptionsSelected(): boolean;
+    /** State of the "select all" master checkbox. */
+    get selectAllState(): KbqPseudoCheckboxState;
+    /**
+     * Options "select all" acts on, and the ones its checkbox state is derived from.
+     *
+     * `KbqOption.select()` and `deselect()` do not consult `disabled` or `selectable()`, so the
+     * filtering has to happen here rather than being left to the options themselves.
+     */
+    private get selectAllTargets();
+    /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
+    private get selectAllAdapter();
+    /**
+     * Whether the cleaner (clear button) should be shown.
+     * @docs-private
+     */
     get canShowCleaner(): boolean;
     /** Returns the currently selected option(s). Single value or array for multiple selection. */
     get selected(): KbqOptionBase | KbqOptionBase[];
@@ -427,20 +555,18 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     get colorForState(): KbqComponentColors;
     /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */
     get multiSelection(): boolean;
+    /** Whether a "select all" batch is running, so the per-option changes propagate only once. */
+    private selectAllInProgress;
     /** Subscription to the close event of the overlay. */
     private closeSubscription;
     /** Subscription to the options panel scroll event used by `scrolledToBottom`. */
     private scrollSubscription;
-    /** The scroll position of the overlay panel, calculated to center the selected option. */
+    /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
     private scrollTop;
     /** Unique id for this input. Auto-incremented for each instance. */
     private readonly uid;
     /** Subject that emits when the component visibility changes. */
     private visibleChanges;
-    /** Width of the overlay panel in pixels or as a string. */
-    protected overlayWidth: string | number;
-    /** Minimum width of the overlay panel in pixels. */
-    protected overlayMinWidth: string | number;
     /** Origin element for the overlay panel positioning. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     /** Flag indicating if the dropdown class has been added to the overlay container. */
@@ -464,11 +590,24 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * @returns Formatted string with the number of hidden items.
      */
     hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
+    /**
+     * Selects every option "select all" can act on, or deselects them all when they are already selected.
+     *
+     * Backs both the master checkbox and Ctrl/Cmd + A while `selectAll` is on. Emits a single
+     * `selectionChange` for the whole batch, followed by `onSelectAll`.
+     */
+    protected toggleSelectAll(): void;
+    /**
+     * Clears the current selection.
+     * @docs-private
+     */
+    clear(): void;
     /**
      * Clears the current selection.
-     * @param $event Mouse event to prevent default behavior.
+     * @deprecated Activate the projected `KbqCleaner` instead.
+     * @docs-private
      */
-    clearValue($event: any): void;
+    clearValue(event: Event): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
     /** `View -> model callback called when select has been touched` */
@@ -545,6 +684,14 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * Sets up position change subscription and closing actions.
      */
     onAttached(): void;
+    /** Element the overlay is positioned and sized against. */
+    protected getOverlayOriginElement(): HTMLElement | undefined;
+    protected isPanelOpen(): boolean;
+    /**
+     * A `cdk-virtual-scroll-viewport` pins its height to `--kbq-select-panel-size-max-height` in both
+     * directions, so its `scrollHeight` follows the cap rather than the content.
+     */
+    protected isListHeightPinnedToCap(): boolean;
     /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme(): string;
     /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
@@ -610,6 +757,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     private getTotalItemsWidthInMatcher;
     /**
      * 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.
      */
@@ -623,6 +776,17 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * Defers execution to avoid change detection errors.
      */
     private initializeSelection;
+    /** Whether the key manager has no active item, or its active item is missing from the current options list. */
+    private isActiveItemStale;
+    /**
+     * Rebuilds the key manager's list — the "select all" row first, then the projected options — and
+     * re-applies the panel's initial highlight whenever the row is what just joined that list.
+     *
+     * Both callers have to be able to do the second part: whichever of the view query and
+     * `options.changes` runs first is the one that brings the row in, and the other then sees a list
+     * it is already part of.
+     */
+    private syncNavigableOptions;
     /**
      * Sets the selected option based on a value.
      * If no option can be found with the designated value, the select trigger is cleared.
@@ -636,16 +800,28 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      */
     private getCorrespondOption;
     /**
-     * Finds and selects and option based on its value.
-     * @returns Option that has the corresponding value.
+     * Finds and selects an option based on its value.
+     * @returns Option that has the corresponding value, when it is currently rendered.
      */
     private selectValue;
+    /**
+     * Builds a detached option for a value whose `KbqOption` is not rendered, or returns `undefined`
+     * when the value cannot be resolved and the consumer gave no way to render it.
+     */
+    private createVirtualOptionForValue;
     /**
      * Single entry point for building a `KbqVirtualOption` from a raw value.
      * Uses the consumer-provided `virtualOptionFactory` when set, otherwise
      * wraps the raw value with the select's current `disabled` state.
      */
     private createVirtualOption;
+    /**
+     * Remembers the value and the label of a selected option while its view is still live, so that the
+     * selection survives the view being recycled by `cdk-virtual-scroll` for another item.
+     */
+    private captureSelectedOptionCopy;
+    /** Copy of `option` when its view has been recycled for another item, otherwise `option` itself. */
+    private resolveSelectedOption;
     /** Sets up a key manager to listen to keyboard events on the overlay panel. */
     private initKeyManager;
     /** Drops current option subscriptions and IDs and resets from scratch. */
@@ -661,10 +837,7 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * the first item instead.
      */
     private highlightCorrectOption;
-    /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
-    /** Gets how wide the overlay panel should be. */
-    private getOverlayWidth;
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
@@ -684,9 +857,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     /** Removes the dropdown class from the overlay container when select closes. */
     private removeClassFromOverlayContainer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionGroups", "search", "searchEmpty", "options"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionGroups", "search", "searchEmpty", "options"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
     static ngAcceptInputType_multiple: unknown;
-    static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/select/select-tokens.scss

@@ -10,7 +10,6 @@
     --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-size-max-height: 256px;
     /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);
     --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);

package/select/select.scss

@@ -19,8 +19,6 @@
 .kbq-select__content {
     @extend %kbq-select-content;
 
-    box-sizing: initial;
-
     .kbq-option {
         @include item-active-area(var(--kbq-size-3xs));
     }

package/splitter/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, AfterContentInit, OnDestroy, ElementRef, ChangeDetectorRef, AfterViewInit, QueryList } from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy, AfterContentInit, ElementRef, ChangeDetectorRef, QueryList } from '@angular/core';
 import * as i1 from '@koobiq/components/icon';
 
 interface IArea {

package/table/_table-theme.scss

@@ -28,6 +28,10 @@
             }
         }
 
+        &.kbq-table_sticky-header > thead > tr > th {
+            background-color: var(--kbq-background-bg);
+        }
+
         &.kbq-table_bordered {
             & > tbody > tr {
                 & th,

package/table/index.d.ts

@@ -6,8 +6,9 @@ import * as i2 from '@angular/cdk/platform';
 declare class KbqTable {
     readonly border: i0.InputSignalWithTransform<boolean, unknown>;
     readonly disableHover: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly stickyHeader: i0.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; "disableHover": { "alias": "disableHover"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; "disableHover": { "alias": "disableHover"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class KbqTableCellContent {
     readonly button: i0.Signal<KbqButton | undefined>;

package/table/table.scss

@@ -37,6 +37,14 @@
     }
 }
 
+.kbq-table.kbq-table_sticky-header {
+    & > thead > tr > th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+}
+
 .kbq-table.kbq-table_bordered {
     & > tbody > tr {
         & th,