@koobiq/components 20.2.0 → 20.3.0

package/fesm2022/koobiq-components-core.mjs

@@ -1,17 +1,19 @@
 import * as i0 from '@angular/core';
-import { QueryList, inject, ElementRef, Directive, isDevMode, Input, ChangeDetectorRef, InjectionToken, LOCALE_ID, Type, Injectable, Renderer2, DestroyRef, afterNextRender, NgModule, Pipe, contentChildren, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewChild, numberAttribute, signal, ApplicationRef, TemplateRef, NgZone, ViewContainerRef, RendererFactory2, Version } from '@angular/core';
-import { Subject, Subscription, merge, fromEvent, map as map$1, BehaviorSubject, interval, pairwise } from 'rxjs';
+import { QueryList, inject, ElementRef, DestroyRef, signal, forwardRef, InjectionToken, model, computed, Directive, isDevMode, Input, ChangeDetectorRef, LOCALE_ID, Injectable, Type, Renderer2, afterNextRender, NgModule, effect, Pipe, contentChildren, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewChild, numberAttribute, ApplicationRef, TemplateRef, NgZone, ViewContainerRef, viewChild, RendererFactory2, Version } from '@angular/core';
+import { Subject, Subscription, merge, fromEvent, map as map$1, BehaviorSubject, of, interval, pairwise } from 'rxjs';
 import { tap, debounceTime, filter, map, distinctUntilChanged, delay } from 'rxjs/operators';
-import { _getEventTarget, Platform } from '@angular/cdk/platform';
-import { trigger, state, transition, style, animate, group } from '@angular/animations';
+import { _getEventTarget, _getFocusedElementPierceShadowDom, Platform } from '@angular/cdk/platform';
+import { trigger, state, style, transition, animate, group } from '@angular/animations';
+import { AutofillMonitor } from '@angular/cdk/text-field';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DateAdapter as DateAdapter$1 } from '@koobiq/date-adapter';
 import { DOCUMENT } from '@angular/common';
 import { DateFormatter as DateFormatter$1 } from '@koobiq/date-formatter';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { Overlay, CdkOverlayOrigin, OverlayContainer, ScrollDispatcher, CdkScrollable } from '@angular/cdk/overlay';
+import { FlexibleConnectedPositionStrategy, Overlay, CdkOverlayOrigin, OverlayContainer, ScrollDispatcher, CdkScrollable } from '@angular/cdk/overlay';
 import { TooltipSizeArrowSize } from '@koobiq/design-tokens';
 import { Directionality } from '@angular/cdk/bidi';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -667,6 +669,158 @@ const kbqSelectAnimations = {
 const transformPanel = kbqSelectAnimations.transformPanel;
 const fadeInContent = kbqSelectAnimations.fadeInContent;
 
+/**
+ * Tracks whether the current control's value was filled in by the browser, as a signal.
+ *
+ * Call it from an injection context on a directive whose host is the element the browser actually
+ * fills — a text `<input>` or a `<textarea>`. Every `KbqFormFieldControl` that can be autofilled
+ * exposes the result as its `autofilled` member.
+ *
+ * This is a hook for application code, not the mechanism behind the autofill styling. The styling
+ * keys on `:autofill` in CSS, which matches in the same style pass the browser fills the field;
+ * detection here goes through a zero-length keyframe animation and an `animationstart` listener, so
+ * it lands a frame or two later — too late to paint with, and early enough for anything a component
+ * wants to do about it.
+ *
+ * `monitor()` returns EMPTY off the browser platform, so this needs no `Platform` guard.
+ */
+const kbqInjectAutofilled = () => {
+    const elementRef = inject(ElementRef);
+    const autofillMonitor = inject(AutofillMonitor);
+    const destroyRef = inject(DestroyRef);
+    const autofilled = signal(false, ...(ngDevMode ? [{ debugName: "autofilled" }] : []));
+    autofillMonitor
+        .monitor(elementRef)
+        .pipe(takeUntilDestroyed(destroyRef))
+        .subscribe(({ isAutofilled }) => autofilled.set(isAutofilled));
+    // `stopMonitoring()` is the load-bearing teardown, not a duplicate of `takeUntilDestroyed()`
+    // above: `AutofillMonitor` is `providedIn: 'root'`, so dropping only the subscription would
+    // leave the element registered with the app-lifetime service and its marker classes on the DOM
+    // node.
+    destroyRef.onDestroy(() => autofillMonitor.stopMonitoring(elementRef));
+    return autofilled.asReadonly();
+};
+
+/**
+ * Provider Expression that allows `KbqCheckable` to register as a `ControlValueAccessor`, so any host
+ * applying it via `hostDirectives` gets `[(ngModel)]`/`formControl` support without wiring up its own.
+ * @docs-private
+ */
+const KBQ_CHECKABLE_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => KbqCheckable),
+    multi: true
+};
+/** Injection token that can be used to specify the default click behavior for checkable controls. */
+const KBQ_CHECKABLE_CLICK_ACTION = new InjectionToken('kbq-checkable-click-action');
+/**
+ * Represents the different states that require custom transitions between them.
+ * @docs-private
+ */
+var TransitionCheckState;
+(function (TransitionCheckState) {
+    /** The initial state of the component before any user interaction. */
+    TransitionCheckState["Init"] = "init";
+    /** The state representing the component when it's becoming checked. */
+    TransitionCheckState["Checked"] = "checked";
+    /** The state representing the component when it's becoming unchecked. */
+    TransitionCheckState["Unchecked"] = "unchecked";
+    /** The state representing the component when it's becoming indeterminate. */
+    TransitionCheckState["Indeterminate"] = "indeterminate";
+})(TransitionCheckState || (TransitionCheckState = {}));
+/**
+ * Shared behavior for checkbox-like controls: checked/disabled/indeterminate/tabIndex state, the click-to-toggle
+ * algorithm, ARIA-checked computation, and `ControlValueAccessor` change plumbing.
+ *
+ * Meant to be applied via `hostDirectives` by components that render their own native `<input type="checkbox">`
+ * and markup (e.g. `KbqCheckbox`, `KbqToggleComponent`, or custom checkbox-like primitives). Hosts stay
+ * responsible for their own public inputs/outputs, `FocusMonitor` wiring, and emitting their own typed
+ * `change` event - this directive only centralizes the state and decisions behind them.
+ */
+class KbqCheckable {
+    constructor() {
+        this.controlValueAccessorChangeFn = () => { };
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         * @docs-private
+         */
+        this.onTouched = () => { };
+        /** @docs-private */
+        this.currentCheckState = signal(TransitionCheckState.Init, ...(ngDevMode ? [{ debugName: "currentCheckState" }] : []));
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+        /** Raw tab index as set by the caller, ignoring `disabled`. Use `effectiveTabIndex` to read the applied value. */
+        this.tabIndex = model(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+        /** The tab index actually applied to the native input: forced to `-1` while disabled. */
+        this.effectiveTabIndex = computed(() => (this.disabled() ? -1 : this.tabIndex()), ...(ngDevMode ? [{ debugName: "effectiveTabIndex" }] : []));
+    }
+    /** Returns the ARIA-checked value: `'true'`, `'false'`, or `'mixed'` when indeterminate. */
+    getAriaChecked() {
+        return this.checked() ? 'true' : this.indeterminate() ? 'mixed' : 'false';
+    }
+    /** Toggles the `checked` state and notifies the registered `ControlValueAccessor` change handler. */
+    toggle() {
+        this.checked.update((value) => !value);
+        this.notifyFormValueChange(this.checked());
+    }
+    /**
+     * Resolves what a click on the native input should do, based on the current state and `clickAction`.
+     * Pure - does not mutate state. Callers apply `checked`/`indeterminate` themselves and own emitting
+     * their own change events, so timing/order stays identical to a hand-written click handler.
+     */
+    resolveClick(clickAction) {
+        if (this.disabled() || clickAction === 'noop') {
+            return { shouldToggle: false, shouldClearIndeterminate: false };
+        }
+        return {
+            shouldToggle: true,
+            shouldClearIndeterminate: this.indeterminate() && clickAction !== 'check'
+        };
+    }
+    /** Resets the native input to match the current `checked`/`indeterminate` state (used for the `noop` click action). */
+    resetNativeInput(nativeInput) {
+        nativeInput.checked = this.checked();
+        nativeInput.indeterminate = this.indeterminate();
+    }
+    /** Transitions the animation state, ignoring no-op transitions. @docs-private */
+    transitionCheckState(newState) {
+        if (this.currentCheckState() === newState)
+            return;
+        this.currentCheckState.set(newState);
+    }
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    /** Stores the `ControlValueAccessor` change handler to be notified by `notifyFormValueChange`. */
+    registerOnChange(fn) {
+        this.controlValueAccessorChangeFn = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    /** Notifies the registered `ControlValueAccessor` change handler. */
+    notifyFormValueChange(value) {
+        this.controlValueAccessorChangeFn(value);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCheckable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqCheckable, isStandalone: true, selector: "[kbqCheckable]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", indeterminate: "indeterminateChange", tabIndex: "tabIndexChange" }, providers: [KBQ_CHECKABLE_CONTROL_VALUE_ACCESSOR], exportAs: ["kbqCheckable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCheckable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqCheckable]',
+                    providers: [KBQ_CHECKABLE_CONTROL_VALUE_ACCESSOR],
+                    exportAs: 'kbqCheckable'
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }, { type: i0.Output, args: ["tabIndexChange"] }] } });
+
 class KbqNormalizeWhitespace {
     constructor() {
         /** @docs-private */
@@ -682,10 +836,10 @@ class KbqNormalizeWhitespace {
             $event.clipboardData?.setData('text', value?.replace(/\u2009/g, ' '));
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNormalizeWhitespace, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNormalizeWhitespace, isStandalone: true, selector: "[kbqNormalizeWhitespace]", host: { listeners: { "copy": "onCopy($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNormalizeWhitespace, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqNormalizeWhitespace, isStandalone: true, selector: "[kbqNormalizeWhitespace]", host: { listeners: { "copy": "onCopy($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNormalizeWhitespace, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNormalizeWhitespace, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqNormalizeWhitespace]',
@@ -776,10 +930,10 @@ class KbqColorDirective {
     setDefaultColor(color) {
         this.defaultColor = color;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqColorDirective, isStandalone: true, inputs: { color: "color" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqColorDirective, isStandalone: true, inputs: { color: "color" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqColorDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
@@ -863,6 +1017,28 @@ class KbqErrorStateTracker {
 const kbqInjectNativeElement = () => {
     return inject((ElementRef)).nativeElement;
 };
+/**
+ * Focuses `element` and scrolls it into view by the shortest distance, leaving a visible one alone.
+ *
+ * The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers it
+ * to a later rendering update, where it lands after — and undoes — any scrolling the reader did in the
+ * meantime. Letting the element reveal itself keeps every consumer working, whatever it uses as a scroll
+ * container, and the browser resolves that container rather than the caller guessing at it.
+ *
+ * Pass `skipReveal` when the pointer caused the focus: the element is already under the cursor, so
+ * revealing it would shift the list out from under it.
+ */
+const kbqFocusAndReveal = (element, skipReveal = false) => {
+    if (typeof element.focus !== 'function')
+        return;
+    // A focus listener calling back into `focus` must not scroll a second time. Read through shadow
+    // roots, where `document.activeElement` reports the host instead of the element that holds focus.
+    const wasFocused = _getFocusedElementPierceShadowDom() === element;
+    element.focus({ preventScroll: true });
+    if (skipReveal || wasFocused)
+        return;
+    element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+};
 
 function isBoolean(value) {
     return typeof value === 'boolean';
@@ -910,10 +1086,10 @@ class KbqHover {
          */
         this.hovered = toSignal(merge(fromEvent(this.element, 'mouseenter'), fromEvent(this.element, 'mouseleave')).pipe(map$1(({ type }) => type === 'mouseenter')), { initialValue: false });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqHover, isStandalone: true, selector: "[kbqHover]", host: { properties: { "class.kbq-hovered": "hovered()" }, classAttribute: "kbq-hover" }, exportAs: ["kbqHover"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqHover, isStandalone: true, selector: "[kbqHover]", host: { properties: { "class.kbq-hovered": "hovered()" }, classAttribute: "kbq-hover" }, exportAs: ["kbqHover"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqHover]',
@@ -940,10 +1116,10 @@ class KbqReadStateDirective {
         }
         this.changeDetectorRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqReadStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqReadStateDirective, isStandalone: true, host: { listeners: { "mouseenter": "mouseenterHandler()", "mouseleave": "mouseleaveHandler()", "click": "read.next(true)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqReadStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqReadStateDirective, isStandalone: true, host: { listeners: { "mouseenter": "mouseenterHandler()", "mouseleave": "mouseleaveHandler()", "click": "read.next(true)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqReadStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqReadStateDirective, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -991,6 +1167,145 @@ class DateAdapter extends DateAdapter$1 {
 
 const KBQ_DATE_FORMATS = new InjectionToken('kbq-date-formats');
 
+/**
+ * InjectionToken for the time zone every date the library formats is rendered in.
+ *
+ * Read once, by the {@link KbqDateTimezoneService} constructor, out of the injector that created the
+ * service — call {@link KbqDateTimezoneService.setTimezone} to change the zone afterwards. Defaults to
+ * `'system'`, the zone of the host the code runs on.
+ */
+const KBQ_DATE_TIMEZONE = new InjectionToken('KBQ_DATE_TIMEZONE');
+const MINUTES_PER_HOUR = 60;
+const SECONDS_PER_MINUTE = 60;
+/** The largest offset any zone has ever had; anything beyond it is a typo, not a zone. */
+const MAX_OFFSET_HOURS = 14;
+const MAX_OFFSET_MINUTES = MAX_OFFSET_HOURS * MINUTES_PER_HOUR;
+/** `UTC`/`GMT` with no offset — a valid input on its own, and what `Intl` reports for zero-offset zones. */
+const UTC_ALIAS_PATTERN = /^(?:utc|gmt)$/i;
+/**
+ * A fixed offset written with separators, with or without a `UTC`/`GMT` prefix and with or without a
+ * sign: `+03:00`, `UTC+3`, `GMT+05:30`, `03:00:00`. The seconds group matches both the `timeZoneName`
+ * `Intl` reports in the `longOffset` style for pre-standard-time instants (`GMT-00:44:30`) and the form
+ * `KbqTimezoneZone.offset` is written in.
+ */
+const FIXED_OFFSET_PATTERN = /^(?:utc|gmt)?([+-])?(\d{1,2})(?::([0-5]\d)(?::([0-5]\d))?)?$/i;
+/** The same offset written without separators: `-0530`. Kept apart so `+123` fails instead of backtracking. */
+const COMPACT_OFFSET_PATTERN = /^(?:utc|gmt)?([+-])?(\d{2})([0-5]\d)$/i;
+/** Offset in minutes east of UTC of a fixed-offset specifier, or `null` when the value is not one. */
+const parseFixedOffset = (value) => {
+    if (UTC_ALIAS_PATTERN.test(value))
+        return 0;
+    const match = COMPACT_OFFSET_PATTERN.exec(value) ?? FIXED_OFFSET_PATTERN.exec(value);
+    if (!match)
+        return null;
+    const [, sign, hours, minutes = '0', seconds = '0'] = match;
+    if (Number(hours) > MAX_OFFSET_HOURS)
+        return null;
+    const magnitude = Number(hours) * MINUTES_PER_HOUR + Number(minutes) + Number(seconds) / SECONDS_PER_MINUTE;
+    // Rounded because both date libraries expect whole minutes; only pre-1900 zones have a seconds part.
+    return (sign === '-' ? -1 : 1) * Math.round(magnitude);
+};
+/**
+ * One `Intl.DateTimeFormat` per IANA zone: building it is the expensive part of resolving an offset, and
+ * an application uses a handful of zones at most. A `null` entry marks a name `Intl` rejected, so an
+ * invalid zone is reported once instead of throwing on every date.
+ *
+ * Bounded because the zone can come from unvalidated input — a cookie on the server, a picker in the
+ * browser — and this map outlives every request in the process.
+ */
+const MAX_CACHED_FORMATTERS = 32;
+const offsetFormatters = new Map();
+const getOffsetFormatter = (timeZone) => {
+    if (!offsetFormatters.has(timeZone)) {
+        if (offsetFormatters.size >= MAX_CACHED_FORMATTERS) {
+            offsetFormatters.delete(offsetFormatters.keys().next().value);
+        }
+        try {
+            offsetFormatters.set(timeZone, new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'longOffset' }));
+        }
+        catch {
+            if (isDevMode()) {
+                // eslint-disable-next-line no-console
+                console.warn(`Unknown time zone "${timeZone}", dates are left in the host time zone.`);
+            }
+            offsetFormatters.set(timeZone, null);
+        }
+    }
+    return offsetFormatters.get(timeZone);
+};
+/**
+ * Offset of `timezone` at `timestamp`, in minutes east of UTC. `null` means "leave the date in the host
+ * zone" — either because `timezone` is `'system'`, or because it is a name no `Intl` implementation knows.
+ *
+ * Takes the instant because an IANA zone has no single offset: `'Europe/Berlin'` is +60 in January and
+ * +120 in July, and one list of dates can span the change.
+ */
+const kbqResolveTimezoneOffset = (timezone, timestamp) => {
+    if (timezone === 'system')
+        return null;
+    // Bounded and rounded like the string form: a numeric offset comes from the same unvalidated places,
+    // and neither date library reads a fractional minute or a 99-hour offset as anything sensible.
+    if (typeof timezone === 'number') {
+        return Number.isFinite(timezone) && Math.abs(timezone) <= MAX_OFFSET_MINUTES ? Math.round(timezone) : null;
+    }
+    const fixedOffset = parseFixedOffset(timezone);
+    if (fixedOffset !== null)
+        return fixedOffset;
+    // An invalid date has no offset to resolve, and `Intl` throws rather than saying so.
+    if (!Number.isFinite(timestamp))
+        return null;
+    const timeZoneName = getOffsetFormatter(timezone)
+        ?.formatToParts(new Date(timestamp))
+        .find(({ type }) => type === 'timeZoneName')?.value;
+    return timeZoneName ? parseFixedOffset(timeZoneName) : null;
+};
+/**
+ * Holds the time zone every date the library creates, parses and formats is rendered in.
+ *
+ * Provided in root, so {@link KBQ_DATE_TIMEZONE} in the application providers configures the whole
+ * application. To scope a zone to one subtree, list {@link kbqDateTimezoneProvider} in that component's
+ * `providers` together with the date adapter and the `DateFormatter`: the adapter captures the service of
+ * the injector that created it, and keeps using it.
+ */
+class KbqDateTimezoneService {
+    constructor() {
+        this._timezone = signal(inject(KBQ_DATE_TIMEZONE, { optional: true }) ?? 'system', ...(ngDevMode ? [{ debugName: "_timezone" }] : []));
+        this._changes = new Subject();
+        this.timezone = this._timezone.asReadonly();
+        this.changes = this._changes.asObservable();
+    }
+    /** Activates a time zone. */
+    setTimezone(timezone) {
+        this._timezone.set(timezone);
+        this._changes.next(timezone);
+    }
+    /**
+     * Offset of the active zone at `timestamp`, in minutes east of UTC, or `null` when dates are left in
+     * the host zone.
+     */
+    offsetAt(timestamp) {
+        return kbqResolveTimezoneOffset(this._timezone(), timestamp);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDateTimezoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDateTimezoneService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDateTimezoneService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Utility provider for the time zone dates are rendered in.
+ *
+ * Provides {@link KbqDateTimezoneService} alongside the token, so listing it in a component's `providers`
+ * scopes the zone to that subtree instead of resolving the root service and silently doing nothing.
+ *
+ * @see KBQ_DATE_TIMEZONE
+ */
+const kbqDateTimezoneProvider = (timezone) => [
+    KbqDateTimezoneService,
+    { provide: KBQ_DATE_TIMEZONE, useValue: timezone }
+];
+
 /** Utility provider for `ErrorStateMatcher`. */
 const kbqErrorStateMatcherProvider = (errorStateMatcher) => {
     if (errorStateMatcher instanceof Type) {
@@ -1012,10 +1327,10 @@ class ShowOnFormSubmitErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control?.invalid && form?.submitted);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1029,10 +1344,10 @@ class ShowRequiredOnSubmitErrorStateMatcher {
             ? !!(control?.invalid && form?.submitted)
             : !!(control?.invalid && control.touched);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /** Error state matcher that matches when a control is invalid and dirty or form is submitted. */
@@ -1040,10 +1355,10 @@ class ShowOnControlDirtyErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control?.invalid && (control.dirty || form?.submitted));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1054,10 +1369,10 @@ class ErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control?.invalid && (control.touched || form?.submitted));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ErrorStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1079,39 +1394,72 @@ const KBQ_WINDOW = new InjectionToken('[KBQ_WINDOW]', {
     }
 });
 
-const INITIAL_PROPERTIES = {
-    all: 'initial',
-    position: 'absolute',
-    top: coerceCssPixelValue(0),
-    left: coerceCssPixelValue(0),
-    width: coerceCssPixelValue(0),
-    height: coerceCssPixelValue(0),
-    visibility: 'hidden',
-    overflow: 'scroll',
-    whiteSpace: 'pre',
-    pointerEvents: 'none'
-};
 /**
- * Properties that can affect element width and should be inherited from the parent.
+ * Properties that affect the rendered width of the text and have to be mirrored onto the ruler.
+ *
+ * `font-variant` is deliberately absent: the shorthand does not round-trip through the computed style
+ * once a field sets more than one of its longhands, so the longhands are copied instead.
  */
-const WIDTH_INHERITED_PROPERTIES = [
+const RULER_INHERITED_PROPERTIES = [
     'font',
     'fontFamily',
     'fontFeatureSettings',
     'fontKerning',
     'fontOpticalSizing',
-    'fontSizeAdjust',
     'fontSize',
+    'fontSizeAdjust',
     'fontStretch',
+    'fontStyle',
     'fontSynthesis',
-    'fontVariant',
+    'fontVariantCaps',
+    'fontVariantEastAsian',
     'fontVariantLigatures',
+    'fontVariantNumeric',
     'fontVariationSettings',
     'fontWeight',
     'letterSpacing',
     'textIndent',
     'textTransform'
 ];
+const RULER_PROPERTIES = {
+    all: 'initial',
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    width: '0px',
+    height: '0px',
+    visibility: 'hidden',
+    overflow: 'scroll',
+    whiteSpace: 'pre',
+    pointerEvents: 'none'
+};
+/**
+ * Builds a hidden element that renders text with the typography of the element `computedStyle` was taken
+ * from. Append it to the document, measure through {@link kbqMeasureRulerText}, and remove it.
+ *
+ * @docs-private
+ */
+const kbqCreateTextRuler = (document, computedStyle) => {
+    const ruler = document.createElement('span');
+    Object.assign(ruler.style, RULER_PROPERTIES);
+    RULER_INHERITED_PROPERTIES.forEach((property) => {
+        ruler.style[property] = computedStyle[property];
+    });
+    return ruler;
+};
+/**
+ * Width of `text` in pixels, in the same coordinate space as `clientWidth` and `scrollLeft`.
+ *
+ * `scrollWidth`, not `getBoundingClientRect()`: the latter reports the transformed box, which disagrees
+ * with the untransformed layout metrics it would be compared against under a scaled ancestor.
+ *
+ * @docs-private
+ */
+const kbqMeasureRulerText = (ruler, text) => {
+    ruler.textContent = text;
+    return ruler.scrollWidth;
+};
+
 /**
  * Properties that should be added to the width when `box-sizing: border-box` is applied.
  */
@@ -1149,34 +1497,24 @@ class KbqFieldSizingContent {
     }
     setupWidth() {
         const computedStyle = this.window.getComputedStyle(this.element);
-        const ruler = this.createRuler(computedStyle);
-        ruler.textContent = this.element.value || this.element.placeholder || '';
-        // We should add space to prevent text truncation in Safari/Firefox
-        if (ruler.textContent)
-            ruler.textContent += ' ';
+        const ruler = kbqCreateTextRuler(this.document, computedStyle);
+        const text = this.element.value || this.element.placeholder || '';
         this.renderer.appendChild(this.document.body, ruler);
-        const width = this.calculateWidth(ruler, computedStyle);
+        // We should add space to prevent text truncation in Safari/Firefox
+        const width = this.calculateWidth(kbqMeasureRulerText(ruler, text && `${text} `), computedStyle);
         this.renderer.setStyle(this.element, 'width', coerceCssPixelValue(width));
         this.renderer.removeChild(this.document.body, ruler);
     }
-    createRuler(computedStyle) {
-        const ruler = this.renderer.createElement('span');
-        Object.assign(ruler.style, INITIAL_PROPERTIES);
-        WIDTH_INHERITED_PROPERTIES.forEach((property) => {
-            ruler.style[property] = computedStyle[property];
-        });
-        return ruler;
-    }
-    calculateWidth(ruler, computedStyle) {
+    calculateWidth(textWidth, computedStyle) {
         if (computedStyle.boxSizing === 'border-box') {
-            return BOX_SIZING_BORDER_BOX_WIDTH_PROPERTIES.reduce((width, property) => width + (parseFloat(computedStyle[property]) || 0), ruler.scrollWidth);
+            return BOX_SIZING_BORDER_BOX_WIDTH_PROPERTIES.reduce((width, property) => width + (parseFloat(computedStyle[property]) || 0), textWidth);
         }
-        return ruler.scrollWidth;
+        return textWidth;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFieldSizingContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqFieldSizingContent, isStandalone: true, selector: "[kbqFieldSizingContent]", host: { classAttribute: "kbq-field-sizing-content" }, exportAs: ["kbqFieldSizingContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFieldSizingContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqFieldSizingContent, isStandalone: true, selector: "[kbqFieldSizingContent]", host: { classAttribute: "kbq-field-sizing-content" }, exportAs: ["kbqFieldSizingContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFieldSizingContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFieldSizingContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqFieldSizingContent]',
@@ -1192,12 +1530,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * as alternative token to the actual `KbqFormField` class which would cause unnecessary
  * retention of the `KbqFormField` class and its component metadata.
  *
- * @TODO move into form-field.ts, add correct type for `InjectionToken<KbqFormField>` (#DS-2915)
+ * @deprecated Use `KBQ_FORM_FIELD` from `@koobiq/components/form-field`.
+ *
+ * @docs-private
  */
 const KBQ_FORM_FIELD_REF = new InjectionToken('KbqFormFieldRef');
+/**
+ * Injection token for `KbqConnectedOverlayOriginProvider`. Provide it on an ancestor
+ * component to redirect where a nested `KbqFormField`'s control positions its overlay.
+ */
+const KBQ_CONNECTED_OVERLAY_ORIGIN = new InjectionToken('KbqConnectedOverlayOrigin');
+
+/**
+ * Scrolls a text field horizontally so that its current selection is visible.
+ *
+ * Browsers scroll a field to the caret only for edits the user makes: a selection set from script leaves
+ * the field at whatever offset the last keystroke produced. A masked field re-renders its value and moves
+ * the caret between value parts on every keystroke, so without this the field keeps the offset of the part
+ * that was edited before and clips the one being edited now.
+ *
+ * Leaves the field alone when it is not focused, when it renders something other than its value, and in
+ * right-to-left text, where the browser's own caret following is already correct.
+ */
+const kbqRevealSelection = (element) => {
+    const document = element.ownerDocument;
+    const window = document.defaultView;
+    // A field the user has left is the browser's to scroll: it resets the offset on blur, and a write
+    // landing after that would park the field mid-value until it is focused again.
+    if (!window || document.activeElement !== element) {
+        return;
+    }
+    // A password field renders bullets, which are not the widths of the characters behind them.
+    if (element.type === 'password') {
+        return;
+    }
+    const maxScrollLeft = element.scrollWidth - element.clientWidth;
+    // The value fits, so any offset the field is left at is an artifact of an earlier, longer value.
+    if (maxScrollLeft <= 0) {
+        element.scrollLeft = 0;
+        return;
+    }
+    const computedStyle = window.getComputedStyle(element);
+    // Every offset below is measured from the left edge, while an RTL field scrolls into negative
+    // `scrollLeft`. Mirroring that needs the visual order of a bidi line rather than a prefix of the
+    // value, so the browser's own caret following is left in place instead of being overwritten.
+    if (computedStyle.direction === 'rtl') {
+        return;
+    }
+    const { value, selectionStart, selectionEnd, clientWidth } = element;
+    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+    const ruler = kbqCreateTextRuler(document, computedStyle);
+    document.body.appendChild(ruler);
+    // `scrollLeft` is measured from the start of the padding box, the text starts one `padding-left` in.
+    const start = paddingLeft + kbqMeasureRulerText(ruler, value.slice(0, selectionStart ?? 0));
+    // A caret is the common case on the typing path, and measuring it twice costs a second layout.
+    const end = selectionEnd === selectionStart
+        ? start
+        : paddingLeft + kbqMeasureRulerText(ruler, value.slice(0, selectionEnd ?? 0));
+    ruler.remove();
+    // The smallest offset that still shows the selection, so that as much as possible of what precedes it
+    // stays on screen. Deriving the offset from the selection alone, instead of nudging the current one,
+    // keeps the result independent of where the last keystroke happened to leave the field.
+    const minimumRevealingEnd = Math.max(end + paddingRight - clientWidth, 0);
+    // A selection wider than the field cannot be shown whole; its start is the half worth keeping.
+    const maximumKeepingStart = Math.max(start - paddingLeft, 0);
+    element.scrollLeft = Math.min(minimumRevealingEnd, maximumKeepingStart, maxScrollLeft);
+};
+/**
+ * Selects the `[start, end]` range of a text field and keeps it visible.
+ *
+ * @see {@link kbqRevealSelection}
+ */
+const kbqSetSelectionRange = (element, start, end) => {
+    element.setSelectionRange(start, end);
+    kbqRevealSelection(element);
+};
 
 const enUSLocaleData = {
-    select: { hiddenItemsText: '+{{ number }}' },
+    a11y: {
+        close: 'Close',
+        save: 'Save',
+        cancel: 'Cancel',
+        removeAll: 'Remove all',
+        expandBreadcrumbs: 'Show hidden breadcrumbs',
+        previousMonth: 'Previous month',
+        currentDate: 'Current date',
+        nextMonth: 'Next month',
+        clear: 'Clear',
+        showPassword: 'Show password',
+        hidePassword: 'Hide password',
+        resizeColumns: 'Resize columns'
+    },
+    select: { hiddenItemsText: '+{{ number }}', selectAll: 'Select all' },
     datepicker: {
         placeholder: 'yyyy-mm-dd',
         dateInput: 'yyyy-MM-dd'
@@ -1291,6 +1716,8 @@ const enUSLocaleData = {
             customPeriodFrom: 'from',
             customPeriodTo: 'to',
             customPeriodErrorHint: 'The period cannot start later than it ends',
+            customPeriodMinIntervalErrorHint: 'The period cannot be shorter than {{ value }}',
+            customPeriodMaxIntervalErrorHint: 'The period cannot be longer than {{ value }}',
             backToPeriodSelection: 'Back'
         }
     },
@@ -1423,7 +1850,24 @@ const enUSLocaleData = {
 };
 
 const esLALocaleData = {
-    select: { hiddenItemsText: '+{{ number }}' },
+    a11y: {
+        close: 'Cerrar',
+        save: 'Guardar',
+        cancel: 'Cancelar',
+        removeAll: 'Eliminar todo',
+        expandBreadcrumbs: 'Mostrar elementos ocultos',
+        previousMonth: 'Mes anterior',
+        currentDate: 'Fecha actual',
+        nextMonth: 'Mes siguiente',
+        clear: 'Borrar',
+        showPassword: 'Mostrar la contraseña',
+        hidePassword: 'Ocultar la contraseña',
+        resizeColumns: 'Redimensionar columnas'
+    },
+    select: {
+        hiddenItemsText: '+{{ number }}',
+        selectAll: 'Seleccionar todo'
+    },
     datepicker: {
         placeholder: 'dd/mm/aaaa'
     },
@@ -1516,6 +1960,8 @@ const esLALocaleData = {
             customPeriodFrom: 'desde',
             customPeriodTo: 'hasta',
             customPeriodErrorHint: 'El inicio del período no puede estar después del fin',
+            customPeriodMinIntervalErrorHint: 'El período no puede ser más corto que {{ value }}',
+            customPeriodMaxIntervalErrorHint: 'El período no puede ser más largo que {{ value }}',
             backToPeriodSelection: 'Atrás'
         }
     },
@@ -1647,73 +2093,284 @@ const esLALocaleData = {
     }
 };
 
-const ptBRLocaleData = {
-    select: { hiddenItemsText: '+{{ number }}' },
-    datepicker: {
-        placeholder: 'dd/mm/yyyy'
-    },
-    timepicker: {
-        placeholder: {
-            full: 'hh:mm:ss',
-            short: 'hh:mm'
+const enUSFormattersData = {
+    formatters: {
+        number: {
+            rounding: {
+                separator: '',
+                groupSeparator: '.',
+                thousand: 'K',
+                million: 'M',
+                billion: 'B',
+                trillion: 'T'
+            }
         }
     },
-    fileUpload: {
-        single: {
-            captionText: 'Arrastar o arquivo aqui ou {{ browseLink }}',
-            captionTextOnlyFolder: 'Arrastar o arquivo aqui ou {{ browseLinkFolder }}',
-            captionTextWithFolder: 'Arrastar o arquivo aqui ou {{ browseLink }} ou {{ browseLinkFolderMixed }}',
-            browseLink: 'escolher',
-            browseLinkFolder: 'pasta',
-            browseLinkFolderMixed: 'pasta'
-        },
-        multiple: {
-            captionText: 'Arrastar aqui ou {{ browseLink }}',
-            captionTextOnlyFolder: 'Arrastar aqui ou {{ browseLinkFolder }}',
-            captionTextWithFolder: 'Arrastar aqui ou {{ browseLink }} ou {{ browseLinkFolderMixed }}',
-            captionTextWhenSelected: 'Arrastar mais arquivos aqui ou {{ browseLink }}',
-            captionTextForCompactSize: 'Arrastar arquivos ou {{ browseLink }}',
-            browseLink: 'escolher',
-            browseLinkFolder: 'pasta',
-            browseLinkFolderMixed: 'pasta',
-            title: 'Carregar arquivos'
+    input: {
+        number: {
+            groupSeparator: [','],
+            fractionSeparator: '.'
         }
     },
-    codeBlock: {
-        softWrapOnTooltip: 'Ativar quebra de linha',
-        softWrapOffTooltip: 'Desativar quebra de linha',
-        downloadTooltip: 'Baixar',
-        copiedTooltip: '✓ Copiado',
-        copyTooltip: 'Copiar',
-        viewAllText: 'Mostrar todos',
-        viewLessText: 'Mostrar menos',
-        openExternalSystemTooltip: 'Abrir em sistema externo'
-    },
-    timezone: {
-        searchPlaceholder: 'Cidade ou fuso horário'
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
+                base: 2,
+                power: 10
+            }
+        }
+    }
+};
+const esLAFormattersData = {
+    formatters: {
+        number: {
+            rounding: {
+                separator: '',
+                groupSeparator: ',',
+                thousand: 'K',
+                million: 'M',
+                billion: 'MRD',
+                trillion: 'B'
+            },
+            decimal: {
+                viewGroupSeparator: '\u2009'
+            }
+        }
     },
-    actionsPanel: {
-        closeTooltip: 'Desmarcar'
+    input: {
+        number: {
+            // nbsp is generated automatically and used by default in spec
+            groupSeparator: [' ', ' ', '\u2009'],
+            fractionSeparator: ',',
+            viewGroupSeparator: '\u2009'
+        }
     },
-    filterBar: {
-        reset: {
-            buttonName: 'Reconfigurar'
-        },
-        search: {
-            tooltip: 'Buscar',
-            placeholder: 'Buscar'
-        },
-        filters: {
-            defaultName: 'Filtros',
-            saveNewFilterTooltip: 'Salve o filtro novo',
-            searchPlaceholder: 'Buscar',
-            searchEmptyResult: 'Nada encontrado',
-            saveAsNewFilter: 'Salve o filtro novo',
-            saveChanges: 'Salve as mudanças',
-            saveAsNew: 'Salve como novo',
-            change: 'Editar',
-            resetChanges: 'Reconfigurar',
-            remove: 'Deletar',
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
+                base: 2,
+                power: 10
+            }
+        }
+    }
+};
+const ptBRFormattersData = {
+    formatters: {
+        number: {
+            rounding: {
+                separator: ' ',
+                groupSeparator: ',',
+                thousand: 'mil',
+                million: 'mi',
+                billion: 'bi',
+                trillion: 'tri'
+            }
+        }
+    },
+    input: {
+        number: {
+            groupSeparator: ['.'],
+            fractionSeparator: ','
+        }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
+                base: 2,
+                power: 10
+            }
+        }
+    }
+};
+const ruRUFormattersData = {
+    formatters: {
+        number: {
+            rounding: {
+                separator: ' ',
+                groupSeparator: ',',
+                thousand: 'К',
+                million: 'М',
+                // Latin `B` (U+0042) according to UX Guidelines.
+                billion: 'B',
+                trillion: 'Т'
+            },
+            decimal: {
+                viewGroupSeparator: '\u2009'
+            }
+        }
+    },
+    input: {
+        number: {
+            // nbsp is generated automatically and used by default in spec
+            groupSeparator: [' ', ' ', '\u2009'],
+            fractionSeparator: ',',
+            startFormattingFrom: 4,
+            viewGroupSeparator: '\u2009'
+        }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
+                base: 2,
+                power: 10
+            }
+        }
+    }
+};
+const tkTMFormattersData = {
+    formatters: {
+        number: {
+            rounding: {
+                separator: ' ',
+                groupSeparator: '',
+                thousand: 'M',
+                million: 'Mn',
+                billion: 'Mr',
+                trillion: 'Tn'
+            }
+        }
+    },
+    input: {
+        number: {
+            groupSeparator: [' ', ' ', '\u2009'],
+            fractionSeparator: ',',
+            viewGroupSeparator: '\u2009'
+        }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
+                base: 2,
+                power: 10
+            }
+        }
+    }
+};
+
+const ptBRLocaleData = {
+    a11y: {
+        close: 'Fechar',
+        save: 'Salvar',
+        cancel: 'Cancelar',
+        removeAll: 'Remover tudo',
+        expandBreadcrumbs: 'Mostrar itens ocultos',
+        previousMonth: 'Mês anterior',
+        currentDate: 'Data atual',
+        nextMonth: 'Próximo mês',
+        clear: 'Apagar',
+        showPassword: 'Mostrar a senha',
+        hidePassword: 'Ocultar a senha',
+        resizeColumns: 'Redimensionar colunas'
+    },
+    select: {
+        hiddenItemsText: '+{{ number }}',
+        selectAll: 'Selecionar tudo'
+    },
+    datepicker: {
+        placeholder: 'dd/mm/yyyy'
+    },
+    timepicker: {
+        placeholder: {
+            full: 'hh:mm:ss',
+            short: 'hh:mm'
+        }
+    },
+    fileUpload: {
+        single: {
+            captionText: 'Arrastar o arquivo aqui ou {{ browseLink }}',
+            captionTextOnlyFolder: 'Arrastar o arquivo aqui ou {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Arrastar o arquivo aqui ou {{ browseLink }} ou {{ browseLinkFolderMixed }}',
+            browseLink: 'escolher',
+            browseLinkFolder: 'pasta',
+            browseLinkFolderMixed: 'pasta'
+        },
+        multiple: {
+            captionText: 'Arrastar aqui ou {{ browseLink }}',
+            captionTextOnlyFolder: 'Arrastar aqui ou {{ browseLinkFolder }}',
+            captionTextWithFolder: 'Arrastar aqui ou {{ browseLink }} ou {{ browseLinkFolderMixed }}',
+            captionTextWhenSelected: 'Arrastar mais arquivos aqui ou {{ browseLink }}',
+            captionTextForCompactSize: 'Arrastar arquivos ou {{ browseLink }}',
+            browseLink: 'escolher',
+            browseLinkFolder: 'pasta',
+            browseLinkFolderMixed: 'pasta',
+            title: 'Carregar arquivos'
+        }
+    },
+    codeBlock: {
+        softWrapOnTooltip: 'Ativar quebra de linha',
+        softWrapOffTooltip: 'Desativar quebra de linha',
+        downloadTooltip: 'Baixar',
+        copiedTooltip: '✓ Copiado',
+        copyTooltip: 'Copiar',
+        viewAllText: 'Mostrar todos',
+        viewLessText: 'Mostrar menos',
+        openExternalSystemTooltip: 'Abrir em sistema externo'
+    },
+    timezone: {
+        searchPlaceholder: 'Cidade ou fuso horário'
+    },
+    actionsPanel: {
+        closeTooltip: 'Desmarcar'
+    },
+    filterBar: {
+        reset: {
+            buttonName: 'Reconfigurar'
+        },
+        search: {
+            tooltip: 'Buscar',
+            placeholder: 'Buscar'
+        },
+        filters: {
+            defaultName: 'Filtros',
+            saveNewFilterTooltip: 'Salve o filtro novo',
+            searchPlaceholder: 'Buscar',
+            searchEmptyResult: 'Nada encontrado',
+            saveAsNewFilter: 'Salve o filtro novo',
+            saveChanges: 'Salve as mudanças',
+            saveAsNew: 'Salve como novo',
+            change: 'Editar',
+            resetChanges: 'Reconfigurar',
+            remove: 'Deletar',
             name: 'Nome',
             error: 'A busca com esse nome já existe',
             errorHint: 'O filtro não pôde ser salvo. Tente de novo ou entre em contato com o administrador.',
@@ -1741,6 +2398,8 @@ const ptBRLocaleData = {
             customPeriodFrom: 'de',
             customPeriodTo: 'até',
             customPeriodErrorHint: 'O período não pode começar depois de quando acaba',
+            customPeriodMinIntervalErrorHint: 'O período não pode ser menor que {{ value }}',
+            customPeriodMaxIntervalErrorHint: 'O período não pode ser maior que {{ value }}',
             backToPeriodSelection: 'Voltar'
         }
     },
@@ -1873,7 +2532,21 @@ const ptBRLocaleData = {
 };
 
 const ruRULocaleData = {
-    select: { hiddenItemsText: '+{{ number }}' },
+    a11y: {
+        close: 'Закрыть',
+        save: 'Сохранить',
+        cancel: 'Отменить',
+        removeAll: 'Удалить все',
+        expandBreadcrumbs: 'Показать скрытые элементы',
+        previousMonth: 'Предыдущий месяц',
+        currentDate: 'Текущая дата',
+        nextMonth: 'Следующий месяц',
+        clear: 'Очистить',
+        showPassword: 'Показать пароль',
+        hidePassword: 'Скрыть пароль',
+        resizeColumns: 'Изменить ширину колонок'
+    },
+    select: { hiddenItemsText: '+{{ number }}', selectAll: 'Выбрать все' },
     datepicker: {
         placeholder: 'дд.мм.гггг',
         dateInput: 'dd.MM.yyyy'
@@ -1967,6 +2640,8 @@ const ruRULocaleData = {
             customPeriodFrom: 'с',
             customPeriodTo: 'по',
             customPeriodErrorHint: 'Начало периода не может быть позже окончания',
+            customPeriodMinIntervalErrorHint: 'Период не может быть короче {{ value }}',
+            customPeriodMaxIntervalErrorHint: 'Период не может быть длиннее {{ value }}',
             backToPeriodSelection: 'Назад'
         }
     },
@@ -2113,7 +2788,24 @@ const ruRULocaleData = {
 };
 
 const tkTMLocaleData = {
-    select: { hiddenItemsText: '+{{ number }}' },
+    a11y: {
+        close: 'Ýap',
+        save: 'Ýazdyr',
+        cancel: 'Ýatyr',
+        removeAll: 'Ählisini aýyr',
+        expandBreadcrumbs: 'Gizlenen elementleri görkez',
+        previousMonth: 'Öňki aý',
+        currentDate: 'Şu günki sene',
+        nextMonth: 'Indiki aý',
+        clear: 'Arassala',
+        showPassword: 'Paroly görkez',
+        hidePassword: 'Paroly gizle',
+        resizeColumns: 'Sütünleriň giňligini üýtget'
+    },
+    select: {
+        hiddenItemsText: '+{{ number }}',
+        selectAll: 'Ählisini saýla'
+    },
     datepicker: {
         placeholder: 'gg.aa.ýý.',
         dateInput: 'gg.aa.ýý.'
@@ -2207,6 +2899,8 @@ const tkTMLocaleData = {
             customPeriodFrom: 'başy',
             customPeriodTo: 'soňy',
             customPeriodErrorHint: 'Döwür gutarýan wagtyndan soň başlap bilmeýär',
+            customPeriodMinIntervalErrorHint: 'Döwür azyndan {{ value }} bolmaly',
+            customPeriodMaxIntervalErrorHint: 'Döwür köpi bilen {{ value }} bolmaly',
             backToPeriodSelection: 'Yzyna'
         }
     },
@@ -2229,306 +2923,112 @@ const tkTMLocaleData = {
         }
     },
     searchExpandable: {
-        tooltip: 'Gözleg',
-        placeholder: 'Gözleg'
-    },
-    appSwitcher: {
-        searchPlaceholder: 'Gözleg',
-        searchEmptyResult: 'Hiç zat tapylmady',
-        sitesHeader: 'Beýleki saýtlar'
-    },
-    timeRange: {
-        title: {
-            for: 'soňky',
-            placeholder: 'Möhleti saýla'
-        },
-        editor: {
-            from: 'şundan',
-            to: 'şuňa',
-            apply: 'Ulanmak',
-            cancel: 'Ýatyrmak',
-            rangeLabel: 'Döwür',
-            allTime: 'hemme döwür üçin',
-            currentQuarter: 'şu çärýek üçin',
-            currentYear: 'şu ýyl üçin',
-            allTimeOption: 'Hemme döwür',
-            currentQuarterOption: 'Şu çärýek',
-            currentYearOption: 'Şu ýyl'
-        },
-        durationTemplate: {
-            title: {
-                SEPARATOR: ' ',
-                LAST_PART_SEPARATOR: '',
-                YEARS: `{years, plural,
-                one {# ýyl}
-                other {# ýyl}
-            }`,
-                MONTHS: `{months, plural,
-                one {aý}
-                other {# aý}
-            }`,
-                WEEKS: `{weeks, plural,
-                one {hepde}
-                other {# hepde}
-            }`,
-                DAYS: `{days, plural,
-                one {gün}
-                other {# gün}
-            }`,
-                HOURS: `{hours, plural,
-                one {sagat}
-                other {# sagat}
-            }`,
-                MINUTES: `{minutes, plural,
-                one {minut}
-                other {# minut}
-            }`,
-                SECONDS: `{seconds, plural,
-                one {sekunt}
-                other {# sekunt}
-            }`,
-                YEARS_FRACTION: `{years} ýyl`,
-                MONTHS_FRACTION: `{months} aý`
-            },
-            option: {
-                SEPARATOR: ' ',
-                LAST_PART_SEPARATOR: '',
-                YEARS: `{years, plural,
-                one {# ýyl}
-                other {# ýyl}
-            }`,
-                MONTHS: `{months, plural,
-                one {Aý}
-                other {# aý}
-            }`,
-                WEEKS: `{weeks, plural,
-                one {Hepde}
-                other {# hepde}
-            }`,
-                DAYS: `{days, plural,
-                one {Gün}
-                other {# gün}
-            }`,
-                HOURS: `{hours, plural,
-                one {Sagat}
-                other {# sagat}
-            }`,
-                MINUTES: `{minutes, plural,
-                one {Minut}
-                other {# minut}
-            }`,
-                SECONDS: `{seconds, plural,
-                one {Sekunt}
-                other {# sekunt}
-            }`,
-                YEARS_FRACTION: `{years} ýyl`,
-                MONTHS_FRACTION: `{months} aý`
-            }
-        }
-    },
-    notificationCenter: {
-        notifications: 'Duýduryşlar',
-        remove: 'Aýyr',
-        doNotDisturb: 'Alada etme',
-        showPopUpNotifications: 'Açylýan bildirişleri görkeziň',
-        noNotifications: 'Duýduryş ýok',
-        failedToLoadNotifications: 'Duýduryşlary ýükläp bilmedi',
-        repeat: 'Gaýtalama',
-        loadingMore: 'Duýduryşlar ýüklenýär'
-    }
-};
-
-const enUSFormattersData = {
-    formatters: {
-        number: {
-            rounding: {
-                separator: '',
-                groupSeparator: '.',
-                thousand: 'K',
-                million: 'M',
-                billion: 'B',
-                trillion: 'T'
-            }
-        }
-    },
-    input: {
-        number: {
-            groupSeparator: [','],
-            fractionSeparator: '.'
-        }
-    },
-    sizeUnits: {
-        defaultUnitSystem: 'SI',
-        defaultPrecision: 2,
-        unitSystems: {
-            SI: {
-                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
-                base: 10,
-                power: 3
-            },
-            IEC: {
-                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
-                base: 2,
-                power: 10
-            }
-        }
-    }
-};
-const esLAFormattersData = {
-    formatters: {
-        number: {
-            rounding: {
-                separator: '',
-                groupSeparator: ',',
-                thousand: 'K',
-                million: 'M',
-                billion: 'MRD',
-                trillion: 'B'
-            },
-            decimal: {
-                viewGroupSeparator: '\u2009'
-            }
-        }
-    },
-    input: {
-        number: {
-            // nbsp is generated automatically and used by default in spec
-            groupSeparator: [' ', ' ', '\u2009'],
-            fractionSeparator: ',',
-            viewGroupSeparator: '\u2009'
-        }
-    },
-    sizeUnits: {
-        defaultUnitSystem: 'SI',
-        defaultPrecision: 2,
-        unitSystems: {
-            SI: {
-                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
-                base: 10,
-                power: 3
-            },
-            IEC: {
-                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
-                base: 2,
-                power: 10
-            }
-        }
-    }
-};
-const ptBRFormattersData = {
-    formatters: {
-        number: {
-            rounding: {
-                separator: ' ',
-                groupSeparator: ',',
-                thousand: 'mil',
-                million: 'mi',
-                billion: 'bi',
-                trillion: 'tri'
-            }
-        }
-    },
-    input: {
-        number: {
-            groupSeparator: ['.'],
-            fractionSeparator: ','
-        }
-    },
-    sizeUnits: {
-        defaultUnitSystem: 'SI',
-        defaultPrecision: 2,
-        unitSystems: {
-            SI: {
-                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
-                base: 10,
-                power: 3
-            },
-            IEC: {
-                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
-                base: 2,
-                power: 10
-            }
-        }
-    }
-};
-const ruRUFormattersData = {
-    formatters: {
-        number: {
-            rounding: {
-                separator: ' ',
-                groupSeparator: ',',
-                thousand: 'К',
-                million: 'М',
-                // Latin `B` (U+0042) according to UX Guidelines.
-                billion: 'B',
-                trillion: 'Т'
-            },
-            decimal: {
-                viewGroupSeparator: '\u2009'
-            }
-        }
-    },
-    input: {
-        number: {
-            // nbsp is generated automatically and used by default in spec
-            groupSeparator: [' ', ' ', '\u2009'],
-            fractionSeparator: ',',
-            startFormattingFrom: 4,
-            viewGroupSeparator: '\u2009'
-        }
-    },
-    sizeUnits: {
-        defaultUnitSystem: 'SI',
-        defaultPrecision: 2,
-        unitSystems: {
-            SI: {
-                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
-                base: 10,
-                power: 3
-            },
-            IEC: {
-                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
-                base: 2,
-                power: 10
-            }
-        }
-    }
-};
-const tkTMFormattersData = {
-    formatters: {
-        number: {
-            rounding: {
-                separator: ' ',
-                groupSeparator: '',
-                thousand: 'M',
-                million: 'Mn',
-                billion: 'Mr',
-                trillion: 'Tn'
-            }
-        }
-    },
-    input: {
-        number: {
-            groupSeparator: [' ', ' ', '\u2009'],
-            fractionSeparator: ',',
-            viewGroupSeparator: '\u2009'
-        }
+        tooltip: 'Gözleg',
+        placeholder: 'Gözleg'
     },
-    sizeUnits: {
-        defaultUnitSystem: 'SI',
-        defaultPrecision: 2,
-        unitSystems: {
-            SI: {
-                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
-                base: 10,
-                power: 3
+    appSwitcher: {
+        searchPlaceholder: 'Gözleg',
+        searchEmptyResult: 'Hiç zat tapylmady',
+        sitesHeader: 'Beýleki saýtlar'
+    },
+    timeRange: {
+        title: {
+            for: 'soňky',
+            placeholder: 'Möhleti saýla'
+        },
+        editor: {
+            from: 'şundan',
+            to: 'şuňa',
+            apply: 'Ulanmak',
+            cancel: 'Ýatyrmak',
+            rangeLabel: 'Döwür',
+            allTime: 'hemme döwür üçin',
+            currentQuarter: 'şu çärýek üçin',
+            currentYear: 'şu ýyl üçin',
+            allTimeOption: 'Hemme döwür',
+            currentQuarterOption: 'Şu çärýek',
+            currentYearOption: 'Şu ýyl'
+        },
+        durationTemplate: {
+            title: {
+                SEPARATOR: ' ',
+                LAST_PART_SEPARATOR: '',
+                YEARS: `{years, plural,
+                one {# ýyl}
+                other {# ýyl}
+            }`,
+                MONTHS: `{months, plural,
+                one {aý}
+                other {# aý}
+            }`,
+                WEEKS: `{weeks, plural,
+                one {hepde}
+                other {# hepde}
+            }`,
+                DAYS: `{days, plural,
+                one {gün}
+                other {# gün}
+            }`,
+                HOURS: `{hours, plural,
+                one {sagat}
+                other {# sagat}
+            }`,
+                MINUTES: `{minutes, plural,
+                one {minut}
+                other {# minut}
+            }`,
+                SECONDS: `{seconds, plural,
+                one {sekunt}
+                other {# sekunt}
+            }`,
+                YEARS_FRACTION: `{years} ýyl`,
+                MONTHS_FRACTION: `{months} aý`
             },
-            IEC: {
-                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
-                base: 2,
-                power: 10
+            option: {
+                SEPARATOR: ' ',
+                LAST_PART_SEPARATOR: '',
+                YEARS: `{years, plural,
+                one {# ýyl}
+                other {# ýyl}
+            }`,
+                MONTHS: `{months, plural,
+                one {Aý}
+                other {# aý}
+            }`,
+                WEEKS: `{weeks, plural,
+                one {Hepde}
+                other {# hepde}
+            }`,
+                DAYS: `{days, plural,
+                one {Gün}
+                other {# gün}
+            }`,
+                HOURS: `{hours, plural,
+                one {Sagat}
+                other {# sagat}
+            }`,
+                MINUTES: `{minutes, plural,
+                one {Minut}
+                other {# minut}
+            }`,
+                SECONDS: `{seconds, plural,
+                one {Sekunt}
+                other {# sekunt}
+            }`,
+                YEARS_FRACTION: `{years} ýyl`,
+                MONTHS_FRACTION: `{months} aý`
             }
         }
+    },
+    notificationCenter: {
+        notifications: 'Duýduryşlar',
+        remove: 'Aýyr',
+        doNotDisturb: 'Alada etme',
+        showPopUpNotifications: 'Açylýan bildirişleri görkeziň',
+        noNotifications: 'Duýduryş ýok',
+        failedToLoadNotifications: 'Duýduryşlary ýükläp bilmedi',
+        repeat: 'Gaýtalama',
+        loadingMore: 'Duýduryşlar ýüklenýär'
     }
 };
 
@@ -2602,10 +3102,10 @@ class KbqLocaleService {
     getParams(componentName) {
         return this.current[componentName];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2687,14 +3187,38 @@ function checkAndNormalizeLocalizedNumber(num, locale) {
     return numberOutput;
 }
 
+/** Localization configuration for the accessible names of the icon-only buttons the library renders itself. */
+const KBQ_A11Y_LOCALE_CONFIGURATION = new InjectionToken('KBQ_A11Y_LOCALE_CONFIGURATION', { factory: () => ruRULocaleData.a11y });
+/** Utility provider for `KBQ_A11Y_LOCALE_CONFIGURATION`. */
+const kbqA11yLocaleConfigurationProvider = (configuration) => ({
+    provide: KBQ_A11Y_LOCALE_CONFIGURATION,
+    useValue: configuration
+});
+/**
+ * Reactive accessible names for the icon-only buttons the library renders itself.
+ *
+ * Follows `KbqLocaleService` when one is provided, and otherwise stays on whatever
+ * `KBQ_A11Y_LOCALE_CONFIGURATION` resolves to.
+ *
+ * @docs-private
+ */
+function kbqInjectA11yLocaleConfiguration() {
+    const localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+    const initialValue = inject(KBQ_A11Y_LOCALE_CONFIGURATION);
+    const configuration = localeService
+        ? localeService.changes.pipe(map$1(() => localeService.getParams('a11y')))
+        : of(initialValue);
+    return toSignal(configuration, { initialValue });
+}
+
 class KbqLocaleServiceModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleServiceModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleServiceModule, providers: [
             { provide: KBQ_LOCALE_SERVICE, useClass: KbqLocaleService }
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLocaleServiceModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -2712,13 +3236,74 @@ class DateFormatter extends DateFormatter$1 {
         this.adapter = adapter;
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe((locale) => this.setLocale(locale));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateFormatter }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DateFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DateFormatter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateFormatter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DateFormatter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Identity comparison with a one-level element-wise fallback for arrays, so an input rebuilt on every
+ * change detection cycle — a `[from, to]` tuple returned from a getter or a `computed()`, a `units`
+ * array built in a method — still hits the cache of the impure pipes below. Array literals written
+ * directly in a template are already memoized by Angular (`ɵɵpureFunction`); this covers the rest.
+ *
+ * Compares array elements by reference, like the `a === b` fallback it wraps — it has no notion of two
+ * dates being "equal". Mutating a date already passed to a pipe in place (`Date#setHours`, a Moment
+ * instance updated without cloning, …) keeps the same reference, so a `[from, to]` tuple rebuilt around
+ * that mutated instance still reads as unchanged and the cached, now-stale string is returned. Replace
+ * pipe inputs instead of mutating them — the same requirement Angular's OnPush change detection already
+ * places on any object bound to an OnPush view.
+ */
+const shallowEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+        return false;
+    return a.every((item, index) => item === b[index]);
+};
+/**
+ * Deserializes a pipe input into a date, treating a missing value and an unparseable one alike as
+ * "no date" — `DateAdapter.deserialize()` returns `null` for the former but a truthy *invalid* date
+ * for the latter, so a plain truthiness check is not enough.
+ */
+const toValidDate = (adapter, value) => {
+    const date = adapter.deserialize(value);
+    return date != null && adapter.isValid(date) ? date : null;
+};
+/**
+ * A `[from, to]` tuple with both bounds required; `null` when either is missing or invalid.
+ *
+ * Takes the tuple itself as possibly missing, not just its bounds: a pipe input that has not been
+ * populated yet is `null`/`undefined` rather than `[null, null]`, and destructuring that throws.
+ */
+const toClosedRange = (adapter, value) => {
+    const [from, to] = value ?? [];
+    const startDate = toValidDate(adapter, from);
+    const endDate = toValidDate(adapter, to);
+    return startDate && endDate ? [startDate, endDate] : null;
+};
+/**
+ * A `[from, to]` tuple where one bound may be open; `null` only when neither bound is a valid date.
+ *
+ * The range formatters switch to the opened-range template on their own when a bound is missing, but
+ * throw when both are — and a throwing pipe aborts the rendering of the whole view.
+ */
+const toOpenedRange = (adapter, value) => {
+    const [from, to] = value ?? [];
+    const startDate = toValidDate(adapter, from);
+    const endDate = toValidDate(adapter, to);
+    return startDate || endDate ? [startDate, endDate] : null;
+};
+/**
+ * A `[from, to]` tuple the duration formatters accept: both bounds required and chronologically
+ * ordered. `DateFormatter.duration*` throws on anything else.
+ */
+const toDurationRange = (adapter, value) => {
+    const range = toClosedRange(adapter, value);
+    return range && adapter.compareDateTime(range[0], range[1]) <= 0 ? range : null;
+};
 class BaseFormatterPipe {
     constructor() {
         this.adapter = inject((DateAdapter));
@@ -2726,14 +3311,15 @@ class BaseFormatterPipe {
     }
 }
 /**
- * Base class for impure date-formatter pipes that recompute their result
- * whenever the active locale changes via `KbqLocaleService`.
+ * Base class for impure date-formatter pipes that recompute their result whenever the active locale
+ * changes via `KbqLocaleService`, or the active time zone via `KbqDateTimezoneService`.
  *
  * The base class owns:
- * - a subscription to `KbqLocaleService.changes` that invalidates the cache and
- *   marks the host for check (the same approach the built-in `AsyncPipe` uses);
- * - caching by `(value, args, localeId)`, so the impure `transform()` only does
- *   real work when an input or the active locale actually changed.
+ * - a subscription to `KbqLocaleService.changes` and an `effect` on the active time zone, each of which
+ *   invalidates the cache and marks the host for check (the same approach the built-in `AsyncPipe` uses);
+ * - caching by `(value, args, localeId, timezone)`, so the impure `transform()` only does
+ *   real work when an input, the active locale or the active time zone actually changed — see
+ *   `shallowEqual` for how the comparison works and its limits.
  *
  * Subclasses implement `format()`, which receives the raw pipe input(s) — a
  * single value for absolute/relative pipes, or a `[from, to]` tuple for range
@@ -2747,21 +3333,31 @@ class BaseLocaleAwareFormatterPipe extends BaseFormatterPipe {
         super();
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.timezoneService = inject(KbqDateTimezoneService);
         this.cachedValue = null;
         this.cachedArgs = [];
         this.cachedLocaleId = null;
+        this.cachedTimezone = null;
         this.cachedResult = '';
         this.hasCache = false;
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(() => {
             this.hasCache = false;
             this.changeDetectorRef.markForCheck();
         });
+        // Only wakes an OnPush host up; the cache is invalidated by comparing the zone in `transform()`,
+        // so the run this effect makes on creation costs nothing.
+        effect(() => {
+            this.timezoneService.timezone();
+            this.changeDetectorRef.markForCheck();
+        });
     }
     transform(value, ...args) {
         const currentLocaleId = this.localeService?.id ?? null;
+        const currentTimezone = this.timezoneService.timezone();
         if (this.hasCache &&
-            value === this.cachedValue &&
+            shallowEqual(value, this.cachedValue) &&
             currentLocaleId === this.cachedLocaleId &&
+            currentTimezone === this.cachedTimezone &&
             this.argsEqual(args)) {
             return this.cachedResult;
         }
@@ -2769,6 +3365,7 @@ class BaseLocaleAwareFormatterPipe extends BaseFormatterPipe {
         this.cachedValue = value;
         this.cachedArgs = args;
         this.cachedLocaleId = currentLocaleId;
+        this.cachedTimezone = currentTimezone;
         this.hasCache = true;
         return this.cachedResult;
     }
@@ -2776,7 +3373,7 @@ class BaseLocaleAwareFormatterPipe extends BaseFormatterPipe {
         if (args.length !== this.cachedArgs.length)
             return false;
         for (let i = 0; i < args.length; i++) {
-            if (args[i] !== this.cachedArgs[i])
+            if (!shallowEqual(args[i], this.cachedArgs[i]))
                 return false;
         }
         return true;
@@ -2784,13 +3381,13 @@ class BaseLocaleAwareFormatterPipe extends BaseFormatterPipe {
 }
 class AbsoluteDateFormatterPipe extends BaseFormatterPipe {
     transform(value, currYear) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteLongDate(date, currYear) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterPipe, isStandalone: true, name: "absoluteLongDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateFormatterPipe, isStandalone: true, name: "absoluteLongDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDate'
@@ -2801,10 +3398,10 @@ class AbsoluteDateFormatterImpurePipe extends AbsoluteDateFormatterPipe {
     transform(value, currYear) {
         return super.transform(value, currYear);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDateImpurePipe',
@@ -2813,13 +3410,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class AbsoluteDateTimeFormatterPipe extends BaseFormatterPipe {
     transform(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteLongDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, isStandalone: true, name: "absoluteLongDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, isStandalone: true, name: "absoluteLongDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDateTime'
@@ -2830,10 +3427,10 @@ class AbsoluteDateTimeFormatterImpurePipe extends AbsoluteDateTimeFormatterPipe
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDateTimeImpurePipe',
@@ -2842,13 +3439,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class AbsoluteDateShortFormatterPipe extends BaseFormatterPipe {
     transform(value, currYear) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteShortDate(date, currYear) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterPipe, isStandalone: true, name: "absoluteShortDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateShortFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateShortFormatterPipe, isStandalone: true, name: "absoluteShortDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateShortFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDate'
@@ -2859,10 +3456,10 @@ class AbsoluteDateShortFormatterImpurePipe extends AbsoluteDateShortFormatterPip
     transform(value, currYear) {
         return super.transform(value, currYear);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDateImpurePipe',
@@ -2871,13 +3468,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class AbsoluteShortDateTimeFormatterPipe extends BaseFormatterPipe {
     transform(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteShortDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, isStandalone: true, name: "absoluteShortDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, isStandalone: true, name: "absoluteShortDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDateTime'
@@ -2888,10 +3485,10 @@ class AbsoluteShortDateTimeFormatterImpurePipe extends AbsoluteShortDateTimeForm
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDateTimeImpurePipe',
@@ -2900,13 +3497,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class RelativeDateFormatterPipe extends BaseFormatterPipe {
     transform(value) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeLongDate(date) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterPipe, isStandalone: true, name: "relativeLongDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateFormatterPipe, isStandalone: true, name: "relativeLongDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDate'
@@ -2917,10 +3514,10 @@ class RelativeDateFormatterImpurePipe extends RelativeDateFormatterPipe {
     transform(value) {
         return super.transform(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterImpurePipe, isStandalone: true, name: "relativeLongDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateFormatterImpurePipe, isStandalone: true, name: "relativeLongDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDateImpurePipe',
@@ -2929,13 +3526,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class RelativeDateTimeFormatterPipe extends BaseFormatterPipe {
     transform(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeLongDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterPipe, isStandalone: true, name: "relativeLongDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateTimeFormatterPipe, isStandalone: true, name: "relativeLongDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDateTime'
@@ -2946,10 +3543,10 @@ class RelativeDateTimeFormatterImpurePipe extends RelativeDateTimeFormatterPipe
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeLongDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeLongDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDateTimeImpurePipe',
@@ -2958,13 +3555,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class RelativeShortDateFormatterPipe extends BaseFormatterPipe {
     transform(value) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeShortDate(date) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterPipe, isStandalone: true, name: "relativeShortDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateFormatterPipe, isStandalone: true, name: "relativeShortDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDate'
@@ -2975,10 +3572,10 @@ class RelativeShortDateFormatterImpurePipe extends RelativeShortDateFormatterPip
     transform(value) {
         return super.transform(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, isStandalone: true, name: "relativeShortDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, isStandalone: true, name: "relativeShortDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDateImpurePipe',
@@ -2987,13 +3584,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 class RelativeShortDateTimeFormatterPipe extends BaseFormatterPipe {
     transform(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeShortDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, isStandalone: true, name: "relativeShortDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, isStandalone: true, name: "relativeShortDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDateTime'
@@ -3004,10 +3601,10 @@ class RelativeShortDateTimeFormatterImpurePipe extends RelativeShortDateTimeForm
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeShortDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeShortDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDateTimeImpurePipe',
@@ -3015,15 +3612,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 class RangeDateFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2]) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeLongDate(date1, date2);
+    transform(value) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeLongDate(range[0], range[1]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterPipe, isStandalone: true, name: "rangeLongDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeDateFormatterPipe, isStandalone: true, name: "rangeLongDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDate'
@@ -3031,13 +3629,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class RangeDateFormatterImpurePipe extends RangeDateFormatterPipe {
-    transform([value1, value2]) {
-        return super.transform([value1, value2]);
+    transform(value) {
+        return super.transform(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterImpurePipe, isStandalone: true, name: "rangeLongDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeDateFormatterImpurePipe, isStandalone: true, name: "rangeLongDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDateImpurePipe',
@@ -3045,15 +3643,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 class RangeShortDateFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2]) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeShortDate(date1, date2);
+    transform(value) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeShortDate(range[0], range[1] ?? undefined);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterPipe, isStandalone: true, name: "rangeShortDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateFormatterPipe, isStandalone: true, name: "rangeShortDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDate'
@@ -3061,13 +3660,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class RangeShortDateFormatterImpurePipe extends RangeShortDateFormatterPipe {
-    transform([value1, value2]) {
-        return super.transform([value1, value2]);
+    transform(value) {
+        return super.transform(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterImpurePipe, isStandalone: true, name: "rangeShortDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateFormatterImpurePipe, isStandalone: true, name: "rangeShortDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDateImpurePipe',
@@ -3075,15 +3674,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 class RangeDateTimeFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2], options) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeLongDateTime(date1, date2, options);
+    transform(value, options) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeLongDateTime(range[0], range[1] ?? undefined, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterPipe, isStandalone: true, name: "rangeLongDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeDateTimeFormatterPipe, isStandalone: true, name: "rangeLongDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDateTime'
@@ -3091,13 +3691,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class RangeDateTimeFormatterImpurePipe extends RangeDateTimeFormatterPipe {
-    transform([value1, value2], options) {
-        return super.transform([value1, value2], options);
+    transform(value, options) {
+        return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeLongDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeLongDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDateTimeImpurePipe',
@@ -3105,15 +3705,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 class RangeMiddleDateTimeFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2], options) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeMiddleDateTime(date1, date2, options);
+    transform(value, options) {
+        // Unlike the other range formats, the middle one has no opened-range template — both bounds required.
+        const range = toClosedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeMiddleDateTime(range[0], range[1], options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, isStandalone: true, name: "rangeMiddleDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, isStandalone: true, name: "rangeMiddleDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeMiddleDateTime'
@@ -3121,13 +3723,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class RangeMiddleDateTimeFormatterImpurePipe extends RangeMiddleDateTimeFormatterPipe {
-    transform([value1, value2], options) {
-        return super.transform([value1, value2], options);
+    transform(value, options) {
+        return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeMiddleDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeMiddleDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeMiddleDateTimeImpurePipe',
@@ -3135,15 +3737,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 class RangeShortDateTimeFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2], options) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeShortDateTime(date1, date2, options);
+    transform(value, options) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeShortDateTime(range[0], range[1], options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, isStandalone: true, name: "rangeShortDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateTimeFormatterPipe, isStandalone: true, name: "rangeShortDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDateTime'
@@ -3151,34 +3754,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class RangeShortDateTimeFormatterImpurePipe extends RangeShortDateTimeFormatterPipe {
-    transform([value1, value2], options) {
-        return super.transform([value1, value2], options);
+    transform(value, options) {
+        return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeShortDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeShortDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDateTimeImpurePipe',
                     pure: false
                 }]
         }] });
-// Impure pipes that recompute on `KbqLocaleService` locale changes (see `BaseLocaleAwareFormatterPipe`).
-// Prefer these `kbq`-prefixed pipes when the locale can change at runtime; the pure pipes above are
-// kept for static usages and backward compatibility.
+class DurationShortestFormatterPipe extends BaseFormatterPipe {
+    transform(value, options) {
+        const range = toDurationRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.durationShortest(range[0], range[1], options?.seconds, options?.milliseconds);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortestFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DurationShortestFormatterPipe, isStandalone: true, name: "durationShortest" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortestFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationShortest'
+                }]
+        }] });
+// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
+class DurationShortestFormatterImpurePipe extends DurationShortestFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortestFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DurationShortestFormatterImpurePipe, isStandalone: true, name: "durationShortestImpurePipe", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortestFormatterImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationShortestImpurePipe',
+                    pure: false
+                }]
+        }] });
+class DurationLongFormatterPipe extends BaseFormatterPipe {
+    transform(value, units, fraction) {
+        const range = toDurationRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.durationLong(range[0], range[1], units, fraction);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationLongFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DurationLongFormatterPipe, isStandalone: true, name: "durationLong" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationLongFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationLong'
+                }]
+        }] });
+// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
+class DurationLongFormatterImpurePipe extends DurationLongFormatterPipe {
+    transform(value, units, fraction) {
+        return super.transform(value, units, fraction);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationLongFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DurationLongFormatterImpurePipe, isStandalone: true, name: "durationLongImpurePipe", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationLongFormatterImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationLongImpurePipe',
+                    pure: false
+                }]
+        }] });
+class DurationShortFormatterPipe extends BaseFormatterPipe {
+    transform(value, units, fraction) {
+        const range = toDurationRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.durationShort(range[0], range[1], units, fraction);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DurationShortFormatterPipe, isStandalone: true, name: "durationShort" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationShort'
+                }]
+        }] });
+// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
+class DurationShortFormatterImpurePipe extends DurationShortFormatterPipe {
+    transform(value, units, fraction) {
+        return super.transform(value, units, fraction);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DurationShortFormatterImpurePipe, isStandalone: true, name: "durationShortImpurePipe", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DurationShortFormatterImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationShortImpurePipe',
+                    pure: false
+                }]
+        }] });
+// Impure pipes that recompute on `KbqLocaleService` locale changes and on `KbqDateTimezoneService` time
+// zone changes (see `BaseLocaleAwareFormatterPipe`). Prefer these `kbq`-prefixed pipes when either can
+// change at runtime; the pure pipes above are kept for static usages and backward compatibility.
 class KbqAbsoluteLongDatePipe extends BaseLocaleAwareFormatterPipe {
     transform(value, currYear) {
         return super.transform(value, currYear);
     }
     format(value, currYear) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteLongDate(date, currYear) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDatePipe, isStandalone: true, name: "kbqAbsoluteLongDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteLongDatePipe, isStandalone: true, name: "kbqAbsoluteLongDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteLongDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqAbsoluteLongDate',
@@ -3190,13 +3886,13 @@ class KbqAbsoluteShortDatePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value, currYear);
     }
     format(value, currYear) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteShortDate(date, currYear) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDatePipe, isStandalone: true, name: "kbqAbsoluteShortDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteShortDatePipe, isStandalone: true, name: "kbqAbsoluteShortDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteShortDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqAbsoluteShortDate',
@@ -3208,13 +3904,13 @@ class KbqAbsoluteLongDateTimePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value, options);
     }
     format(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteLongDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, isStandalone: true, name: "kbqAbsoluteLongDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, isStandalone: true, name: "kbqAbsoluteLongDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqAbsoluteLongDateTime',
@@ -3226,13 +3922,13 @@ class KbqAbsoluteShortDateTimePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value, options);
     }
     format(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.absoluteShortDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, isStandalone: true, name: "kbqAbsoluteShortDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, isStandalone: true, name: "kbqAbsoluteShortDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqAbsoluteShortDateTime',
@@ -3244,13 +3940,13 @@ class KbqRelativeLongDatePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value);
     }
     format(value) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeLongDate(date) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDatePipe, isStandalone: true, name: "kbqRelativeLongDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeLongDatePipe, isStandalone: true, name: "kbqRelativeLongDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeLongDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRelativeLongDate',
@@ -3262,13 +3958,13 @@ class KbqRelativeShortDatePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value);
     }
     format(value) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeShortDate(date) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDatePipe, isStandalone: true, name: "kbqRelativeShortDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeShortDatePipe, isStandalone: true, name: "kbqRelativeShortDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeShortDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRelativeShortDate',
@@ -3280,13 +3976,13 @@ class KbqRelativeLongDateTimePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value, options);
     }
     format(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeLongDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDateTimePipe, isStandalone: true, name: "kbqRelativeLongDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeLongDateTimePipe, isStandalone: true, name: "kbqRelativeLongDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeLongDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRelativeLongDateTime',
@@ -3298,13 +3994,13 @@ class KbqRelativeShortDateTimePipe extends BaseLocaleAwareFormatterPipe {
         return super.transform(value, options);
     }
     format(value, options) {
-        const date = this.adapter.deserialize(value);
+        const date = toValidDate(this.adapter, value);
         return date ? this.formatter.relativeShortDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDateTimePipe, isStandalone: true, name: "kbqRelativeShortDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeShortDateTimePipe, isStandalone: true, name: "kbqRelativeShortDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRelativeShortDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRelativeShortDateTime',
@@ -3315,15 +4011,16 @@ class KbqRangeLongDatePipe extends BaseLocaleAwareFormatterPipe {
     transform(value) {
         return super.transform(value);
     }
-    format([value1, value2]) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeLongDate(date1, date2);
+    format(value) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeLongDate(range[0], range[1]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, isStandalone: true, name: "kbqRangeLongDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeLongDatePipe, isStandalone: true, name: "kbqRangeLongDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeLongDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRangeLongDate',
@@ -3334,15 +4031,16 @@ class KbqRangeShortDatePipe extends BaseLocaleAwareFormatterPipe {
     transform(value) {
         return super.transform(value);
     }
-    format([value1, value2]) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeShortDate(date1, date2);
+    format(value) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeShortDate(range[0], range[1] ?? undefined);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, isStandalone: true, name: "kbqRangeShortDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeShortDatePipe, isStandalone: true, name: "kbqRangeShortDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeShortDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRangeShortDate',
@@ -3353,15 +4051,16 @@ class KbqRangeLongDateTimePipe extends BaseLocaleAwareFormatterPipe {
     transform(value, options) {
         return super.transform(value, options);
     }
-    format([value1, value2], options) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeLongDateTime(date1, date2, options);
+    format(value, options) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeLongDateTime(range[0], range[1] ?? undefined, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, isStandalone: true, name: "kbqRangeLongDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeLongDateTimePipe, isStandalone: true, name: "kbqRangeLongDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeLongDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRangeLongDateTime',
@@ -3372,15 +4071,17 @@ class KbqRangeMiddleDateTimePipe extends BaseLocaleAwareFormatterPipe {
     transform(value, options) {
         return super.transform(value, options);
     }
-    format([value1, value2], options) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeMiddleDateTime(date1, date2, options);
+    format(value, options) {
+        // Unlike the other range formats, the middle one has no opened-range template — both bounds required.
+        const range = toClosedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeMiddleDateTime(range[0], range[1], options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, isStandalone: true, name: "kbqRangeMiddleDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeMiddleDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeMiddleDateTimePipe, isStandalone: true, name: "kbqRangeMiddleDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeMiddleDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqRangeMiddleDateTime',
@@ -3391,18 +4092,127 @@ class KbqRangeShortDateTimePipe extends BaseLocaleAwareFormatterPipe {
     transform(value, options) {
         return super.transform(value, options);
     }
-    format([value1, value2], options) {
-        const date1 = this.adapter.deserialize(value1);
-        const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeShortDateTime(date1, date2, options);
+    format(value, options) {
+        const range = toOpenedRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.rangeShortDateTime(range[0], range[1], options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeShortDateTimePipe, isStandalone: true, name: "kbqRangeShortDateTime", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRangeShortDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRangeShortDateTime',
+                    pure: false
+                }]
+        }] });
+/**
+ * Formats the duration between two dates as a digital-clock value, e.g. `48:02:25`.
+ *
+ * Takes a `[from, to]` tuple, like the range pipes. `options.seconds` defaults to `true` and
+ * `options.milliseconds` to `false`; `options.currYear` is not used by this format.
+ *
+ * Renders an empty string when the tuple itself or one of its bounds is missing or invalid, or when
+ * `from` is later than `to`.
+ *
+ * @example
+ * ```html
+ * {{ [startedAt, finishedAt] | kbqDurationShortest }}
+ * {{ [startedAt, finishedAt] | kbqDurationShortest: { seconds: false } }}
+ * ```
+ */
+class KbqDurationShortestPipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format(value, options) {
+        const range = toDurationRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.durationShortest(range[0], range[1], options?.seconds, options?.milliseconds);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationShortestPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationShortestPipe, isStandalone: true, name: "kbqDurationShortest", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationShortestPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqDurationShortest',
+                    pure: false
+                }]
+        }] });
+/**
+ * Formats the duration between two dates in the long text format, e.g. `2 дня и 4 часа`.
+ *
+ * Takes a `[from, to]` tuple, like the range pipes. `units` restricts the units to show (the
+ * formatter picks them automatically when omitted), `fraction` adds a fractional part for years
+ * and months.
+ *
+ * Renders an empty string when the tuple itself or one of its bounds is missing or invalid, or when
+ * `from` is later than `to`.
+ *
+ * @example
+ * ```html
+ * {{ [startedAt, finishedAt] | kbqDurationLong }}
+ * {{ [startedAt, finishedAt] | kbqDurationLong: ['hours', 'minutes'] }}
+ * {{ [startedAt, finishedAt] | kbqDurationLong: ['years'] : true }}
+ * ```
+ */
+class KbqDurationLongPipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, units, fraction) {
+        return super.transform(value, units, fraction);
+    }
+    format(value, units, fraction) {
+        const range = toDurationRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.durationLong(range[0], range[1], units, fraction);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationLongPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationLongPipe, isStandalone: true, name: "kbqDurationLong", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationLongPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqDurationLong',
+                    pure: false
+                }]
+        }] });
+/**
+ * Formats the duration between two dates in the short text format, e.g. `2 д 4 ч`.
+ *
+ * Takes a `[from, to]` tuple, like the range pipes. `units` restricts the units to show (the
+ * formatter picks them automatically when omitted), `fraction` adds a fractional part for years
+ * and months.
+ *
+ * Renders an empty string when the tuple itself or one of its bounds is missing or invalid, or when
+ * `from` is later than `to`.
+ *
+ * @example
+ * ```html
+ * {{ [startedAt, finishedAt] | kbqDurationShort }}
+ * {{ [startedAt, finishedAt] | kbqDurationShort: ['seconds', 'milliseconds'] }}
+ * ```
+ */
+class KbqDurationShortPipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, units, fraction) {
+        return super.transform(value, units, fraction);
+    }
+    format(value, units, fraction) {
+        const range = toDurationRange(this.adapter, value);
+        if (!range)
+            return '';
+        return this.formatter.durationShort(range[0], range[1], units, fraction);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, isStandalone: true, name: "kbqRangeShortDateTime", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationShortPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationShortPipe, isStandalone: true, name: "kbqDurationShort", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDurationShortPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'kbqRangeShortDateTime',
+                    name: 'kbqDurationShort',
                     pure: false
                 }]
         }] });
@@ -3562,11 +4372,11 @@ class KbqDecimalPipe {
             grouping === undefined &&
             Math.abs(value) < defaultValueForGroupingInRULocale);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, isStandalone: true, name: "kbqNumber", pure: false }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDecimalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDecimalPipe, isStandalone: true, name: "kbqNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDecimalPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDecimalPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -3619,11 +4429,11 @@ class KbqTableNumberPipe {
             throw Error(`InvalidPipeArgument: KbqTableNumberPipe for pipe '${JSON.stringify(error.message)}'`);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, isStandalone: true, name: "kbqTableNumber", pure: false }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTableNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTableNumberPipe, isStandalone: true, name: "kbqTableNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTableNumberPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTableNumberPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -3725,11 +4535,11 @@ class KbqRoundDecimalPipe {
         });
         return currentUnit;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, isStandalone: true, name: "kbqRoundNumber", pure: false }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRoundDecimalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRoundDecimalPipe, isStandalone: true, name: "kbqRoundNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRoundDecimalPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRoundDecimalPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -3811,10 +4621,10 @@ class KbqDataSizePipe {
         const formattedValue = this.numberPipe?.transform(value, `1.0-${precision}`, locale) || value;
         return formattedValue ? `${formattedValue}${this.nonBreakingSpace}${unit}` : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDataSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDataSizePipe, isStandalone: true, name: "kbqDataSize", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDataSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDataSizePipe, isStandalone: true, name: "kbqDataSize", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDataSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDataSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqDataSize',
@@ -3823,8 +4633,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], ctorParameters: () => [] });
 
 class KbqFormattersModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, imports: [AbsoluteDateFormatterPipe,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqFormattersModule, imports: [AbsoluteDateFormatterPipe,
             AbsoluteDateTimeFormatterPipe,
             AbsoluteDateShortFormatterPipe,
             AbsoluteShortDateTimeFormatterPipe,
@@ -3837,6 +4647,9 @@ class KbqFormattersModule {
             RangeDateTimeFormatterPipe,
             RangeShortDateTimeFormatterPipe,
             RangeMiddleDateTimeFormatterPipe,
+            DurationShortestFormatterPipe,
+            DurationLongFormatterPipe,
+            DurationShortFormatterPipe,
             AbsoluteDateFormatterImpurePipe,
             AbsoluteDateTimeFormatterImpurePipe,
             AbsoluteDateShortFormatterImpurePipe,
@@ -3850,6 +4663,9 @@ class KbqFormattersModule {
             RangeDateTimeFormatterImpurePipe,
             RangeShortDateTimeFormatterImpurePipe,
             RangeMiddleDateTimeFormatterImpurePipe,
+            DurationShortestFormatterImpurePipe,
+            DurationLongFormatterImpurePipe,
+            DurationShortFormatterImpurePipe,
             KbqAbsoluteLongDatePipe,
             KbqAbsoluteLongDateTimePipe,
             KbqAbsoluteShortDatePipe,
@@ -3863,6 +4679,9 @@ class KbqFormattersModule {
             KbqRangeMiddleDateTimePipe,
             KbqRangeShortDatePipe,
             KbqRangeShortDateTimePipe,
+            KbqDurationShortestPipe,
+            KbqDurationLongPipe,
+            KbqDurationShortPipe,
             KbqDataSizePipe,
             KbqDecimalPipe,
             KbqRoundDecimalPipe,
@@ -3882,6 +4701,9 @@ class KbqFormattersModule {
             RangeDateTimeFormatterPipe,
             RangeShortDateTimeFormatterPipe,
             RangeMiddleDateTimeFormatterPipe,
+            DurationShortestFormatterPipe,
+            DurationLongFormatterPipe,
+            DurationShortFormatterPipe,
             AbsoluteDateFormatterImpurePipe,
             AbsoluteDateTimeFormatterImpurePipe,
             AbsoluteDateShortFormatterImpurePipe,
@@ -3895,6 +4717,9 @@ class KbqFormattersModule {
             RangeDateTimeFormatterImpurePipe,
             RangeShortDateTimeFormatterImpurePipe,
             RangeMiddleDateTimeFormatterImpurePipe,
+            DurationShortestFormatterImpurePipe,
+            DurationLongFormatterImpurePipe,
+            DurationShortFormatterImpurePipe,
             KbqAbsoluteLongDatePipe,
             KbqAbsoluteLongDateTimePipe,
             KbqAbsoluteShortDatePipe,
@@ -3908,10 +4733,13 @@ class KbqFormattersModule {
             KbqRangeMiddleDateTimePipe,
             KbqRangeShortDatePipe,
             KbqRangeShortDateTimePipe,
+            KbqDurationShortestPipe,
+            KbqDurationLongPipe,
+            KbqDurationShortPipe,
             KbqDataSizePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, providers: [DateFormatter] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormattersModule, providers: [DateFormatter] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormattersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3928,6 +4756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         RangeDateTimeFormatterPipe,
                         RangeShortDateTimeFormatterPipe,
                         RangeMiddleDateTimeFormatterPipe,
+                        DurationShortestFormatterPipe,
+                        DurationLongFormatterPipe,
+                        DurationShortFormatterPipe,
                         AbsoluteDateFormatterImpurePipe,
                         AbsoluteDateTimeFormatterImpurePipe,
                         AbsoluteDateShortFormatterImpurePipe,
@@ -3941,6 +4772,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         RangeDateTimeFormatterImpurePipe,
                         RangeShortDateTimeFormatterImpurePipe,
                         RangeMiddleDateTimeFormatterImpurePipe,
+                        DurationShortestFormatterImpurePipe,
+                        DurationLongFormatterImpurePipe,
+                        DurationShortFormatterImpurePipe,
                         KbqAbsoluteLongDatePipe,
                         KbqAbsoluteLongDateTimePipe,
                         KbqAbsoluteShortDatePipe,
@@ -3954,6 +4788,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqRangeMiddleDateTimePipe,
                         KbqRangeShortDatePipe,
                         KbqRangeShortDateTimePipe,
+                        KbqDurationShortestPipe,
+                        KbqDurationLongPipe,
+                        KbqDurationShortPipe,
                         KbqDataSizePipe,
                         KbqDecimalPipe,
                         KbqRoundDecimalPipe,
@@ -3977,6 +4814,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         RangeDateTimeFormatterPipe,
                         RangeShortDateTimeFormatterPipe,
                         RangeMiddleDateTimeFormatterPipe,
+                        DurationShortestFormatterPipe,
+                        DurationLongFormatterPipe,
+                        DurationShortFormatterPipe,
                         AbsoluteDateFormatterImpurePipe,
                         AbsoluteDateTimeFormatterImpurePipe,
                         AbsoluteDateShortFormatterImpurePipe,
@@ -3990,6 +4830,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         RangeDateTimeFormatterImpurePipe,
                         RangeShortDateTimeFormatterImpurePipe,
                         RangeMiddleDateTimeFormatterImpurePipe,
+                        DurationShortestFormatterImpurePipe,
+                        DurationLongFormatterImpurePipe,
+                        DurationShortFormatterImpurePipe,
                         KbqAbsoluteLongDatePipe,
                         KbqAbsoluteLongDateTimePipe,
                         KbqAbsoluteShortDatePipe,
@@ -4003,6 +4846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqRangeMiddleDateTimePipe,
                         KbqRangeShortDatePipe,
                         KbqRangeShortDateTimePipe,
+                        KbqDurationShortestPipe,
+                        KbqDurationLongPipe,
+                        KbqDurationShortPipe,
                         KbqDataSizePipe
                     ]
                 }]
@@ -4027,10 +4873,10 @@ class KbqFormElement {
             this.hasLegend = this.element.nativeElement.firstElementChild.classList.contains('kbq-form__legend');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqFormElement, isStandalone: true, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", host: { properties: { "class.kbq-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: KbqFormElement, isSignal: true }], exportAs: ["kbqFormElement"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", type: KbqFormElement, isStandalone: true, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", host: { properties: { "class.kbq-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: KbqFormElement, isSignal: true }], exportAs: ["kbqFormElement"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormElement, decorators: [{
             type: Directive,
             args: [{
                     selector: '.kbq-form__row, .kbq-form__fieldset, .kbq-form__legend',
@@ -4056,10 +4902,10 @@ class KbqForm {
             element.margin = !!(nextElement && !nextElement.hasLegend);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqForm, isStandalone: true, selector: ".kbq-form-vertical, .kbq-form-horizontal", host: { classAttribute: "kbq-form" }, queries: [{ propertyName: "elements", predicate: KbqFormElement, isSignal: true }], exportAs: ["kbqForm"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", type: KbqForm, isStandalone: true, selector: ".kbq-form-vertical, .kbq-form-horizontal", host: { classAttribute: "kbq-form" }, queries: [{ propertyName: "elements", predicate: KbqFormElement, isSignal: true }], exportAs: ["kbqForm"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqForm, decorators: [{
             type: Directive,
             args: [{
                     selector: '.kbq-form-vertical, .kbq-form-horizontal',
@@ -4071,13 +4917,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { elements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqFormElement), { isSignal: true }] }] } });
 
 class KbqFormsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule, imports: [KbqForm,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqFormsModule, imports: [KbqForm,
             KbqFormElement], exports: [KbqForm,
             KbqFormElement] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4273,6 +5119,119 @@ class FileValidators {
     }
 }
 
+/** Unicode combining marks left behind by NFKD decomposition of accented characters, e.g. `é` → `e` + U+0301. */
+const COMBINING_MARKS = /[̀-ͯ]/g;
+/**
+ * `й`/`Й` decompose under NFKD into `и`/`И` + a combining breve, same as any other diacritic. Unlike
+ * Latin diacritics, that breve marks a distinct Cyrillic letter rather than an accented variant, so it's
+ * re-composed after the generic strip instead of being folded away with the rest.
+ */
+const CYRILLIC_I_BREVE = /[иИ]̆/g;
+/** The transformation behind {@link normalizeSearchValue}, minus the end-trimming — see {@link findSearchMatchRanges}. */
+function foldDiacritics(value) {
+    return value
+        .normalize('NFKD')
+        .replace(CYRILLIC_I_BREVE, (match) => (match[0] === 'И' ? 'Й' : 'й'))
+        .replace(COMBINING_MARKS, '')
+        .toLocaleLowerCase();
+}
+/**
+ * Normalizes a string for case- and diacritic-insensitive search comparison: trims the ends,
+ * decomposes accented characters (NFKD), strips the resulting combining marks (while preserving
+ * `й`/`Й` as distinct letters), and lowercases using the current locale. Internal whitespace and
+ * punctuation are left untouched.
+ */
+function normalizeSearchValue(value) {
+    if (typeof value !== 'string' || !value)
+        return '';
+    return foldDiacritics(value.trim());
+}
+/**
+ * Locates every case- and diacritic-insensitive match of `tokens` in `value`, returning `[start, end)`
+ * ranges in `value`'s own (unfolded) coordinates — overlapping or adjacent ranges are merged. This is
+ * what a highlighter needs to stay in sync with {@link createSearchPredicate}: matching a folded value
+ * like `cafe` against `Café` only tells you *that* it matched, not *where* in the original string to
+ * mark, since folding can change which letters look alike without changing the string's length.
+ */
+function findSearchMatchRanges(value, tokens) {
+    const normalizedTokens = tokens.map(normalizeSearchValue).filter((token) => token.length > 0);
+    if (typeof value !== 'string' || !normalizedTokens.length)
+        return [];
+    // Folding is applied one UTF-16 code unit at a time so every character of the normalized value can be
+    // traced back to the original index it came from — this is what makes mapping a match's position back
+    // onto `value` possible. Surrogate pairs are folded as two independent units; neither combining-mark
+    // stripping nor case-folding depends on cross-surrogate context, so this doesn't affect correctness.
+    let normalizedValue = '';
+    const originalIndexOf = [];
+    for (let index = 0; index < value.length; index++) {
+        const folded = foldDiacritics(value[index]);
+        normalizedValue += folded;
+        for (let i = 0; i < folded.length; i++)
+            originalIndexOf.push(index);
+    }
+    const ranges = [];
+    for (const token of normalizedTokens) {
+        let fromIndex = 0;
+        let matchIndex;
+        while ((matchIndex = normalizedValue.indexOf(token, fromIndex)) !== -1) {
+            ranges.push([originalIndexOf[matchIndex], originalIndexOf[matchIndex + token.length - 1] + 1]);
+            fromIndex = matchIndex + token.length;
+        }
+    }
+    return mergeRanges(ranges);
+}
+function mergeRanges(ranges) {
+    if (ranges.length < 2)
+        return ranges;
+    const sorted = [...ranges].sort(([aStart, aEnd], [bStart, bEnd]) => aStart - bStart || aEnd - bEnd);
+    const merged = [sorted[0]];
+    for (const [start, end] of sorted.slice(1)) {
+        const last = merged[merged.length - 1];
+        if (start <= last[1]) {
+            last[1] = Math.max(last[1], end);
+        }
+        else {
+            merged.push([start, end]);
+        }
+    }
+    return merged;
+}
+const SEARCH_QUERY_TOKEN = /"([^"]*)"|(\S+)/g;
+/**
+ * Splits a raw query into tokens, treating whitespace as a separator and `"quoted phrases"` as
+ * a single token (spaces inside the quotes are preserved). A `"` with no matching closing quote
+ * stays part of its token instead of being dropped, so a half-open quote yields a token no
+ * realistic haystack contains — and therefore no results — until the quote is closed.
+ */
+function tokenizeSearchQuery(query) {
+    if (typeof query !== 'string' || !query.trim())
+        return [];
+    const tokens = [];
+    for (const match of query.matchAll(SEARCH_QUERY_TOKEN)) {
+        const token = match[1] ?? match[2];
+        if (token)
+            tokens.push(token);
+    }
+    return tokens;
+}
+/**
+ * Builds a case- and diacritic-insensitive substring predicate for the given query. The query is
+ * tokenized (bare words + `"quoted phrases"`) and every token must match (AND) against at least
+ * one of the supplied haystacks (OR across fields) — pass a single string for a single-field
+ * search, or an array for multi-field rows. An empty/whitespace-only query matches everything.
+ */
+function createSearchPredicate(query) {
+    const tokens = tokenizeSearchQuery(query)
+        .map(normalizeSearchValue)
+        .filter((token) => token.length > 0);
+    if (!tokens.length)
+        return () => true;
+    return (value) => {
+        const haystacks = (Array.isArray(value) ? value : [value]).map(normalizeSearchValue);
+        return tokens.every((token) => haystacks.some((haystack) => haystack.includes(token)));
+    };
+}
+
 const HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
 const HTML_SPECIAL_CHARS = /[&<>"']/;
 const HTML_SPECIAL_CHARS_GLOBAL = new RegExp(HTML_SPECIAL_CHARS.source, 'g');
@@ -4288,32 +5247,63 @@ function escapeHtml(value) {
         return value;
     return value.replace(HTML_SPECIAL_CHARS_GLOBAL, (chr) => HTML_ESCAPES[chr] ?? chr);
 }
-/** @docs-private */
-function highlight(value, keyword, mark) {
+function normalizeKeywords(keyword) {
+    const list = Array.isArray(keyword) ? keyword : [keyword];
+    // Longest first, so a shorter keyword (e.g. "a") can't shadow a longer one that starts
+    // with it (e.g. "all") within the same regex alternation.
+    return list
+        .filter((item) => typeof item === 'string' && item.length > 0)
+        .sort((a, b) => b.length - a.length);
+}
+function findLiteralMatchRanges(value, keywords) {
+    const pattern = new RegExp(keywords.map(escapeRegExp).join('|'), 'gi');
+    const ranges = [];
+    let match = pattern.exec(value);
+    while (match !== null) {
+        ranges.push([match.index, match.index + match[0].length]);
+        match = pattern.exec(value);
+    }
+    return ranges;
+}
+/**
+ * @docs-private
+ * `keyword` accepts either a single string or an array of strings — every keyword is
+ * highlighted independently, which is what multi-token search queries need.
+ *
+ * By default, matching is literal (case-insensitive substring), same as a plain `.includes`. Pass
+ * `foldDiacritics: true` when the keywords were matched with diacritic folding (e.g. via
+ * {@link createSearchPredicate} from `@koobiq/components/core`) — otherwise a folded match like
+ * `cafe` finding `Café` has nothing in the value for a literal highlighter to mark.
+ */
+function highlight(value, keyword, mark, foldDiacritics = false) {
     if (typeof value !== 'string')
         return '';
-    if (!keyword || typeof keyword !== 'string')
+    const keywords = normalizeKeywords(keyword);
+    if (!keywords.length)
+        return escapeHtml(value);
+    const ranges = foldDiacritics ? findSearchMatchRanges(value, keywords) : findLiteralMatchRanges(value, keywords);
+    if (!ranges.length)
         return escapeHtml(value);
-    const parts = value.split(new RegExp(`(${escapeRegExp(keyword)})`, 'gi'));
-    return parts
-        .map((part, i) => {
-        const escaped = escapeHtml(part);
-        const isMatch = i % 2 === 1;
-        return isMatch ? mark(escaped) : escaped;
-    })
-        .join('');
+    let result = '';
+    let cursor = 0;
+    for (const [start, end] of ranges) {
+        result += escapeHtml(value.slice(cursor, start));
+        result += mark(escapeHtml(value.slice(start, end)));
+        cursor = end;
+    }
+    return result + escapeHtml(value.slice(cursor));
 }
 
 /** @docs-private */
 const kbqHighlightBackgroundMark = (text) => `<mark class="kbq-highlight-background">${text}</mark>`;
 class KbqHighlightBackgroundPipe {
-    transform(value, keyword) {
-        return highlight(value, keyword, kbqHighlightBackgroundMark);
+    transform(value, keyword, foldDiacritics = false) {
+        return highlight(value, keyword, kbqHighlightBackgroundMark, foldDiacritics);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightBackgroundPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightBackgroundPipe, isStandalone: true, name: "kbqHighlightBackground" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightBackgroundPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightBackgroundPipe, isStandalone: true, name: "kbqHighlightBackground" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightBackgroundPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightBackgroundPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'kbqHighlightBackground' }]
         }] });
@@ -4321,23 +5311,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 /** @docs-private */
 const kbqHighlightMark = (text) => `<mark class="kbq-highlight">${text}</mark>`;
 class KbqHighlightPipe {
-    transform(value, keyword) {
-        return highlight(value, keyword, kbqHighlightMark);
+    transform(value, keyword, foldDiacritics = false) {
+        return highlight(value, keyword, kbqHighlightMark, foldDiacritics);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightPipe, isStandalone: true, name: "mcHighlight" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightPipe, isStandalone: true, name: "mcHighlight" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'mcHighlight' }]
         }] });
 
 class KbqHighlightModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule, imports: [KbqHighlightPipe, KbqHighlightBackgroundPipe], exports: [KbqHighlightPipe, KbqHighlightBackgroundPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightModule, imports: [KbqHighlightPipe, KbqHighlightBackgroundPipe], exports: [KbqHighlightPipe, KbqHighlightBackgroundPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqHighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqHighlightPipe, KbqHighlightBackgroundPipe],
@@ -4351,10 +5341,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * counted by checking the query list's length.
  */
 class KbqLine {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLine, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqLine, isStandalone: true, selector: "[kbq-line], [mcLine]", host: { classAttribute: "kbq-line" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLine, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqLine, isStandalone: true, selector: "[kbq-line], [mcLine]", host: { classAttribute: "kbq-line" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqLine, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-line], [mcLine]',
@@ -4414,16 +5404,24 @@ class KbqRectangleItem {
         this._collapsed = value;
         this.state.next();
     }
+    /**
+     * Outer width of the item: its border box plus horizontal margins.
+     *
+     * `getComputedStyle().width` resolves to the used content-box width whatever `box-sizing` says,
+     * so it silently drops padding and borders on the `border-box` elements this measures, and the
+     * result would change again under a consuming application's global reset.
+     * `getBoundingClientRect()` is always the border box, which makes it host-independent.
+     */
     getOuterElementWidth() {
         if (!this.isBrowser)
             return 0;
-        const { width, marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
-        return [width, marginLeft, marginRight].reduce((acc, item) => acc + parseInt(item), 0);
+        const { marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
+        return [marginLeft, marginRight].reduce((acc, item) => acc + (parseFloat(item) || 0), this.nativeElement.getBoundingClientRect().width);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRectangleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqRectangleItem, isStandalone: true, host: { properties: { "class.kbq-expanded": "!collapsed", "class.kbq-collapsed": "collapsed" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRectangleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqRectangleItem, isStandalone: true, host: { properties: { "class.kbq-expanded": "!collapsed", "class.kbq-collapsed": "collapsed" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRectangleItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRectangleItem, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4482,7 +5480,11 @@ class KbqOptionActionComponent {
         else {
             this.nativeElement.focus();
         }
-        this.hasFocus = true;
+        // The action lives inside `.kbq-action-container`, which is `display: none` until the option
+        // is hovered or keyboard-focused. Focusing a hidden element is a no-op, so `hasFocus` has to
+        // reflect what actually happened: assuming success would latch `kbq-action-button-focused`
+        // on the option forever, since `FocusMonitor` never emits for an element that never got focus.
+        this.hasFocus = this.nativeElement.ownerDocument.activeElement === this.nativeElement;
     }
     onClick($event) {
         $event.stopPropagation();
@@ -4508,14 +5510,14 @@ class KbqOptionActionComponent {
         this.option.tooltipTrigger.disabled = true;
         setTimeout(() => (this.option.tooltipTrigger.disabled = false));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.25", type: KbqOptionActionComponent, isStandalone: true, selector: "kbq-option-action", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.kbq-expanded": "false", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabIndex": "-1" }, classAttribute: "kbq-option-action" }, exportAs: ["kbqOptionAction"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.30", type: KbqOptionActionComponent, isStandalone: true, selector: "kbq-option-action", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.kbq-expanded": "false", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabIndex": "-1" }, classAttribute: "kbq-option-action" }, exportAs: ["kbqOptionAction"], ngImport: i0, template: `
         <ng-content select="[kbq-icon]">
             <i class="kbq kbq-icon kbq-contrast-fade kbq-ellipsis-vertical_16"></i>
         </ng-content>
-    `, isInline: true, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;box-sizing:content-box;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-option-action', template: `
         <ng-content select="[kbq-icon]">
@@ -4529,22 +5531,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[attr.tabIndex]': '-1',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeyDown($event)'
-                    }, exportAs: 'kbqOptionAction', styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"] }]
+                    }, exportAs: 'kbqOptionAction', styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;box-sizing:content-box;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
+/**
+ * Moves focus from an option to its trailing action button on Tab.
+ *
+ * Shared by `KbqListOption` and `KbqTreeOption` so the two cannot drift apart. Tab is swallowed only
+ * when focus actually landed: the action lives in a `display: none` container until the option is
+ * hovered or keyboard-focused, and focusing a hidden element is a no-op, so suppressing Tab there
+ * would trap focus on the option.
+ */
+function kbqFocusOptionActionOnTab($event, actionButton) {
+    if (!actionButton || $event.keyCode !== TAB || $event.shiftKey || actionButton.hasFocus) {
+        return;
+    }
+    actionButton.focus();
+    if (actionButton.hasFocus) {
+        $event.preventDefault();
+    }
+}
 
 class KbqActionContainer {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqActionContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqActionContainer, isStandalone: true, selector: "kbq-action-container", host: { classAttribute: "kbq-action-container" }, exportAs: ["kbqActionContainer"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqActionContainer, isStandalone: true, selector: "kbq-action-container", host: { classAttribute: "kbq-action-container" }, exportAs: ["kbqActionContainer"], ngImport: i0, template: `
         <div class="kbq-action-container__gradient"></div>
         <div class="kbq-action-container__box">
             <ng-content />
         </div>
     `, isInline: true, styles: [".kbq-action-container{box-sizing:border-box;position:absolute;right:0;top:0;bottom:0;display:none;align-items:center;overflow:hidden;border:1px solid transparent;border-top-right-radius:var(--kbq-size-xs);border-bottom-right-radius:var(--kbq-size-xs)}.kbq-action-container__gradient{display:flex;margin-right:calc(var(--kbq-size-xs) * -1);width:var(--kbq-size-3xl);height:100%;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg);-webkit-mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl));mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl))}.kbq-action-container__box{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqActionContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqActionContainer, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-action-container', template: `
         <div class="kbq-action-container__gradient"></div>
@@ -4578,13 +5597,15 @@ class KbqOptgroup {
             this._disabled = value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptgroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqOptgroup, isStandalone: true, selector: "kbq-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["kbqOptgroup"], ngImport: i0, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label() }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptgroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqOptgroup, isStandalone: true, selector: "kbq-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["kbqOptgroup"], ngImport: i0, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label() }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptgroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptgroup, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-optgroup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-optgroup',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId',
                         '[class.kbq-disabled]': 'disabled'
                     }, exportAs: 'kbqOptgroup', template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label() }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{
@@ -4618,10 +5639,10 @@ class KbqPseudoCheckbox extends KbqColorDirective {
         this.state = input('unchecked', ...(ngDevMode ? [{ debugName: "state" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqPseudoCheckbox, isStandalone: true, selector: "kbq-pseudo-checkbox", inputs: { big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-checkbox_big": "big()", "class.kbq-indeterminate": "state() === \"indeterminate\"", "class.kbq-checked": "state() === true || state() === \"checked\"", "class.kbq-disabled": "disabled()" }, classAttribute: "kbq-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"kbq-checkbox-checkmark kbq kbq-check-s_16\"></i>\n<i class=\"kbq-checkbox-mixedmark kbq kbq-minus-s_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--kbq-checkbox-size-normal-width);height:var(--kbq-checkbox-size-normal-width);border-radius:var(--kbq-checkbox-size-normal-border-radius);border-width:var(--kbq-checkbox-size-normal-border-width);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{display:none}.kbq-pseudo-checkbox.kbq-pseudo-checkbox-checked,.kbq-pseudo-checkbox.kbq-pseudo-checkbox-indeterminate{border-color:transparent}.kbq-pseudo-checkbox.kbq-checked .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:inline-block}.kbq-pseudo-checkbox.kbq-disabled{cursor:default}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big{width:var(--kbq-checkbox-size-big-width);height:var(--kbq-checkbox-size-big-width);border-radius:var(--kbq-checkbox-size-big-border-radius);border-width:var(--kbq-checkbox-size-big-border-width)}.kbq-pseudo-checkbox{border-color:var(--kbq-checkbox-theme-default-border);background:var(--kbq-checkbox-theme-default-background)}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-default-color)}.kbq-pseudo-checkbox.kbq-checked,.kbq-pseudo-checkbox.kbq-indeterminate{border-color:var(--kbq-checkbox-theme-states-checked-border);background:var(--kbq-checkbox-theme-states-checked-background)}.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-states-disabled-color)}.kbq-pseudo-checkbox.kbq-disabled{border-color:var(--kbq-checkbox-theme-states-disabled-border);background:var(--kbq-checkbox-theme-states-disabled-background)}.kbq-pseudo-checkbox.kbq-error{border-color:var(--kbq-checkbox-error-default-border);background:var(--kbq-checkbox-error-default-background)}.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-default-color)}.kbq-pseudo-checkbox.kbq-error.kbq-checked,.kbq-pseudo-checkbox.kbq-error.kbq-indeterminate{border-color:var(--kbq-checkbox-error-states-checked-border);background:var(--kbq-checkbox-error-states-checked-background)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-states-disabled-color)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled{border-color:var(--kbq-checkbox-error-states-disabled-border);background:var(--kbq-checkbox-error-states-disabled-background)}\n", ".kbq-pseudo-checkbox{--kbq-checkbox-size-normal-width: var(--kbq-size-l);--kbq-checkbox-size-normal-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-normal-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-normal-top: var(--kbq-size-3xs);--kbq-checkbox-size-big-width: var(--kbq-size-l);--kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-big-top: var(--kbq-size-xxs);--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-default-color: var(--kbq-icon-white);--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-theme-default-background: var(--kbq-background-bg);--kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-checkbox-theme-states-checked-border: transparent;--kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-hover-border: transparent;--kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);--kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);--kbq-checkbox-error-default-border: var(--kbq-line-error);--kbq-checkbox-error-default-color: var(--kbq-icon-white);--kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-error-default-background: var(--kbq-background-error-less);--kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-error-states-hover-border: var(--kbq-line-error);--kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-checkbox-error-states-checked-border: transparent;--kbq-checkbox-error-states-checked-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-hover-border: transparent;--kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-checkbox-error-states-focused-border: var(--kbq-line-error);--kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);--kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPseudoCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqPseudoCheckbox, isStandalone: true, selector: "kbq-pseudo-checkbox", inputs: { big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-checkbox_big": "big()", "class.kbq-indeterminate": "state() === \"indeterminate\"", "class.kbq-checked": "state() === true || state() === \"checked\"", "class.kbq-disabled": "disabled()" }, classAttribute: "kbq-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"kbq-checkbox-checkmark kbq kbq-check-s_16\"></i>\n<i class=\"kbq-checkbox-mixedmark kbq kbq-minus-s_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--kbq-checkbox-size-normal-width);height:var(--kbq-checkbox-size-normal-width);border-radius:var(--kbq-checkbox-size-normal-border-radius);border-width:var(--kbq-checkbox-size-normal-border-width);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{display:none}.kbq-pseudo-checkbox.kbq-pseudo-checkbox-checked,.kbq-pseudo-checkbox.kbq-pseudo-checkbox-indeterminate{border-color:transparent}.kbq-pseudo-checkbox.kbq-checked .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:inline-block}.kbq-pseudo-checkbox.kbq-disabled{cursor:default}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big{width:var(--kbq-checkbox-size-big-width);height:var(--kbq-checkbox-size-big-width);border-radius:var(--kbq-checkbox-size-big-border-radius);border-width:var(--kbq-checkbox-size-big-border-width)}.kbq-pseudo-checkbox{border-color:var(--kbq-checkbox-theme-default-border);background:var(--kbq-checkbox-theme-default-background)}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-default-color)}.kbq-pseudo-checkbox.kbq-checked,.kbq-pseudo-checkbox.kbq-indeterminate{border-color:var(--kbq-checkbox-theme-states-checked-border);background:var(--kbq-checkbox-theme-states-checked-background)}.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-states-disabled-color)}.kbq-pseudo-checkbox.kbq-disabled{border-color:var(--kbq-checkbox-theme-states-disabled-border);background:var(--kbq-checkbox-theme-states-disabled-background)}.kbq-pseudo-checkbox.kbq-error{border-color:var(--kbq-checkbox-error-default-border);background:var(--kbq-checkbox-error-default-background)}.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-default-color)}.kbq-pseudo-checkbox.kbq-error.kbq-checked,.kbq-pseudo-checkbox.kbq-error.kbq-indeterminate{border-color:var(--kbq-checkbox-error-states-checked-border);background:var(--kbq-checkbox-error-states-checked-background)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-states-disabled-color)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled{border-color:var(--kbq-checkbox-error-states-disabled-border);background:var(--kbq-checkbox-error-states-disabled-background)}\n", ".kbq-pseudo-checkbox{--kbq-checkbox-size-normal-width: var(--kbq-size-l);--kbq-checkbox-size-normal-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-normal-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-normal-top: var(--kbq-size-3xs);--kbq-checkbox-size-big-width: var(--kbq-size-l);--kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-big-top: var(--kbq-size-xxs);--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-default-color: var(--kbq-icon-white);--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-theme-default-background: var(--kbq-background-bg);--kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-checkbox-theme-states-checked-border: transparent;--kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-hover-border: transparent;--kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);--kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);--kbq-checkbox-error-default-border: var(--kbq-line-error);--kbq-checkbox-error-default-color: var(--kbq-icon-white);--kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-error-default-background: var(--kbq-background-error-less);--kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-error-states-hover-border: var(--kbq-line-error);--kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-checkbox-error-states-checked-border: transparent;--kbq-checkbox-error-states-checked-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-hover-border: transparent;--kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-checkbox-error-states-focused-border: var(--kbq-line-error);--kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);--kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pseudo-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-pseudo-checkbox',
@@ -4633,11 +5654,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { big: [{ type: i0.Input, args: [{ isSignal: true, alias: "big", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class KbqPseudoCheckboxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule, imports: [KbqPseudoCheckbox], exports: [KbqPseudoCheckbox] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqPseudoCheckboxModule, imports: [KbqPseudoCheckbox], exports: [KbqPseudoCheckbox] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPseudoCheckboxModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPseudoCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqPseudoCheckbox],
@@ -4664,6 +5685,24 @@ function toggleSelectAll(adapter, options) {
     selectable.forEach((item) => adapter.setSelected(item, shouldSelect));
     return changed;
 }
+/**
+ * State of a "select all" master checkbox over the same items {@link toggleSelectAll} would act on.
+ *
+ * Considers only selectable items, so items the toggle cannot reach (disabled, non-selectable) never
+ * pin the checkbox to `indeterminate`. An empty selectable set reads as `unchecked`: there is nothing
+ * to select, and `[].every()` being `true` would otherwise report a full selection.
+ */
+function getSelectAllState(adapter) {
+    const selectable = adapter.items.filter((item) => adapter.isSelectable(item));
+    if (selectable.length === 0) {
+        return 'unchecked';
+    }
+    const selected = selectable.filter((item) => adapter.isSelected(item)).length;
+    if (selected === 0) {
+        return 'unchecked';
+    }
+    return selected === selectable.length ? 'checked' : 'indeterminate';
+}
 /** Event emitted by the `onSelectAll` outputs when the select-all toggle runs. */
 class KbqSelectAllEvent {
     constructor(
@@ -4778,13 +5817,11 @@ class KbqOption extends KbqOptionBase {
         this._active = false;
         this.mostRecentViewValue = '';
         /**
-         * Flag that indicates whether the component is currently focused by a mouse interaction.
-         *
-         * When set to `true`, the component has focus resulting from a mouse click or
-         * other pointer event. It is automatically cleared when the component loses
-         * focus or if focus is obtained through keyboard navigation or programmatic means.
+         * Whether the pointer is currently over this option. Cleared on `mouseleave` rather than when the
+         * option is focused: hovering the option that is already active does not move the key manager's
+         * index, so no focus follows and a flag cleared only there would stay armed indefinitely.
          */
-        this.isFocusedByMouse = false;
+        this.hoveredByPointer = false;
     }
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
@@ -4870,12 +5907,9 @@ class KbqOption extends KbqOptionBase {
                 this.emitSelectionChangeEvent();
         }
     }
+    /** Moves keyboard focus to this option and reveals it — see {@link kbqFocusAndReveal}. */
     focus() {
-        const element = this.getHostElement();
-        if (typeof element.focus === 'function') {
-            element.focus({ preventScroll: this.isFocusedByMouse });
-            this.isFocusedByMouse = false;
-        }
+        kbqFocusAndReveal(this.getHostElement(), this.hoveredByPointer);
     }
     /**
      * This method sets display styles on the option to make it appear
@@ -4914,7 +5948,11 @@ class KbqOption extends KbqOptionBase {
     }
     /** Ensures the option is selected when activated from the keyboard. */
     handleKeydown(event) {
-        if (event.keyCode === ENTER || event.keyCode === SPACE) {
+        // Only claim the event when the option is actually going to react to it: a non-selectable
+        // or disabled option has nothing to do with ENTER/SPACE, and swallowing the event anyway
+        // would stop it from reaching an ancestor that might (e.g. a custom row built on top of a
+        // non-selectable option, like a "select all" master checkbox).
+        if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled && this.selectable()) {
             this.selectViaInteraction();
             // Prevent the page from scrolling down and form submits.
             event.preventDefault();
@@ -4944,18 +5982,22 @@ class KbqOption extends KbqOptionBase {
     onMouseenter() {
         if (this.disabled)
             return;
-        this.isFocusedByMouse = true;
+        this.hoveredByPointer = true;
         this.parent?.keyManager?.setActiveItem(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOption, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqOption, isStandalone: true, selector: "kbq-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, userSelect: { classPropertyName: "userSelect", publicName: "userSelect", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, viewValue: { classPropertyName: "viewValue", publicName: "viewValue", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "onMouseenter()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.kbq-selected": "selected", "class.kbq-option-multiple": "multiple", "class.kbq-active": "active", "class.kbq-disabled": "disabled", "id": "id" }, classAttribute: "kbq-option" }, providers: [
+    /** @docs-private */
+    onMouseleave() {
+        this.hoveredByPointer = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOption, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqOption, isStandalone: true, selector: "kbq-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, userSelect: { classPropertyName: "userSelect", publicName: "userSelect", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, viewValue: { classPropertyName: "viewValue", publicName: "viewValue", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.kbq-selected": "selected", "class.kbq-option-multiple": "multiple", "class.kbq-active": "active", "class.kbq-disabled": "disabled", "id": "id" }, classAttribute: "kbq-option" }, providers: [
             {
                 provide: KBQ_TITLE_TEXT_REF,
                 useExisting: KbqOption
             }
-        ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqOption"], usesInheritance: true, ngImport: i0, template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqOption"], usesInheritance: true, ngImport: i0, template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option:active:not(.kbq-disabled),.kbq-option.kbq-pressed:not(.kbq-disabled){background:var(--kbq-list-states-active-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled):active,.kbq-option.kbq-selected:not(.kbq-disabled).kbq-pressed{background:var(--kbq-list-states-selected-active-container-background)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option.kbq-selected.kbq-disabled{background:var(--kbq-list-states-selected-container-background)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled):active,.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-pressed{background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-option-multiple.kbq-selected.kbq-disabled{background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOption, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-option', imports: [
                         KbqPseudoCheckboxModule
@@ -4974,8 +6016,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '[id]': 'id',
                         '(click)': 'handleClick($event)',
                         '(mouseenter)': 'onMouseenter()',
+                        '(mouseleave)': 'onMouseleave()',
                         '(keydown)': 'handleKeydown($event)'
-                    }, exportAs: 'kbqOption', template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+                    }, exportAs: 'kbqOption', template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option:active:not(.kbq-disabled),.kbq-option.kbq-pressed:not(.kbq-disabled){background:var(--kbq-list-states-active-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled):active,.kbq-option.kbq-selected:not(.kbq-disabled).kbq-pressed{background:var(--kbq-list-states-selected-active-container-background)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option.kbq-selected.kbq-disabled{background:var(--kbq-list-states-selected-container-background)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled):active,.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-pressed{background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-option-multiple.kbq-selected.kbq-disabled{background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}\n"] }]
         }], propDecorators: { textElement: [{
                 type: ViewChild,
                 args: ['kbqTitleText', { static: false }]
@@ -5018,6 +6061,9 @@ function countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
  * @param currentScrollPosition Current scroll position of the panel.
  * @param panelHeight Height of the panel.
  * @docs-private
+ * @deprecated Unused — an option reveals itself on focus through `KbqOption.focus`, which lets the
+ * browser resolve the scroll container instead of computing an offset from a uniform row height. Will be
+ * removed in the next major release.
  */
 function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPosition, panelHeight) {
     const optionOffset = optionIndex * optionHeight;
@@ -5031,11 +6077,11 @@ function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPositio
 }
 
 class KbqOptionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule, imports: [KbqPseudoCheckbox, KbqOption, KbqOptgroup, KbqOptionActionComponent], exports: [KbqOption, KbqOptgroup, KbqOptionActionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionModule, imports: [KbqPseudoCheckbox, KbqOption, KbqOptgroup, KbqOptionActionComponent], exports: [KbqOption, KbqOptgroup, KbqOptionActionComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqPseudoCheckbox, KbqOption, KbqOptgroup, KbqOptionActionComponent],
@@ -5116,10 +6162,10 @@ class KbqOverflowShadowContainer {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.checkOverflow());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqOverflowShadowContainer, isStandalone: true, selector: "[kbqOverflowShadowContainer]", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["kbqOverflowShadowContainer"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOverflowShadowContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqOverflowShadowContainer, isStandalone: true, selector: "[kbqOverflowShadowContainer]", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["kbqOverflowShadowContainer"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOverflowShadowContainer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqOverflowShadowContainer]',
@@ -5146,10 +6192,10 @@ class KbqOverflowShadowTop {
         /** Value of `box-shadow` when the shadow is active. Defaults to the standard Koobiq token. */
         this.shadow = input('var(--kbq-shadow-overflow-normal-bottom)', ...(ngDevMode ? [{ debugName: "shadow" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowTop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqOverflowShadowTop, isStandalone: true, selector: "[kbqOverflowShadowTop]", inputs: { ref: { classPropertyName: "ref", publicName: "kbqOverflowShadowTop", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.box-shadow": "ref()?.overflow()?.top ? shadow() : null" } }, exportAs: ["kbqOverflowShadowTop"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOverflowShadowTop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqOverflowShadowTop, isStandalone: true, selector: "[kbqOverflowShadowTop]", inputs: { ref: { classPropertyName: "ref", publicName: "kbqOverflowShadowTop", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.box-shadow": "ref()?.overflow()?.top ? shadow() : null" } }, exportAs: ["kbqOverflowShadowTop"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowTop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOverflowShadowTop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqOverflowShadowTop]',
@@ -5172,10 +6218,10 @@ class KbqOverflowShadowBottom {
         /** Value of `box-shadow` when the shadow is active. Defaults to the standard Koobiq token. */
         this.shadow = input('var(--kbq-shadow-overflow-normal-top)', ...(ngDevMode ? [{ debugName: "shadow" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowBottom, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqOverflowShadowBottom, isStandalone: true, selector: "[kbqOverflowShadowBottom]", inputs: { ref: { classPropertyName: "ref", publicName: "kbqOverflowShadowBottom", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.box-shadow": "ref()?.overflow()?.bottom ? shadow() : null" } }, exportAs: ["kbqOverflowShadowBottom"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOverflowShadowBottom, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqOverflowShadowBottom, isStandalone: true, selector: "[kbqOverflowShadowBottom]", inputs: { ref: { classPropertyName: "ref", publicName: "kbqOverflowShadowBottom", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.box-shadow": "ref()?.overflow()?.bottom ? shadow() : null" } }, exportAs: ["kbqOverflowShadowBottom"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowBottom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOverflowShadowBottom, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqOverflowShadowBottom]',
@@ -5186,6 +6232,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { ref: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOverflowShadowBottom", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }] } });
 
+/**
+ * Scroll strategy that repositions the overlay on scroll and reports when the tracked element
+ * moves outside its boundary:
+ *
+ * - With `originElement`: tracks the origin against each ancestor `CdkScrollable` container.
+ * - Without `originElement`: tracks the overlay panel against the viewport.
+ *
+ * Two ways to react to the out-of-bounds event, usable independently or together:
+ * - Subscribe to `hide` — a handle for callers that don't control how this strategy is
+ *   constructed (e.g. reaching into an existing component's `overlayRef.getConfig().scrollStrategy`
+ *   from the outside).
+ * - Pass `onHide` via the factory returned by `kbqAutoHideScrollStrategyFactory` — for callers
+ *   that construct the strategy themselves.
+ */
+class KbqAutoHideScrollStrategy {
+    constructor(scrollDispatcher, viewportRuler, ngZone, config = {}, hooks) {
+        this.scrollDispatcher = scrollDispatcher;
+        this.viewportRuler = viewportRuler;
+        this.ngZone = ngZone;
+        this.config = config;
+        this.hooks = hooks;
+        this.hideSubject = new Subject();
+        /** Emits once when the tracked element scrolls outside its boundary. */
+        this.hide = this.hideSubject.asObservable();
+        this.overlayRef = null;
+        this.scrollSubscription = null;
+        this.originElement = null;
+        this.ancestorScrollContainers = null;
+    }
+    /** @docs-private */
+    attach(overlayRef) {
+        if (this.overlayRef && isDevMode()) {
+            throw new Error('KbqAutoHideScrollStrategy: attach() has already been called for this instance.');
+        }
+        this.overlayRef = overlayRef;
+    }
+    /** Subscribes to scroll events and starts repositioning / out-of-bounds detection. */
+    enable() {
+        if (this.scrollSubscription)
+            return;
+        if (!this.overlayRef) {
+            throw new Error('KbqAutoHideScrollStrategy: enable() was called before attach(). Call attach() first.');
+        }
+        const overlayRef = this.overlayRef;
+        const { scrollThrottle = 20 } = this.config;
+        this.originElement = this.config.originElement ?? this.resolveOriginElement(overlayRef);
+        this.ancestorScrollContainers = this.originElement
+            ? this.scrollDispatcher.getAncestorScrollContainers(this.originElement)
+            : null;
+        this.scrollSubscription = this.scrollDispatcher
+            .scrolled(scrollThrottle)
+            .pipe(filter((scrollable) => !scrollable || !overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement)))
+            .subscribe(() => {
+            const isOutside = this.originElement
+                ? this.isOriginOutsideAncestors(this.originElement)
+                : this.isOverlayOutsideViewport(overlayRef);
+            if (isOutside) {
+                this.disable();
+                this.ngZone.run(() => {
+                    this.hideSubject.next();
+                    this.hooks?.onHide?.();
+                });
+                return;
+            }
+            overlayRef.updatePosition();
+        });
+    }
+    /** Unsubscribes from scroll events. */
+    disable() {
+        this.scrollSubscription?.unsubscribe();
+        this.scrollSubscription = null;
+    }
+    /** Disables the strategy and completes `hide`. */
+    detach() {
+        this.disable();
+        this.hideSubject.complete();
+        this.hooks = undefined;
+        this.overlayRef = null;
+        this.originElement = null;
+        this.ancestorScrollContainers = null;
+    }
+    resolveOriginElement(overlayRef) {
+        const positionStrategy = overlayRef.getConfig().positionStrategy;
+        if (positionStrategy instanceof FlexibleConnectedPositionStrategy) {
+            return this.coerceOriginElement(positionStrategy._origin);
+        }
+        return null;
+    }
+    isOriginOutsideAncestors(originElement) {
+        const originRect = originElement.getBoundingClientRect();
+        return (this.ancestorScrollContainers ?? []).some((scrollable) => this.isOutsideBounds(originRect, scrollable.getElementRef().nativeElement.getBoundingClientRect()));
+    }
+    isOverlayOutsideViewport(overlayRef) {
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+        const { width, height } = this.viewportRuler.getViewportSize();
+        return this.isOutsideBounds(overlayRect, { top: 0, left: 0, bottom: height, right: width });
+    }
+    isOutsideBounds(rect, containerRect) {
+        return (rect.bottom < containerRect.top ||
+            rect.top > containerRect.bottom ||
+            rect.right < containerRect.left ||
+            rect.left > containerRect.right);
+    }
+    coerceOriginElement(raw) {
+        if (raw instanceof HTMLElement) {
+            return raw;
+        }
+        else if (raw instanceof ElementRef && raw.nativeElement instanceof HTMLElement) {
+            return raw.nativeElement;
+        }
+        return null;
+    }
+}
+/**
+ * Factory function for `KbqAutoHideScrollStrategy`. Use it directly as a `useFactory` value
+ * when providing a component-level scroll strategy token (e.g. `KBQ_POPOVER_SCROLL_STRATEGY`).
+ *
+ * The returned function accepts an optional `hooks` object (see `KbqAutoHideScrollStrategyHooks`)
+ * and an optional `config` (see `KbqAutoHideScrollStrategyConfig`).
+ *
+ * @example
+ * ```ts
+ * const createScrollStrategy = kbqAutoHideScrollStrategyFactory(scrollDispatcher, viewportRuler, ngZone);
+ * const strategy = createScrollStrategy({ onHide: () => this.hide() }, { originElement });
+ * ```
+ */
+function kbqAutoHideScrollStrategyFactory(scrollDispatcher, viewportRuler, ngZone) {
+    return (hooks, config) => new KbqAutoHideScrollStrategy(scrollDispatcher, viewportRuler, ngZone, config ?? {}, hooks);
+}
+
 const POSITION_MAP = {
     top: {
         originX: 'center',
@@ -5436,6 +6612,112 @@ function objectValues(object) {
     return object === null ? [] : baseValues(object, Object.keys(object));
 }
 
+/**
+ * Renders `panelMaxHeight` as a CSS length for the `--kbq-select-panel-size-max-height` token.
+ *
+ * A non-finite value yields `null` so that Angular removes the inline custom property and the stylesheet
+ * default applies again. A negative value is clamped to `0` because `max-height` rejects negative lengths
+ * at computed-value time, which would drop the declaration and leave the list unbounded rather than at
+ * its default height.
+ * @docs-private
+ */
+function kbqResolvePanelMaxHeightToken(panelMaxHeight) {
+    // `numberAttribute` coerces `null` and other invalid bindings to `NaN`, so guard on finiteness
+    // rather than on `null`, which never reaches us from a template binding.
+    return Number.isFinite(panelMaxHeight) ? coerceCssPixelValue(Math.max(panelMaxHeight, 0)) : null;
+}
+/**
+ * Default cap of an overlay panel's scrollable content, in pixels. Mirrors the stylesheet default of
+ * `--kbq-select-panel-size-max-height` so that the two cannot drift apart.
+ * @docs-private
+ */
+const KBQ_PANEL_DEFAULT_MAX_HEIGHT = 256;
+/**
+ * Measures how much room the panel's scrollable list has on either side of the trigger.
+ *
+ * Returns `null` for geometry that cannot be trusted — a collapsed trigger rect or a zero-height viewport, which
+ * is what a DOM without layout reports, on the server and under jsdom.
+ * @docs-private
+ */
+function kbqResolvePanelSideSpace(context) {
+    const { triggerTop, triggerBottom, viewportHeight, viewportMargin, chromeHeight } = context;
+    if (![triggerTop, triggerBottom, viewportHeight, viewportMargin, chromeHeight].every(Number.isFinite)) {
+        return null;
+    }
+    if (viewportHeight <= 0 || triggerBottom <= triggerTop)
+        return null;
+    return {
+        above: triggerTop - viewportMargin - chromeHeight,
+        below: viewportHeight - triggerBottom - viewportMargin - chromeHeight
+    };
+}
+/**
+ * Distance from the trigger's top edge down to where a panel would start if the trigger had a single row —
+ * equivalently, the trigger's height with rows 2..N removed.
+ *
+ * Returns `null` for geometry that cannot be trusted: a collapsed rect (the server, a DOM without layout), or
+ * a row container that is not what drives the trigger's height, which a result reaching past the trigger's own
+ * bottom edge gives away.
+ * @docs-private
+ */
+function kbqResolveTriggerFirstRowOffset(measurements) {
+    const { originTop, originBottom, listTop, listBottom, firstRowBottom, listScrollTop } = measurements;
+    if (![originTop, originBottom, listTop, listBottom, firstRowBottom, listScrollTop].every(Number.isFinite)) {
+        return null;
+    }
+    const originHeight = originBottom - originTop;
+    if (originHeight <= 0)
+        return null;
+    // The first row measured in the container's own, unscrolled coordinates, plus the chrome the trigger keeps
+    // above and below its rows — the matcher's padding and the field's border.
+    const firstRowHeight = firstRowBottom + listScrollTop - listTop;
+    const offset = listTop - originTop + firstRowHeight + (originBottom - listBottom);
+    return offset > 0 && offset <= originHeight ? offset : null;
+}
+/**
+ * Room the panel's scrollable list has when it is anchored to the trigger's first row instead of to the
+ * trigger's bottom edge. The same arithmetic as {@link kbqResolvePanelSideSpace}, on a trigger cut to one row.
+ * @docs-private
+ */
+function kbqResolveOverlapPanelSpace(context, firstRowOffset) {
+    const space = kbqResolvePanelSideSpace({ ...context, triggerBottom: context.triggerTop + firstRowOffset });
+    return space && space.below;
+}
+/**
+ * Whether the panel should be anchored below the trigger's first row and rendered over the rest of it.
+ *
+ * Three things have to hold. The trigger must have more than one row, or there is nothing to overlap. It must
+ * be taller than the panel, or the room beside it is the better trade and the panel belongs on a side. And
+ * the panel must fit there at its full height — the caller adds this as a THIRD `ConnectedPosition`,
+ * and when no position fits the overlay falls back to whichever goes off-screen the least, so an anchor that
+ * does not fit would outrank `above`/`below` on that fallback and move panels that have no business moving.
+ * Gating on the fit keeps the fallback ranking exactly as it is without this anchor.
+ *
+ * `anchored` widens the height test by one row, so that deselecting a single option cannot bounce a panel
+ * sitting right on the boundary across several hundred pixels.
+ * @docs-private
+ */
+function kbqShouldAnchorPanelToFirstRow(context, { firstRowOffset, naturalListHeight, anchored = false }) {
+    if (firstRowOffset === null)
+        return false;
+    if (!Number.isFinite(naturalListHeight))
+        return false;
+    // Read off the same rect the space calculation uses, so the two can never disagree.
+    const triggerHeight = context.triggerBottom - context.triggerTop;
+    // A single-row trigger has nothing to overlap.
+    if (triggerHeight - firstRowOffset <= 1)
+        return false;
+    const hysteresis = anchored ? firstRowOffset : 0;
+    if (triggerHeight + hysteresis <= context.chromeHeight + naturalListHeight)
+        return false;
+    // The overlay rejects a position whose top edge is off the top of the viewport, which a trigger scrolled
+    // past the fold produces.
+    if (context.triggerTop + firstRowOffset < 0)
+        return false;
+    const space = kbqResolveOverlapPanelSpace(context, firstRowOffset);
+    return space !== null && space >= naturalListHeight;
+}
+
 /**
  * Default minimum width of an overlay panel, in pixels.
  *
@@ -5486,6 +6768,44 @@ function kbqResolvePanelWidth(panelWidth, panelMinWidth, triggerWidth) {
     return { width: panelWidth, minWidth: '' };
 }
 
+/**
+ * Whether `point` lies within (or on the edge of) `rect`.
+ * @docs-private
+ */
+function isPointInRect(point, rect) {
+    return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+}
+/**
+ * Whether `point` lies within (or on the edge of) `triangle`.
+ *
+ * Uses the sign of the cross product of each triangle edge with the point: the point is inside
+ * only if it's consistently on the same side of all three edges.
+ * @docs-private
+ */
+function isPointInTriangle(point, triangle) {
+    const { a, b, c } = triangle;
+    const sign = (p1, p2, p3) => (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+    const d1 = sign(point, a, b);
+    const d2 = sign(point, b, c);
+    const d3 = sign(point, c, a);
+    const hasNegative = d1 < 0 || d2 < 0 || d3 < 0;
+    const hasPositive = d1 > 0 || d2 > 0 || d3 > 0;
+    return !(hasNegative && hasPositive);
+}
+/**
+ * Builds the "safe triangle" connecting `origin` (typically the pointer position where it left a
+ * trigger) to the top and bottom corners of `targetRect` (typically a submenu panel) that are nearest
+ * to `origin` — the submenu can open on either side of its trigger, so the nearest edge is picked by
+ * comparing distances rather than assuming a fixed side.
+ * @docs-private
+ */
+function getSafeTriangleVertices(origin, targetRect) {
+    const nearX = Math.abs(targetRect.left - origin.x) <= Math.abs(targetRect.right - origin.x)
+        ? targetRect.left
+        : targetRect.right;
+    return { a: origin, b: { x: nearX, y: targetRect.top }, c: { x: nearX, y: targetRect.bottom } };
+}
+
 /**
  * Element used by {@link KbqShadowDomOverlayContainer} to locate the shadow root that should host overlays.
  *
@@ -5591,10 +6911,10 @@ class KbqShadowDomOverlayContainer extends OverlayContainer {
         // No explicit host provided — fall back to the application root component element.
         return this.applicationRef.components[0]?.location.nativeElement ?? null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqShadowDomOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqShadowDomOverlayContainer }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqShadowDomOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqShadowDomOverlayContainer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqShadowDomOverlayContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqShadowDomOverlayContainer, decorators: [{
             type: Injectable
         }] });
 /**
@@ -5627,6 +6947,24 @@ const kbqShadowDomOverlayProvider = (host) => {
  * InjectionToken for providing component with popup. Used in select and tree-select for tooltip.
  */
 const KBQ_PARENT_POPUP = new InjectionToken('kbq-parent-popup');
+/**
+ * Element-level token for pop-ups sharing their trigger element with a tooltip. Multi-provided, so a single
+ * element can carry several pop-ups at once — for example the filter-bar button with both a popover and a
+ * dropdown attached to it.
+ */
+const KBQ_SIBLING_POPUP = new InjectionToken('kbq-sibling-popup');
+/**
+ * Builds the multi-provider entry a pop-up trigger adds to its own `providers` to announce itself to a
+ * tooltip on the same element.
+ *
+ * Every concrete trigger has to add it on its own: Angular copies `providers` to a subclass only when that
+ * subclass has no decorator of its own, so inheriting from an already-announced trigger is not enough.
+ */
+const kbqSiblingPopupProvider = (popup) => ({
+    provide: KBQ_SIBLING_POPUP,
+    useExisting: popup,
+    multi: true
+});
 var PopUpPlacements;
 (function (PopUpPlacements) {
     PopUpPlacements["Top"] = "top";
@@ -5683,6 +7021,17 @@ const KBQ_CONNECTED_OVERLAY_BELOW_CLASS = 'kbq-connected-overlay_below';
  * `padding-bottom` inside the pane so the flipped gap is not click/hover-through.
  */
 const KBQ_CONNECTED_OVERLAY_ABOVE_CLASS = 'kbq-connected-overlay_above';
+/**
+ * Pane class applied to a connected overlay whose panel is anchored to the FIRST ROW of a trigger it
+ * OVERLAPS — a multiline select whose tag rows have made it taller than the panel itself, with too little
+ * room to open on either side of it.
+ *
+ * The panel ends up where it would for a single-row trigger, so the gap is the same transparent
+ * `padding-top` as {@link KBQ_CONNECTED_OVERLAY_BELOW_CLASS}. It is a separate class because the room left
+ * for the panel has to be measured from the first row rather than from the trigger's bottom edge, and the
+ * class is how the component tells the two apart.
+ */
+const KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS = 'kbq-connected-overlay_overlap';
 /**
  * Variable used for offsetY(X) calculations when applying Angular Overlay
  *
@@ -5837,10 +7186,10 @@ class KbqPopUp {
             this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, oppositeSide, 'unset');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUp, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqPopUp, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPopUp, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqPopUp, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPopUp, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -6022,6 +7371,20 @@ class KbqPopUpTrigger {
         this._isOpen = value;
         this.popUpChangeDetectorRef.markForCheck();
     }
+    /**
+     * Whether the pop-up overlay is currently attached.
+     *
+     * Unlike `isOpen`, which follows the visibility of the pop-up component and therefore lags a task behind
+     * `show()`/`hide()`, this flips synchronously — it is the window during which the overlay (and its
+     * backdrop) is present in the DOM. Part of the {@link KbqSiblingPopup} contract.
+     */
+    get isAttached() {
+        return !!this.instance;
+    }
+    /** Emits `true` when the pop-up opens and `false` when it closes. Part of the {@link KbqSiblingPopup} contract. */
+    get openedChange() {
+        return this.visibleChange;
+    }
     /** Binds the DOM event listeners for the configured triggers. */
     ngOnInit() {
         this.initListeners();
@@ -6303,10 +7666,10 @@ class KbqPopUpTrigger {
             this.hide();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUpTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqPopUpTrigger, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPopUpTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqPopUpTrigger, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUpTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPopUpTrigger, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -6326,8 +7689,18 @@ const KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD = 10;
  * this value or more away from the viewport boundary.
  */
 const SELECT_PANEL_VIEWPORT_PADDING = 8;
-/** Injection token that determines the scroll handling while a select is open. */
-const KBQ_SELECT_SCROLL_STRATEGY = new InjectionToken('kbq-select-scroll-strategy');
+/**
+ * Injection token that determines the scroll handling while a select is open.
+ *
+ * The root default keeps the select usable when it is reached outside `KbqSelectModule`'s injector - imported
+ * as a bare standalone component, pulled in through another standalone component (`KbqTimezoneSelect`,
+ * `KbqCalendarHeader`), or rendered in a component built from the root injector, as `KbqModalService` does.
+ * Providing the token anywhere still wins over this default.
+ */
+const KBQ_SELECT_SCROLL_STRATEGY = new InjectionToken('kbq-select-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => kbqSelectScrollStrategyProviderFactory(inject(Overlay))
+});
 /** @docs-private */
 function kbqSelectScrollStrategyProviderFactory(overlay) {
     return () => overlay.scrollStrategies.reposition();
@@ -6340,10 +7713,10 @@ const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER = {
 };
 
 class KbqSelectTrigger {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectTrigger, isStandalone: true, selector: "kbq-select-trigger, [kbq-select-trigger]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectTrigger, isStandalone: true, selector: "kbq-select-trigger, [kbq-select-trigger]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-select-trigger, [kbq-select-trigger]'
@@ -6353,20 +7726,20 @@ class KbqSelectMatcher {
     constructor() {
         this.useDefaultHandlers = input(true, ...(ngDevMode ? [{ debugName: "useDefaultHandlers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectMatcher, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSelectMatcher, isStandalone: true, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: { useDefaultHandlers: { classPropertyName: "useDefaultHandlers", publicName: "useDefaultHandlers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectMatcher, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSelectMatcher, isStandalone: true, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: { useDefaultHandlers: { classPropertyName: "useDefaultHandlers", publicName: "useDefaultHandlers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectMatcher, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-select-matcher, [kbq-select-matcher]'
                 }]
         }], propDecorators: { useDefaultHandlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDefaultHandlers", required: false }] }] } });
 class KbqSelectSearchEmptyResult {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearchEmptyResult, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectSearchEmptyResult, isStandalone: true, selector: "[kbq-select-search-empty-result]", host: { classAttribute: "kbq-select-search-empty-result kbq-select__no-options-message" }, exportAs: ["kbqSelectSearchEmptyResult"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectSearchEmptyResult, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectSearchEmptyResult, isStandalone: true, selector: "[kbq-select-search-empty-result]", host: { classAttribute: "kbq-select-search-empty-result kbq-select__no-options-message" }, exportAs: ["kbqSelectSearchEmptyResult"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearchEmptyResult, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectSearchEmptyResult, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-select-search-empty-result]',
@@ -6377,10 +7750,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 class KbqSelectFooter {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectFooter, isStandalone: true, selector: "kbq-select-footer, [kbq-select-footer]", host: { classAttribute: "kbq-select__footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectFooter, isStandalone: true, selector: "kbq-select-footer, [kbq-select-footer]", host: { classAttribute: "kbq-select__footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-select-footer, [kbq-select-footer]',
@@ -6442,10 +7815,10 @@ class KbqSelectSearch {
             event.stopPropagation();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectSearch, isStandalone: true, selector: "[kbqSelectSearch]", host: { listeners: { "keydown": "handleKeydown($event)" } }, exportAs: ["kbqSelectSearch"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSelectSearch, isStandalone: true, selector: "[kbqSelectSearch]", host: { listeners: { "keydown": "handleKeydown($event)" } }, exportAs: ["kbqSelectSearch"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectSearch, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqSelectSearch]',
@@ -6463,12 +7836,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class KbqAbstractSelect {
     constructor() {
+        /**
+         * Row container of a multi-selection trigger. Absent for a single value, an empty trigger and a custom
+         * matcher or trigger — all of which have no rows for the panel to anchor to.
+         */
+        this.multilineMatchList = viewChild('multilineMatchList', ...(ngDevMode ? [{ debugName: "multilineMatchList" }] : []));
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.window = inject(KBQ_WINDOW);
         /** Overlay panel class. */
         this.overlayPanelClass = 'kbq-select-overlay';
         /** Width of the overlay panel. */
         this.overlayWidth = '';
         /** Minimum width of the overlay panel. */
         this.overlayMinWidth = '';
+        /**
+         * Height of everything in the panel that is not the option list — the trigger gap the pane pads itself
+         * with, the list padding, a search field and a footer.
+         *
+         * The same for every anchor: the below and overlap panes pad the top, the above pane pads the bottom, and
+         * all three pad by the same gap — which is what keeps the anchor decision from feeding back into itself.
+         */
+        this.panelChromeHeight = 0;
+        /** Transparent gap the pane pads itself with, which the anchor has to be raised by. */
+        this.panelGapHeight = 0;
+        /**
+         * Cap the option list is rendered with, in pixels. Measured off the panel rather than derived from
+         * `panelMaxHeight`, because `--kbq-select-panel-size-max-height` is what the list actually obeys and a
+         * consumer can override it. Seeded with the stylesheet's own default, which is what a DOM that computes
+         * no layout — the server, jsdom — leaves in force.
+         */
+        this.panelMaxHeightCap = KBQ_PANEL_DEFAULT_MAX_HEIGHT;
+        this.resizeSubscription = Subscription.EMPTY;
     }
     /**
      * Resolves the overlay panel size for the current trigger geometry and stores it for the
@@ -6544,15 +7942,273 @@ class KbqAbstractSelect {
         this.overlayDir.overlayRef.overlayElement.style.maxWidth = 'unset';
         this.overlayDir.overlayRef.updatePosition();
     }
+    /**
+     * Returns `positions` with the first-row anchor added, updated or removed, or `null` when the array
+     * already says what it should — so that the caller can skip the change detection an edit would need.
+     *
+     * The anchor goes LAST. The overlay returns on the first position that fits completely, so an entry at the
+     * end is reached exactly when neither the below nor the above position works, which is the rule this
+     * implements. Pass `null` to drop it again.
+     *
+     * The result is meant to be assigned to the field the `cdkConnectedOverlayPositions` input reads, NOT
+     * handed to `withPositions()` on the strategy: `CdkConnectedOverlay.ngOnChanges` rebuilds the strategy
+     * from that field on ANY input change — the width `lockOverlayWidthForSearch` pins is one — so a list
+     * applied only to the strategy would be dropped again without a trace.
+     */
+    withOverlapPosition(positions, offsetY) {
+        // `panelClass` is `string | string[]`, and `positions` is public, so an anchor can come back in a
+        // shape a strict comparison would miss — which would append a second anchor on every recompute and
+        // leave every one of them behind on close.
+        const isOverlap = ({ panelClass }) => Array.isArray(panelClass)
+            ? panelClass.includes(KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS)
+            : panelClass === KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS;
+        const current = positions.find(isOverlap);
+        const withoutOverlap = () => positions.filter((position) => !isOverlap(position));
+        if (offsetY === null)
+            return current ? withoutOverlap() : null;
+        // Rounded so that sub-pixel layout jitter cannot rebuild the array on every selection change.
+        const roundedOffsetY = Math.round(offsetY);
+        if (current?.offsetY === roundedOffsetY)
+            return null;
+        return [
+            ...withoutOverlap(),
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: roundedOffsetY,
+                panelClass: KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS
+            }
+        ];
+    }
+    /**
+     * Re-resolves the panel position with the first-row anchor brought up to date.
+     *
+     * Never call this from a `positionChange` subscriber: CDK records the position it applied AFTER the
+     * subscriber returns, so an anchor resolved from inside that frame is overwritten by the pre-anchor
+     * position, and `cdkConnectedOverlayLockPosition` then replays that stale one on the next scroll.
+     */
+    reanchorPanel() {
+        // `hostElement` is nulled by `OverlayRef.dispose()`, which is what a queued call landing after the
+        // component was destroyed has to be told apart by — `overlayRef` itself outlives disposal.
+        if (!this.overlayDir?.overlayRef?.hostElement)
+            return;
+        // Only when the anchor actually moved. `setOverlayPosition()` is a one-shot: it clears the pane's
+        // `minWidth` and derives the panel offset from the width it had before that, so a second run over
+        // the same open measures a narrower pane. In RTL the pane's x is `documentWidth - (x + paneWidth)`,
+        // so that narrower measurement moves the panel; in LTR only `left` is written and nothing moves.
+        if (this.updatePanelAnchor()) {
+            this.setOverlayPosition();
+        }
+    }
+    /**
+     * Re-resolves the anchor while the panel is open. A resize rewraps the trigger's rows and changes the
+     * room beside it at once, and CDK re-applies the position on its own, so without this the anchor it
+     * resolves against is the one measured for the old viewport.
+     */
+    subscribeToPanelResize() {
+        this.resizeSubscription.unsubscribe();
+        if (!this.multiline())
+            return;
+        this.resizeSubscription = fromEvent(this.window, 'resize')
+            .pipe(debounceTime(50))
+            .subscribe(() => this.reanchorPanel());
+    }
+    /** Drops the resize subscription the open set up. */
+    unsubscribeFromPanelResize() {
+        this.resizeSubscription.unsubscribe();
+    }
+    /**
+     * Keeps the first-row anchor in `positions`: a third position that puts the panel just below the
+     * trigger's first row and over the rest of it, for a multiline trigger that has grown taller than the
+     * panel and fits on neither side of it.
+     *
+     * The anchor goes last, and the overlay stops at the first position that fits completely, so it is
+     * reached exactly when neither `below` nor `above` works. `kbqShouldAnchorPanelToFirstRow` holds the
+     * rest of the rule.
+     *
+     * Returns whether the array changed, so that a caller can skip the reposition an unchanged anchor does
+     * not need. Updating the array is all there is to do here — `setOverlayPosition()` rebuilds the strategy
+     * and resolves the position again.
+     */
+    updatePanelAnchor() {
+        if (!this.multiline() || !this.isPanelOpen() || !this.overlayDir?.overlayRef)
+            return false;
+        // A measurement that cannot be trusted would leave the seeds in force, and a zero chrome height
+        // overstates the room beside the trigger by the whole of a search field and a footer.
+        if (!this.measurePanelChrome())
+            return false;
+        const context = this.resolvePanelSpaceContext();
+        if (!context)
+            return false;
+        const firstRowOffset = this.resolveFirstRowOffset();
+        const anchorToFirstRow = kbqShouldAnchorPanelToFirstRow(context, {
+            firstRowOffset,
+            naturalListHeight: this.measureNaturalListHeight(),
+            anchored: this.isPanelAnchoredToFirstRow()
+        });
+        // The pane pads the gap inside itself, so the anchor is raised by it: the painted panel then starts
+        // where the second row does, instead of leaving the top of that row's tags showing through the band.
+        const offsetY = anchorToFirstRow && firstRowOffset !== null ? firstRowOffset - this.panelGapHeight : null;
+        const positions = this.withOverlapPosition(this.positions, offsetY);
+        if (!positions)
+            return false;
+        this.positions = positions;
+        // Pushes the new array into `CdkConnectedOverlay`: the strategy is rebuilt from the directive's
+        // input, not from this field, so without this the reposition would resolve against the old list.
+        this.changeDetectorRef.detectChanges();
+        return true;
+    }
+    /**
+     * Distance from the origin's top edge to just below the trigger's first row, or `null` when there is no
+     * row to anchor to.
+     */
+    resolveFirstRowOffset() {
+        const origin = this.getOverlayOriginElement();
+        const list = this.multilineMatchList()?.nativeElement;
+        if (!origin || !list)
+            return null;
+        // The rows follow document order, so the scan stops at the first child that starts lower. Collapsed
+        // children are skipped: a custom tag template can render a hidden node, and its all-zero rect would
+        // otherwise be taken for the topmost row and push every real tag out of it.
+        let firstRowTop = null;
+        let firstRowBottom = Number.NEGATIVE_INFINITY;
+        for (const child of Array.from(list.children)) {
+            const { top, bottom, width, height } = child.getBoundingClientRect();
+            // A collapsed child occupies no row and adds nothing to one, so it is skipped whichever way it
+            // collapsed — its rect would otherwise be read as a row of its own.
+            if (width === 0 || height === 0)
+                continue;
+            if (firstRowTop === null) {
+                firstRowTop = top;
+                // Sub-pixel layout only makes the tops of one row equal to within a pixel, and a custom tag
+                // template can put several elements on the same row.
+            }
+            else if (top - firstRowTop >= 1) {
+                break;
+            }
+            firstRowBottom = Math.max(firstRowBottom, bottom);
+        }
+        if (firstRowTop === null)
+            return null;
+        const originRect = origin.getBoundingClientRect();
+        const listRect = list.getBoundingClientRect();
+        return kbqResolveTriggerFirstRowOffset({
+            originTop: originRect.top,
+            originBottom: originRect.bottom,
+            listTop: listRect.top,
+            listBottom: listRect.bottom,
+            firstRowBottom,
+            // The rows keep their laid-out position while their container scrolls, so the scroll offset is
+            // what converts them back into the list's own coordinates.
+            listScrollTop: list.scrollTop
+        });
+    }
+    /**
+     * Height the option list takes with no viewport clamp in force.
+     *
+     * Read from `scrollHeight`, which reports the whole content rather than what the pane happens to show
+     * right now — the anchor decision runs on a pane the overlay may be about to move.
+     */
+    measureNaturalListHeight() {
+        if (this.isListHeightPinnedToCap())
+            return this.panelMaxHeightCap;
+        const content = this.optionsContainer()?.nativeElement;
+        if (!content)
+            return this.panelMaxHeightCap;
+        // `clientHeight` less the computed content box is the list's own vertical padding, which
+        // `scrollHeight` counts and the cap does not.
+        const padding = content.clientHeight - parseFloat(this.window.getComputedStyle(content).height);
+        return Math.min(this.panelMaxHeightCap, content.scrollHeight - (Number.isFinite(padding) ? padding : 0));
+    }
+    /**
+     * Whether the option list renders at the cap whatever its content is, which a
+     * `cdk-virtual-scroll-viewport` does by pinning both its `min-height` and its `max-height` to the token.
+     */
+    isListHeightPinnedToCap() {
+        return false;
+    }
+    /** Geometry the panel height calculation needs, or `null` when there is nothing to measure against. */
+    resolvePanelSpaceContext() {
+        const origin = this.getOverlayOriginElement();
+        if (!origin)
+            return null;
+        const { top, bottom } = origin.getBoundingClientRect();
+        return {
+            triggerTop: top,
+            triggerBottom: bottom,
+            // `clientHeight`, not `innerHeight`: the overlay narrows the viewport the same way, and the two
+            // differ by the horizontal scrollbar — enough for a position we think fits to be rejected.
+            viewportHeight: this.window.document.documentElement.clientHeight,
+            viewportMargin: this.viewportMargin,
+            chromeHeight: this.panelChromeHeight
+        };
+    }
+    /** Whether the panel is currently drawn over the trigger, read from the class the overlay applies. */
+    isPanelAnchoredToFirstRow() {
+        return this.overlayDir.overlayRef.overlayElement.classList.contains(KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS);
+    }
+    /**
+     * Records the part of the panel that is not the option list, the gap the pane pads itself with, and the
+     * cap the list is rendered with. Returns `false` when the panel cannot be measured, which is the caller's
+     * signal to leave the anchor alone rather than decide against a stale value.
+     */
+    measurePanelChrome() {
+        const pane = this.overlayDir.overlayRef.overlayElement;
+        const content = this.optionsContainer()?.nativeElement;
+        if (!content)
+            return false;
+        // `--kbq-select-panel-size-max-height` caps the list's *content box* — the scroller is `box-sizing:
+        // initial` — so its own padding counts as chrome. The computed `height` is that content box, which is
+        // exactly what the cap has to be measured against.
+        const { height, maxHeight } = this.window.getComputedStyle(content);
+        const { paddingTop, paddingBottom } = this.window.getComputedStyle(pane);
+        const chromeHeight = pane.getBoundingClientRect().height - parseFloat(height);
+        const cap = parseFloat(maxHeight);
+        if (!Number.isFinite(chromeHeight) || chromeHeight < 0)
+            return false;
+        this.panelChromeHeight = chromeHeight;
+        // Whichever side the current position pads, the gap is the same one the anchored pane will pad.
+        this.panelGapHeight = Math.max(parseFloat(paddingTop) || 0, parseFloat(paddingBottom) || 0);
+        // `none`, `''` and a DOM without layout all yield NaN, which leaves the seed in force.
+        if (Number.isFinite(cap) && cap > 0) {
+            this.panelMaxHeightCap = cap;
+        }
+        return true;
+    }
     resolveSearchMinOptionsThreshold(value) {
         return value === 'auto' ? KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD : value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAbstractSelect, isStandalone: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", type: KbqAbstractSelect, isStandalone: true, viewQueries: [{ propertyName: "multilineMatchList", first: true, predicate: ["multilineMatchList"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbstractSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAbstractSelect, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { multilineMatchList: [{ type: i0.ViewChild, args: ['multilineMatchList', { isSignal: true }] }] } });
+
+/**
+ * Runs a consumer-supplied `compareWith` defensively: a comparator that throws is reported in dev mode
+ * and treated as "no match", so one bad comparison cannot take a whole selection down with it.
+ *
+ * Callers own the `null` policy — `KbqSelect` refuses to match a `null` option value, `KbqListSelection`
+ * lets the comparator decide — so nothing is filtered here.
+ *
+ * @docs-private
+ */
+function runCompareWith(compareWith, first, second) {
+    try {
+        return compareWith(first, second);
+    }
+    catch (error) {
+        if (isDevMode()) {
+            // Notify developers of errors in their comparator.
+            // eslint-disable-next-line no-console
+            console.warn(error);
+        }
+        return false;
+    }
+}
 
 /**
  * Returns an exception to be thrown when attempting to change a select's `multiple` option
@@ -6618,10 +8274,10 @@ class KbqMeasureScrollbarService {
         this.document.body.removeChild(scrollDiv);
         this._scrollBarWidth = width;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMeasureScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMeasureScrollbarService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqMeasureScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqMeasureScrollbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMeasureScrollbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqMeasureScrollbarService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -6694,10 +8350,10 @@ class ThemeService {
     getTheme() {
         return this.current.value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -6761,9 +8417,9 @@ function dispatchEvent(node, event) {
 function dispatchFakeEvent(node, type, canBubble) {
     return dispatchEvent(node, createFakeEvent(type, canBubble));
 }
-/** Shorthand to dispatch a keyboard event with a specified key code. */
-function dispatchKeyboardEvent(node, type, keyCode, target) {
-    return dispatchEvent(node, createKeyboardEvent(type, keyCode, target));
+/** Shorthand to dispatch a keyboard event with a specified key code and, optionally, a `KeyboardEvent.key`. */
+function dispatchKeyboardEvent(node, type, keyCode, target, key) {
+    return dispatchEvent(node, createKeyboardEvent(type, keyCode, target, key));
 }
 /** Shorthand to dispatch a mouse event on the specified coordinates. */
 function dispatchMouseEvent(node, type, x = 0, y = 0, event = createMouseEvent(type, x, y)) {
@@ -6805,10 +8461,10 @@ class MockNgZone extends NgZone {
     simulateZoneExit() {
         this.onStable.emit(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MockNgZone, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MockNgZone }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MockNgZone, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MockNgZone }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MockNgZone, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: MockNgZone, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -6838,11 +8494,11 @@ const validationTooltipShowDelay = 10;
  */
 const validationTooltipHideDelay = 3000;
 
-const VERSION = new Version('20.2.0+sha-ee9fb3c');
+const VERSION = new Version('20.3.0+sha-47e0f25');
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, APOSTROPHE, ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AT_SIGN, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, ActiveDescendantKeyManager, B, BACKSLASH, BACKSPACE, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, BaseLocaleAwareFormatterPipe, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, D, DASH, DELETE, DOWN_ARROW, DateAdapter, DateFormatter, E, EIGHT, END, ENTER, EQUALS, ESCAPE, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FOUR, FileValidators, FocusKeyManager, G, H, HOME, I, INSERT, J, K, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_OVERFLOW_SHADOW_SOURCE, KBQ_PANEL_DEFAULT_MIN_WIDTH, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SHADOW_DOM_OVERLAY_HOST, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_WINDOW, KbqAbsoluteLongDatePipe, KbqAbsoluteLongDateTimePipe, KbqAbsoluteShortDatePipe, KbqAbsoluteShortDateTimePipe, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqColorDirective, KbqComponentColors, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightBackgroundPipe, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqOverflowShadowBottom, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqRangeLongDatePipe, KbqRangeLongDateTimePipe, KbqRangeMiddleDateTimePipe, KbqRangeShortDatePipe, KbqRangeShortDateTimePipe, KbqReadStateDirective, KbqRectangleItem, KbqRelativeLongDatePipe, KbqRelativeLongDateTimePipe, KbqRelativeShortDatePipe, KbqRelativeShortDateTimePipe, KbqRoundDecimalPipe, KbqSelectAllEvent, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqShadowDomOverlayContainer, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, L, LAST_MEDIA, LEFT_ARROW, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, ListKeyManager, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, META, MUTE, MockNgZone, MultipleMode, N, NINE, NUMBER_FORMAT_REGEXP, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PAUSE, PERIOD, PLUS_SIGN, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PRINT_SCREEN, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, Q, QUESTION_MARK, R, RIGHT_ARROW, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, S, SCROLL_LOCK, SELECT_PANEL_VIEWPORT_PADDING, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, T, TAB, THREE, TILDE, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, TWO, ThemePalette, ThemeService, U, UP_ARROW, V, VERSION, VOLUME_DOWN, VOLUME_UP, W, X, Y, Z, ZERO, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, createFakeEvent, createKeyboardEvent, createMouseEvent, createTouchEvent, defaultOffsetY, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, hasModifierKey, isBoolean, isControl, isCopy, isDigit, isElement, isFunctionKey, isHorizontalMovement, isHtmlElement, isHtmlElementOrNull, isInput, isLeftBracket, isLetterKey, isMac, isNull, isNumberKey, isNumpadKey, isRightBracket, isSelectAll, isUndefined, isVerticalMovement, isWithin, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqGetPanelWidthOrigin, kbqHighlightBackgroundMark, kbqHighlightMark, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqResolvePanelWidth, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, kbqShadowDomOverlayProvider, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, numberByParts, patchElementFocus, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, selectEvents, shouldSelectSearchText, tkTMFormattersData, tkTMLocaleData, toggleSelectAll, typeInElement, validationTooltipHideDelay, validationTooltipShowDelay, wrappedErrorMessage };
+export { A, ALT, APOSTROPHE, ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AT_SIGN, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, ActiveDescendantKeyManager, B, BACKSLASH, BACKSPACE, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, BaseLocaleAwareFormatterPipe, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, D, DASH, DELETE, DOWN_ARROW, DateAdapter, DateFormatter, DurationLongFormatterImpurePipe, DurationLongFormatterPipe, DurationShortFormatterImpurePipe, DurationShortFormatterPipe, DurationShortestFormatterImpurePipe, DurationShortestFormatterPipe, E, EIGHT, END, ENTER, EQUALS, ESCAPE, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FOUR, FileValidators, FocusKeyManager, G, H, HOME, I, INSERT, J, K, KBQ_A11Y_LOCALE_CONFIGURATION, KBQ_CHECKABLE_CLICK_ACTION, KBQ_CHECKABLE_CONTROL_VALUE_ACCESSOR, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ORIGIN, KBQ_CONNECTED_OVERLAY_OVERLAP_CLASS, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DATE_TIMEZONE, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_OVERFLOW_SHADOW_SOURCE, KBQ_PANEL_DEFAULT_MIN_WIDTH, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SHADOW_DOM_OVERLAY_HOST, KBQ_SIBLING_POPUP, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_WINDOW, KbqAbsoluteLongDatePipe, KbqAbsoluteLongDateTimePipe, KbqAbsoluteShortDatePipe, KbqAbsoluteShortDateTimePipe, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqAutoHideScrollStrategy, KbqCheckable, KbqColorDirective, KbqComponentColors, KbqDataSizePipe, KbqDateTimezoneService, KbqDecimalPipe, KbqDefaultThemes, KbqDurationLongPipe, KbqDurationShortPipe, KbqDurationShortestPipe, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightBackgroundPipe, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqOverflowShadowBottom, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqRangeLongDatePipe, KbqRangeLongDateTimePipe, KbqRangeMiddleDateTimePipe, KbqRangeShortDatePipe, KbqRangeShortDateTimePipe, KbqReadStateDirective, KbqRectangleItem, KbqRelativeLongDatePipe, KbqRelativeLongDateTimePipe, KbqRelativeShortDatePipe, KbqRelativeShortDateTimePipe, KbqRoundDecimalPipe, KbqSelectAllEvent, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqShadowDomOverlayContainer, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, L, LAST_MEDIA, LEFT_ARROW, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, ListKeyManager, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, META, MUTE, MockNgZone, MultipleMode, N, NINE, NUMBER_FORMAT_REGEXP, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PAUSE, PERIOD, PLUS_SIGN, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PRINT_SCREEN, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, Q, QUESTION_MARK, R, RIGHT_ARROW, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, S, SCROLL_LOCK, SELECT_PANEL_VIEWPORT_PADDING, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, T, TAB, THREE, TILDE, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, TWO, ThemePalette, ThemeService, TransitionCheckState, U, UP_ARROW, V, VERSION, VOLUME_DOWN, VOLUME_UP, W, X, Y, Z, ZERO, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, createFakeEvent, createKeyboardEvent, createMouseEvent, createSearchPredicate, createTouchEvent, defaultOffsetY, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, findSearchMatchRanges, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, getSafeTriangleVertices, getSelectAllState, hasModifierKey, isBoolean, isControl, isCopy, isDigit, isElement, isFunctionKey, isHorizontalMovement, isHtmlElement, isHtmlElementOrNull, isInput, isLeftBracket, isLetterKey, isMac, isNull, isNumberKey, isNumpadKey, isPointInRect, isPointInTriangle, isRightBracket, isSelectAll, isUndefined, isVerticalMovement, isWithin, kbqA11yLocaleConfigurationProvider, kbqAutoHideScrollStrategyFactory, kbqDateTimezoneProvider, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqFocusAndReveal, kbqFocusOptionActionOnTab, kbqGetPanelWidthOrigin, kbqHighlightBackgroundMark, kbqHighlightMark, kbqInjectA11yLocaleConfiguration, kbqInjectAutofilled, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqResolvePanelMaxHeightToken, kbqResolvePanelWidth, kbqResolveTimezoneOffset, kbqRevealSelection, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, kbqSetSelectionRange, kbqShadowDomOverlayProvider, kbqSiblingPopupProvider, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, normalizeSearchValue, numberByParts, patchElementFocus, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, runCompareWith, selectEvents, shouldSelectSearchText, tkTMFormattersData, tkTMLocaleData, toggleSelectAll, tokenizeSearchQuery, typeInElement, validationTooltipHideDelay, validationTooltipShowDelay, wrappedErrorMessage };
 //# sourceMappingURL=koobiq-components-core.mjs.map