@koobiq/components 20.1.0 → 20.3.0

package/tabs/_tabs-common.scss

@@ -33,25 +33,6 @@
 
     outline: none;
 
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
-        padding-left: 14px;
-        padding-right: 14px;
-    }
-
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
-        padding-left: tokens.kbq-difference-series-css-variables(
-            [tabs-size-tab-item-padding-horizontal,
-            tabs-size-tab-item-focus-outline-width]
-        );
-    }
-
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
-        padding-right: tokens.kbq-difference-series-css-variables(
-            [tabs-size-tab-item-padding-horizontal,
-            tabs-size-tab-item-focus-outline-width]
-        );
-    }
-
     &.kbq-selected {
         cursor: default;
     }
@@ -75,30 +56,63 @@
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {
         content: '';
         position: absolute;
-        left: 0;
-        right: 0;
-        top: -10px;
-        bottom: -10px;
+        inset: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)))
+            calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after {
+        content: '';
+        position: absolute;
+        left: calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width)
+        );
+        right: calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width)
+        );
+        bottom: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+        height: 3px;
+        border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
+        background: transparent;
+        transition: background 0.2s ease-in-out;
+        pointer-events: none;
     }
 
     &.kbq-tab-label_icon-only {
         width: var(--kbq-size-3xl);
         height: var(--kbq-size-3xl);
         padding: 0 !important;
-        margin-inline: var(--kbq-size-xs);
+        margin-inline: var(--kbq-size-xxs);
         box-sizing: content-box;
 
-        // Keep the space between icon-only tabs clickable after adding margins.
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            width: var(--kbq-tabs-size-tab-item-underlined-icon-only-size);
+            height: var(--kbq-tabs-size-tab-item-underlined-icon-only-size);
+
+            &:before {
+                left: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+                right: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            }
+
+            &:after {
+                top: auto;
+                bottom: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+                height: 3px;
+                left: calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+                right: calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+                border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
+                transition: background 0.2s ease-in-out;
+                pointer-events: none;
+            }
+        }
+
         &:not(.kbq-tab-label_vertical):after {
             content: '';
             display: block;
             position: absolute;
             top: 0;
             bottom: 0;
-            // Absolute offsets are calculated from the padding box, so we add
-            // focus outline width to fully cover the visual margin gap.
-            left: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
-            right: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            left: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            right: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
             background: transparent;
         }
     }
@@ -144,7 +158,18 @@
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
-        padding: 8px 0;
+        padding: var(--kbq-size-s) 0;
+
+        // Negative margin shifts the first tab left so the focus frame can extend beyond the
+        // container edge (instead of padding-left:0 which would clip it under overflow:hidden).
+        > .kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),
+        > .kbq-tab-link:first-child {
+            margin-inline-start: calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal));
+        }
+
+        > .kbq-tab-label_icon-only:first-child {
+            margin-inline-start: 0;
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
@@ -166,8 +191,12 @@
         position: absolute;
         bottom: 0;
         height: 3px;
-        border-radius: 2px 2px 0 0;
+        border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
         background: var(--kbq-line-contrast);
         transition: all 0.2s ease-in-out;
+
+        &.kbq-disabled {
+            background: var(--kbq-states-icon-disabled);
+        }
     }
 }

package/tabs/_tabs-theme.scss

@@ -16,6 +16,14 @@
 
     &:is(:hover, .kbq-hover):not(.kbq-disabled) {
         @include kbq-tab-item-state($type, $sub-type, states-hover);
+
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            background: transparent;
+
+            &:not(.kbq-selected)::after {
+                background: var(--kbq-line-contrast-fade);
+            }
+        }
     }
 
     &.kbq-tab-label_empty {
@@ -27,6 +35,10 @@
 
         &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
             background: none;
+
+            &::after {
+                background: transparent;
+            }
         }
 
         &:is(:hover, .kbq-hover) {

package/tabs/index.d.ts

@@ -409,10 +409,9 @@ declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
     private readonly isBrowser;
-    /** Width of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetWidth(): number | undefined;
-    /** Left offset of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetLeft(): number | undefined;
+    protected get activeTabDisabled(): boolean;
     protected itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "underlined": { "alias": "underlined"; "required": false; "isSignal": true; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], true, never>;
@@ -568,6 +567,7 @@ declare class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContent
     get role(): string | null;
     protected get activeTabOffsetWidth(): number | undefined;
     protected get activeTabOffsetLeft(): number | undefined;
+    protected get activeTabDisabled(): boolean;
     ngAfterContentInit(): void;
     protected itemSelected(): void;
     /** Notifies the component that the active link has been changed. */

package/tabs/tab-header.scss

@@ -9,6 +9,16 @@
     position: relative;
     flex-shrink: 0;
     border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
+
+    &.kbq-tab-header_underlined {
+        .kbq-tab-group:not(.kbq-tab-group_on-surface) & {
+            border-radius: 0;
+        }
+
+        &:not(.kbq-tab-header__pagination-controls_enabled) {
+            overflow: visible;
+        }
+    }
 }
 
 .kbq-tab-list__content {
@@ -32,6 +42,10 @@
     flex-grow: 1;
     z-index: 1;
     overflow: hidden;
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) & {
+        overflow: visible;
+    }
 }
 
 .kbq-tab-list {

package/tabs/tab-nav-bar.scss

@@ -13,6 +13,10 @@
         overflow: hidden;
     }
 
+    &.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container {
+        overflow: visible;
+    }
+
     .kbq-tab-list {
         position: relative;
         width: 100%;

package/tabs/tabs-tokens.scss

@@ -7,6 +7,7 @@
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
     --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-border-radius);
     --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
+    --kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));
     /* THEME TOKENS */
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
     --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);

package/tags/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, DoCheck, QueryList, OnChanges, InjectionToken } from '@angular/core';
+import { Signal, OnDestroy, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, DoCheck, QueryList, InjectionToken, OnChanges, Provider } from '@angular/core';
 import { NgControl, ControlValueAccessor, NgForm, FormGroupDirective } from '@angular/forms';
 import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import * as i2 from '@angular/cdk/drag-drop';
@@ -12,14 +12,23 @@ import { FocusOrigin } from '@angular/cdk/a11y';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i1$1 from '@angular/cdk/platform';
 
-/** Interface for a text control that is used to drive interaction with a kbq-tag-list. */
-
+/**
+ * Interface for a text control that is used to drive interaction with a kbq-tag-list.
+ *
+ * @docs-private
+ */
 interface KbqTagTextControl {
     id: string;
     placeholder: string;
     focused: boolean;
     empty: boolean;
-    ngControl?: NgControl;
+    /** Whether the control's value was filled in by the browser. */
+    autofilled?: Signal<boolean>;
+    /**
+     * @deprecated Unused by the library: validation lives on the `<kbq-tag-list>` control.
+     * Will be removed in a future major release.
+     */
+    ngControl?: NgControl | null;
     focus(): void;
 }
 
@@ -389,6 +398,13 @@ declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccess
     private _placeholder;
     /** Whether any tags or the kbqTagInput inside of this tag-list has focus. */
     get focused(): boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl. Forwarded from the registered `kbqTagInput`, which
+     * is the element the browser actually autofills — the tag list itself is not an input.
+     *
+     * @docs-private
+     */
+    readonly autofilled: _angular_core.Signal<boolean>;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -469,8 +485,15 @@ declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccess
     errorState: boolean;
     /** The tag input to add more tags */
     private tagInput;
+    /**
+     * The same control as `tagInput`, kept in a signal so `autofilled` can track it reactively —
+     * `registerInput()` runs after the first read.
+     */
+    private readonly registeredInput;
     /** True when the next `tags.changes` emission is triggered by a UI action, not programmatic update. */
     private pendingUIChange;
+    /** Shared range selection state used by pointer and keyboard interactions. */
+    private rangeSelection;
     /**
      * When a tag is destroyed, we store the index of the destroyed tag until the tags
      * query list notifies about the update. This is necessary because we cannot determine an
@@ -530,6 +553,12 @@ declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccess
      * @docs-private
      */
     focusInput(): void;
+    /**
+     * Establishes a range origin or extends the current range to the specified tag.
+     *
+     * @docs-private
+     */
+    handleSelectionInteraction(tag: KbqTag, extendRange: boolean): void;
     /**
      * Pass events to the keyboard manager. Available here for tests.
      *
@@ -576,6 +605,8 @@ declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccess
      * @docs-private
      */
     removeSelected(): void;
+    /** Whether the rendered tags no longer match the value this control last reported. */
+    private hasTagsValueChanged;
     private propagateTagsChanges;
     private resetTags;
     /** Listens to user-generated selection events on each tag. */
@@ -588,6 +619,8 @@ declare class KbqTagList implements KbqFormFieldControl<any>, ControlValueAccess
     private setupDropListInitialProperties;
     private syncDropListDisabledState;
     private setupFocusMonitor;
+    private extendSelectionTo;
+    private setRangeOrigin;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTagList, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], true, [{ directive: typeof i2.CdkDropList; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
@@ -602,10 +635,42 @@ interface KbqTagInputEvent {
     /** The value of the input. */
     value: string;
 }
+/** Contexts a `KbqTagSeparator` can be active in. */
+type KbqTagSeparatorContext = 'input' | 'paste';
+/** Defines a character or pattern that ends a tag, and the contexts in which it applies. */
 interface KbqTagSeparator {
+    /** Regular expression used to match/split this separator in text. */
     symbol: RegExp;
-    key: string;
+    /**
+     * `KeyboardEvent.key` that triggers this separator while typing.
+     * Omit for separators with no single-keystroke equivalent (e.g. a run of whitespace) —
+     * those are implicitly paste-only, since they can never match a `keydown`.
+     */
+    key?: string;
+    /**
+     * Numeric key code gating whether this separator is enabled, set via `kbqTagInputSeparatorKeyCodes`.
+     * Omit together with `key` for separators that should always be active regardless of that input.
+     */
+    keyCode?: number;
+    /**
+     * Contexts this separator applies to.
+     * @default ['input', 'paste']
+     */
+    appliesTo?: KbqTagSeparatorContext[];
+}
+/** Default options for the tags module that can be overridden. */
+interface KbqTagsDefaultOptions {
+    /** The list of key codes that will trigger a tagEnd event. */
+    separatorKeyCodes: number[];
+    /** Custom separator definitions to use instead of the built-in defaults. */
+    separators?: KbqTagSeparator[];
+    /** Whether the tagEnd event will be emitted when text is pasted. */
+    addOnPaste?: boolean;
 }
+/** Injection token to be used to override the default options. */
+declare const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;
+/** Utility provider for `KBQ_TAGS_DEFAULT_OPTIONS`. */
+declare const kbqTagsDefaultOptionsProvider: (options: Partial<KbqTagsDefaultOptions>) => Provider;
 /**
  * Directive that adds tag-specific behaviors to an input element inside `<kbq-form-field>`.
  * May be placed inside or outside of an `<kbq-tag-list>`.
@@ -614,10 +679,28 @@ declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private elementRef;
     private defaultOptions;
     private trimDirective;
-    ngControl: NgControl;
+    /**
+     * The form control instance bound to the input, if any.
+     *
+     * @deprecated Read only, and unused by the library: validation lives on the `<kbq-tag-list>`
+     * control. Binding `[formControl]`/`[ngModel]` to the input itself stays supported — it is what
+     * `kbqAutocomplete` drives the input through — only its validators are not consulted.
+     * Will be removed in a future major release.
+     * @docs-private
+     */
+    ngControl: NgControl | null;
+    /**
+     * The autocomplete trigger attached to the input, if any.
+     * @docs-private
+     */
     autocompleteTrigger?: KbqAutocompleteTrigger | null | undefined;
-    /** Whether the control is focused. */
+    /**
+     * Whether the control is focused.
+     * @docs-private
+     */
     focused: boolean;
+    /** Whether the control's value was filled in by the browser. */
+    readonly autofilled: _angular_core.Signal<boolean>;
     /**
      * The list of key codes that will trigger a tagEnd event.
      *
@@ -625,7 +708,12 @@ declare class KbqTagInput implements KbqTagTextControl, OnChanges {
      */
     set separatorKeyCodes(value: number[]);
     private _separatorKeyCodes;
-    /** @docs-private */
+    /**
+     * The effective set of separators: entries gated by `keyCode` are included only when that
+     * code is present in `separatorKeyCodes`; entries without a `keyCode` (no single-keystroke
+     * equivalent, e.g. a run of whitespace) are always included.
+     * @docs-private
+     */
     get separators(): KbqTagSeparator[];
     private _separators;
     /** Emitted when a tag is to be added. */
@@ -662,45 +750,56 @@ declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     ngOnChanges(): void;
     /** @docs-private */
     onKeydown(event: KeyboardEvent): void;
-    /** Checks to see if the blur should emit the (tagEnd) event. */
+    /**
+     * Checks to see if the blur should emit the (tagEnd) event.
+     * @docs-private
+     */
     blur(event: FocusEvent): void;
+    /**
+     * @deprecated No-op. Validation belongs to the `<kbq-tag-list>` form control, which
+     * revalidates itself whenever its value changes. Will be removed in a future major release.
+     * @docs-private
+     */
     triggerValidation(): void;
-    /** Checks to see if the (tagEnd) event needs to be emitted. */
+    /**
+     * Checks to see if the (tagEnd) event needs to be emitted.
+     * @docs-private
+     */
     emitTagEnd(): void;
+    /**
+     * Whether the current input value duplicates an existing tag.
+     * @docs-private
+     */
     get hasDuplicates(): boolean;
+    /** @docs-private */
     onInput(): void;
+    /** @docs-private */
     onPaste($event: ClipboardEvent): void;
     /** @docs-private */
     onFocus(): void;
     /** Focuses the input. */
     focus(): void;
-    private getSeparatorsForString;
+    private getPasteSeparatorPatterns;
+    /**
+     * Single path for adding a tag, shared by typed input, blur and paste.
+     * `existingValues` is `null` unless `distinct` is on, and is mutated as values are accepted.
+     */
+    private addTag;
+    /** Values to dedupe against, or `null` when duplicates are allowed. */
+    private existingTagValues;
+    private tagValues;
     private trimValue;
-    private getSeparatorByKeyCode;
-    private hasControl;
-    /** Checks whether a keycode is one of the configured separators. */
-    private isSeparatorKey;
+    /** Checks whether a keydown event matches a separator that applies to typed input. */
+    private matchesInputSeparator;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTagInput, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "addOnPaste": { "alias": "kbqTagInputAddOnPaste"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, true, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;
 }
 
-/** Default options, for the chips module, that can be overridden. */
-interface KbqTagsDefaultOptions {
-    /** The list of key codes that will trigger a chipEnd event. */
-    separatorKeyCodes: number[];
-    separators?: {
-        [key: number]: KbqTagSeparator;
-    };
-    addOnPaste?: boolean;
-}
-/** Injection token to be used to override the default options for the chips module. */
-declare const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;
-
 declare class KbqTagsModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTagsModule, never>;
     static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqTagsModule, never, [typeof i1$1.PlatformModule, typeof KbqTagEditSubmit, typeof KbqTagEditInput, typeof KbqTagList, typeof KbqTag, typeof KbqTagInput, typeof KbqTagTrailingIcon, typeof KbqTagAvatar, typeof KbqTagRemove], [typeof KbqTagList, typeof KbqTag, typeof KbqTagInput, typeof KbqTagTrailingIcon, typeof KbqTagAvatar, typeof KbqTagRemove, typeof KbqTagEditSubmit, typeof KbqTagEditInput]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqTagsModule>;
 }
 
-export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule };
-export type { KbqTagDragData, KbqTagEvent, KbqTagFocusEvent, KbqTagInputEvent, KbqTagListDroppedEvent, KbqTagSeparator, KbqTagsDefaultOptions };
+export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule, kbqTagsDefaultOptionsProvider };
+export type { KbqTagDragData, KbqTagEvent, KbqTagFocusEvent, KbqTagInputEvent, KbqTagListDroppedEvent, KbqTagSeparator, KbqTagSeparatorContext, KbqTagsDefaultOptions };

package/textarea/index.d.ts

@@ -38,6 +38,11 @@ declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, OnChanges
      * @docs-private
      */
     focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly autofilled: i0.Signal<boolean>;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private

package/time-range/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, OnInit, TemplateRef, WritableSignal, Provider, Injector } from '@angular/core';
 import { ValidatorFn, ControlValueAccessor, NgControl, FormControl, Validator, FormGroup, AbstractControl, FormGroupDirective, NgForm, ValidationErrors } from '@angular/forms';
-import { DateAdapter, DateFormatter, PopUpSizes, PopUpPlacements, KbqTimeRangeLocaleConfig, ErrorStateMatcher } from '@koobiq/components/core';
+import { DateAdapter, DateFormatter, KbqTimeRangeLocaleConfig, PopUpSizes, PopUpPlacements, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqPopoverTrigger } from '@koobiq/components/popover';
 import { DurationObjectUnits, DurationUnit } from '@koobiq/date-adapter';
 import { KbqTimepicker, TimeFormats } from '@koobiq/components/timepicker';

package/timepicker/index.d.ts

@@ -42,6 +42,7 @@ declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, ControlValueAc
     private renderer;
     private dateAdapter;
     private localeService;
+    private readonly timezoneService;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -149,6 +150,8 @@ declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, ControlValueAc
     private formatUserInput;
     private replaceSymbols;
     private replaceNumbers;
+    /** Clamps a time part to the allowed maximum and trims it to two digits */
+    private normalizeTimePart;
     /** Checks whether the input is invalid based on the native validation. */
     private isBadInput;
     private spaceKeyHandler;
@@ -174,6 +177,7 @@ declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, ControlValueAc
     private maxValidator;
     private getValidDateOrNull;
     private setViewValue;
+    private setSelection;
     private updateView;
     /** @docs-private */
     updateErrorState(): void;

package/timezone/index.d.ts

@@ -5,7 +5,7 @@ import { KbqOption } from '@koobiq/components/core';
 import * as i6 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i3 from '@koobiq/components/select';
-import { KbqSelect, KbqSelectPanelWidth } from '@koobiq/components/select';
+import { KbqSelect } from '@koobiq/components/select';
 import * as i1 from '@angular/cdk/overlay';
 import * as i4 from '@koobiq/components/icon';
 import * as i5 from '@koobiq/components/tags';
@@ -33,13 +33,15 @@ interface KbqTimezonesByCountry {
 declare class KbqTimezoneOption extends KbqOption {
     readonly tooltipContentWrapper: i0.Signal<ElementRef<HTMLElement>>;
     readonly tooltipContent: i0.Signal<ElementRef<HTMLElement>>;
-    readonly highlightText: i0.InputSignal<string>;
+    readonly highlightText: i0.InputSignal<string | readonly string[]>;
+    /** Whether `highlightText` was matched with diacritic folding (e.g. via `createSearchPredicate`) — see `kbqHighlightBackground`. */
+    readonly foldDiacritics: i0.InputSignal<boolean>;
     get timezone(): KbqTimezoneZone;
     set timezone(zone: KbqTimezoneZone);
     private _timezone;
     get viewValue(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneOption, "kbq-timezone-option", ["kbqTimezoneOption"], { "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; "timezone": { "alias": "timezone"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneOption, "kbq-timezone-option", ["kbqTimezoneOption"], { "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; "foldDiacritics": { "alias": "foldDiacritics"; "required": false; "isSignal": true; }; "timezone": { "alias": "timezone"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare const TOOLTIP_VISIBLE_ROWS_COUNT = 3;
@@ -69,8 +71,6 @@ declare class KbqTimezoneSelectTrigger {
 }
 declare class KbqTimezoneSelect extends KbqSelect implements AfterContentInit {
     readonly customTrigger: i0.Signal<KbqTimezoneSelectTrigger | undefined>;
-    panelWidth: KbqSelectPanelWidth;
-    panelMinWidth: number;
     ngAfterContentInit(): void;
     private updateLocaleParamsForSearch;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelect, never>;
@@ -86,7 +86,7 @@ declare class UtcOffsetPipe implements PipeTransform {
 }
 
 declare class CitiesByFilterPipe implements PipeTransform {
-    transform(value: string, searchPattern?: string): string;
+    transform(value: string, searchPattern?: string | readonly string[]): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CitiesByFilterPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<CitiesByFilterPipe, "citiesByFilter", true>;
 }
@@ -115,9 +115,11 @@ declare function offsetFormatterAsObject(value: string): {
  */
 declare function timezonesSortComparator(first: KbqTimezoneZone, second: KbqTimezoneZone): number;
 /**
- * Filtering timezone cities by search string
+ * Filtering timezone cities by search string. Accepts a single pattern or several (matching a
+ * city if it satisfies any one of them) — patterns that look like a bare UTC offset (e.g. `+3`)
+ * are ignored here, since they describe the zone rather than a city name.
  */
-declare function filterCitiesBySearchString(cities: string, searchPattern?: string): string;
+declare function filterCitiesBySearchString(cities: string, searchPattern?: string | readonly string[]): string;
 
 export { KbqTimezoneModule, KbqTimezoneOption, KbqTimezoneOptionTooltip, KbqTimezoneSelect, KbqTimezoneSelectTrigger, TOOLTIP_VISIBLE_ROWS_COUNT, filterCitiesBySearchString, getZonesGroupedByCountry, offset, offsetFormatter, offsetFormatterAsObject, parseOffset, timezonesSortComparator };
 export type { KbqTimezoneGroup, KbqTimezoneZone, KbqTimezonesByCountry };

package/toast/index.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, InjectionToken, Provider, OnDestroy, ElementRef, ComponentRef, EmbeddedViewRef, ViewContainerRef, ViewRef, Injector } from '@angular/core';
+import { InjectionToken, TemplateRef, Provider, OnDestroy, ElementRef, ComponentRef, EmbeddedViewRef, ViewContainerRef, ViewRef, Injector } from '@angular/core';
 import { CdkScrollable } from '@angular/cdk/overlay';
 import * as rxjs from 'rxjs';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { AnimationEvent } from '@angular/animations';
 import * as i1 from '@koobiq/components/core';
 import { KbqReadStateDirective, ThemePalette } from '@koobiq/components/core';
@@ -144,11 +144,34 @@ declare class KbqToastContainerComponent extends CdkScrollable {
     private changeDetectorRef;
     readonly service: KbqToastService<any>;
     readonly viewContainer: i0.Signal<ViewContainerRef>;
-    constructor();
+    /**
+     * Emits while the stack re-lays-out. Toasts are ordinary flow children, so removing one slides the
+     * rest for as long as its height animates — and an overlay opened from inside a toast is anchored to
+     * a trigger that is moving. CDK only re-measures the origin on a scroll or a viewport resize, so the
+     * stack has to say when it moved.
+     *
+     * The container's own box tracks the reflow exactly: continuously while a leaving toast animates its
+     * height away, and once for a removal that is not animated at all, such as a template toast.
+     */
+    private readonly reflowed;
+    /**
+     * `ScrollDispatcher` subscribes to this method when the container registers itself, so merging the
+     * reflow signal in re-broadcasts it to every overlay that repositions on scroll — which is what
+     * `kbq-select` and the dropdown trigger do by default.
+     */
+    elementScrolled(): Observable<Event>;
     createToast<C>(data: KbqToastData, componentType: any, onTop: boolean): ComponentRef<C>;
     createTemplate<C>(data: KbqToastData, template: TemplateRef<any>, onTop: boolean): EmbeddedViewRef<C>;
     remove(viewRef: ViewRef): void;
     getInjector(data: KbqToastData): Injector;
+    /**
+     * Fakes a scroll on the container so that overlays anchored inside a toast are repositioned by their
+     * `RepositionScrollStrategy` when the stack shifts.
+     *
+     * @deprecated The container reports its own reflow through `elementScrolled()`, so nothing calls this.
+     * It is kept only for callers that already hold a container reference — the instance created by
+     * `KbqToastService` is not exposed.
+     */
     dispatchScrollEvent: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastContainerComponent, "kbq-toast-container", never, {}, {}, never, never, true, never>;