@koobiq/components 19.8.0 → 19.8.2

package/breadcrumbs/breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, InjectionToken, OnInit, Provider, QueryList, TemplateRef } from '@angular/core';
+import { InjectionToken, OnInit, Provider, TemplateRef } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
@@ -43,63 +43,63 @@ export declare class KbqBreadcrumbItem {
      * The text displayed for the breadcrumb item.
      * This text will be shown if breadcrumb item is hidden in dropdown.
      */
-    text: string;
+    readonly text: import("@angular/core").InputSignal<string>;
     /**
      * Indicates whether the breadcrumb item is disabled.
      */
-    disabled: boolean;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Indicates whether the breadcrumb item is the current/active item.
      * Defaults to `false`.
      */
-    current: boolean;
+    readonly current: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * A reference to a custom template provided for the breadcrumb item content.
      * The template can be used to override the default appearance of the breadcrumb.
      */
-    customTemplateRef: TemplateRef<any>;
+    readonly customTemplateRef: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     /**
      * An optional `RouterLink` instance for navigating to a specific route.
      * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
      */
     readonly routerLink: RouterLink | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbItem, "kbq-breadcrumb-item", never, { "text": { "alias": "text"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "current": { "alias": "current"; "required": false; }; }, {}, ["customTemplateRef"], ["*"], true, never>;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_current: unknown;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbItem, "kbq-breadcrumb-item", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, ["customTemplateRef"], ["*"], true, never>;
 }
-export declare class KbqBreadcrumbs implements AfterContentInit {
+export declare class KbqBreadcrumbs {
     protected readonly configuration: KbqBreadcrumbsConfiguration;
     /**
      * Determines if a negative margin should be applied to the first breadcrumb item.
      *
      * @see KbqBreadcrumbsConfiguration
      */
-    firstItemNegativeMargin: boolean;
+    readonly firstItemNegativeMargin: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Size of the breadcrumbs. Affects font size.
      * Default value is taken from the global configuration.
      */
-    size: KbqDefaultSizes;
+    readonly size: import("@angular/core").InputSignal<KbqDefaultSizes>;
     /**
      * Maximum number of visible breadcrumb items.
      * Remaining items are collapsed into a dropdown if the total exceeds this value.
      * Default value is taken from the global configuration.
      */
-    max: number | null;
+    readonly max: import("@angular/core").InputSignal<number | null>;
     /**
      * Indicates whether the breadcrumbs are disabled.
      * When disabled, user interactions are blocked.
      */
-    disabled: boolean;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Wrapping behavior of the breadcrumb items.
      */
-    wrapMode: KbqBreadcrumbsWrapMode;
+    readonly wrapMode: import("@angular/core").InputSignal<KbqBreadcrumbsWrapMode>;
     protected readonly separator?: TemplateRef<any>;
-    protected readonly items: QueryList<KbqBreadcrumbItem>;
+    protected readonly items: import("@angular/core").Signal<readonly KbqBreadcrumbItem[]>;
+    private readonly breadcrumbsResult;
     private readonly result;
     private readonly overflowItems;
+    private readonly overflowItemsDir;
     /**
      * Ensures at least minimum number of breadcrumb items are shown.
      */
@@ -107,21 +107,14 @@ export declare class KbqBreadcrumbs implements AfterContentInit {
     protected readonly KbqComponentColors: typeof KbqComponentColors;
     protected readonly KbqButtonStyles: typeof KbqButtonStyles;
     protected readonly PopUpPlacements: typeof PopUpPlacements;
-    private readonly cdr;
-    private readonly destroyRef;
     /** @docs-private */
-    protected get itemsExcludingEdges(): KbqBreadcrumbItem[];
-    /**
-     * Calculates the total width of visible items based on the `max` value and overflow items.
-     * @returns {number | null} The computed max width for overflow items or null if conditions are not met.
-     * @docs-private
-     */
-    protected get maxWidth(): number | null;
+    protected readonly itemsExcludingEdges: import("@angular/core").Signal<KbqBreadcrumbItem[]>;
+    protected readonly hiddenItemIDs: import("@angular/core").Signal<Set<unknown>>;
+    /** @docs-private */
+    protected readonly maxVisibleItems: import("@angular/core").Signal<number | null>;
+    private readonly maxHiddenItems;
     constructor();
-    ngAfterContentInit(): void;
-    private getItemWidth;
+    private enforceMaxVisible;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; }; "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrapMode": { "alias": "wrapMode"; "required": false; }; }, {}, ["separator", "items"], ["*"], true, [{ directive: typeof i2.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
-    static ngAcceptInputType_firstItemNegativeMargin: unknown;
-    static ngAcceptInputType_disabled: unknown;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapMode": { "alias": "wrapMode"; "required": false; "isSignal": true; }; }, {}, ["items", "separator"], ["*"], true, [{ directive: typeof i2.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
 }

package/breadcrumbs/breadcrumbs.scss

@@ -7,6 +7,13 @@
     gap: var(--kbq-breadcrumbs-gap);
     flex-grow: 1;
 
+    kbq-breadcrumb-item {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
     .kbq-overflow-items {
         // add space not to cut focus outline
         padding: 1px;

package/button/_button-base.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/button';
+@use '../core/styles/common/list';
 
 @use '../core/styles/common/tokens' as *;
 
@@ -47,6 +48,17 @@
     & .kbq-button-wrapper {
         display: flex;
         align-items: center;
+
+        min-width: 0;
+    }
+
+    & .kbq-button-text {
+        @include list.kbq-truncate-line();
+
+        display: flex;
+        align-items: center;
+
+        min-width: 0;
     }
 
     & .kbq-icon_left {
@@ -56,4 +68,12 @@
     & .kbq-icon_right {
         margin-left: var(--kbq-button-size-content-padding);
     }
+
+    & .kbq-button-prefix {
+        margin-right: var(--kbq-button-size-content-padding);
+    }
+
+    & .kbq-button-suffix {
+        margin-left: var(--kbq-button-size-content-padding);
+    }
 }

package/button/_button-theme.scss

@@ -46,10 +46,6 @@
 }
 
 @mixin kbq-button-theme() {
-    .kbq-button-overlay {
-        display: none;
-    }
-
     .kbq-button,
     .kbq-button-icon {
         -webkit-font-smoothing: antialiased;
@@ -87,7 +83,9 @@
         &.kbq-button_filled,
         &.kbq-button_outline,
         &.kbq-button_transparent {
-            &.cdk-keyboard-focused {
+            // :not(.kbq-disabled): a disabled <a kbq-button> can keep DOM focus (tabindex=-1 does
+            // not blur it), and FocusMonitor stays attached for the whole component lifetime.
+            &.cdk-keyboard-focused:not(.kbq-disabled) {
                 $focused-color: var(--kbq-states-line-focus-theme);
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
@@ -101,10 +99,4 @@
     .kbq-button-icon {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
-
-    .kbq-button-icon.kbq-button-wrapper {
-        .kbq-icon {
-            @include kbq-css-font-variable(typography, body, line-height, '');
-        }
-    }
 }

package/button/button-slots.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+/** Marks content to be projected into the prefix (leading) slot of a button. */
+export declare class KbqButtonPrefix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonPrefix, "[kbqButtonPrefix]", never, {}, {}, never, never, true, never>;
+}
+/** Marks content to be projected into the suffix (trailing) slot of a button. */
+export declare class KbqButtonSuffix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonSuffix, "[kbqButtonSuffix]", never, {}, {}, never, never, true, never>;
+}

package/button/button.component.d.ts

@@ -1,7 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
-import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqButtonStyles {
     Filled = "filled",
@@ -10,31 +9,46 @@ export declare enum KbqButtonStyles {
 }
 export declare const buttonLeftIconClassName = "kbq-button-icon_left";
 export declare const buttonRightIconClassName = "kbq-button-icon_right";
+/**
+ * Applies the `kbq-button`/`kbq-button-icon` host class and the left/right icon modifier classes.
+ *
+ * A button is treated as an icon button when its projected content consists only of `KbqIcon`s
+ * and there are at most 2 of them. When icons are mixed with other content, only the outermost
+ * icons receive the left/right classes.
+ *
+ * Must be used together with `KbqButton` (both match `[kbq-button]`): icon detection relies on
+ * the `.kbq-button-wrapper` element rendered by the component's template.
+ */
 export declare class KbqButtonCssStyler implements AfterContentInit {
     private renderer;
-    private cdr;
-    icons: QueryList<KbqIcon>;
+    readonly icons: import("@angular/core").Signal<readonly any[]>;
     nativeElement: HTMLElement;
-    isIconButton: boolean;
-    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, cdr: ChangeDetectorRef);
+    /** Whether the button contains only icons (at most 2). */
+    get isIconButton(): boolean;
+    private readonly _isIconButton;
+    private leftIcon;
+    private rightIcon;
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, [null, null, { skipSelf: true; }]>;
+    private updateIconClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonCssStyler, "[kbq-button]", never, {}, {}, ["icons"], never, true, never>;
 }
 export declare class KbqButton extends KbqColorDirective implements OnDestroy, AfterViewInit, KbqTitleTextRef {
     private focusMonitor;
-    private styler;
+    protected styler: KbqButtonCssStyler;
     private readonly changeDetectorRef;
     hasFocus: boolean;
-    textElement: ElementRef;
+    textElement: ElementRef<HTMLElement>;
+    /** The flex row that lays out the icons and text, used as the overflow width constraint. */
+    parentTextElement: ElementRef<HTMLElement>;
     get kbqStyle(): string;
     set kbqStyle(value: string | KbqButtonStyles);
     private _kbqStyle;
     /** Whether the button is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
-    private _disabled;
     /** @docs-private */
     readonly disabledSignal: import("@angular/core").WritableSignal<boolean>;
     get tabIndex(): number;
@@ -43,17 +57,18 @@ export declare class KbqButton extends KbqColorDirective implements OnDestroy, A
     constructor(focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    onFocus($event: any): void;
+    onFocus(): void;
     onBlur(): void;
     getHostElement(): HTMLElement;
     focus(): void;
     focusViaKeyboard(): void;
-    haltDisabledEvents(event: Event): void;
+    haltDisabledEvents: (event: Event) => void;
+    private haltDisabledKeydownEvents;
     projectContentChanged(): void;
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["[kbqButtonPrefix]", "*", "[kbqButtonSuffix]"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabIndex: unknown;
 }

package/button/button.module.d.ts

@@ -4,9 +4,10 @@ import * as i2 from "@angular/cdk/platform";
 import * as i3 from "@angular/cdk/observers";
 import * as i4 from "./button.dropdown-trigger.directive";
 import * as i5 from "./button.component";
-import * as i6 from "./button-group";
+import * as i6 from "./button-slots";
+import * as i7 from "./button-group";
 export declare class KbqButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.ObserversModule, typeof i4.KbqButtonDropdownTrigger, typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i6.KbqButtonGroup, typeof i6.KbqButtonGroupRoot], [typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i4.KbqButtonDropdownTrigger, typeof i6.KbqButtonGroup, typeof i6.KbqButtonGroupRoot]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.ObserversModule, typeof i4.KbqButtonDropdownTrigger, typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i6.KbqButtonPrefix, typeof i6.KbqButtonSuffix, typeof i7.KbqButtonGroup, typeof i7.KbqButtonGroupRoot], [typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i6.KbqButtonPrefix, typeof i6.KbqButtonSuffix, typeof i4.KbqButtonDropdownTrigger, typeof i7.KbqButtonGroup, typeof i7.KbqButtonGroupRoot]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonModule>;
 }

package/button/button.scss

@@ -24,16 +24,5 @@
     padding-right: kbq-difference-series-css-variables([button-icon-size-horizontal-padding, button-size-border-width]);
 }
 
-.kbq-button-overlay {
-    position: absolute;
-
-    top: calc(-1 * #{var(--kbq-button-size-border-width)});
-    left: calc(-1 * #{var(--kbq-button-size-border-width)});
-    right: calc(-1 * #{var(--kbq-button-size-border-width)});
-    bottom: calc(-1 * #{var(--kbq-button-size-border-width)});
-
-    border-radius: inherit;
-}
-
 @include kbq-button-theme();
 @include kbq-button-typography();

package/button/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from './button-group';
+export * from './button-slots';
 export * from './button.component';
 export * from './button.dropdown-trigger.directive';
 export * from './button.module';

package/code-block/code-block.d.ts

@@ -25,13 +25,15 @@ export declare class KbqCodeBlock implements AfterViewInit {
     /**
      * Reference to the scrollable code content.
      *
-     * @deprecated Use `scrollTo` method instead.
+     * @deprecated Use `scrollTo` method instead, will be removed from public API (mark as private) in the next major release.
      *
      * @docs-private
      */
     readonly scrollableCodeContent: CdkScrollable;
-    /** @docs-private */
     private readonly highlight;
+    private readonly preElementRef;
+    /** @docs-private */
+    protected readonly contentExceedsMaxHeight: import("@angular/core").WritableSignal<boolean>;
     /** @docs-private */
     protected readonly tabLinkTemplate: TemplateRef<KbqTabLinkTemplateContext>;
     /** Whether to display line numbers. */
@@ -145,6 +147,7 @@ export declare class KbqCodeBlock implements AfterViewInit {
     private readonly clipboard;
     private readonly domSanitizer;
     private readonly document;
+    private readonly sharedResizeObserver;
     /**
      * @docs-private
      */
@@ -186,6 +189,7 @@ export declare class KbqCodeBlock implements AfterViewInit {
      * Reacts to `hideTabs` changes dynamically.
      */
     private trackHoverState;
+    private setupContentOverflowDetection;
     /**
      * Handles the scroll event on the scrollable code content element and updates the header shadow accordingly.
      */

package/core/locales/en-US.d.ts

@@ -171,5 +171,6 @@ export declare const enUSLocaleData: {
         noNotifications: string;
         failedToLoadNotifications: string;
         repeat: string;
+        loadingMore: string;
     };
 };

package/core/locales/es-LA.d.ts

@@ -170,5 +170,6 @@ export declare const esLALocaleData: {
         noNotifications: string;
         failedToLoadNotifications: string;
         repeat: string;
+        loadingMore: string;
     };
 };

package/core/locales/locale-service.d.ts

@@ -216,6 +216,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             noNotifications: string;
             failedToLoadNotifications: string;
             repeat: string;
+            loadingMore: string;
         };
     };
     'es-LA': {
@@ -428,6 +429,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             noNotifications: string;
             failedToLoadNotifications: string;
             repeat: string;
+            loadingMore: string;
         };
     };
     'pt-BR': {
@@ -636,6 +638,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             noNotifications: string;
             failedToLoadNotifications: string;
             repeat: string;
+            loadingMore: string;
         };
     };
     'ru-RU': {
@@ -850,6 +853,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             noNotifications: string;
             failedToLoadNotifications: string;
             repeat: string;
+            loadingMore: string;
         };
     };
     'tk-TM': {
@@ -1060,6 +1064,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             noNotifications: string;
             failedToLoadNotifications: string;
             repeat: string;
+            loadingMore: string;
         };
     };
 };

package/core/locales/pt-BR.d.ts

@@ -170,5 +170,6 @@ export declare const ptBRLocaleData: {
         noNotifications: string;
         failedToLoadNotifications: string;
         repeat: string;
+        loadingMore: string;
     };
 };

package/core/locales/ru-RU.d.ts

@@ -171,5 +171,6 @@ export declare const ruRULocaleData: {
         noNotifications: string;
         failedToLoadNotifications: string;
         repeat: string;
+        loadingMore: string;
     };
 };

package/core/locales/tk-TM.d.ts

@@ -171,5 +171,6 @@ export declare const tkTMLocaleData: {
         noNotifications: string;
         failedToLoadNotifications: string;
         repeat: string;
+        loadingMore: string;
     };
 };

package/core/option/_option-theme.scss

@@ -20,16 +20,14 @@
     .kbq-option {
         @include kbq-option(default);
 
-        &.kbq-hovered:not(.kbq-disabled),
-        &:hover:not(.kbq-disabled) {
+        &.kbq-active:not(.kbq-disabled) {
             @include kbq-option(states-hover);
         }
 
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(states-selected);
 
-            &.kbq-hovered,
-            &:hover {
+            &.kbq-active {
                 @include kbq-option(states-selected-hover);
             }
         }
@@ -38,12 +36,12 @@
             @include kbq-option(states-disabled);
         }
 
-        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
+        &:is(.kbq-selected, .kbq-active):has(+ :is(.kbq-selected, .kbq-active)) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
 
-        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
+        &:is(.kbq-selected, .kbq-active) + :is(.kbq-selected, .kbq-active) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
@@ -53,18 +51,11 @@
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(multiple-states-selected);
 
-            &.kbq-hovered,
-            &:hover {
+            &.kbq-active {
                 @include kbq-option(multiple-states-selected-hover);
             }
         }
     }
-
-    .cdk-keyboard-focused {
-        .kbq-option.kbq-active {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
-        }
-    }
 }
 
 @mixin kbq-option-typography() {

package/core/pop-up/constants.d.ts

@@ -39,8 +39,8 @@ export declare enum PopUpTriggers {
 export declare enum PopUpSizes {
     Small = "small",
     Medium = "medium",
-    Normal = "medium",
-    Large = "large"
+    Large = "large",
+    Custom = "custom"
 }
 export type KbqPopUpSizeValues = KbqEnumValues<PopUpSizes>;
 /**

package/dropdown/_dropdown-theme.scss

@@ -23,18 +23,14 @@
         }
 
         &.kbq-dropdown-item_highlighted,
-        &:hover:not(.kbq-disabled) {
+        &.cdk-focused:not(.kbq-disabled) {
             @include _kbq-dropdown-item-state(states-hover);
         }
 
-        &.cdk-keyboard-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
-        }
-
         &.kbq-selected {
             @include _kbq-dropdown-item-state(states-selected);
 
-            &:hover:not(.kbq-disabled) {
+            &.cdk-focused:not(.kbq-disabled) {
                 @include _kbq-dropdown-item-state(states-selected-hover);
             }
         }
@@ -43,12 +39,12 @@
             @include _kbq-dropdown-item-state(states-disabled);
         }
 
-        &:is(.kbq-selected, .cdk-keyboard-focused):has(+ :is(.kbq-selected, .cdk-keyboard-focused)) {
+        &:is(.kbq-selected, .cdk-focused):has(+ :is(.kbq-selected, .cdk-focused)) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
 
-        &:is(.kbq-selected, .cdk-keyboard-focused) + :is(.kbq-selected, .cdk-keyboard-focused) {
+        &:is(.kbq-selected, .cdk-focused) + :is(.kbq-selected, .cdk-focused) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }

package/dropdown/dropdown-trigger.directive.d.ts

@@ -16,6 +16,16 @@ export declare const KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY;
 };
+/**
+ * Marker provided by host components that create their own stacking context at
+ * the default overlay z-index (e.g. `KbqTopBar`, `KbqNavbar` use
+ * `position: sticky` + `z-index: $overlay-z-index`). When this token is
+ * available in the injector tree, `KbqDropdownTrigger` defaults `demoteOverlay`
+ * to `false` so the dropdown overlay is not lowered below the host.
+ *
+ * An explicit `[demoteOverlay]` binding on the trigger still wins.
+ */
+export declare const KBQ_DROPDOWN_HOST: InjectionToken<unknown>;
 /** Default top padding of the nested dropdown panel. */
 export declare const NESTED_PANEL_TOP_PADDING = 4;
 export declare const NESTED_PANEL_LEFT_PADDING = 8;
@@ -37,6 +47,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private readonly renderer;
     protected readonly isBrowser: boolean;
     private readonly window;
+    private readonly host;
     lastDestroyReason: DropdownCloseReason;
     /** Position offset of the dropdown in the X axis. */
     offsetX: number;

package/dropdown/dropdown.component.d.ts

@@ -93,6 +93,14 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
      * @param origin Action from which the focus originated. Used to set the correct styling.
      */
     focusFirstItem(origin?: FocusOrigin): void;
+    /**
+     * Applies focus when the dropdown is opened. When opened by mouse or touch, the first item
+     * should not be highlighted, so the panel itself is focused instead — keyboard events still
+     * reach the panel and the first arrow key press will highlight the first item.
+     */
+    private applyInitialFocus;
+    /** Moves DOM focus onto the dropdown panel so that keydown events keep being handled. */
+    private focusPanel;
     /**
      * Resets the active item in the dropdown. This is used when the dropdown is opened, allowing
      * the user to start from the first option when pressing the down arrow.

package/dropdown/dropdown.scss

@@ -32,6 +32,10 @@
 }
 
 .kbq-dropdown__panel {
+    // The panel receives programmatic focus when the dropdown is opened by mouse or touch,
+    // so the focus outline should never be rendered on it.
+    outline: none;
+
     overflow-x: hidden;
     overflow-y: auto;