@koobiq/components 20.0.0 → 20.2.0

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,6 +9,8 @@
     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)
+    border: var(--kbq-size-3xs) solid transparent;
 
     @include common.user-select(none);
 

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

package/autocomplete/index.d.ts

@@ -1,10 +1,10 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { ElementRef, AfterContentInit, TemplateRef, QueryList, InjectionToken, 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, KeyboardNavigationHandler, KbqOptionSelectionChange } from '@koobiq/components/core';
+import { ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KbqPanelWidth, KbqPanelMaxWidth, KeyboardNavigationHandler, KbqOptionSelectionChange } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 
 /**
@@ -13,14 +13,14 @@ import { Observable } from 'rxjs';
  */
 declare class KbqAutocompleteOrigin {
     elementRef: ElementRef<HTMLElement>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteOrigin, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[kbqAutocompleteOrigin]", ["kbqAutocompleteOrigin"], {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteOrigin, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[kbqAutocompleteOrigin]", ["kbqAutocompleteOrigin"], {}, {}, never, never, true, never>;
 }
 
 /** Footer that is rendered below the autocomplete options panel. */
 declare class KbqAutocompleteFooter {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteFooter, "[kbqAutocompleteFooter], kbq-autocomplete-footer", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteFooter, "[kbqAutocompleteFooter], kbq-autocomplete-footer", never, {}, {}, never, never, true, never>;
 }
 declare class KbqAutocompleteSelectedEvent {
     source: KbqAutocomplete;
@@ -46,28 +46,36 @@ declare class KbqAutocomplete implements AfterContentInit {
     keyManager: ActiveDescendantKeyManager<KbqOption>;
     /** Whether the autocomplete panel should be visible, depending on option length. */
     showPanel: boolean;
-    readonly template: i0.Signal<TemplateRef<any>>;
-    readonly panel: i0.Signal<ElementRef<any>>;
+    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    readonly panel: _angular_core.Signal<ElementRef<any>>;
     options: QueryList<KbqOption>;
-    readonly optionGroups: i0.Signal<readonly KbqOptgroup[]>;
+    readonly optionGroups: _angular_core.Signal<readonly KbqOptgroup[]>;
     /** Function that maps an option's control value to its display value in the trigger. */
     displayWith: ((value: any) => string) | null;
     /**
-     * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
-     * match the width of its host.
+     * Specify the width of the autocomplete panel. If set to `auto`, the panel will match the width of
+     * its host, but will never be narrower than `panelMinWidth`. Any other CSS sizing value is used as an
+     * exact width, and `panelMinWidth` is not applied. When not set, the panel sizes to its content and is
+     * at least as wide as its host.
      */
-    panelWidth: string | number;
+    readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth | undefined>;
     /**
      * Minimum width of the panel in pixels.
      * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
      */
-    panelMinWidth: number;
+    readonly panelMinWidth: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
+     * the panel narrower than its host, and never clamps an explicit `panelWidth`.
+     * When null, the `--kbq-panel-size-width-max` token applies.
+     */
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
     /** Event that is emitted whenever an option from the list is selected. */
-    readonly optionSelected: i0.OutputEmitterRef<KbqAutocompleteSelectedEvent>;
+    readonly optionSelected: _angular_core.OutputEmitterRef<KbqAutocompleteSelectedEvent>;
     /** Event that is emitted when the autocomplete panel is opened. */
-    readonly opened: i0.OutputEmitterRef<void>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
     /** Event that is emitted when the autocomplete panel is closed. */
-    readonly closed: i0.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
     /**
      * Takes classes set on the host kbq-autocomplete element and applies them to the panel
      * inside the overlay container to allow for easy styling.
@@ -96,9 +104,8 @@ declare class KbqAutocomplete implements AfterContentInit {
     emitSelectEvent(option: KbqOption): void;
     onKeydown(event: KeyboardEvent): any;
     private updateFocusClass;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["optionGroups", "options"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
-    static ngAcceptInputType_panelMinWidth: unknown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocomplete, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["optionGroups", "options"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
 }
 
 /**
@@ -141,17 +148,17 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
     get activeOption(): KbqOption | null;
     get panelOpen(): boolean;
     /** The autocomplete panel to be attached to this trigger. */
-    readonly autocomplete: i0.InputSignal<KbqAutocomplete>;
+    readonly autocomplete: _angular_core.InputSignal<KbqAutocomplete>;
     /**
      * Reference relative to which to position the autocomplete panel.
      * Defaults to the autocomplete trigger element.
      */
-    readonly connectedTo: i0.InputSignal<KbqAutocompleteOrigin>;
+    readonly connectedTo: _angular_core.InputSignal<KbqAutocompleteOrigin>;
     /**
      * `autocomplete` attribute to be set on the input element.
      * @docs-private
      */
-    readonly autocompleteAttribute: i0.InputSignal<string>;
+    readonly autocompleteAttribute: _angular_core.InputSignal<string>;
     /**
      * Whether the autocomplete is disabled. When disabled, the element will
      * act as a regular input and the user won't be able to open the panel.
@@ -163,7 +170,7 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
      * Determines whether the blur event is triggered outside the specific target
      * @returns A boolean indicating if the blur event happened outside the target element
      */
-    readonly onInputBlur: i0.InputSignal<(event: FocusEvent) => boolean>;
+    readonly onInputBlur: _angular_core.InputSignal<(event: FocusEvent) => boolean>;
     private _autocompleteDisabled;
     private overlayAttached;
     private overlayRef;
@@ -242,7 +249,6 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
     private getOverlayConfig;
     private getOverlayPosition;
     private getConnectedElement;
-    private getPanelMinWidth;
     private getOverlaySize;
     private getHostWidth;
     /**
@@ -251,14 +257,14 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
      */
     private resetActiveItem;
     private canOpen;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; "isSignal": true; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; "isSignal": true; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; "isSignal": true; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; "isSignal": true; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class KbqAutocompleteModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof KbqAutocomplete, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter], [typeof KbqAutocomplete, typeof i1.KbqOptionModule, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof KbqAutocomplete, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter], [typeof KbqAutocomplete, typeof i1.KbqOptionModule, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
 }
 
 export { AUTOCOMPLETE_PANEL_HEIGHT, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, KbqAutocomplete, KbqAutocompleteFooter, KbqAutocompleteModule, KbqAutocompleteOrigin, KbqAutocompleteSelectedEvent, KbqAutocompleteTrigger, getKbqAutocompleteMissingPanelError };

package/badge/index.d.ts

@@ -1,5 +1,4 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit } from '@angular/core';
 import { KbqIconItem } from '@koobiq/components/icon';
 import * as i1 from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/platform';
@@ -25,14 +24,14 @@ declare const leftIconClassName = "kbq-icon_left";
 declare const rightIconClassName = "kbq-icon_right";
 declare const badgeLeftIconClassName = "kbq-badge-icon_left";
 declare const badgeRightIconClassName = "kbq-badge-icon_right";
-declare class KbqBadgeCssStyler implements AfterContentInit {
+declare class KbqBadgeCssStyler {
     private renderer;
     private cdr;
     readonly icons: i0.Signal<readonly any[]>;
     nativeElement: HTMLElement;
     isIconButton: boolean;
     constructor();
-    ngAfterContentInit(): void;
+    /** @docs-private */
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], never, true, never>;

package/breadcrumbs/breadcrumbs.scss

@@ -73,6 +73,10 @@
             --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
         }
 
+        &.kbq-dropdown-trigger {
+            --kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+        }
+
         &:focus-visible {
             outline-offset: unset;
         }

package/breadcrumbs/index.d.ts

@@ -211,6 +211,7 @@ declare class KbqBreadcrumbs {
     protected readonly separator?: TemplateRef<any>;
     protected readonly items: _angular_core.Signal<readonly KbqBreadcrumbItem[]>;
     private readonly breadcrumbsResult;
+    private readonly resultDropdownTrigger;
     private readonly result;
     private readonly overflowItems;
     private readonly overflowItemsDir;
@@ -230,7 +231,7 @@ declare class KbqBreadcrumbs {
     constructor();
     private enforceMaxVisible;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapMode": { "alias": "wrapMode"; "required": false; "isSignal": true; }; }, {}, ["items", "separator"], ["*"], true, [{ directive: typeof RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapMode": { "alias": "wrapMode"; "required": false; "isSignal": true; }; }, {}, ["items", "separator"], never, true, [{ directive: typeof RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class KbqBreadcrumbsModule {

package/button/button-group.scss

@@ -3,15 +3,55 @@
 .kbq-button-group {
     &.kbq-button-group_horizontal {
         @include groups-mixins.group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-right-color: transparent;
+        }
     }
 
     &.kbq-button-group_vertical {
         @include groups-mixins.vertical-group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-bottom-color: transparent;
+        }
     }
 
     &:not(:has(> :not(.kbq-contrast-fade.kbq-button_filled))),
     &:not(:has(> :not(.kbq-contrast.kbq-button_filled))) {
-        // @TODO tech debt (#DS-4847)
-        gap: var(--kbq-size-3xs);
+        :is(.kbq-button, .kbq-button-icon) {
+            background-clip: padding-box !important;
+        }
+    }
+
+    &.kbq-contrast-fade.kbq-button-group-root_filled {
+        // internal css variable, so don't prefixed with kbq
+        --button-group-divider-color: var(--kbq-line-contrast-fade);
+
+        &.kbq-button-group_horizontal {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                // offset by -1px because absolute positioning is relative to the padding edge,
+                // but the visual junction sits 1px to the left in the transparent border area
+                left: calc(-1 * var(--kbq-size-border-width));
+                top: 0;
+                bottom: 0;
+                width: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
+
+        &.kbq-button-group_vertical {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                top: calc(-1 * var(--kbq-size-border-width));
+                left: 0;
+                right: 0;
+                height: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
     }
 }

package/button-toggle/button-toggle.scss

@@ -54,6 +54,7 @@
 
             .kbq-button-toggle-wrapper {
                 display: inline-flex;
+                justify-content: center;
 
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -81,6 +82,28 @@
             }
         }
     }
+
+    &.kbq-button-toggle-group_stretched {
+        width: 100%;
+
+        .kbq-button-toggle {
+            flex: 1;
+
+            > .kbq-button,
+            > .kbq-button-icon {
+                width: 100%;
+                flex: 1;
+
+                .kbq-button-wrapper {
+                    justify-content: center;
+                }
+
+                .kbq-button-toggle-wrapper {
+                    display: block;
+                }
+            }
+        }
+    }
 }
 
 .kbq-button-toggle_vertical {

package/button-toggle/index.d.ts

@@ -32,6 +32,8 @@ declare class KbqButtonToggleGroup implements ControlValueAccessor, OnInit, Afte
     /** Whether the toggle group is vertical. */
     get vertical(): boolean;
     set vertical(value: boolean);
+    /** Whether the toggle group stretches to fill its container width, with toggles sharing equal space. */
+    readonly stretched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Value of the toggle group. */
     get value(): any;
     set value(newValue: any);
@@ -101,7 +103,7 @@ declare class KbqButtonToggleGroup implements ControlValueAccessor, OnInit, Afte
     /** Selects a value if there's a toggle that corresponds to it. */
     private selectValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "stretched": { "alias": "stretched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
 }
 /** Single button inside of a toggle group. */
 declare class KbqButtonToggle implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {

package/checkbox/checkbox.scss

@@ -32,9 +32,7 @@
 
     max-width: calc(100% - var(--padding));
 
-    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
-    // (e.g. pointer by default, regular when disabled), instead of the browser default.
-    cursor: inherit;
+    cursor: pointer;
 
     padding-top: var(--kbq-checkbox-size-normal-padding-top);
 
@@ -56,7 +54,6 @@
 .kbq-checkbox {
     display: inline-block;
 
-    cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
     max-width: 100%;
@@ -89,6 +86,10 @@
     &.kbq-disabled {
         cursor: default;
 
+        .kbq-checkbox__layout {
+            cursor: default;
+        }
+
         .kbq-checkbox__frame {
             box-shadow: none;
         }

package/clamped-text/index.d.ts

@@ -1,7 +1,7 @@
 import * as _koobiq_components_core from '@koobiq/components/core';
 import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, Provider, AfterViewInit, ElementRef } from '@angular/core';
+import { Signal, InjectionToken, Provider, OnInit, AfterViewInit, ElementRef } from '@angular/core';
 
 /**
  * Default maximum number of visible rows for the clamped text component
@@ -76,7 +76,7 @@ declare class KbqClampedListTrigger {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedListTrigger, "[kbqClampedListTrigger]", ["kbqClampedListTrigger"], {}, {}, never, never, true, never>;
 }
 
-declare class KbqClampedText implements KbqClamped, AfterViewInit {
+declare class KbqClampedText implements KbqClamped, OnInit, AfterViewInit {
     /**
      * Max rows before text is clamped.
      * @default kbqClampedTextDefaultMaxRows
@@ -109,6 +109,7 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
     private readonly destroyRef;
     private readonly elementRef;
     private readonly resizeObserver;
+    private readonly platform;
     /**
      * Clamped text locale configuration.
      * @docs-private
@@ -119,6 +120,7 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
      */
     private isEventFromToggle;
     constructor();
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     /** @docs-private */
     toggle(event: Event): void;