@koobiq/components 20.1.0 → 20.2.0

package/alert/index.d.ts

@@ -1,54 +1,88 @@
-import * as i0 from '@angular/core';
-import { AfterContentInit } from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { KbqButton } from '@koobiq/components/button';
 import { KbqIconItem, KbqIcon } from '@koobiq/components/icon';
-import * as i1 from '@angular/cdk/a11y';
-import * as i2 from '@angular/cdk/platform';
 
+/** Visual style of an alert. */
 declare enum KbqAlertStyles {
+    /** Neutral background; the status is conveyed by the icon color only. */
     Default = "default",
+    /** Colored background matching the status — use to draw attention when a default alert gets lost on screen. */
     Colored = "colored"
 }
+/** Status conveyed by an alert. Drives the background (colored style) and the auto-tinted status icon. */
 declare enum KbqAlertColors {
     Error = "error",
     Warning = "warning",
     Success = "success",
     Info = "info"
 }
+/** Marks the projected alert heading. */
 declare class KbqAlertTitle {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertTitle, "[kbq-alert-title]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAlertTitle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAlertTitle, "[kbq-alert-title]", ["kbqAlertTitle"], {}, {}, never, never, true, never>;
 }
+/** Marks the projected close control (place it on a native `<button>` with an accessible name). */
 declare class KbqAlertCloseButton {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertCloseButton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertCloseButton, "[kbq-alert-close-button]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAlertCloseButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAlertCloseButton, "[kbq-alert-close-button]", ["kbqAlertCloseButton"], {}, {}, never, never, true, never>;
 }
+/** Marks a projected action control (link or button) shown in the alert's button stack. */
 declare class KbqAlertControl {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertControl, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertControl, "[kbq-alert-control]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAlertControl, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAlertControl, "[kbq-alert-control]", ["kbqAlertControl"], {}, {}, never, never, true, never>;
 }
-declare class KbqAlert implements AfterContentInit {
-    readonly iconItem: i0.Signal<KbqIconItem | undefined>;
-    readonly icon: i0.Signal<KbqIcon | undefined>;
-    readonly button: i0.Signal<KbqButton | undefined>;
-    readonly title: i0.Signal<KbqAlertTitle | undefined>;
-    readonly control: i0.Signal<KbqAlertControl | undefined>;
-    readonly closeButton: i0.Signal<KbqAlertCloseButton | undefined>;
-    readonly compact: i0.InputSignal<boolean>;
-    readonly alertStyle: i0.InputSignal<string>;
-    get alertColor(): string;
-    set alertColor(value: string | KbqAlertColors);
-    private _alertColor;
-    get isColored(): boolean;
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlert, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "alertStyle": { "alias": "alertStyle"; "required": false; "isSignal": true; }; "alertColor": { "alias": "alertColor"; "required": false; }; }, {}, ["iconItem", "icon", "button", "title", "control", "closeButton"], ["[kbq-icon-item],[kbq-icon]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], true, never>;
+/**
+ * Shows important information on a page. Can carry a hint, signal a status change, or indicate a problem.
+ *
+ * ```html
+ * <kbq-alert [alertColor]="'error'" [alertStyle]="'colored'">Something went wrong</kbq-alert>
+ * ```
+ *
+ * For a dynamically inserted alert, add `role="alert"` (or `aria-live`) on the host so assistive
+ * technology announces it — see the component guide.
+ */
+declare class KbqAlert {
+    /** @docs-private */
+    protected readonly iconItem: _angular_core.Signal<KbqIconItem | undefined>;
+    /** @docs-private */
+    protected readonly icon: _angular_core.Signal<KbqIcon | undefined>;
+    /** @docs-private */
+    protected readonly button: _angular_core.Signal<KbqButton | undefined>;
+    /** @docs-private */
+    protected readonly title: _angular_core.Signal<KbqAlertTitle | undefined>;
+    /** @docs-private */
+    protected readonly control: _angular_core.Signal<KbqAlertControl | undefined>;
+    /** @docs-private */
+    protected readonly closeButton: _angular_core.Signal<KbqAlertCloseButton | undefined>;
+    /** Whether the alert uses the denser compact size. */
+    readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Visual style — neutral `default` or the attention-drawing `colored` background. */
+    readonly alertStyle: _angular_core.InputSignal<"default" | "colored">;
+    /**
+     * Status of the alert. Drives the background in the `colored` style and auto-tints an uncolored
+     * projected status icon to the matching color (`info` icons become `contrast`).
+     * @default 'info'
+     */
+    readonly alertColor: _angular_core.InputSignalWithTransform<"error" | "warning" | "success" | "info", "error" | "warning" | "success" | "info" | null | undefined>;
+    /** Emitted when the projected close control is activated. The consumer is responsible for hiding the alert. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** @docs-private */
+    protected readonly alertColorClass: _angular_core.Signal<string>;
+    /** @docs-private */
+    protected readonly isColored: _angular_core.Signal<boolean>;
+    /** The projected status icon, whichever slot it came from. @docs-private */
+    protected readonly projectedIcon: _angular_core.Signal<KbqIcon | undefined>;
+    /** Last color this component auto-assigned to the icon; lets us correct color on change without ignoring consumer's color. */
+    private lastAutoColor;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", ["kbqAlert"], { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "alertStyle": { "alias": "alertStyle"; "required": false; "isSignal": true; }; "alertColor": { "alias": "alertColor"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, ["iconItem", "icon", "button", "title", "control", "closeButton"], ["[kbq-icon-item],[kbq-icon]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], true, never>;
 }
 
 declare class KbqAlertModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAlertModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof KbqAlert, typeof KbqAlertTitle, typeof KbqAlertCloseButton, typeof KbqAlertControl], [typeof KbqAlert, typeof KbqAlertTitle, typeof KbqAlertCloseButton, typeof KbqAlertControl]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KbqAlertModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAlertModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqAlertModule, never, [typeof KbqAlert, typeof KbqAlertTitle, typeof KbqAlertCloseButton, typeof KbqAlertControl], [typeof KbqAlert, typeof KbqAlertTitle, typeof KbqAlertCloseButton, typeof KbqAlertControl]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqAlertModule>;
 }
 
 export { KbqAlert, KbqAlertCloseButton, KbqAlertColors, KbqAlertControl, KbqAlertModule, KbqAlertStyles, KbqAlertTitle };

package/autocomplete/autocomplete.scss

@@ -14,7 +14,8 @@
     box-sizing: border-box;
     min-width: 100%;
     width: 100%;
-    max-width: none;
+    // See `%kbq-select-panel` — same soft cap, same token.
+    max-width: var(--kbq-panel-size-width-max, 640px);
 
     border-radius: var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));
     max-height: var(--kbq-autocomplete-size-panel-max-height);

package/autocomplete/index.d.ts

@@ -1,10 +1,10 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { ElementRef, AfterContentInit, TemplateRef, QueryList, InjectionToken, Provider, AfterViewInit, OnDestroy } from '@angular/core';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i1 from '@koobiq/components/core';
-import { ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KeyboardNavigationHandler, KbqOptionSelectionChange } from '@koobiq/components/core';
+import { ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KbqPanelWidth, KbqPanelMaxWidth, KeyboardNavigationHandler, KbqOptionSelectionChange } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 
 /**
@@ -13,14 +13,14 @@ import { Observable } from 'rxjs';
  */
 declare class KbqAutocompleteOrigin {
     elementRef: ElementRef<HTMLElement>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteOrigin, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[kbqAutocompleteOrigin]", ["kbqAutocompleteOrigin"], {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteOrigin, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[kbqAutocompleteOrigin]", ["kbqAutocompleteOrigin"], {}, {}, never, never, true, never>;
 }
 
 /** Footer that is rendered below the autocomplete options panel. */
 declare class KbqAutocompleteFooter {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteFooter, "[kbqAutocompleteFooter], kbq-autocomplete-footer", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteFooter, "[kbqAutocompleteFooter], kbq-autocomplete-footer", never, {}, {}, never, never, true, never>;
 }
 declare class KbqAutocompleteSelectedEvent {
     source: KbqAutocomplete;
@@ -46,28 +46,36 @@ declare class KbqAutocomplete implements AfterContentInit {
     keyManager: ActiveDescendantKeyManager<KbqOption>;
     /** Whether the autocomplete panel should be visible, depending on option length. */
     showPanel: boolean;
-    readonly template: i0.Signal<TemplateRef<any>>;
-    readonly panel: i0.Signal<ElementRef<any>>;
+    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    readonly panel: _angular_core.Signal<ElementRef<any>>;
     options: QueryList<KbqOption>;
-    readonly optionGroups: i0.Signal<readonly KbqOptgroup[]>;
+    readonly optionGroups: _angular_core.Signal<readonly KbqOptgroup[]>;
     /** Function that maps an option's control value to its display value in the trigger. */
     displayWith: ((value: any) => string) | null;
     /**
-     * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
-     * match the width of its host.
+     * Specify the width of the autocomplete panel. If set to `auto`, the panel will match the width of
+     * its host, but will never be narrower than `panelMinWidth`. Any other CSS sizing value is used as an
+     * exact width, and `panelMinWidth` is not applied. When not set, the panel sizes to its content and is
+     * at least as wide as its host.
      */
-    panelWidth: string | number;
+    readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth | undefined>;
     /**
      * Minimum width of the panel in pixels.
      * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
      */
-    panelMinWidth: number;
+    readonly panelMinWidth: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
+     * the panel narrower than its host, and never clamps an explicit `panelWidth`.
+     * When null, the `--kbq-panel-size-width-max` token applies.
+     */
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
     /** Event that is emitted whenever an option from the list is selected. */
-    readonly optionSelected: i0.OutputEmitterRef<KbqAutocompleteSelectedEvent>;
+    readonly optionSelected: _angular_core.OutputEmitterRef<KbqAutocompleteSelectedEvent>;
     /** Event that is emitted when the autocomplete panel is opened. */
-    readonly opened: i0.OutputEmitterRef<void>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
     /** Event that is emitted when the autocomplete panel is closed. */
-    readonly closed: i0.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
     /**
      * Takes classes set on the host kbq-autocomplete element and applies them to the panel
      * inside the overlay container to allow for easy styling.
@@ -96,9 +104,8 @@ declare class KbqAutocomplete implements AfterContentInit {
     emitSelectEvent(option: KbqOption): void;
     onKeydown(event: KeyboardEvent): any;
     private updateFocusClass;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["optionGroups", "options"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
-    static ngAcceptInputType_panelMinWidth: unknown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocomplete, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["optionGroups", "options"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
 }
 
 /**
@@ -141,17 +148,17 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
     get activeOption(): KbqOption | null;
     get panelOpen(): boolean;
     /** The autocomplete panel to be attached to this trigger. */
-    readonly autocomplete: i0.InputSignal<KbqAutocomplete>;
+    readonly autocomplete: _angular_core.InputSignal<KbqAutocomplete>;
     /**
      * Reference relative to which to position the autocomplete panel.
      * Defaults to the autocomplete trigger element.
      */
-    readonly connectedTo: i0.InputSignal<KbqAutocompleteOrigin>;
+    readonly connectedTo: _angular_core.InputSignal<KbqAutocompleteOrigin>;
     /**
      * `autocomplete` attribute to be set on the input element.
      * @docs-private
      */
-    readonly autocompleteAttribute: i0.InputSignal<string>;
+    readonly autocompleteAttribute: _angular_core.InputSignal<string>;
     /**
      * Whether the autocomplete is disabled. When disabled, the element will
      * act as a regular input and the user won't be able to open the panel.
@@ -163,7 +170,7 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
      * Determines whether the blur event is triggered outside the specific target
      * @returns A boolean indicating if the blur event happened outside the target element
      */
-    readonly onInputBlur: i0.InputSignal<(event: FocusEvent) => boolean>;
+    readonly onInputBlur: _angular_core.InputSignal<(event: FocusEvent) => boolean>;
     private _autocompleteDisabled;
     private overlayAttached;
     private overlayRef;
@@ -242,7 +249,6 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
     private getOverlayConfig;
     private getOverlayPosition;
     private getConnectedElement;
-    private getPanelMinWidth;
     private getOverlaySize;
     private getHostWidth;
     /**
@@ -251,14 +257,14 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
      */
     private resetActiveItem;
     private canOpen;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; "isSignal": true; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; "isSignal": true; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; "isSignal": true; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; "isSignal": true; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class KbqAutocompleteModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof KbqAutocomplete, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter], [typeof KbqAutocomplete, typeof i1.KbqOptionModule, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof KbqAutocomplete, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter], [typeof KbqAutocomplete, typeof i1.KbqOptionModule, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
 }
 
 export { AUTOCOMPLETE_PANEL_HEIGHT, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, KbqAutocomplete, KbqAutocompleteFooter, KbqAutocompleteModule, KbqAutocompleteOrigin, KbqAutocompleteSelectedEvent, KbqAutocompleteTrigger, getKbqAutocompleteMissingPanelError };

package/badge/index.d.ts

@@ -1,5 +1,4 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit } from '@angular/core';
 import { KbqIconItem } from '@koobiq/components/icon';
 import * as i1 from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/platform';
@@ -25,14 +24,14 @@ declare const leftIconClassName = "kbq-icon_left";
 declare const rightIconClassName = "kbq-icon_right";
 declare const badgeLeftIconClassName = "kbq-badge-icon_left";
 declare const badgeRightIconClassName = "kbq-badge-icon_right";
-declare class KbqBadgeCssStyler implements AfterContentInit {
+declare class KbqBadgeCssStyler {
     private renderer;
     private cdr;
     readonly icons: i0.Signal<readonly any[]>;
     nativeElement: HTMLElement;
     isIconButton: boolean;
     constructor();
-    ngAfterContentInit(): void;
+    /** @docs-private */
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], never, true, never>;

package/clamped-text/index.d.ts

@@ -1,7 +1,7 @@
 import * as _koobiq_components_core from '@koobiq/components/core';
 import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, Provider, AfterViewInit, ElementRef } from '@angular/core';
+import { Signal, InjectionToken, Provider, OnInit, AfterViewInit, ElementRef } from '@angular/core';
 
 /**
  * Default maximum number of visible rows for the clamped text component
@@ -76,7 +76,7 @@ declare class KbqClampedListTrigger {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedListTrigger, "[kbqClampedListTrigger]", ["kbqClampedListTrigger"], {}, {}, never, never, true, never>;
 }
 
-declare class KbqClampedText implements KbqClamped, AfterViewInit {
+declare class KbqClampedText implements KbqClamped, OnInit, AfterViewInit {
     /**
      * Max rows before text is clamped.
      * @default kbqClampedTextDefaultMaxRows
@@ -120,6 +120,7 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
      */
     private isEventFromToggle;
     constructor();
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     /** @docs-private */
     toggle(event: Event): void;

package/core/index.d.ts

@@ -6,7 +6,7 @@ import { AnimationTriggerMetadata, AnimationEvent } from '@angular/animations';
 import { DateAdapter as DateAdapter$1, DateFormats } from '@koobiq/date-adapter';
 import { AbstractControl, FormGroupDirective, NgForm, NgControl, ValidatorFn } from '@angular/forms';
 import { FormatterDurationTemplate, DateFormatter as DateFormatter$1, DateTimeOptions } from '@koobiq/date-formatter';
-import { ConnectionPositionPair, Overlay, ScrollStrategy, OverlayContainer, ScrollDispatcher, CdkScrollable, OverlayRef, OverlayConfig, FlexibleConnectedPositionStrategy, ConnectedOverlayPositionChange, CdkConnectedOverlay, RepositionScrollStrategy } from '@angular/cdk/overlay';
+import { ConnectionPositionPair, Overlay, ScrollStrategy, CdkOverlayOrigin, OverlayContainer, ScrollDispatcher, CdkScrollable, OverlayRef, OverlayConfig, FlexibleConnectedPositionStrategy, ConnectedOverlayPositionChange, CdkConnectedOverlay, RepositionScrollStrategy } from '@angular/cdk/overlay';
 import { Directionality } from '@angular/cdk/bidi';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ViewportRuler } from '@angular/cdk/scrolling';
@@ -1645,6 +1645,27 @@ type KbqNumberFormatOptions = {
     /** Overrides the default group separator in the formatted output */
     viewGroupSeparator?: string;
 };
+/**
+ * Locale configuration for number rounding used by `KbqRoundDecimalPipe`.
+ *
+ * Maps each rounding unit to its localized label and carries the surrounding
+ * formatting options.
+ * @docs-private
+ */
+type KbqNumberRoundingLocaleConfig = {
+    /** Separator placed between the number and its rounding unit label. */
+    separator: string;
+    /** Separator placed between the integer and fractional parts. */
+    groupSeparator: string;
+    /** Label for the thousand unit. */
+    thousand: string;
+    /** Label for the million unit. */
+    million: string;
+    /** Label for the billion unit. */
+    billion: string;
+    /** Label for the trillion unit (always provided). */
+    trillion: string;
+};
 /** Locale configuration for `KbqNumberInput`. */
 type KbqNumberInputLocaleConfig = {
     /** Characters recognized as group (thousands) separators. */
@@ -3195,17 +3216,13 @@ interface KbqNumericPipe {
     transform(value: unknown, digitsInfo?: string, locale?: string): string | null;
 }
 declare const NUMBER_FORMAT_REGEXP: RegExp;
-interface RoundDecimalOptions {
-    separator: string;
-    groupSeparator: string;
-    thousands?: string;
+type RoundDecimalOptions = KbqNumberRoundingLocaleConfig & {
+    /** Label for the ten-thousand unit. */
     tenThousand?: string;
-    million?: string;
+    /** Label for the one-hundred-millions unit. */
     oneHundredMillions?: string;
-    billion?: string;
-    trillion: string;
     rtl?: boolean;
-}
+};
 declare class ParsedDigitsInfo {
     useGrouping: boolean;
     minimumIntegerDigits: number;
@@ -4044,6 +4061,65 @@ declare const KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER: <T>(token: InjectionToken<T>,
     useFactory: (overlay: Overlay) => () => ScrollStrategy;
 };
 
+/**
+ * Default minimum width of an overlay panel, in pixels.
+ *
+ * Kept in sync by hand with `--kbq-dropdown-size-container-width-min` in `dropdown-tokens.scss`,
+ * which expresses the same default for the dropdown's CSS-driven sizing.
+ */
+declare const KBQ_PANEL_DEFAULT_MIN_WIDTH = 200;
+/**
+ * Width of an overlay panel.
+ *
+ * - `'auto'` — matches the trigger width, but never narrower than `panelMinWidth`.
+ * - `number` — an explicit width in pixels. `panelMinWidth` is not applied.
+ * - `string` — an explicit CSS width (e.g. `fit-content`, `20rem`). `panelMinWidth` is not applied.
+ * - `null`/`''` — the panel sizes to its content, but never narrower than the trigger or `panelMinWidth`.
+ */
+type KbqPanelWidth = 'auto' | number | (string & {}) | null | '';
+/** Minimum width of an overlay panel, in pixels. `null` applies no additional minimum. */
+type KbqPanelMinWidth = number | null;
+/**
+ * Maximum width of an overlay panel, in pixels. `null` falls back to the `--kbq-panel-size-width-max`
+ * design token.
+ *
+ * The cap is soft: it limits how far a panel grows with its content, but never makes a panel narrower
+ * than its trigger, and never overrides an explicit `panelWidth`.
+ */
+type KbqPanelMaxWidth = number | null;
+/**
+ * Anything an overlay panel can be measured against.
+ * @docs-private
+ */
+type KbqPanelWidthOrigin = ElementRef<HTMLElement> | CdkOverlayOrigin | HTMLElement;
+/**
+ * Resolved size of an overlay pane.
+ *
+ * Both keys are always present so that the result can be passed straight to `OverlayRef.updateSize()`,
+ * which shallow-merges into the existing config — an omitted key would leave a stale value applied.
+ * @docs-private
+ */
+interface KbqResolvedPanelWidth {
+    width: number | string;
+    minWidth: number | string;
+}
+/**
+ * Measures the rendered width of a panel's trigger.
+ *
+ * Uses `getBoundingClientRect()` because `getComputedStyle().width` resolves to the used
+ * content-box width regardless of `box-sizing`, so subtracting borders from it double-counts them.
+ * @docs-private
+ */
+declare function kbqGetPanelWidthOrigin(origin: KbqPanelWidthOrigin): number;
+/**
+ * Resolves `panelWidth` and `panelMinWidth` into the `width` and `minWidth` of the overlay pane.
+ *
+ * `panelWidth` selects the sizing policy. The "never narrower than the trigger" rule belongs to the
+ * automatic policies (`null` and `'auto'`); an explicit width is taken at face value.
+ * @docs-private
+ */
+declare function kbqResolvePanelWidth(panelWidth: KbqPanelWidth | undefined, panelMinWidth: KbqPanelMinWidth | undefined, triggerWidth: number): KbqResolvedPanelWidth;
+
 /**
  * Reference to the element used to locate the shadow root that should host the CDK overlay container.
  *
@@ -4196,6 +4272,21 @@ type KbqPopUpSizeValues = KbqEnumValues<PopUpSizes>;
  * Tags Input, Timezone, TreeSelect).
  */
 declare const defaultOffsetY: number;
+/**
+ * Pane class applied to a connected overlay whose panel is positioned BELOW its trigger.
+ *
+ * Used instead of a physical `offsetY` gap: the pane sits flush with the trigger and the visual gap is
+ * recreated as transparent `padding-top` inside the pane (see the `kbq-connected-overlay-gap` styles), so the
+ * gap is covered by the pane (`pointer-events: auto`) and can no longer be clicked/hovered through.
+ */
+declare const KBQ_CONNECTED_OVERLAY_BELOW_CLASS = "kbq-connected-overlay_below";
+/**
+ * Pane class applied to a connected overlay whose panel is positioned ABOVE its trigger (flipped).
+ *
+ * Mirror of {@link KBQ_CONNECTED_OVERLAY_BELOW_CLASS}: the visual gap is recreated as transparent
+ * `padding-bottom` inside the pane so the flipped gap is not click/hover-through.
+ */
+declare const KBQ_CONNECTED_OVERLAY_ABOVE_CLASS = "kbq-connected-overlay_above";
 /**
  * Variable used for offsetY(X) calculations when applying Angular Overlay
  *
@@ -4547,6 +4638,20 @@ declare abstract class KbqAbstractSelect {
     protected triggerRect: DOMRect;
     /** Overlay panel class. */
     protected readonly overlayPanelClass = "kbq-select-overlay";
+    /** Width of the overlay panel. */
+    protected overlayWidth: string | number;
+    /** Minimum width of the overlay panel. */
+    protected overlayMinWidth: string | number;
+    /**
+     * Resolves the overlay panel size for the current trigger geometry and stores it for the
+     * `cdkConnectedOverlay` width bindings.
+     */
+    protected updateOverlayWidth(panelWidth: KbqPanelWidth, panelMinWidth: KbqPanelMinWidth, origin: KbqPanelWidthOrigin): void;
+    /**
+     * Freezes the panel at its rendered width so that filtering the options does not reflow it.
+     * Does nothing when the width is already pinned.
+     */
+    protected lockOverlayWidthForSearch(panel: ElementRef<HTMLElement> | undefined): void;
     protected setOverlayPosition(): void;
     protected calculateOverlayOffsetX(baseOffsetX: number): number[];
     protected getOverlayRect(): DOMRect;
@@ -4790,5 +4895,5 @@ declare const validationTooltipHideDelay = 3000;
 
 declare const VERSION: Version;
 
-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_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_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, kbqHighlightBackgroundMark, kbqHighlightMark, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, 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 type { CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, HasTabIndex, HasTabIndexCtor, Highlightable, IFocusableOption, KbqActionsPanelLocaleConfiguration, KbqBaseFileUploadLocaleConfig, KbqCheckedState, KbqClampedTextLocaleConfig, KbqCodeBlockLocaleConfiguration, KbqDateFormats, KbqDefaultSizes, KbqEnumValues, KbqFileTypeSpecifier, KbqFileUploadLocaleConfig, KbqFlexDirection, KbqFlexWrap, KbqFormFieldRef, KbqMeasurementSystemType, KbqMultipleFileUploadLocaleConfig, KbqNumberFormatOptions, KbqNumberInputLocaleConfig, KbqNumericPipe, KbqOptionActionParent, KbqOptionParentComponent, KbqOrientation, KbqOverflowShadowSource, KbqOverflowShadowState, KbqParentPopup, KbqPopUpPlacementValues, KbqPopUpSizeValues, KbqPseudoCheckboxState, KbqSelectAllAdapter, KbqShadowDomOverlayHost, KbqSizeUnitsConfig, KbqStickToWindowPlacementValues, KbqTheme, KbqTimeRangeLocaleConfig, KbqTitleTextRef, KbqToggleSelectAllOptions, KbqUnitSystem, KeyboardNavigationHandler, ListKeyManagerModifierKey, ListKeyManagerOption };
+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 type { CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, HasTabIndex, HasTabIndexCtor, Highlightable, IFocusableOption, KbqActionsPanelLocaleConfiguration, KbqBaseFileUploadLocaleConfig, KbqCheckedState, KbqClampedTextLocaleConfig, KbqCodeBlockLocaleConfiguration, KbqDateFormats, KbqDefaultSizes, KbqEnumValues, KbqFileTypeSpecifier, KbqFileUploadLocaleConfig, KbqFlexDirection, KbqFlexWrap, KbqFormFieldRef, KbqMeasurementSystemType, KbqMultipleFileUploadLocaleConfig, KbqNumberFormatOptions, KbqNumberInputLocaleConfig, KbqNumberRoundingLocaleConfig, KbqNumericPipe, KbqOptionActionParent, KbqOptionParentComponent, KbqOrientation, KbqOverflowShadowSource, KbqOverflowShadowState, KbqPanelMaxWidth, KbqPanelMinWidth, KbqPanelWidth, KbqPanelWidthOrigin, KbqParentPopup, KbqPopUpPlacementValues, KbqPopUpSizeValues, KbqPseudoCheckboxState, KbqResolvedPanelWidth, KbqSelectAllAdapter, KbqShadowDomOverlayHost, KbqSizeUnitsConfig, KbqStickToWindowPlacementValues, KbqTheme, KbqTimeRangeLocaleConfig, KbqTitleTextRef, KbqToggleSelectAllOptions, KbqUnitSystem, KeyboardNavigationHandler, ListKeyManagerModifierKey, ListKeyManagerOption };

package/core/styles/_core.scss

@@ -1,8 +1,10 @@
 @use 'common/overlay' as *;
+@use 'common/connected-overlay' as *;
 @use 'common/visually-hidden' as *;
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin kbq-core() {
     @include a11y-visually-hidden();
     @include overlay();
+    @include kbq-connected-overlay-gap();
 }

package/core/styles/common/_animation.scss

@@ -8,34 +8,41 @@
     }
 }
 
+// Renders the striped "loading" shimmer used by .kbq-progress. Extracted into a mixin so
+// components whose `::before`/`::after` pseudo-elements are already spoken for (e.g. kbq-dropdown-item's
+// hit-area extension) can apply the same overlay to a real element instead.
+@mixin kbq-progress-overlay() {
+    content: '';
+    position: absolute;
+    border-radius: inherit;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    $lighter: rgba(255, 255, 255, 0.1);
+    $darker: rgba(0, 0, 0, 0.04);
+
+    background: linear-gradient(
+            135deg,
+            $darker 12px,
+            $lighter 12px,
+            $lighter 22px,
+            $darker 22px,
+            $darker 34px,
+            $lighter 34px
+        )
+        repeat;
+    background-size: 32px 32px;
+    animation: kbq-progress 1s linear infinite;
+}
+
 .kbq-progress {
     position: relative;
 
     &:after {
-        content: '';
-        position: absolute;
-        border-radius: inherit;
-
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        $lighter: rgba(255, 255, 255, 0.1);
-        $darker: rgba(0, 0, 0, 0.04);
-
-        background: linear-gradient(
-                135deg,
-                $darker 12px,
-                $lighter 12px,
-                $lighter 22px,
-                $darker 22px,
-                $darker 34px,
-                $lighter 34px
-            )
-            repeat;
-        background-size: 32px 32px;
-        animation: kbq-progress 1s linear infinite;
+        @include kbq-progress-overlay();
 
         @media (prefers-reduced-motion: reduce) {
             animation: none;