@koobiq/components 20.2.0 → 20.3.0

package/accordion/_accordion-theme.scss

@@ -1,8 +1,12 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-accordion-theme() {
+    // Only the trigger owns the item's focus ring. `:focus-within` would also fire for header
+    // actions and for controls inside the expanded content, ringing a section the user is merely
+    // typing in. Both shapes are matched because `<kbq-accordion-header>` is optional.
     .kbq-accordion.cdk-keyboard-focused {
-        & .kbq-accordion-item:focus-within {
+        & .kbq-accordion-item:has(> .kbq-accordion-trigger:focus),
+        & .kbq-accordion-item:has(> .kbq-accordion-header .kbq-accordion-trigger:focus) {
             border-color: var(--kbq-accordion-item-states-focus-border-color);
         }
     }

package/accordion/accordion-tokens.scss

@@ -5,6 +5,8 @@
     --kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs)
         var(--kbq-size-m);
     --kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);
+    --kbq-accordion-size-item-header-actions-gap: var(--kbq-size-3xs);
+    --kbq-accordion-size-item-header-actions-padding-right: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-accordion-item-default-background: transparent;
     --kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);

package/accordion/accordion-trigger.scss

@@ -23,6 +23,8 @@
         margin-right: var(--kbq-size-s);
     }
 
+    // @deprecated Actions nested inside the trigger are focusable elements inside a `role="button"`.
+    // Put them in a `.kbq-accordion-header__actions` sibling of the trigger instead.
     & .kbq-accordion-trigger__action {
         padding: var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);
         margin-bottom: calc(-1 * #{var(--kbq-size-3xs)});
@@ -61,4 +63,8 @@
 
 button.kbq-accordion-trigger {
     flex: 1;
+
+    // A flex item floors at its min-content width by default, which would push the header actions
+    // past the item's right edge instead of letting a long label give way.
+    min-width: 0;
 }

package/accordion/accordion.scss

@@ -17,6 +17,27 @@
     display: flex;
 
     height: var(--kbq-accordion-size-item-header-height);
+    // The height above is fixed, so a trigger label long enough to wrap would paint outside the
+    // header and over the item's border. Clipping keeps it inside; the trigger is a flex container,
+    // so `text-overflow` cannot ellipsize its text — wrap the label in an element of your own if you
+    // need that.
+    overflow: hidden;
+
+    // Interactive controls live NEXT TO the trigger, never inside it: the trigger is `role="button"`
+    // and nesting focusable elements in it is an accessibility violation. The trigger's `flex: 1`
+    // keeps the rest of the header clickable, so the actions sit flush right; their padding matches
+    // the trigger's own right padding, which is `--kbq-size-s` in every variant.
+    & > .kbq-accordion-header__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--kbq-accordion-size-item-header-actions-gap);
+
+        // Icon buttons have a fixed size and nothing to reflow, so the trigger — not the actions —
+        // is what gives way when the header runs out of room.
+        flex-shrink: 0;
+
+        padding-right: var(--kbq-accordion-size-item-header-actions-padding-right);
+    }
 }
 
 .kbq-accordion-content {

package/accordion/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, AfterViewInit, OnDestroy, ChangeDetectorRef, AfterContentInit, ElementRef } from '@angular/core';
+import { InjectionToken, AfterViewInit, OnDestroy, ChangeDetectorRef, AfterContentInit, ElementRef, Signal } from '@angular/core';
 import { FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
@@ -70,6 +70,15 @@ declare class KbqAccordionTriggerDirective {
      * @docs-private
      */
     onFocus(): void;
+    /**
+     * Routes keyboard interaction to the accordion, but only while the trigger itself is focused.
+     *
+     * A `keydown` targets the focused element, so header actions placed next to the trigger and
+     * controls inside the expanded content keep their own keys — the accordion no longer toggles the
+     * section on Enter/Space nor moves focus to another header on the arrow keys. The `target` check
+     * additionally covers focusable content mistakenly nested inside the trigger.
+     */
+    onKeydown(event: KeyboardEvent): void;
     /** @docs-private */
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionTriggerDirective, never>;
@@ -100,8 +109,11 @@ declare class KbqAccordionTrigger implements AfterViewInit, OnDestroy {
 
 type KbqAccordionItemState = 'open' | 'closed';
 declare class KbqAccordionItem implements OnDestroy {
-    /** @docs-private */
-    protected readonly accordion: KbqAccordion;
+    /**
+     * The accordion this item belongs to — always the nearest one, because it is injected.
+     * The accordion reads it back to tell its own items apart from a nested accordion's.
+     */
+    readonly accordion: KbqAccordion;
     /** @docs-private */
     protected readonly changeDetectorRef: ChangeDetectorRef;
     /** @docs-private */
@@ -195,8 +207,24 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     protected keyManager: FocusKeyManager<KbqAccordionItem>;
     /** Emits every time `openAll()` or `closeAll()` is called. @docs-private */
     readonly openCloseAllActions: Subject<boolean>;
-    /** The accordion items projected into this accordion. @docs-private */
-    readonly items: _angular_core.Signal<readonly any[]>;
+    /**
+     * Every item the content query matches, including those of a nested accordion.
+     * Use `items` instead — this one is the raw, unfiltered query.
+     * @docs-private
+     */
+    protected readonly allItems: Signal<readonly KbqAccordionItem[]>;
+    /**
+     * The accordion items that belong to this accordion.
+     *
+     * A descendant content query resolves against the template the tag is authored in and does not
+     * stop at a nested component of the same type, so `allItems` of an outer accordion also matches
+     * the items of an accordion rendered inside an item's content. Each item's own `accordion` is
+     * injected and therefore always its nearest one, which makes ownership the reliable filter.
+     * Without it the key manager would move focus into the nested accordion's headers, `valueChange`
+     * would report a nested item's value and state saving would persist it under the outer key.
+     * @docs-private
+     */
+    readonly items: Signal<readonly KbqAccordionItem[]>;
     /** Whether the accordion persists the expanded state of its items across reloads. Defaults to `false`. */
     readonly useStateSaving: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
@@ -238,7 +266,7 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
      * Always an array in `multiple` mode and always a string in `single` mode — an empty string
      * when nothing is expanded, matching what `valueChange` emits.
      */
-    readonly value: _angular_core.Signal<string | string[]>;
+    readonly value: Signal<string | string[]>;
     /** Emits the current value whenever the expanded state of the accordion changes. */
     readonly valueChange: _angular_core.OutputEmitterRef<string | string[]>;
     /** The unique id of this accordion. */
@@ -255,7 +283,15 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    /** @docs-private */
+    /**
+     * Handles a key pressed on an item's trigger.
+     *
+     * Invoked by `KbqAccordionTriggerDirective`, not bound on the accordion host: a root listener
+     * also receives keys bubbling from the section content and from controls placed next to the
+     * trigger, and would swallow their Enter/Space and hijack their arrow keys. It would also
+     * activate the first item — stealing focus — the first time any key was pressed anywhere inside.
+     * @docs-private
+     */
     keydownHandler(event: KeyboardEvent): void;
     /** Opens all enabled accordion items in an accordion where `type` is `multiple`. */
     openAll(): void;
@@ -273,7 +309,7 @@ declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit
     /** The key used to persist/restore state. */
     private get stateStorageKey();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordion, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "useStateSaving": { "alias": "useStateSaving"; "required": false; "isSignal": true; }; "stateSavingKey": { "alias": "stateSavingKey"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["items"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "useStateSaving": { "alias": "useStateSaving"; "required": false; "isSignal": true; }; "stateSavingKey": { "alias": "stateSavingKey"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["allItems"], ["*"], true, never>;
 }
 
 declare class KbqAccordionContentDirective implements AfterViewInit {
@@ -320,6 +356,17 @@ declare class KbqAccordionHeader {
     protected readonly item: KbqAccordionItem;
     /** @docs-private */
     protected readonly accordion: KbqAccordion;
+    /**
+     * Names the heading after the trigger alone.
+     *
+     * A `role="heading"` takes its name from its content, so the header actions sitting beside the
+     * trigger would otherwise append their own labels to it — a section titled "Profile" would be
+     * announced as "Profile Run More" when navigating by heading. Pointing at the trigger yields the
+     * announcement the WAI-ARIA APG gets by keeping the button the only element in the heading,
+     * which this component cannot do because the header is also the row that lays the actions out.
+     * @docs-private
+     */
+    protected get labelledBy(): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAccordionHeader, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAccordionHeader, "kbq-accordion-header, [kbq-accordion-header]", never, {}, {}, never, never, true, never>;
 }

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/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/index.d.ts

@@ -1,10 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, AfterContentInit, TemplateRef, QueryList, InjectionToken, Provider, AfterViewInit, OnDestroy } from '@angular/core';
+import { ElementRef, InjectionToken, AfterContentInit, TemplateRef, QueryList, Provider, AfterViewInit, OnDestroy } from '@angular/core';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i1 from '@koobiq/components/core';
-import { ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KbqPanelWidth, KbqPanelMaxWidth, KeyboardNavigationHandler, KbqOptionSelectionChange } from '@koobiq/components/core';
+import { ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KbqPanelWidth, KbqPanelMaxWidth, KeyboardNavigationHandler, KbqSiblingPopup, KbqOptionSelectionChange } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 
 /**
@@ -109,13 +109,18 @@ declare class KbqAutocomplete implements AfterContentInit {
 }
 
 /**
- * The following style constants are necessary to save here in order
- * to properly calculate the scrollTop of the panel. Because we are not
- * actually focusing the active item, scroll must be handled manually.
+ * The total height of the autocomplete panel.
+ *
+ * @deprecated Unused — the panel is capped by `--kbq-autocomplete-size-panel-max-height` and reveals its
+ * active option through `KbqOption.focus`, so nothing computes a scroll offset from this. Will be removed
+ * in the next major release.
  */
-/** The total height of the autocomplete panel. */
 declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
-/** Injection token that determines the scroll handling while the autocomplete panel is open. */
+/**
+ * Injection token that determines the scroll handling while the autocomplete panel is open. The root default
+ * keeps the trigger usable outside `KbqAutocompleteModule`'s injector; providing the token anywhere still wins
+ * over it.
+ */
 declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 declare function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
 declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
@@ -133,14 +138,14 @@ declare const KBQ_AUTOCOMPLETE_VALUE_ACCESSOR: Provider;
  * @docs-private
  */
 declare function getKbqAutocompleteMissingPanelError(): Error;
-declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAccessor, OnDestroy, KeyboardNavigationHandler {
+declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAccessor, OnDestroy, KeyboardNavigationHandler, KbqSiblingPopup {
     private elementRef;
     private viewContainerRef;
     private changeDetectorRef;
     private overlay;
     private zone;
     private dir;
-    private formField;
+    private readonly formField;
     private viewportRuler;
     protected readonly document: Document;
     readonly optionSelections: Observable<KbqOptionSelectionChange>;
@@ -149,6 +154,16 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
     get panelOpen(): boolean;
     /** The autocomplete panel to be attached to this trigger. */
     readonly autocomplete: _angular_core.InputSignal<KbqAutocomplete>;
+    /** Whether the autocomplete panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached(): boolean;
+    /**
+     * Emits `true` when the panel opens and `false` when it closes. Part of the `KbqSiblingPopup`
+     * contract.
+     *
+     * Built on top of the `autocomplete` signal rather than read once: the panel is bound after the consumers
+     * of this stream are created (a tooltip on the same element subscribes in its constructor).
+     */
+    readonly openedChange: Observable<boolean>;
     /**
      * Reference relative to which to position the autocomplete panel.
      * Defaults to the autocomplete trigger element.

package/breadcrumbs/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy, InjectionToken, Provider, TemplateRef } from '@angular/core';
+import { OnInit, OnDestroy, InjectionToken, TemplateRef, Provider } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqDefaultSizes, KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';

package/button/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit, OnDestroy, AfterViewInit, ElementRef } from '@angular/core';
-import { KbqColorDirective, KbqTitleTextRef, KbqComponentColors, ThemePalette, KbqOrientation } from '@koobiq/components/core';
+import { OnDestroy, AfterViewInit, AfterContentInit, ElementRef } from '@angular/core';
+import { KbqColorDirective, KbqTitleTextRef, KbqOrientation, KbqComponentColors, ThemePalette } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import * as i1 from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/platform';

package/button-toggle/button-toggle-tokens.scss

@@ -3,6 +3,8 @@
     --kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);
     --kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);
+    // 22px, not the design's 24px: the item's 1px border is outside this height. See the
+    // `box-sizing: content-box` in button-toggle.scss, which is what keeps that arithmetic true.
     --kbq-button-toggle-size-item-height: 22px;
     --kbq-button-toggle-size-item-border-radius: var(--kbq-size-xxs);
     --kbq-button-toggle-size-item-padding-horizontal: var(--kbq-size-s);

package/button-toggle/button-toggle.scss

@@ -21,6 +21,15 @@
         justify-content: flex-start;
         align-items: center;
 
+        // Content-box on purpose, and load-bearing. `--kbq-button-toggle-size-item-height` is 22px,
+        // not the 24px of the design's `--kbq-size-xxl`: DS-3136 subtracted the border it added here
+        // from the token rather than from the rendered box, so the item only reaches its designed
+        // 24px while the border sits outside the declared height. A global `border-box` reset in a
+        // consuming application would pull the border back inside and leave the item 2px short —
+        // and the inner button, which is sized from the same token, would overflow the shrunken
+        // content box and be clipped by `overflow: hidden` above.
+        box-sizing: content-box;
+
         height: var(--kbq-button-toggle-size-item-height);
         min-height: var(--kbq-button-toggle-size-item-height);
 

package/button-toggle/index.d.ts

@@ -147,6 +147,11 @@ declare class KbqButtonToggle implements OnInit, AfterContentInit, AfterViewInit
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["kbqButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], true, never>;
 }
 
+/**
+ * Entry point for `KbqButtonToggleGroup`/`KbqButtonToggle`. Both are standalone, so a bare
+ * `imports: [KbqButtonToggle]` works; this module is the convenience bundle that also pulls in
+ * `KbqButtonModule`/`KbqTitleModule` and re-exports the slot markers.
+ */
 declare class KbqButtonToggleModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqButtonToggleModule, never>;
     static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqButtonToggleModule, never, [typeof i1.KbqButtonModule, typeof i2.KbqTitleModule, typeof KbqButtonToggleGroup, typeof KbqButtonToggle], [typeof KbqButtonToggleGroup, typeof KbqButtonToggle]>;