@koobiq/components 21.0.1 → 21.1.0

package/types/koobiq-components-navbar.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, AfterContentInit, AfterViewInit, OnDestroy, Signal, SimpleChanges, ChangeDetectorRef, AfterContentChecked, ElementRef, DestroyRef, QueryList, InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, OnChanges, AfterContentInit, AfterViewInit, OnDestroy, Signal, SimpleChanges, ChangeDetectorRef, AfterContentChecked, ElementRef, DestroyRef, QueryList, Provider } from '@angular/core';
 import * as i1 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i1$1 from '@angular/cdk/a11y';
@@ -16,6 +16,36 @@ import * as i2$1 from '@angular/cdk/platform';
 
 /** Orientation of the navbar an element belongs to. */
 type KbqNavbarOrientation = 'horizontal' | 'vertical';
+/**
+ * A custom interactive component projected into a navbar item in place of a button or a form field.
+ *
+ * Provide the component's own class as `KBQ_NAVBAR_ITEM_TRIGGER`, and the item hands keyboard focus and
+ * activation to it: it gets no synthetic click, stays the single tab stop of the navbar, and keeps working
+ * with arrow-key navigation. The component owns its overlay — a dropdown, a popover, or anything else — and
+ * must not be reachable by Tab on its own (`tabindex` stays with the navbar, which moves focus between items
+ * with the arrow keys).
+ *
+ * The item paints its hover, pressed, selected and keyboard-focus states around the component, so the
+ * component styles only its content and must not add a focus outline of its own.
+ */
+interface KbqNavbarItemTrigger {
+    /** Whether the component currently holds focus. */
+    readonly hasFocus: boolean;
+    /** Moves focus into the component. */
+    focus(): void;
+    /**
+     * Moves focus into the component as if it was reached with the keyboard — the focused element shows its
+     * keyboard focus state.
+     */
+    focusViaKeyboard?(): void;
+}
+/**
+ * Interactive content a navbar item recognizes as owning the interaction: a projected button or form field,
+ * or a custom component provided as `KBQ_NAVBAR_ITEM_TRIGGER`.
+ */
+type KbqNavbarNestedElement = KbqButton | KbqFormField | KbqNavbarItemTrigger;
+/** Makes a custom component projected into a navbar item the owner of the item's interaction. */
+declare const KBQ_NAVBAR_ITEM_TRIGGER: InjectionToken<KbqNavbarItemTrigger>;
 /** @docs-private */
 interface KbqNavbarFocusableItemEvent {
     item: KbqNavbarFocusableItem;
@@ -33,6 +63,18 @@ declare class KbqNavbarItemSuffix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItemSuffix, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarItemSuffix, "[kbqNavbarItemSuffix]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Marks arbitrary content of a navbar item that takes the spot of the item icon.
+ *
+ * The navbar reserves a 40×40px square for the content and leaves the positioning inside the square to the
+ * content itself: it can fill the whole square or render smaller with its own paddings. The square size is
+ * controlled by the `--kbq-navbar-item-size-custom-content-width` and `--kbq-navbar-item-size-custom-content-height`
+ * tokens.
+ */
+declare class KbqNavbarItemContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItemContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarItemContent, "[kbqNavbarItemContent]", never, {}, {}, never, never, true, never>;
+}
 declare class KbqNavbarTitle {
     /** @docs-private */
     protected readonly isBrowser: boolean;
@@ -79,8 +121,10 @@ declare class KbqNavbarFocusableItem implements OnChanges, AfterContentInit, Aft
     readonly button: Signal<KbqButton | undefined>;
     /** @docs-private */
     readonly formField: Signal<KbqFormField | undefined>;
+    /** Custom interactive component projected into the item, if any. @docs-private */
+    readonly customTrigger: Signal<KbqNavbarItemTrigger | undefined>;
     /** Interactive element projected into the item, if any. */
-    get nestedElement(): KbqButton | KbqFormField | undefined;
+    get nestedElement(): KbqNavbarNestedElement | undefined;
     /** @docs-private */
     get tooltip(): KbqTooltipTrigger;
     private _tooltip;
@@ -96,6 +140,19 @@ declare class KbqNavbarFocusableItem implements OnChanges, AfterContentInit, Aft
     get disabled(): boolean;
     set disabled(value: boolean);
     private readonly disabledState;
+    /**
+     * Keeps an element with nothing to interact with out of the roving focus order, without announcing or
+     * styling it as disabled.
+     *
+     * @docs-private
+     */
+    readonly decorative: i0.WritableSignal<boolean>;
+    /**
+     * Whether the item was disabled through `disabled`, as opposed to being decorative.
+     *
+     * @docs-private
+     */
+    get explicitlyDisabled(): boolean;
     /**
      * Items are never in the tab order themselves: the navbar host owns the single tab stop and moves focus
      * between items with the arrow keys (roving tabindex).
@@ -115,6 +172,13 @@ declare class KbqNavbarFocusableItem implements OnChanges, AfterContentInit, Aft
     setTooltip(value: KbqTooltipTrigger): void;
     /** @docs-private */
     onFocusHandler(): void;
+    /**
+     * Clears the keyboard focus ring once the focus leaves the item. The custom trigger takes the DOM focus
+     * from the item, so the CDK classes that drive the ring end up on the trigger and never come back.
+     *
+     * @docs-private
+     */
+    protected onFocusOut(event: FocusEvent): void;
     /** @docs-private */
     focus(origin?: FocusOrigin): void;
     /** @docs-private */
@@ -122,7 +186,7 @@ declare class KbqNavbarFocusableItem implements OnChanges, AfterContentInit, Aft
     /** @docs-private */
     getLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarFocusableItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["title", "button", "formField"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["title", "button", "formField", "customTrigger"], never, true, never>;
 }
 declare class KbqNavbarRectangleElement {
     /** @docs-private */
@@ -263,7 +327,7 @@ declare class KbqNavbarItem implements AfterContentInit {
     protected onKeyDown($event: KeyboardEvent): void;
     private updateDropdown;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "kbqTooltipDisabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, ["title", "icons"], ["[kbq-icon]:not([kbqNavbarItemSuffix])", "kbq-navbar-title, [kbq-navbar-title]", "[kbqNavbarItemSuffix]", "*"], true, [{ directive: typeof i1.KbqTooltipTrigger; inputs: { "kbqTooltip": "tooltipText"; "kbqTooltipClass": "kbqTooltipClass"; "kbqTooltipColor": "kbqTooltipColor"; "kbqTooltipContext": "kbqTooltipContext"; "kbqTooltipOffset": "kbqTooltipOffset"; "kbqTrigger": "kbqTrigger"; "kbqPlacement": "kbqPlacement"; "kbqPlacementPriority": "kbqPlacementPriority"; "kbqEnterDelay": "kbqEnterDelay"; "kbqLeaveDelay": "kbqLeaveDelay"; "kbqVisible": "kbqVisible"; }; outputs: { "kbqVisibleChange": "kbqVisibleChange"; "kbqPlacementChange": "kbqPlacementChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "kbqTooltipDisabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, ["title", "icons"], ["[kbq-icon]:not([kbqNavbarItemSuffix]), [kbqNavbarItemContent]", "kbq-navbar-title, [kbq-navbar-title]", "[kbqNavbarItemSuffix]", "*"], true, [{ directive: typeof i1.KbqTooltipTrigger; inputs: { "kbqTooltip": "tooltipText"; "kbqTooltipClass": "kbqTooltipClass"; "kbqTooltipColor": "kbqTooltipColor"; "kbqTooltipContext": "kbqTooltipContext"; "kbqTooltipOffset": "kbqTooltipOffset"; "kbqTrigger": "kbqTrigger"; "kbqPlacement": "kbqPlacement"; "kbqPlacementPriority": "kbqPlacementPriority"; "kbqEnterDelay": "kbqEnterDelay"; "kbqLeaveDelay": "kbqLeaveDelay"; "kbqVisible": "kbqVisible"; }; outputs: { "kbqVisibleChange": "kbqVisibleChange"; "kbqPlacementChange": "kbqPlacementChange"; }; }]>;
 }
 
 declare class KbqNavbarBrand implements AfterContentInit {
@@ -561,9 +625,9 @@ declare class KbqNavbarToggle implements OnDestroy {
 
 declare class KbqNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, never, [typeof i1$1.A11yModule, typeof i2$1.PlatformModule, typeof i3.KbqIconModule, typeof i1.KbqToolTipModule, typeof KbqNavbar, typeof KbqNavbarContainer, typeof KbqNavbarTitle, typeof KbqNavbarItem, typeof KbqNavbarBrand, typeof KbqNavbarLogo, typeof KbqNavbarToggle, typeof KbqVerticalNavbar, typeof KbqNavbarDivider, typeof KbqNavbarFocusableItem, typeof KbqNavbarRectangleElement, typeof KbqNavbarBento, typeof KbqNavbarItemSuffix], [typeof KbqNavbar, typeof KbqNavbarContainer, typeof KbqNavbarTitle, typeof KbqNavbarItem, typeof KbqNavbarBrand, typeof KbqNavbarLogo, typeof KbqNavbarToggle, typeof KbqVerticalNavbar, typeof KbqNavbarDivider, typeof KbqNavbarFocusableItem, typeof KbqNavbarRectangleElement, typeof KbqNavbarBento, typeof KbqNavbarItemSuffix]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, never, [typeof i1$1.A11yModule, typeof i2$1.PlatformModule, typeof i3.KbqIconModule, typeof i1.KbqToolTipModule, typeof KbqNavbar, typeof KbqNavbarContainer, typeof KbqNavbarTitle, typeof KbqNavbarItem, typeof KbqNavbarBrand, typeof KbqNavbarLogo, typeof KbqNavbarToggle, typeof KbqVerticalNavbar, typeof KbqNavbarDivider, typeof KbqNavbarFocusableItem, typeof KbqNavbarRectangleElement, typeof KbqNavbarBento, typeof KbqNavbarItemContent, typeof KbqNavbarItemSuffix], [typeof KbqNavbar, typeof KbqNavbarContainer, typeof KbqNavbarTitle, typeof KbqNavbarItem, typeof KbqNavbarBrand, typeof KbqNavbarLogo, typeof KbqNavbarToggle, typeof KbqVerticalNavbar, typeof KbqNavbarDivider, typeof KbqNavbarFocusableItem, typeof KbqNavbarRectangleElement, typeof KbqNavbarBento, typeof KbqNavbarItemContent, typeof KbqNavbarItemSuffix]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqNavbarModule>;
 }
 
-export { KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION, KBQ_NAVBAR_LOCALE_CONFIGURATION, KBQ_VERTICAL_NAVBAR_CONFIGURATION, KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION, KbqFocusableComponent, KbqNavbar, KbqNavbarBento, KbqNavbarBrand, KbqNavbarContainer, KbqNavbarDivider, KbqNavbarFocusableItem, KbqNavbarItem, KbqNavbarItemSuffix, KbqNavbarLogo, KbqNavbarModule, KbqNavbarRectangleElement, KbqNavbarTitle, KbqNavbarToggle, KbqNavbarToggleRegistry, KbqVerticalNavbar, kbqNavbarLocaleConfigurationProvider };
-export type { KbqNavbarFocusableItemEvent, KbqNavbarOrientation };
+export { KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION, KBQ_NAVBAR_ITEM_TRIGGER, KBQ_NAVBAR_LOCALE_CONFIGURATION, KBQ_VERTICAL_NAVBAR_CONFIGURATION, KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION, KbqFocusableComponent, KbqNavbar, KbqNavbarBento, KbqNavbarBrand, KbqNavbarContainer, KbqNavbarDivider, KbqNavbarFocusableItem, KbqNavbarItem, KbqNavbarItemContent, KbqNavbarItemSuffix, KbqNavbarLogo, KbqNavbarModule, KbqNavbarRectangleElement, KbqNavbarTitle, KbqNavbarToggle, KbqNavbarToggleRegistry, KbqVerticalNavbar, kbqNavbarLocaleConfigurationProvider };
+export type { KbqNavbarFocusableItemEvent, KbqNavbarItemTrigger, KbqNavbarNestedElement, KbqNavbarOrientation };

package/types/koobiq-components-notification-center.d.ts

@@ -144,7 +144,20 @@ declare class KbqNotificationCenterService {
     set items(values: KbqNotificationItem[]);
     /** Whether there are no notifications. A snapshot, like `items`. */
     get isEmpty(): boolean;
+    /**
+     * Whether there are no notifications, for the center's own view to follow.
+     *
+     * @docs-private
+     */
+    readonly empty: Signal<boolean>;
     constructor();
+    /**
+     * Whether a notification is read, for a view to follow: `read` is flipped in place on the consumer's object,
+     * so a view handed that object is not told.
+     *
+     * @docs-private
+     */
+    isRead(item: KbqNotificationItem): boolean;
     /** Set silent mode */
     setSilentMode(value: boolean): void;
     /** Set loading mode */

package/types/koobiq-components-overflow-items.d.ts

@@ -1,6 +1,16 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { KbqOrientation, KbqFlexWrap } from '@koobiq/components/core';
 
+/**
+ * Elements that `KbqOverflowItems` observes for resize changes on top of its own element and
+ * `additionalResizeObserverTargets`. Provided by a component that is as wide as its content, such as the actions panel:
+ * items hidden by `KbqOverflowItems` drop out of that width, so the component does not grow back by itself once there
+ * is room for them again, and only the element that bounds it reports that room.
+ *
+ * @docs-private
+ */
+declare const KBQ_OVERFLOW_ITEMS_RESIZE_OBSERVER_TARGETS: InjectionToken<readonly Element[]>;
 /**
  * Manages the visibility of the element.
  *
@@ -76,6 +86,7 @@ declare class KbqOverflowItems {
     private readonly document;
     private readonly window;
     private readonly platform;
+    private readonly resizeObserverTargets;
     /**
      * `KbqOverflowItem` directive references.
      */
@@ -102,7 +113,8 @@ declare class KbqOverflowItems {
      */
     readonly additionalResizeObserverTargets: _angular_core.InputSignal<Element | Element[]>;
     /**
-     * Emits when the set of hidden items changes.
+     * Emits the set of hidden items after every recalculation, also when it has not changed: a recalculation shows every
+     * item before it hides the overflown ones again, so a consumer that hides items itself re-applies that here.
      */
     readonly changes: _angular_core.OutputEmitterRef<ReadonlySet<unknown>>;
     /**
@@ -117,6 +129,7 @@ declare class KbqOverflowItems {
      * Defines the wrap of the overflow items. Defaults to `'nowrap'`.
      */
     readonly wrap: _angular_core.InputSignal<KbqFlexWrap>;
+    /** The main axis of each orientation, as the `DOMRect` and `CSSStyleDeclaration` members to read. */
     private readonly orientationConfig;
     constructor();
     private setupObservers;
@@ -135,6 +148,17 @@ declare class KbqOverflowItems {
      */
     private setStyles;
     private hasOverflown;
+    /**
+     * Measures how far the children of the container that take part in its layout exceed its content box along the
+     * main axis, and the space each of them takes, its margins and one gap included.
+     */
+    private measure;
+    /**
+     * Children of the element that take part in its flex layout: neither `display: none` nor taken out of flow, as
+     * hidden items are, with the children of a `display: contents` child in its place.
+     */
+    private getLaidOutChildren;
+    private px;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }
@@ -145,4 +169,4 @@ declare class KbqOverflowItemsModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqOverflowItemsModule>;
 }
 
-export { ElementVisibilityManager, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule, KbqOverflowItemsResult };
+export { ElementVisibilityManager, KBQ_OVERFLOW_ITEMS_RESIZE_OBSERVER_TARGETS, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule, KbqOverflowItemsResult };

package/types/koobiq-components-popover.d.ts

@@ -2,10 +2,11 @@ import * as _angular_core from '@angular/core';
 import { Provider, InjectionToken, AfterViewInit, TemplateRef, OnChanges, AfterContentInit, OnInit, DestroyRef, EventEmitter, InputSignal, SimpleChanges, Type, ElementRef } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { Subject } from 'rxjs';
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
+import { ScrollStrategy, ScrollDispatcher, OverlayConfig, OverlayRef, CdkScrollable } from '@angular/cdk/overlay';
 import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqPopUp, KbqPopUpTrigger, KbqPopUpPlacementValues, KbqStickToWindowPlacementValues, KbqPopUpSizeValues, KbqOverlayOrigin, KbqOverflowShadowContainer, KbqComponentColors } from '@koobiq/components/core';
+import { KbqPopUp, KbqPopUpTrigger, KbqPopUpPlacementValues, KbqStickToWindowPlacementValues, KbqPopUpSizeValues, KbqOverlayOrigin, KbqCaretRect, KbqOverflowShadowContainer, KbqComponentColors } from '@koobiq/components/core';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { ScrollStrategy, ScrollDispatcher, OverlayConfig, OverlayRef, CdkScrollable } from '@angular/cdk/overlay';
 
 declare const defaultOffsetYWithArrow = 8;
 /** Leave delay applied to a hover-triggered popover when `kbqLeaveDelay` is not bound. */
@@ -25,6 +26,7 @@ declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
     /** Debounce shared by the mutation observer and the scroll-shadow container (both expose `debounce`). */
     protected readonly contentObserverDebounce = 15;
     prefix: string;
+    protected arrowCenterInset: number;
     header: string | TemplateRef<any>;
     footer: string | TemplateRef<any>;
     trigger: KbqPopoverTrigger;
@@ -218,6 +220,11 @@ declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> imp
     set popoverBackdropClass(value: string);
     /** Input (`kbqPopoverArrow`) — renders the arrow pointing at the trigger. */
     arrow: boolean;
+    /**
+     * Input (`kbqPopoverArrowCentered`) — centers the arrow on the trigger while preserving the panel placement.
+     * Defaults to `false`.
+     */
+    arrowCentered: boolean;
     /** Input (`kbqPopoverOffset`) — distance between the trigger and the panel, in pixels. */
     offset: number | null;
     /**
@@ -226,6 +233,11 @@ declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> imp
      * collapses it. Focus then never enters the panel, so its content has to be reachable some other way.
      */
     autoFocus: boolean;
+    /**
+     * Input (`kbqRelativeToPointer`) — positions a click-opened popover at the click point. Keyboard and
+     * programmatic opens stay on the trigger. An explicit `kbqPopoverOrigin` takes precedence. Defaults to `false`.
+     */
+    relativeToPointer: boolean;
     /**
      * Input (`kbqPopoverOrigin`) — what the panel is positioned against: an element, or a rectangle in viewport
      * coordinates such as the one `kbqCreateCaretOrigin` keeps on the caret. `null` anchors it to the trigger.
@@ -259,6 +271,8 @@ declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> imp
     protected originSelector: string;
     /** Whether a position re-apply is already queued for this turn. */
     private repositionScheduled;
+    private pointerOffset;
+    private readonly pointerOrigin;
     /**
      * Whether the open currently on screen was a deliberate one rather than a pointer or focus one.
      *
@@ -308,10 +322,14 @@ declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> imp
     /** @docs-private */
     readonly arrowInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
     /** @docs-private */
+    readonly arrowCenteredInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
     readonly offsetInput: _angular_core.InputSignalWithTransform<number | undefined, string | number | null | undefined>;
     /** @docs-private */
     readonly autoFocusInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
     /** @docs-private */
+    readonly relativeToPointerInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
     readonly popoverOriginInput: InputSignal<KbqOverlayOrigin | null | undefined>;
     /** @docs-private */
     readonly disabledInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
@@ -326,6 +344,23 @@ declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> imp
     ngAfterContentInit(): void;
     /** @docs-private */
     show(delay?: number): void;
+    /** Current click point in viewport coordinates, or `null` when the host or an explicit origin is used. @docs-private */
+    getPointerPoint(): {
+        x: number;
+        y: number;
+    } | null;
+    /** Click point when pointer-relative positioning is active, otherwise the shared origin point. @docs-private */
+    getArrowPoint(): {
+        x: number;
+        y: number;
+    } | null;
+    /** @docs-private */
+    protected getResolvedOrigin(): _angular_cdk_overlay.FlexibleConnectedPositionStrategyOrigin | Readonly<KbqCaretRect>;
+    /** @docs-private */
+    protected getAnchorSize(): {
+        width: number;
+        height: number;
+    };
     /** @docs-private */
     updateData(): void;
     /** Body of `updateData()`. */
@@ -382,7 +417,7 @@ declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> imp
     /** Closes the popover once its trigger has scrolled out of a `.kbq-hide-nested-popup` container. */
     private hideIfNestedPopupScrolledAway;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverHideIfNotInViewPort": { "alias": "kbqPopoverHideIfNotInViewPort"; "required": false; "isSignal": true; }; "triggerInput": { "alias": "kbqTrigger"; "required": false; "isSignal": true; }; "kbqLeaveDelayInput": { "alias": "kbqLeaveDelay"; "required": false; "isSignal": true; }; "enterDelayInput": { "alias": "kbqEnterDelay"; "required": false; "isSignal": true; }; "preventCloseInput": { "alias": "kbqPopoverPreventClose"; "required": false; "isSignal": true; }; "stickToWindowInput": { "alias": "kbqPopoverStickToWindow"; "required": false; "isSignal": true; }; "popoverContainerInput": { "alias": "kbqPopoverContainer"; "required": false; "isSignal": true; }; "popoverHasBackdropInput": { "alias": "kbqPopoverHasBackdrop"; "required": false; "isSignal": true; }; "popoverBackdropClassInput": { "alias": "kbqPopoverBackdropClass"; "required": false; "isSignal": true; }; "popoverDefaultPaddingsInput": { "alias": "kbqPopoverDefaultPaddings"; "required": false; "isSignal": true; }; "sizeInput": { "alias": "kbqPopoverSize"; "required": false; "isSignal": true; }; "customClassInput": { "alias": "kbqPopoverClass"; "required": false; "isSignal": true; }; "headerInput": { "alias": "kbqPopoverHeader"; "required": false; "isSignal": true; }; "contentInput": { "alias": "kbqPopoverContent"; "required": false; "isSignal": true; }; "footerInput": { "alias": "kbqPopoverFooter"; "required": false; "isSignal": true; }; "contextInput": { "alias": "kbqPopoverContext"; "required": false; "isSignal": true; }; "ariaLabelInput": { "alias": "kbqPopoverAriaLabel"; "required": false; "isSignal": true; }; "popoverHasCloseButtonInput": { "alias": "kbqPopoverHasCloseButton"; "required": false; "isSignal": true; }; "popoverCloseOnScrollInput": { "alias": "kbqPopoverCloseOnScroll"; "required": false; "isSignal": true; }; "arrowInput": { "alias": "kbqPopoverArrow"; "required": false; "isSignal": true; }; "offsetInput": { "alias": "kbqPopoverOffset"; "required": false; "isSignal": true; }; "autoFocusInput": { "alias": "kbqPopoverAutoFocus"; "required": false; "isSignal": true; }; "popoverOriginInput": { "alias": "kbqPopoverOrigin"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "kbqPopoverDisabled"; "required": false; "isSignal": true; }; "popoverPlacementPriorityInput": { "alias": "kbqPopoverPlacementPriority"; "required": false; "isSignal": true; }; "popoverPlacementInput": { "alias": "kbqPopoverPlacement"; "required": false; "isSignal": true; }; "popoverVisibleInput": { "alias": "kbqPopoverVisible"; "required": false; "isSignal": true; }; }, { "placementChangeOutput": "kbqPopoverPlacementChange"; "visibleChangeOutput": "kbqPopoverVisibleChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverHideIfNotInViewPort": { "alias": "kbqPopoverHideIfNotInViewPort"; "required": false; "isSignal": true; }; "triggerInput": { "alias": "kbqTrigger"; "required": false; "isSignal": true; }; "kbqLeaveDelayInput": { "alias": "kbqLeaveDelay"; "required": false; "isSignal": true; }; "enterDelayInput": { "alias": "kbqEnterDelay"; "required": false; "isSignal": true; }; "preventCloseInput": { "alias": "kbqPopoverPreventClose"; "required": false; "isSignal": true; }; "stickToWindowInput": { "alias": "kbqPopoverStickToWindow"; "required": false; "isSignal": true; }; "popoverContainerInput": { "alias": "kbqPopoverContainer"; "required": false; "isSignal": true; }; "popoverHasBackdropInput": { "alias": "kbqPopoverHasBackdrop"; "required": false; "isSignal": true; }; "popoverBackdropClassInput": { "alias": "kbqPopoverBackdropClass"; "required": false; "isSignal": true; }; "popoverDefaultPaddingsInput": { "alias": "kbqPopoverDefaultPaddings"; "required": false; "isSignal": true; }; "sizeInput": { "alias": "kbqPopoverSize"; "required": false; "isSignal": true; }; "customClassInput": { "alias": "kbqPopoverClass"; "required": false; "isSignal": true; }; "headerInput": { "alias": "kbqPopoverHeader"; "required": false; "isSignal": true; }; "contentInput": { "alias": "kbqPopoverContent"; "required": false; "isSignal": true; }; "footerInput": { "alias": "kbqPopoverFooter"; "required": false; "isSignal": true; }; "contextInput": { "alias": "kbqPopoverContext"; "required": false; "isSignal": true; }; "ariaLabelInput": { "alias": "kbqPopoverAriaLabel"; "required": false; "isSignal": true; }; "popoverHasCloseButtonInput": { "alias": "kbqPopoverHasCloseButton"; "required": false; "isSignal": true; }; "popoverCloseOnScrollInput": { "alias": "kbqPopoverCloseOnScroll"; "required": false; "isSignal": true; }; "arrowInput": { "alias": "kbqPopoverArrow"; "required": false; "isSignal": true; }; "arrowCenteredInput": { "alias": "kbqPopoverArrowCentered"; "required": false; "isSignal": true; }; "offsetInput": { "alias": "kbqPopoverOffset"; "required": false; "isSignal": true; }; "autoFocusInput": { "alias": "kbqPopoverAutoFocus"; "required": false; "isSignal": true; }; "relativeToPointerInput": { "alias": "kbqRelativeToPointer"; "required": false; "isSignal": true; }; "popoverOriginInput": { "alias": "kbqPopoverOrigin"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "kbqPopoverDisabled"; "required": false; "isSignal": true; }; "popoverPlacementPriorityInput": { "alias": "kbqPopoverPlacementPriority"; "required": false; "isSignal": true; }; "popoverPlacementInput": { "alias": "kbqPopoverPlacement"; "required": false; "isSignal": true; }; "popoverVisibleInput": { "alias": "kbqPopoverVisible"; "required": false; "isSignal": true; }; }, { "placementChangeOutput": "kbqPopoverPlacementChange"; "visibleChangeOutput": "kbqPopoverVisibleChange"; }, never, never, true, never>;
 }
 
 /**

package/types/koobiq-components-radio.d.ts

@@ -71,8 +71,32 @@ declare class KbqRadioGroup extends KbqColorDirective implements AfterContentChe
     ngOnChanges(changes: SimpleChanges): void;
     /** Whether the radio group is required */
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Value of `aria-invalid`: set whenever the group is painted as invalid.
+     *
+     * @docs-private
+     */
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /** Error text projected into the group. */
     private readonly error;
+    /**
+     * Whether the projected `kbq-error` is shown. Without one, nothing is rendered under the options.
+     *
+     * @docs-private
+     */
+    protected readonly showError: _angular_core.Signal<boolean>;
+    /**
+     * Id of the element wrapping the projected `kbq-error`.
+     *
+     * @docs-private
+     */
+    protected readonly errorId: string;
+    /**
+     * Hints of the group itself, shown under the options. The hints of the buttons are their own.
+     *
+     * @docs-private
+     */
+    protected readonly hints: _angular_core.Signal<readonly KbqHint[]>;
     /** Ids the group last added to `aria-describedby` of the host, so the consumer's own survive an update. */
     private ownDescribedByIds;
     private readonly renderer;
@@ -215,6 +239,12 @@ declare class KbqRadioButton extends KbqColorDirective implements OnChanges, OnI
     readonly change: _angular_core.OutputEmitterRef<KbqRadioChange>;
     /** The parent radio group. `null` when the button is used outside one. */
     radioGroup: KbqRadioGroup | null;
+    /**
+     * Whether the button takes the big size of its group.
+     *
+     * @docs-private
+     */
+    protected readonly big: _angular_core.Signal<boolean>;
     private readonly uniqueId;
     /**
      * A unique id for the radio button. If none is supplied — or `null` is bound explicitly — it is

package/types/koobiq-components-search-expandable.d.ts

@@ -145,7 +145,17 @@ declare class KbqSearchExpandable implements OnChanges, ControlValueAccessor, Af
      * @docs-private
      */
     protected onEnter(event: Event): void;
+    /**
+     * Clears a non-empty field on `Escape`, or collapses an empty one. On `keydown` and spent, so that a container
+     * closing on the key, such as a modal, stays open.
+     *
+     * @docs-private
+     */
+    protected onEscape(event: Event): void;
+    /** @docs-private */
+    protected onSuffixClick(): void;
     private setOpened;
+    private resetValue;
     /** Moves focus back onto the collapsed button, keeping its tooltip from opening on the way. */
     private restoreFocusToButton;
     private emitValue;

package/types/koobiq-components-select.d.ts

@@ -144,6 +144,12 @@ declare class KbqSelectChange {
 }
 /** Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token. */
 type KbqSelectOptions = Partial<{
+    /**
+     * Whether option text wraps onto multiple lines. When `panelWidth` is nullish, the panel matches the trigger
+     * width; an explicit `panelWidth` takes precedence. Not supported with `cdk-virtual-scroll-viewport`: the panel
+     * modifier and automatic width fallback are not applied. Defaults to `false`.
+     */
+    multilineOptions: boolean;
     /**
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
@@ -178,6 +184,12 @@ type KbqSelectOptions = Partial<{
 }>;
 /** Injection token that can be used to provide the default options for the `kbq-select`. */
 declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
+    /**
+     * Whether option text wraps onto multiple lines. When `panelWidth` is nullish, the panel matches the trigger
+     * width; an explicit `panelWidth` takes precedence. Not supported with `cdk-virtual-scroll-viewport`: the panel
+     * modifier and automatic width fallback are not applied. Defaults to `false`.
+     */
+    multilineOptions: boolean;
     /**
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
@@ -239,6 +251,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterViewChecked, A
     protected readonly destroyRef: DestroyRef;
     protected readonly isBrowser: boolean;
     protected readonly defaultOptions: Partial<{
+        /**
+         * Whether option text wraps onto multiple lines. When `panelWidth` is nullish, the panel matches the trigger
+         * width; an explicit `panelWidth` takes precedence. Not supported with `cdk-virtual-scroll-viewport`: the panel
+         * modifier and automatic width fallback are not applied. Defaults to `false`.
+         */
+        multilineOptions: boolean;
         /**
          * Width of the panel. If set to `auto`, the panel will match the trigger width.
          * If set to null or an empty string, the panel will grow to match the longest option's text.
@@ -445,6 +463,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterViewChecked, A
      * When true, allows multiple lines of text in the selected value display.
      */
     readonly multiline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether option text wraps onto multiple lines. When `panelWidth` is nullish, the panel matches the trigger
+     * width; an explicit `panelWidth` takes precedence. Not supported with `cdk-virtual-scroll-viewport`: the panel
+     * modifier and automatic width fallback are not applied. Defaults to `false`.
+     */
+    readonly multilineOptions: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
     /**
      * Controls when the search functionality is displayed based on the number of available options.
      *
@@ -639,6 +663,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterViewChecked, A
     readonly disabled: _angular_core.WritableSignal<boolean>;
     private readonly resolvedTabIndex;
     private readonly resolvedAriaLabelValue;
+    /** @docs-private */
+    protected readonly disabledAttribute: _angular_core.Signal<true | null>;
+    /** @docs-private */
+    protected readonly disabledClass: _angular_core.Signal<boolean>;
+    /** @docs-private */
+    protected readonly invalidClass: _angular_core.Signal<boolean>;
     private readonly focusedValue;
     private readonly panelOpenValue;
     /** Whether the select is focused. */
@@ -838,6 +868,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterViewChecked, A
      * Sets up the overlay dimensions based on trigger size and configured options.
      */
     openPanel(): void;
+    private updatePanelWidth;
+    private getEffectivePanelWidth;
     private attachPanel;
     /** Closes the overlay panel. */
     close(): void;
@@ -912,10 +944,10 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterViewChecked, A
     /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme(): string;
     /**
-     * Returns the full set of classes for the panel: base class, theme and custom `panelClass`.
+     * Returns the full set of classes for the panel: base class, multiline modifier, theme and custom `panelClass`.
      *
-     * Only the theme is read per change detection — it comes from the form field, which does not expose
-     * its color as a signal — while the `panelClass` expansion is memoised.
+     * The theme comes from the form field, which does not expose its color as a signal, while the `panelClass`
+     * expansion is memoised.
      */
     protected getPanelClasses(): string;
     /** Focuses the select element. */
@@ -1076,7 +1108,7 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterViewChecked, A
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
     private defaultSelectAllHandler;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; "isSignal": true; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThresholdInput": { "alias": "searchMinOptionsThreshold"; "required": false; "isSignal": true; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "clearPredicate": { "alias": "clearPredicate"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllHandlerInput": { "alias": "selectAllHandler"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "tabIndexInput": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "openedChangeOutput": "openedChange"; "beforeOpened": "beforeOpened"; "openedOutput": "opened"; "closedOutput": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["projectedScrollbarViewport", "footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionsQuery", "optionGroups", "search", "searchEmpty"], ["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]"], true, [{ directive: typeof i2.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; "isSignal": true; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "multilineOptions": { "alias": "multilineOptions"; "required": false; "isSignal": true; }; "searchMinOptionsThresholdInput": { "alias": "searchMinOptionsThreshold"; "required": false; "isSignal": true; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "clearPredicate": { "alias": "clearPredicate"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllHandlerInput": { "alias": "selectAllHandler"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "tabIndexInput": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "openedChangeOutput": "openedChange"; "beforeOpened": "beforeOpened"; "openedOutput": "opened"; "closedOutput": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["projectedScrollbarViewport", "footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionsQuery", "optionGroups", "search", "searchEmpty"], ["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]"], true, [{ directive: typeof i2.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
 declare class KbqSelectModule {

package/types/koobiq-components-sidepanel.d.ts

@@ -75,6 +75,25 @@ declare class KbqSidepanelConfig<D = any> {
     scrollStrategy?: () => ScrollStrategy;
 }
 
+/** @docs-private */
+declare enum KbqSidepanelAnimationState {
+    Void = "void",
+    Visible = "visible",
+    Hidden = "hidden",
+    Lower = "lower",
+    BottomPanel = "bottom-panel",
+    BecomingNormal = "becoming-normal"
+}
+/**
+ * A state transition of the sidepanel container: started, or ended — finished, or interrupted by the next one.
+ *
+ * @docs-private
+ */
+interface KbqSidepanelAnimationEvent {
+    phaseName: 'start' | 'done';
+    toState: KbqSidepanelAnimationState;
+}
+
 declare const KBQ_SIDEPANEL_WITH_INDENT: InjectionToken<boolean>;
 declare class KbqSidepanelContainerComponent extends BasePortalOutlet implements OnDestroy {
     private elementRef;
@@ -100,6 +119,18 @@ declare class KbqSidepanelContainerComponent extends BasePortalOutlet implements
     private readonly _ariaLabelledBy;
     /** The portal outlet inside of this container into which the content will be loaded. */
     readonly portalOutlet: i0.Signal<CdkPortalOutlet>;
+    /**
+     * The state of the sidepanel: on screen, closing, or stacked under another one.
+     *
+     * @docs-private
+     */
+    readonly animationState: i0.WritableSignal<KbqSidepanelAnimationState>;
+    /**
+     * Reports each state transition starting and ending.
+     *
+     * @docs-private
+     */
+    readonly animationStateChanged: Subject<KbqSidepanelAnimationEvent>;
     /** The transition in progress, ended early by the next one. */
     private pendingTransition?;
     /** Transition events held until the render that applies the state, in the order they happened. */
@@ -136,6 +167,20 @@ declare class KbqSidepanelContainerComponent extends BasePortalOutlet implements
     enter(): void;
     /** Begin animation of the sidepanel exiting from view. */
     exit(): void;
+    /** @docs-private */
+    setAnimationState(state: KbqSidepanelAnimationState): void;
+    /**
+     * Transform of the panel in its current state.
+     *
+     * @docs-private
+     */
+    protected readonly stateTransform: i0.Signal<string | null>;
+    /**
+     * Opacity of the panel in its current state.
+     *
+     * @docs-private
+     */
+    protected readonly stateOpacity: i0.Signal<number | null>;
     /**
      * Recomputes whether this panel exposes an indent strip, after the stack it belongs to changed.
      *
@@ -209,13 +254,19 @@ declare class KbqSidepanelRef<T = any, R = any> {
  * Button that will close the current sidepanel.
  */
 declare class KbqSidepanelClose {
-    readonly sidepanelRef: KbqSidepanelRef<any, any>;
+    private readonly declaredSidepanelRef;
+    private readonly sidepanelService;
     private readonly elementRef;
     private readonly renderer;
     /** Value handed to `KbqSidepanelRef.close()`, under the hyphenated spelling of the selector. */
     readonly sidepanelResult: i0.InputSignal<any>;
     /** The same value, under the camel-case spelling. */
     readonly kbqSidepanelClose: i0.InputSignal<any>;
+    /**
+     * Sidepanel the button closes: the one it is rendered in. A button rendered outside any sidepanel, such as
+     * an item of a dropdown opened from one, closes the sidepanel its template is declared in.
+     */
+    get sidepanelRef(): KbqSidepanelRef;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelClose, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelClose, "button[kbq-sidepanel-close], button[kbqSidepanelClose]", never, { "sidepanelResult": { "alias": "kbq-sidepanel-close"; "required": false; "isSignal": true; }; "kbqSidepanelClose": { "alias": "kbqSidepanelClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;