@koobiq/components 20.1.0 → 20.3.0

package/autocomplete/index.d.ts

@@ -1,10 +1,10 @@
-import * as i0 from '@angular/core';
-import { ElementRef, AfterContentInit, TemplateRef, QueryList, InjectionToken, Provider, AfterViewInit, OnDestroy } from '@angular/core';
+import * as _angular_core 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, KeyboardNavigationHandler, KbqOptionSelectionChange } from '@koobiq/components/core';
+import { ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KbqPanelWidth, KbqPanelMaxWidth, KeyboardNavigationHandler, KbqSiblingPopup, 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,19 +104,23 @@ 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>;
 }
 
 /**
- * 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: {
@@ -126,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>;
@@ -141,17 +153,27 @@ 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>;
+    /** 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.
      */
-    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 +185,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 +264,6 @@ declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAcces
     private getOverlayConfig;
     private getOverlayPosition;
     private getConnectedElement;
-    private getPanelMinWidth;
     private getOverlaySize;
     private getHostWidth;
     /**
@@ -251,14 +272,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/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]>;

package/checkbox/index.d.ts

@@ -1,7 +1,9 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, Provider } from '@angular/core';
 import { ControlValueAccessor, CheckboxRequiredValidator } from '@angular/forms';
-import { KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { KbqCheckableClickAction, KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
+export { TransitionCheckState } from '@koobiq/components/core';
 
 /**
  * Checkbox click action when user click on input element.
@@ -10,32 +12,19 @@ import { KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
  * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
  * undefined: Same as `check-indeterminate`.
  */
-type KbqCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
+type KbqCheckboxClickAction = KbqCheckableClickAction;
 /**
  * Injection token that can be used to specify the checkbox click behavior.
  */
-declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckboxClickAction>;
+declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckableClickAction>;
 
 /**
  * Provider Expression that allows kbq-checkbox to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
  * @docs-private
+ * @deprecated Unused - the `ControlValueAccessor` is now registered by the `KbqCheckable` host directive.
  */
 declare const KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
-/**
- * Represents the different states that require custom transitions between them.
- * @docs-private
- */
-declare enum TransitionCheckState {
-    /** The initial state of the component before any user interaction. */
-    Init = "init",
-    /** The state representing the component when it's becoming checked. */
-    Checked = "checked",
-    /** The state representing the component when it's becoming unchecked. */
-    Unchecked = "unchecked",
-    /** The state representing the component when it's becoming indeterminate. */
-    Indeterminate = "indeterminate"
-}
 /** Change event object emitted by KbqCheckbox. */
 declare class KbqCheckboxChange {
     /** The source KbqCheckbox of the event. */
@@ -51,8 +40,9 @@ declare class KbqCheckboxChange {
  * have the checkbox be accessible, you may supply an [aria-label] input.
  */
 declare class KbqCheckbox extends KbqColorDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {
-    private changeDetectorRef;
-    private focusMonitor;
+    private readonly changeDetectorRef;
+    private readonly focusMonitor;
+    private readonly checkable;
     readonly big: _angular_core.InputSignal<boolean>;
     /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
     id: string;
@@ -79,14 +69,11 @@ declare class KbqCheckbox extends KbqColorDirective implements ControlValueAcces
      */
     get checked(): boolean;
     set checked(value: boolean);
-    private _checked;
     /** Whether the checkbox is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
-    private _disabled;
     get tabIndex(): number;
     set tabIndex(value: number);
-    private _tabIndex;
     /**
      * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
      * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
@@ -95,23 +82,42 @@ declare class KbqCheckbox extends KbqColorDirective implements ControlValueAcces
      */
     get indeterminate(): boolean;
     set indeterminate(value: boolean);
-    private _indeterminate;
     private uniqueId;
-    private currentAnimationClass;
-    private currentCheckState;
     constructor();
     /**
      * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
      * @docs-private
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
      */
     onTouched: () => any;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Method being called whenever the label text changes. */
     onLabelTextChange(): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     writeValue(value: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     registerOnTouched(fn: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     setDisabledState(isDisabled: boolean): void;
     getAriaChecked(): KbqCheckedState;
     /** Toggles the `checked` state of the checkbox. */
@@ -127,13 +133,11 @@ declare class KbqCheckbox extends KbqColorDirective implements ControlValueAcces
     /** Focuses the checkbox. */
     focus(): void;
     onInteractionEvent(event: Event): void;
-    private controlValueAccessorChangeFn;
-    private transitionCheckState;
     private emitChangeEvent;
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "big": { "alias": "big"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "clickAction": { "alias": "clickAction"; "required": false; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "big": { "alias": "big"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "clickAction": { "alias": "clickAction"; "required": false; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, [{ directive: typeof i1.KbqCheckable; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabIndex: unknown;
 }
@@ -155,5 +159,5 @@ declare class KbqCheckboxModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqCheckboxModule>;
 }
 
-export { KBQ_CHECKBOX_CLICK_ACTION, KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR, KBQ_CHECKBOX_REQUIRED_VALIDATOR, KbqCheckbox, KbqCheckboxChange, KbqCheckboxModule, KbqCheckboxRequiredValidator, TransitionCheckState };
+export { KBQ_CHECKBOX_CLICK_ACTION, KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR, KBQ_CHECKBOX_REQUIRED_VALIDATOR, KbqCheckbox, KbqCheckboxChange, KbqCheckboxModule, KbqCheckboxRequiredValidator };
 export type { KbqCheckboxClickAction };

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 { InjectionToken, Signal, 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
@@ -120,6 +120,7 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
      */
     private isEventFromToggle;
     constructor();
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     /** @docs-private */
     toggle(event: Event): void;

package/code-block/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider, AfterViewInit, TemplateRef } from '@angular/core';
+import { InjectionToken, AfterViewInit, TemplateRef, Provider } from '@angular/core';
 import { CdkScrollable, ExtendedScrollToOptions } from '@angular/cdk/scrolling';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
@@ -48,6 +48,18 @@ declare const kbqCodeBlockLocaleConfigurationProvider: (configuration: KbqCodeBl
 declare const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`. */
 declare const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;
+/** Default options for `kbq-code-block`. */
+type KbqCodeBlockDefaultOptions = Partial<{
+    /** Whether the actionbar should remain visible when tabs are hidden. */
+    alwaysShowActionbar: boolean;
+}>;
+/** Injection token used to configure the default options for all `kbq-code-block` components. */
+declare const KBQ_CODE_BLOCK_DEFAULT_OPTIONS: InjectionToken<Partial<{
+    /** Whether the actionbar should remain visible when tabs are hidden. */
+    alwaysShowActionbar: boolean;
+}>>;
+/** Utility provider for `KBQ_CODE_BLOCK_DEFAULT_OPTIONS`. */
+declare const kbqCodeBlockDefaultOptionsProvider: (options: KbqCodeBlockDefaultOptions) => Provider;
 /** Marks a template as a custom tab link. */
 declare class KbqCodeBlockTabLinkContent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockTabLinkContent, never>;
@@ -58,6 +70,7 @@ declare class KbqCodeBlockTabLinkContent {
  */
 declare class KbqCodeBlock implements AfterViewInit {
     private readonly copyButtonTooltip;
+    private readonly defaultOptions;
     /**
      * Reference to the scrollable code content.
      *
@@ -114,6 +127,8 @@ declare class KbqCodeBlock implements AfterViewInit {
     canDownload: boolean;
     /** Added copy code button. */
     readonly canCopy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the actionbar should remain visible when tabs are hidden. */
+    readonly alwaysShowActionbar: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @deprecated Will be removed in next major release, use `files` instead.
      */
@@ -141,7 +156,8 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     get hideTabs(): boolean;
     set hideTabs(value: boolean);
-    private _hideTabs;
+    private readonly _hideTabs;
+    private readonly actionbarHovered;
     /**
      * Output to support two-way binding on `[(hideTabs)]` property.
      */
@@ -179,7 +195,6 @@ declare class KbqCodeBlock implements AfterViewInit {
     private readonly changeDetectorRef;
     private readonly localeService;
     private readonly destroyRef;
-    private readonly renderer;
     private readonly platform;
     private readonly focusMonitor;
     private readonly clipboard;
@@ -191,6 +206,8 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     protected readonly fallbackFileName: string;
     private readonly window;
+    /** @docs-private */
+    protected readonly actionbarVisible: _angular_core.Signal<boolean>;
     constructor();
     ngAfterViewInit(): void;
     /**
@@ -222,21 +239,9 @@ declare class KbqCodeBlock implements AfterViewInit {
      * @docs-private
      */
     protected onSelectedTabChange(index: number): void;
-    /**
-     * Tracks hover events to show/hide the actionbar when `hideTabs` is `true`.
-     * Reacts to `hideTabs` changes dynamically.
-     */
+    /** Tracks hover when tabs are hidden and `alwaysShowActionbar` is disabled. */
     private trackHoverState;
     private setupContentOverflowDetection;
-    /**
-     * Adds or removes the actionbar display class from the code block based on the specified condition.
-     *
-     * The actionbar is always visible on mobile devices and when the tabs are visible.
-     * Otherwise, the actionbar is only visible when the mouse is hovered over the code block.
-     *
-     * @param shouldShowActionbar - A boolean indicating whether the actionbar should be visible.
-     */
-    private setupActionbarDisplay;
     /** Whether the element has scroll. */
     private hasScroll;
     /**
@@ -271,7 +276,7 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     protected downloadCode(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlock, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "alwaysShowActionbar": { "alias": "alwaysShowActionbar"; "required": false; "isSignal": true; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, never>;
     static ngAcceptInputType_softWrap: unknown;
     static ngAcceptInputType_viewAll: unknown;
     static ngAcceptInputType_canLoad: unknown;
@@ -379,5 +384,5 @@ declare class KbqCodeBlockModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
 }
 
-export { KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE, KBQ_CODE_BLOCK_FALLBACK_FILE_NAME, KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, KBQ_CODE_BLOCK_LOCALE_CONFIGURATION, KbqCodeBlock, KbqCodeBlockHighlight, KbqCodeBlockModule, KbqCodeBlockTabLinkContent, kbqCodeBlockFallbackFileLanguageProvider, kbqCodeBlockFallbackFileNameProvider, kbqCodeBlockHighlightJsConfigProvider, kbqCodeBlockLocaleConfigurationProvider };
-export type { KbqCodeBlockFile, KbqCodeBlockHighlightJsConfig, KbqTabLinkTemplateContext };
+export { KBQ_CODE_BLOCK_DEFAULT_OPTIONS, KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE, KBQ_CODE_BLOCK_FALLBACK_FILE_NAME, KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, KBQ_CODE_BLOCK_LOCALE_CONFIGURATION, KbqCodeBlock, KbqCodeBlockHighlight, KbqCodeBlockModule, KbqCodeBlockTabLinkContent, kbqCodeBlockDefaultOptionsProvider, kbqCodeBlockFallbackFileLanguageProvider, kbqCodeBlockFallbackFileNameProvider, kbqCodeBlockHighlightJsConfigProvider, kbqCodeBlockLocaleConfigurationProvider };
+export type { KbqCodeBlockDefaultOptions, KbqCodeBlockFile, KbqCodeBlockHighlightJsConfig, KbqTabLinkTemplateContext };

package/content-panel/index.d.ts

@@ -1,5 +1,5 @@
 import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqComponentColors, KbqOverflowShadowContainer } from '@koobiq/components/core';
+import { KbqOverflowShadowContainer, KbqComponentColors } from '@koobiq/components/core';
 import * as i0 from '@angular/core';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqResizerSizeChangeEvent } from '@koobiq/components/resizer';