@koobiq/components 20.1.0 → 20.3.0

package/actions-panel/index.d.ts

@@ -1,6 +1,6 @@
 import { Overlay, ScrollStrategy, OverlayRef, ComponentType } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { Injector, ElementRef, InjectionToken, Provider, OnDestroy, EventEmitter, TemplateRef } from '@angular/core';
+import { InjectionToken, Injector, ElementRef, Provider, OnDestroy, EventEmitter, TemplateRef } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
 import { Observable } from 'rxjs';
@@ -183,30 +183,42 @@ declare class KbqActionsPanelRef<I = unknown, R = unknown> {
      * @docs-private
      */
     containerInstance: KbqActionsPanelContainer;
-    /** Gets an observable that is notified when the actions panel is finished closing. */
-    get afterClosed(): Observable<R | undefined>;
-    /** Gets an observable that emits when keydown events are targeted on the overlay. */
-    get keydownEvents(): Observable<KeyboardEvent>;
-    /** Gets an observable that is notified when the actions panel has opened and appeared. */
-    get afterOpened(): Observable<void>;
+    private readonly afterOpenedSubject;
+    private readonly beforeOpenedSubject;
+    private readonly beforeClosedSubject;
+    /** Emits when keydown events are targeted on the overlay. */
+    readonly keydownEvents: Observable<KeyboardEvent>;
+    /** Emits when the actions panel starts opening, before its entrance animation plays. */
+    readonly beforeOpened: Observable<void>;
+    /** Emits when the actions panel has opened and appeared. */
+    readonly afterOpened: Observable<void>;
+    /** Emits when the actions panel starts closing, before its exit animation plays. */
+    readonly beforeClosed: Observable<R | undefined>;
+    /** Emits when the actions panel is finished closing. */
+    readonly afterClosed: Observable<R | undefined>;
     /**
-     * Gets the overlay reference for the actions panel.
+     * Overlay reference for the actions panel.
      *
      * @docs-private
      */
-    get overlayRef(): OverlayRef;
+    readonly overlayRef: OverlayRef;
     /**
-     * Gets the ID of the actions panel.
+     * ID of the actions panel.
      *
      * @docs-private
      */
-    get id(): string;
-    private readonly _afterOpened;
+    readonly id: string;
     /** Result to be passed down to the `afterClosed` stream. */
     private result;
     /** Handle to the timeout that's running as a fallback in case the close animation doesn't fire. */
-    private closeAnimationFallbackTimeout;
+    private closeAnimationFallbackTimeout?;
     constructor(dialogRef: DialogRef<R, I>, containerInstance: KbqActionsPanelContainer);
+    /**
+     * Opens the actions panel, playing its entrance animation.
+     *
+     * @docs-private
+     */
+    open(): void;
     /** Closes the actions panel. */
     close(result?: R): void;
     private handleAnimation;

package/alert/_alert-theme.scss

@@ -29,6 +29,20 @@
         &.kbq-alert_info {
             @include kbq-alert-style(default, info);
         }
+
+        // The status icon is the only thing distinguishing default-style alerts, so it must clear the
+        // WCAG 1.4.11 3:1 non-text minimum. The `--kbq-icon-*` palette is tuned for the page background
+        // and does not clear it against the neutral container in the light scheme (warning 2.59:1,
+        // success 2.79:1); the darker `--kbq-foreground-*` values do (4.00:1 / 4.65:1). In the dark
+        // scheme both palettes resolve to the same value, so this override is inert there.
+        // The token has to be redeclared on the icon element itself: icon-tokens.scss declares
+        // `--kbq-icon-warning-color` on `.kbq-icon`, so a value inherited from `.kbq-alert` never wins.
+        // `:not()` excludes icon-item and icon-button, which inherit `.kbq-icon` from KbqIcon but paint
+        // their own filled backgrounds.
+        .kbq-alert__icon > .kbq-icon:not(.kbq-icon-item, .kbq-icon-button) {
+            --kbq-icon-warning-color: var(--kbq-foreground-warning);
+            --kbq-icon-success-color: var(--kbq-foreground-success);
+        }
     }
 
     .kbq-alert.kbq-alert_colored {

package/alert/alert.component.scss

@@ -12,6 +12,11 @@
     }
 }
 
+.kbq-alert__icon {
+    display: inline-flex;
+    align-items: flex-start;
+}
+
 .kbq-alert__content {
     display: flex;
     flex-direction: column;
@@ -30,14 +35,13 @@
         margin: var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right)
             var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left);
 
+        padding-top: var(--kbq-alert-size-normal-no-title-icon-padding-top);
+
         &.kbq-alert__icon_title {
             margin-top: var(--kbq-alert-size-normal-icon-margin-top);
 
-            padding-top: var(--kbq-alert-size-normal-no-title-icon-padding-top);
+            padding-top: var(--kbq-alert-size-normal-icon-padding-top);
         }
-
-        display: inline-flex;
-        align-items: flex-start;
     }
 
     & .kbq-alert__content {
@@ -50,12 +54,17 @@
     }
 
     & .kbq-alert__button-stack {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--kbq-size-m);
+
         padding-top: var(--kbq-alert-size-normal-button-stack-padding-top);
         padding-bottom: var(--kbq-alert-size-normal-button-stack-padding-bottom);
     }
 
     & .kbq-alert__button-stack_has-button {
-        padding-top: 12px;
+        padding-top: var(--kbq-size-m);
     }
 
     & .kbq-alert__close-button {
@@ -63,8 +72,8 @@
         margin-left: var(--kbq-alert-size-normal-close-button-margin-left);
 
         .kbq-icon-button {
-            --kbq-icon-button-size-normal-horizontal-padding: 4px;
-            --kbq-icon-button-size-normal-vertical-padding: 4px;
+            --kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);
+            --kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs);
         }
     }
 }
@@ -86,9 +95,6 @@
 
             padding-top: var(--kbq-alert-size-compact-icon-padding-top);
         }
-
-        display: inline-flex;
-        align-items: flex-start;
     }
 
     & .kbq-alert__content {
@@ -101,12 +107,17 @@
     }
 
     & .kbq-alert__button-stack {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--kbq-size-m);
+
         padding-top: var(--kbq-alert-size-compact-button-stack-padding-top);
         padding-bottom: var(--kbq-alert-size-compact-button-stack-padding-bottom);
     }
 
     & .kbq-alert__button-stack_has-button {
-        padding-top: 12px;
+        padding-top: var(--kbq-size-m);
     }
 
     & .kbq-alert__close-button {
@@ -114,8 +125,8 @@
         margin-left: var(--kbq-alert-size-compact-close-button-margin-left);
 
         .kbq-icon-button {
-            --kbq-icon-button-size-normal-horizontal-padding: 4px;
-            --kbq-icon-button-size-normal-vertical-padding: 4px;
+            --kbq-icon-button-size-normal-horizontal-padding: var(--kbq-size-xxs);
+            --kbq-icon-button-size-normal-vertical-padding: var(--kbq-size-xxs);
         }
     }
 }

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/app-switcher/app-switcher-dropdown-app.scss

@@ -9,7 +9,7 @@
     min-height: 50px;
 
     border-radius: var(--kbq-size-xs);
-    // base transparent border so the .cdk-keyboard-focused border-color renders a focus ring (matches list-item-base)
+    // transparent border to keep the box model aligned with the other list rows (matches kbq-list-item-base)
     border: var(--kbq-size-3xs) solid transparent;
 
     @include common.user-select(none);
@@ -59,12 +59,14 @@
         color: var(--kbq-list-default-text-color);
 
         &.kbq-dropdown-item_highlighted,
-        &:hover {
-            background: var(--kbq-states-background-transparent-active);
+        &:hover,
+        &.cdk-keyboard-focused {
+            background: var(--kbq-states-background-transparent-hover);
         }
 
-        &.cdk-keyboard-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        &:active,
+        &.kbq-active {
+            background: var(--kbq-states-background-transparent-active);
         }
 
         .kbq-app-switcher-dropdown-app__caption {

package/app-switcher/app-switcher-dropdown-site.scss

@@ -33,12 +33,14 @@
         color: var(--kbq-list-default-text-color);
 
         &.kbq-dropdown-item_highlighted,
-        &:hover {
-            background: var(--kbq-states-background-transparent-active);
+        &:hover,
+        &.cdk-keyboard-focused {
+            background: var(--kbq-states-background-transparent-hover);
         }
 
-        &.cdk-keyboard-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        &:active,
+        &.kbq-active {
+            background: var(--kbq-states-background-transparent-active);
         }
     }
 }

package/app-switcher/index.d.ts

@@ -1,9 +1,9 @@
 import * as rxjs from 'rxjs';
 import { Subscription } from 'rxjs';
 import * as i0 from '@angular/core';
-import { InjectionToken, AfterViewInit, AfterContentInit, OnInit, TemplateRef, EventEmitter, Type } from '@angular/core';
+import { InjectionToken, AfterViewInit, OnDestroy, AfterContentInit, OnInit, TemplateRef, EventEmitter, Type, QueryList } from '@angular/core';
 import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqPopUp, KbqPopUpTrigger, KbqPopUpPlacementValues, KbqPopUpSizeValues } from '@koobiq/components/core';
+import { KbqPopUp, KbqPopUpTrigger, KbqPopUpPlacementValues, FocusKeyManager, KbqPopUpSizeValues } from '@koobiq/components/core';
 import { ScrollStrategy, Overlay, OverlayConfig, CdkScrollable } from '@angular/cdk/overlay';
 import { FormControl } from '@angular/forms';
 import { KbqDropdownTrigger, KbqDropdownItem } from '@koobiq/components/dropdown';
@@ -58,7 +58,7 @@ declare const KBQ_APP_SWITCHER_DEFAULT_CONFIGURATION: {
 /** @docs-private */
 declare const KBQ_APP_SWITCHER_CONFIGURATION: InjectionToken<unknown>;
 /** @docs-private */
-declare class KbqAppSwitcherComponent extends KbqPopUp implements AfterViewInit {
+declare class KbqAppSwitcherComponent extends KbqPopUp implements AfterViewInit, OnDestroy {
     /** @docs-private */
     protected readonly localeService: _koobiq_components_core.KbqLocaleService | null;
     readonly externalConfiguration: unknown;
@@ -84,14 +84,49 @@ declare class KbqAppSwitcherComponent extends KbqPopUp implements AfterViewInit
     readonly input: i0.Signal<KbqInput | undefined>;
     /** @docs-private */
     readonly otherSites: i0.Signal<KbqDropdownTrigger>;
+    /** @docs-private */
+    protected allItems: QueryList<KbqDropdownItem>;
+    /** Roving-focus manager over the inline menu items (flat app rows and other-site rows). */
+    protected keyManager: FocusKeyManager<KbqDropdownItem>;
+    /** @docs-private */
+    private readonly menuItems;
+    /** @docs-private */
+    private readonly dir;
+    /**
+     * CSS class marking a nested alias row, bound in the template (see app-switcher.html). Kept as a
+     * single named constant, rather than a literal repeated in both places, so handleGroupHorizontal's
+     * classList check can't silently drift from the template's class binding if the class is renamed.
+     */
+    protected readonly nestedAliasClass = "kbq-app-switcher-site_nested";
     constructor();
     ngAfterViewInit(): void;
+    /** Releases the internal roving-focus menu QueryList. */
+    ngOnDestroy(): void;
     /** @docs-private */
     updateClassMap(placement: string, customClass: string, size: KbqPopUpSizeValues): void;
     /** @docs-private */
     updateTrapFocus(isTrapFocus: boolean): void;
     /** @docs-private */
     escapeHandler(): void;
+    /** Handles keyboard navigation across the app-switcher menu items.
+     * @docs-private */
+    protected keydownHandler(event: KeyboardEvent): void;
+    /**
+     * Expands/collapses an app group (or steps from an alias back to its header) on Left/Right,
+     * honouring the current text direction. Returns whether the key was consumed.
+     */
+    private handleGroupHorizontal;
+    /** Whether the keyboard event originated from the search input. */
+    private eventFromInput;
+    /** Syncs the key manager's active item with focus that arrives via Tab, click or a closing flyout.
+     * Clears the active item (index -1) when focus lands on a focusable element that isn't one of
+     * `menuItems` (e.g. the search field's clear button) - otherwise a stale `activeItem` from before
+     * the focus move would keep receiving Enter/Space/arrow-key actions meant for the new target.
+     * @docs-private */
+    protected focusinHandler(event: FocusEvent): void;
+    /** Closes the popup once focus leaves the menu and its site flyouts, mirroring the dropdown.
+     * @docs-private */
+    protected focusoutHandler(event: FocusEvent): void;
     /** @docs-private */
     selectAppInSite(site: KbqAppSwitcherSite, app: KbqAppSwitcherApp): void;
     private filterSites;
@@ -221,11 +256,13 @@ declare class KbqAppSwitcherListItem extends KbqDropdownItem {
     private sanitizer;
     app: KbqAppSwitcherApp;
     readonly toggle: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Search query to highlight within the app name. */
+    readonly highlightText: i0.InputSignal<string>;
     collapsed: boolean;
     clickHandler(event: MouseEvent): void;
     getIcon(icon: string | null): _angular_platform_browser.SafeHtml;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAppSwitcherListItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAppSwitcherListItem, "[kbq-app-switcher-list-item]", ["kbqAppSwitcherApp"], { "app": { "alias": "app"; "required": false; }; "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAppSwitcherListItem, "[kbq-app-switcher-list-item]", ["kbqAppSwitcherApp"], { "app": { "alias": "app"; "required": false; }; "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_collapsed: unknown;
 }
 

package/app-switcher/kbq-app-switcher-list-item.scss

@@ -118,7 +118,8 @@
     .kbq-app-switcher-list-item {
         &:hover,
         &.kbq-hover,
-        &.kbq-focused {
+        &.kbq-focused,
+        &.cdk-keyboard-focused {
             &:has(.kbq-app-switcher-list-item__toggle) .kbq-app-switcher-list-item__icon {
                 visibility: hidden;
             }
@@ -129,7 +130,8 @@
         }
 
         &:hover,
-        &.kbq-hover {
+        &.kbq-hover,
+        &.cdk-keyboard-focused {
             background: var(--kbq-states-background-transparent-hover);
 
             & .kbq-app-switcher-list-item__toggle {
@@ -146,7 +148,8 @@
             background: var(--kbq-background-theme-less);
 
             &:hover,
-            &.kbq-hover {
+            &.kbq-hover,
+            &.cdk-keyboard-focused {
                 background: var(--kbq-states-background-theme-less-hover);
             }
 
@@ -158,11 +161,6 @@
 
         background: var(--kbq-list-default-container-background);
         color: var(--kbq-list-default-text-color);
-
-        &.cdk-keyboard-focused {
-            outline: none;
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
-        }
     }
 }
 

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);