@koobiq/components 18.34.0 → 18.36.0

package/search-expandable/search-expandable.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./search-expandable";
+export declare class KbqSearchExpandableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSearchExpandableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSearchExpandableModule, never, [typeof i1.KbqSearchExpandable], [typeof i1.KbqSearchExpandable]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSearchExpandableModule>;
+}

package/search-expandable/search-expandable.scss

@@ -0,0 +1,21 @@
+.kbq-search-expandable {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    min-width: 0;
+    min-height: 0;
+}
+
+.kbq-search-expandable__search {
+    & .kbq-icon-button.kbq-suffix {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        border-radius: var(--kbq-size-xxs);
+
+        height: var(--kbq-size-xxl);
+    }
+}

package/select/select.component.d.ts

@@ -29,6 +29,14 @@ export type KbqSelectOptions = Partial<{
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
     panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
+    /**
+     * Whether to enable hiding search by default if options is less than minimum.
+     *
+     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+     * - number - will enables search hiding and uses value as min.
+     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+     */
+    searchMinOptionsThreshold: 'auto' | number;
 }>;
 /** Injection token that can be used to provide the default options for the `kbq-select`. */
 export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
@@ -41,6 +49,14 @@ export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
     panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+    /**
+     * Whether to enable hiding search by default if options is less than minimum.
+     *
+     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+     * - number - will enables search hiding and uses value as min.
+     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+     */
+    searchMinOptionsThreshold: "auto" | number;
 }>>;
 /** Utility provider for `KBQ_SELECT_OPTIONS`. */
 export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
@@ -49,7 +65,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private readonly _ngZone;
     private readonly _renderer;
     defaultErrorStateMatcher: ErrorStateMatcher;
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     private overlayContainer;
     private readonly _dir;
     parentForm: NgForm;
@@ -71,6 +87,14 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
          * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
          */
         panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+        /**
+         * Whether to enable hiding search by default if options is less than minimum.
+         *
+         * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+         * - number - will enables search hiding and uses value as min.
+         * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+         */
+        searchMinOptionsThreshold: "auto" | number;
     }> | null;
     private readonly window;
     /** Whether the component is in an error state. */
@@ -149,6 +173,15 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Whether to use a multiline matcher or not. Default is false
      */
     multiline: boolean;
+    /**
+     * Controls when the search functionality is displayed based on the number of available options.
+     *
+     * Automatically enables search hiding if value provided, even if `defaultOptions.minOptionsThreshold` is provided.
+     * @default undefined
+     */
+    set searchMinOptionsThreshold(value: 'auto' | number | undefined);
+    get searchMinOptionsThreshold(): number | undefined;
+    private _searchMinOptionsThreshold;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
     /** Event emitted when the select panel has been toggled. */
@@ -242,7 +275,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     protected overlayMinWidth: string | number;
     /** Origin for the overlay panel. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef<HTMLElement>, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngDoCheck(): void;
     ngAfterContentInit(): void;
@@ -318,6 +351,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     calculateHiddenItems(): void;
     getItemHeight(): number;
     handleClick($event: MouseEvent): void;
+    /** @docs-private */
+    protected shouldShowSearch(): boolean;
     private updateLocaleParams;
     private isVisible;
     private currentOverlayPosition;
@@ -369,7 +404,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
     static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;

package/split-button/_split-button-theme.scss

@@ -0,0 +1,59 @@
+@mixin kbq-split-button-theme() {
+    .kbq-split-button {
+        &:hover:has(.kbq-button_transparent) {
+            background: var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, 0.08));
+        }
+
+        & .kbq-button,
+        & .kbq-button-icon {
+            &:not(:hover, .cdk-keyboard-focused, .kbq-active) {
+                & + .kbq-button,
+                & + .kbq-button-icon {
+                    &:not(:hover, .cdk-keyboard-focused, .kbq-active) {
+                        &.kbq-contrast.kbq-button_filled::before {
+                            background: var(--kbq-foreground-on-contrast);
+                        }
+
+                        &.kbq-contrast.kbq-button_transparent,
+                        &.kbq-contrast-fade.kbq-button_outline,
+                        &.kbq-contrast-fade.kbq-button_filled {
+                            &::before {
+                                background: var(--kbq-line-contrast-fade);
+                            }
+                        }
+
+                        &.kbq-theme-fade.kbq-button_outline,
+                        &.kbq-theme.kbq-button_transparent {
+                            &::before {
+                                background: var(--kbq-line-theme-fade);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &[disabled] + [disabled]::before {
+                background: var(--kbq-line-contrast-fade);
+            }
+
+            &[disabled] {
+                & + .kbq-button,
+                & + .kbq-button-icon {
+                    background: var(--kbq-button-filled-contrast-fade-on-states-disabled-background);
+                }
+            }
+
+            &:not([disabled]) + [disabled] {
+                background: var(--kbq-button-filled-contrast-fade-on-background) !important;
+            }
+        }
+
+        & .kbq-button_outline:has(+ .kbq-button_outline) {
+            border-right: none;
+
+            & + .kbq-button_outline {
+                border-left: none;
+            }
+        }
+    }
+}

package/split-button/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/split-button/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './split-button';
+export * from './split-button.module';

package/split-button/split-button.d.ts

@@ -0,0 +1,31 @@
+import { AfterContentInit } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqColorDirective, KbqComponentColors, ThemePalette } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+export declare class KbqSplitButton extends KbqColorDirective implements AfterContentInit {
+    private nativeElement;
+    private buttons;
+    private dropdownTrigger;
+    /** Sets the width of the dropdown to the width of the trigger. Default is false */
+    panelAutoWidth: boolean;
+    /** component style, will be set for nested buttons */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyles | string);
+    private _kbqStyle;
+    /** component color, will be set for nested buttons */
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(value: KbqComponentColors | ThemePalette | string);
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    constructor();
+    ngAfterContentInit(): void;
+    private updateColor;
+    private updateStyle;
+    private updateDisabledState;
+    private updateDropdownParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/split-button/split-button.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./split-button";
+export declare class KbqSplitButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitButtonModule, never, [typeof i1.KbqSplitButton], [typeof i1.KbqSplitButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSplitButtonModule>;
+}

package/split-button/split-button.scss

@@ -0,0 +1,83 @@
+@use '../core/styles/common';
+@use './split-button-theme';
+
+.kbq-split-button {
+    display: flex;
+    flex-direction: row;
+
+    min-width: 0;
+
+    border-radius: var(--kbq-size-border-radius);
+
+    & .kbq-button:first-child {
+        padding-right: 10px;
+    }
+
+    & .kbq-button:first-child,
+    & .kbq-button-icon:first-child {
+        min-width: 0;
+
+        border-right: none;
+
+        border-top-right-radius: unset;
+        border-bottom-right-radius: unset;
+
+        & .kbq-button-wrapper {
+            @include common.kbq-truncate-line();
+        }
+    }
+
+    & .kbq-button:last-child,
+    & .kbq-button-icon:last-child {
+        border-left: none;
+
+        border-top-left-radius: unset;
+        border-bottom-left-radius: unset;
+
+        &::before {
+            display: none;
+
+            content: '';
+            position: absolute;
+            left: 0;
+            top: calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));
+
+            width: 1px;
+            height: var(--kbq-size-l);
+        }
+    }
+
+    & .kbq-button,
+    & .kbq-button-icon {
+        &:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
+            & + .kbq-button,
+            & + .kbq-button-icon {
+                &:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
+                    &::before {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        &.kbq-progress {
+            & + .kbq-button,
+            & + .kbq-button-icon {
+                &.kbq-progress::before {
+                    display: block;
+                }
+            }
+        }
+
+        &[disabled] + [disabled]::before {
+            display: block;
+        }
+    }
+
+    & .kbq-button-icon + .kbq-button-icon {
+        padding-left: var(--kbq-size-xxs);
+        padding-right: var(--kbq-size-xxs);
+    }
+}
+
+@include split-button-theme.kbq-split-button-theme();

package/splitter/splitter.component.d.ts

@@ -28,7 +28,7 @@ export declare class KbqGutterDirective implements OnInit {
     private _size;
     get isVertical(): boolean;
     dragged: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngOnInit(): void;
     getPosition(): IPoint;
     private setStyle;
@@ -52,14 +52,14 @@ export declare class KbqGutterGhostDirective {
     set size(size: number);
     private _size;
     get isVertical(): boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     private updateDimensions;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterGhostDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterGhostDirective, "kbq-gutter-ghost", never, { "visible": { "alias": "visible"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqSplitterComponent implements OnInit, AfterContentInit, OnDestroy {
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     changeDetectorRef: ChangeDetectorRef;
     private ngZone;
     private renderer;
@@ -90,7 +90,7 @@ export declare class KbqSplitterComponent implements OnInit, AfterContentInit, O
     private _gutterSize;
     get resizing(): boolean;
     private _resizing;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
     addArea(area: KbqSplitterAreaDirective): void;
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -113,7 +113,7 @@ export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestro
     private splitter;
     readonly sizeChange: EventEmitter<number>;
     private readonly window;
-    constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;
     disableFlex(): void;
     ngAfterViewInit(): void;

package/tabs/paginated-tab-header.d.ts

@@ -70,7 +70,7 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     /** Whether the header should scroll to the selected index after the view has been checked. */
     private selectedIndexChanged;
     protected readonly destroyRef: DestroyRef;
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly viewportRuler;
     private readonly ngZone;

package/tabs/tab-header.component.d.ts

@@ -23,8 +23,8 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly tabList: ElementRef;
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
-    protected get activeTabOffsetWidth(): string | null;
-    protected get activeTabOffsetLeft(): string | null;
+    protected get activeTabOffsetWidth(): number | undefined;
+    protected get activeTabOffsetLeft(): number | undefined;
     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; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;

package/tabs/tab-label-wrapper.directive.d.ts

@@ -6,14 +6,14 @@ import * as i0 from "@angular/core";
  * @docs-private
  */
 export declare class KbqTabLabelWrapper implements AfterViewInit {
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     private renderer;
     labelContent: ElementRef;
     tab: KbqTab;
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngAfterViewInit(): void;
     /** Sets focus on the wrapper element */
     focus(): void;

package/tabs/tab-nav-bar.d.ts

@@ -20,8 +20,8 @@ export declare class KbqTabNavBar extends KbqPaginatedTabHeader implements After
      */
     tabNavPanel?: KbqTabNavPanel;
     get role(): string | null;
-    protected get activeTabOffsetWidth(): string | null;
-    protected get activeTabOffsetLeft(): string | null;
+    protected get activeTabOffsetWidth(): number | undefined;
+    protected get activeTabOffsetLeft(): number | undefined;
     ngAfterContentInit(): void;
     protected itemSelected(): void;
     /** Notifies the component that the active link has been changed. */
@@ -59,7 +59,7 @@ export declare class KbqTabLink implements OnDestroy, AfterViewInit {
     protected get ariaControls(): string | null;
     /** Link aria-current attribute value. */
     protected get ariaCurrent(): string | null;
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     private readonly focusMonitor;
     private readonly renderer;
     private readonly tabNavBar;

package/tags/_tag-theme.scss

@@ -1,8 +1,7 @@
 @use '../core/styles/common/tokens' as *;
-
 @use './tag-tokens';
 
-@mixin kbq-tag-state($type, $style-name) {
+@mixin _kbq-tag-state($type, $style-name) {
     $base: tag-#{$type}-#{$style-name};
 
     background: var(--kbq-#{$base}-background);
@@ -16,50 +15,66 @@
     }
 }
 
-@mixin kbq-tag-color($type) {
-    @include kbq-tag-state($type, default);
+@mixin _kbq-tag-color($type) {
+    @include _kbq-tag-state($type, default);
 
     &:hover,
     &.kbq-hovered {
-        @include kbq-tag-state($type, states-hover);
+        @include _kbq-tag-state($type, states-hover);
     }
 
-    &.kbq-focused {
-        @include kbq-tag-state($type, states-focus);
+    &.cdk-keyboard-focused,
+    &.kbq-tag_editing {
+        @include _kbq-tag-state($type, states-focus);
+
+        outline: 2px solid var(--kbq-tag-#{$type}-states-focus-outline);
+    }
 
-        box-shadow:
-            inset 0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline),
-            0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline);
+    &.kbq-selected:not(.kbq-disabled, .kbq-tag_editing) {
+        @include _kbq-tag-state($type, states-selected);
+
+        &.cdk-keyboard-focused {
+            box-shadow: inset 0 0 0 var(--kbq-size-border-width) var(--kbq-background-bg);
+        }
     }
 
     // TODO: Combine disabled states for all colors (#DS-3778)
     &.kbq-disabled {
-        @include kbq-tag-state($type, states-disabled);
+        @include _kbq-tag-state($type, states-disabled);
+    }
+
+    &.kbq-tag_editing {
+        background-color: var(--kbq-background-bg);
+    }
+
+    .kbq-tag-edit-input {
+        color: inherit;
     }
 }
 
 @mixin kbq-tag-theme() {
     .kbq-tag {
         &.kbq-theme {
-            @include kbq-tag-color(theme-fade-on);
+            @include _kbq-tag-color(theme-fade-on);
         }
 
         &.kbq-contrast-fade {
-            @include kbq-tag-color(contrast-fade-on);
+            @include _kbq-tag-color(contrast-fade-on);
         }
 
         &.kbq-error {
-            @include kbq-tag-color(error-fade-on);
+            @include _kbq-tag-color(error-fade-on);
         }
 
         &.kbq-warning {
-            @include kbq-tag-color(warning-fade);
+            @include _kbq-tag-color(warning-fade);
         }
     }
 }
 
 @mixin kbq-tag-typography() {
-    .kbq-tag {
+    .kbq-tag,
+    .kbq-tag-edit-input {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 

package/tags/tag-input.d.ts

@@ -84,9 +84,11 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     onInput(): void;
     onPaste($event: ClipboardEvent): void;
     updateInputWidth(): void;
+    /** @docs-private */
     onFocus(): void;
     /** Focuses the input. */
     focus(): void;
+    private getSeparatorsForString;
     private trimValue;
     private getSeparatorByKeyCode;
     private hasControl;