@koobiq/components 19.4.1 → 19.5.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025
+Copyright (c) 2026
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/accordion/accordion-content.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 import * as i1 from "./accordion-content.directive";
 export declare class KbqAccordionContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
 }

package/accordion/accordion-content.directive.d.ts

@@ -1,11 +1,22 @@
-import { KbqAccordionItemDirective } from './accordion-item.directive';
+import { AfterContentInit, AfterViewInit } from '@angular/core';
+import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
-export declare class KbqAccordionContentDirective {
-    protected readonly item: KbqAccordionItemDirective;
-    protected readonly nativeElement: any;
-    protected hidden: boolean;
-    protected onAnimationEnd(): void;
-    onToggle(): void;
+export declare class KbqAccordionContentDirective implements AfterContentInit, AfterViewInit {
+    private readonly renderer;
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    protected readonly item: KbqAccordionItem;
+    /** @docs-private */
+    protected readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    private savedTransition;
+    private readonly afterRenderRef?;
+    constructor();
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    toggle(): void;
+    disableAnimation(): void;
+    enableAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContentDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContentDirective, "[kbqAccordionContent]", ["kbqAccordionContent"], {}, {}, never, never, true, never>;
 }

package/accordion/accordion-header.directive.d.ts

@@ -1,7 +1,7 @@
-import { KbqAccordionItemDirective } from './accordion-item.directive';
+import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
 export declare class KbqAccordionHeaderDirective {
-    protected readonly item: KbqAccordionItemDirective;
+    protected readonly item: KbqAccordionItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionHeaderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionHeaderDirective, "[kbqAccordionHeader]", never, {}, {}, never, never, true, never>;
 }

package/accordion/accordion-item.d.ts

@@ -1,6 +1,77 @@
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
+import { KbqAccordionContentDirective } from './accordion-content.directive';
+import { KbqAccordionTrigger } from './accordion-trigger.component';
+import { KbqAccordionTriggerDirective } from './accordion-trigger.directive';
+import { KbqAccordion, KbqAccordionOrientation } from './accordion.component';
 import * as i0 from "@angular/core";
-import * as i1 from "./accordion-item.directive";
-export declare class KbqAccordionItem {
+/** @deprecated Use KbqAccordionItemState instead. */
+export type RdxAccordionItemState = 'open' | 'closed';
+export type KbqAccordionItemState = 'open' | 'closed';
+export declare class KbqAccordionItem implements OnDestroy {
+    /** @docs-private */
+    protected readonly accordion: KbqAccordion;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly expansionDispatcher: UniqueSelectionDispatcher;
+    /** @docs-private */
+    trigger: KbqAccordionTriggerDirective;
+    /** @docs-private */
+    triggerComponent: KbqAccordionTrigger;
+    /** @docs-private */
+    content: KbqAccordionContentDirective;
+    /** The unique AccordionItem id. */
+    get id(): string;
+    private _id;
+    get dataState(): KbqAccordionItemState;
+    get orientation(): KbqAccordionOrientation;
+    /** Whether the AccordionItem is expanded. */
+    get expanded(): boolean;
+    set expanded(expanded: boolean);
+    private _expanded;
+    set value(value: string);
+    get value(): string;
+    private _value?;
+    /** Whether the AccordionItem is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Event emitted every time the AccordionItem is closed. */
+    readonly closed: EventEmitter<void>;
+    /** Event emitted every time the AccordionItem is opened. */
+    readonly opened: EventEmitter<void>;
+    /**
+     * Event emitted when the AccordionItem is destroyed.
+     * @docs-private
+     */
+    readonly destroyed: EventEmitter<void>;
+    /**
+     * Emits whenever the expanded state of the accordion changes.
+     * Primarily used to facilitate two-way binding.
+     * @docs-private
+     */
+    readonly expandedChange: EventEmitter<boolean>;
+    /** Unregister function for expansionDispatcher. */
+    private removeUniqueSelectionListener;
+    /** Subscription to openAll/closeAll events. */
+    private openCloseAllSubscription;
+    constructor();
+    /** Emits an event for the accordion item being destroyed. */
+    ngOnDestroy(): void;
+    focus(): void;
+    /** Toggles the expanded state of the accordion item. */
+    toggle(): void;
+    /** Sets the expanded state of the accordion item to false. */
+    close(): void;
+    /** Sets the expanded state of the accordion item to true. */
+    open(): void;
+    getState(): any;
+    disableAnimation(): void;
+    enableAnimation(): void;
+    private subscribeToOpenCloseAllActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqAccordionItemDirective; inputs: { "expanded": "expanded"; "disabled": "disabled"; "value": "value"; }; outputs: { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, { "expanded": { "alias": "expanded"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }, ["trigger", "triggerComponent", "content"], never, true, never>;
+    static ngAcceptInputType_expanded: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }

package/accordion/accordion-trigger.component.d.ts

@@ -1,11 +1,24 @@
+import { AfterViewInit } from '@angular/core';
+import { KbqIcon } from '@koobiq/components/icon';
 import { KbqAccordion } from './accordion.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./accordion-trigger.directive";
-export declare class KbqAccordionTrigger {
-    protected accordion: KbqAccordion;
+export declare class KbqAccordionTrigger implements AfterViewInit {
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    protected readonly accordion: KbqAccordion;
+    /** @docs-private */
+    icon: KbqIcon;
+    private savedTransition;
+    private readonly afterRenderRef?;
     get isFill(): boolean;
     get isHug(): boolean;
     get isHugSpaceBetween(): boolean;
+    constructor();
+    ngAfterViewInit(): void;
+    disableAnimation(): void;
+    enableAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTrigger, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionTrigger, "kbq-accordion-trigger, [kbq-accordion-trigger]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionTriggerDirective; inputs: {}; outputs: {}; }]>;
 }

package/accordion/accordion-trigger.directive.d.ts

@@ -1,12 +1,16 @@
-import { KbqAccordionItemDirective } from './accordion-item.directive';
-import { KbqAccordionRootDirective } from './accordion-root.directive';
+import { KbqAccordionItem } from './accordion-item';
+import { KbqAccordion } from './accordion.component';
 import * as i0 from "@angular/core";
 export declare class KbqAccordionTriggerDirective {
-    protected readonly nativeElement: any;
-    protected readonly accordionRoot: KbqAccordionRootDirective;
-    protected readonly item: KbqAccordionItemDirective;
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    protected readonly accordion: KbqAccordion;
+    /** @docs-private */
+    protected readonly item: KbqAccordionItem;
     /** Fires when trigger clicked */
     onClick(): void;
+    /** @docs-private */
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTriggerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionTriggerDirective, "[kbqAccordionTrigger]", never, {}, {}, never, never, true, never>;

package/accordion/accordion.component.d.ts

@@ -1,18 +1,79 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { FocusKeyManager, FocusMonitor } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
+import { Subject } from 'rxjs';
+import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
-import * as i1 from "./accordion-root.directive";
 export declare enum KbqAccordionVariant {
     fill = "fill",
     hug = "hug",
     hugSpaceBetween = "hugSpaceBetween"
 }
-export declare class KbqAccordion implements OnDestroy, AfterViewInit {
+export type KbqAccordionType = 'single' | 'multiple';
+export type KbqAccordionOrientation = 'horizontal' | 'vertical';
+export declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit {
+    private readonly isBrowser;
+    private readonly localStorage;
+    /** @docs-private */
     protected readonly focusMonitor: FocusMonitor;
-    protected readonly elementRef: ElementRef<HTMLElement>;
+    /** @docs-private */
+    protected readonly elementRef: ElementRef<any>;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly selectionDispatcher: UniqueSelectionDispatcher;
+    /** @docs-private */
+    protected readonly dir: Directionality | null;
+    /** @docs-private */
+    protected keyManager: FocusKeyManager<KbqAccordionItem>;
+    /** @docs-private */
+    readonly openCloseAllActions: Subject<boolean>;
+    /**  @docs-private */
+    items: QueryList<KbqAccordionItem>;
+    /** Specifies whether the accordion saves its states. Default is false */
+    useStateSaving: boolean;
     variant: KbqAccordionVariant | string;
+    /** Whether the Accordion is disabled. */
+    disabled: boolean;
+    /** The orientation of the accordion. */
+    orientation: KbqAccordionOrientation;
+    /**
+     * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
+     */
+    get defaultValue(): string[] | string;
+    set defaultValue(value: string[] | string);
+    /** Determines whether one or multiple items can be opened at the same time. */
+    type: KbqAccordionType;
+    collapsible: boolean;
+    /** The controlled value of the item to expand */
+    get value(): string[] | string;
+    set value(value: string[] | string);
+    readonly onValueChange: EventEmitter<void>;
+    get id(): string;
+    get isMultiple(): boolean;
+    get hasSavedState(): boolean;
+    private _value?;
+    private _defaultValue;
+    private onValueChangeSubscription;
+    private _id;
+    private state;
+    constructor();
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
+    keydownHandler(event: KeyboardEvent): void;
+    /** Opens all enabled accordion items in an accordion where multi is enabled. */
+    openAll(): void;
+    /** Closes all enabled accordion items. */
+    closeAll(): void;
+    /** @docs-private */
+    setActiveItem(item: KbqAccordionItem): void;
+    /** @docs-private */
+    saveItemState(item: KbqAccordionItem, force?: boolean): void;
+    private getSavedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordion, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionRootDirective; inputs: { "type": "type"; "collapsible": "collapsible"; "disabled": "disabled"; "defaultValue": "defaultValue"; "value": "value"; }; outputs: { "onValueChange": "onValueChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "type": { "alias": "type"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "onValueChange": "onValueChange"; }, ["items"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/accordion/accordion.component.scss

@@ -1,29 +1,5 @@
 @use './accordion-theme' as *;
 
-@keyframes slideDown {
-    from {
-        height: 0;
-        padding-bottom: 0;
-    }
-
-    to {
-        height: var(--radix-accordion-content-height);
-        padding-bottom: 0;
-    }
-}
-
-@keyframes slideUp {
-    from {
-        height: var(--radix-accordion-content-height);
-        padding-bottom: 0;
-    }
-
-    to {
-        height: 0;
-        padding-bottom: 0;
-    }
-}
-
 .kbq-accordion {
     display: block;
 }
@@ -46,14 +22,20 @@
 .kbq-accordion-content {
     display: block;
     overflow: hidden;
-    padding: var(--kbq-accordion-size-item-content-padding);
+
+    & > p {
+        margin: unset;
+        padding: var(--kbq-accordion-size-item-content-padding);
+    }
 
     &[data-state='open'] {
-        animation: slideDown 300ms ease-out;
+        transition: 300ms ease-out;
+        height: var(--radix-accordion-content-height);
     }
 
     &[data-state='closed'] {
-        animation: slideUp 300ms ease-out;
+        transition: 300ms ease-out;
+        height: 0;
     }
 }
 

package/accordion/public-api.d.ts

@@ -3,8 +3,6 @@ export * from './accordion-content.directive';
 export * from './accordion-header';
 export * from './accordion-header.directive';
 export * from './accordion-item';
-export * from './accordion-item.directive';
-export * from './accordion-root.directive';
 export * from './accordion-trigger.component';
 export * from './accordion-trigger.directive';
 export * from './accordion.component';

package/checkbox/checkbox.scss

@@ -1,10 +1,5 @@
 @use './checkbox-theme' as *;
 
-.kbq-checkbox-checkmark,
-.kbq-checkbox-mixedmark {
-    display: none;
-}
-
 .kbq-checkbox__frame {
     display: flex;
     align-items: center;
@@ -66,6 +61,11 @@
 
     max-width: 100%;
 
+    .kbq-checkbox-checkmark,
+    .kbq-checkbox-mixedmark {
+        display: none;
+    }
+
     &.kbq-checked {
         .kbq-checkbox-checkmark {
             display: block;

package/clamped-text/clamped-list.d.ts

@@ -0,0 +1,41 @@
+import { KbqClamped } from './constants';
+import * as i0 from "@angular/core";
+export declare class KbqClampedList<T> implements KbqClamped {
+    /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = expanded. */
+    readonly isCollapsed: import("@angular/core").ModelSignal<boolean>;
+    /** The list of items to display. */
+    readonly items: import("@angular/core").InputSignal<T[]>;
+    /**
+     * Maximum number of items visible in collapsed state.
+     * @default 10
+     */
+    readonly collapsedVisibleCount: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    /**
+     * Minimum number of hidden items required to show the toggle trigger.
+     * @default 6
+     */
+    readonly hiddenThreshold: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    /** Number of items hidden when the list is collapsed. */
+    readonly exceededItemCount: import("@angular/core").Signal<number>;
+    /** Whether the number of hidden items meets the threshold to render the toggle trigger. */
+    readonly hasToggle: import("@angular/core").Signal<boolean>;
+    /** Slice of items currently rendered — truncated to `minVisibleCount` when collapsed, a full list otherwise. */
+    readonly visibleItems: import("@angular/core").Signal<T[]>;
+    /** Localized "show more" label with the exceeded item count interpolated into the `{exceededItemCount}` placeholder. */
+    readonly showMoreCountText: import("@angular/core").Signal<string>;
+    /** Clamped text locale configuration. */
+    readonly localeConfiguration: import("@angular/core").Signal<import("@koobiq/components/core").KbqClampedTextLocaleConfig>;
+    /** Toggles the collapsed state of the list. Stops event propagation. */
+    toggle(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqClampedList<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqClampedList<any>, "[kbqClampedList]", ["kbqClampedList"], { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "collapsedVisibleCount": { "alias": "collapsedVisibleCount"; "required": false; "isSignal": true; }; "hiddenThreshold": { "alias": "hiddenThreshold"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, never, true, never>;
+}
+/**
+ * Clamped list trigger.
+ * Used for calling toggle collapsed state on click events
+ */
+export declare class KbqClampedListTrigger {
+    protected readonly root: KbqClamped | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqClampedListTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqClampedListTrigger, "[kbqClampedListTrigger]", ["kbqClampedListTrigger"], {}, {}, never, never, true, never>;
+}

package/clamped-text/clamped-text.d.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
-import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
+import { KbqClamped } from './constants';
 import * as i0 from "@angular/core";
-export declare class KbqClampedText implements AfterViewInit {
+export declare class KbqClampedText implements KbqClamped, AfterViewInit {
     /**
      * Max rows before text is clamped.
      * @default kbqClampedTextDefaultMaxRows
@@ -28,18 +28,17 @@ export declare class KbqClampedText implements AfterViewInit {
     /** @docs-private */
     protected readonly isToggleCollapsed: import("@angular/core").WritableSignal<boolean | undefined>;
     /** @docs-private */
-    protected readonly hasToggle: import("@angular/core").WritableSignal<boolean>;
-    /** @docs-private */
     protected readonly lineClamp: import("@angular/core").WritableSignal<number | null>;
+    /** @docs-private */
+    readonly hasToggle: import("@angular/core").WritableSignal<boolean>;
     private readonly destroyRef;
     private readonly elementRef;
     private readonly resizeObserver;
-    private readonly localeService;
     /**
      * Clamped text locale configuration.
      * @docs-private
      */
-    protected readonly localeConfiguration: import("@angular/core").Signal<KbqClampedTextLocaleConfig | undefined>;
+    readonly localeConfiguration: import("@angular/core").Signal<import("@koobiq/components/core").KbqClampedTextLocaleConfig>;
     /**
      * This flag is used to prevent trigger resize observer on toggle click.
      */
@@ -47,6 +46,11 @@ export declare class KbqClampedText implements AfterViewInit {
     constructor();
     ngAfterViewInit(): void;
     /** @docs-private */
+    toggle(event: Event): void;
+    /**
+     * @docs-private
+     * @deprecated Will be removed in next major release
+     */
     toggleIsCollapsed(event: Event): void;
     private updateToggleVisibilityState;
     private updateCollapsedState;

package/clamped-text/constants.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, Provider, Signal } from '@angular/core';
 import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
 /**
  * Default maximum number of visible rows for the clamped text component
@@ -12,3 +12,23 @@ export declare const KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION: InjectionToken<KbqCl
  * @see KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION
  */
 export declare const kbqClampedTextLocaleConfigurationProvider: (configuration: KbqClampedTextLocaleConfig) => Provider;
+export declare const KbqClampedRoot: InjectionToken<KbqClamped>;
+export interface KbqClamped {
+    /**
+     * Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto.
+     * Behavior for auto may vary according to clamped-list/clamped-text
+     */
+    isCollapsed: Signal<boolean | undefined>;
+    /** Whether the toggle trigger should be shown. */
+    hasToggle: Signal<boolean>;
+    /** Reactive locale strings for open/close labels. */
+    localeConfiguration: Signal<KbqClampedTextLocaleConfig>;
+    /** Toggles the collapsed state of the list. Stops event propagation. */
+    toggle(event: Event): void;
+}
+/**
+ * Injection function that creates a reactive locale configuration signal.
+ * @see {KbqClampedText, KbqClampedList}
+ * @docs-private
+ */
+export declare function kbqInjectKbqClampedLocaleConfiguration(): Signal<KbqClampedTextLocaleConfig>;

package/clamped-text/index.d.ts

@@ -1,3 +1,4 @@
+export * from './clamped-list';
 export * from './clamped-text';
 export * from './constants';
 export * from './module';

package/clamped-text/module.d.ts

@@ -1,7 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./clamped-text";
+import * as i2 from "./clamped-list";
 export declare class KbqClampedTextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqClampedTextModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqClampedTextModule, never, [typeof i1.KbqClampedText], [typeof i1.KbqClampedText]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqClampedTextModule, never, [typeof i1.KbqClampedText, typeof i2.KbqClampedList, typeof i2.KbqClampedListTrigger], [typeof i1.KbqClampedText, typeof i2.KbqClampedList, typeof i2.KbqClampedListTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqClampedTextModule>;
 }

package/code-block/code-block.d.ts

@@ -1,8 +1,8 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { AfterViewInit, EventEmitter, InjectionToken, Provider } from '@angular/core';
+import { AfterViewInit, EventEmitter, InjectionToken, Provider, TemplateRef } from '@angular/core';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
-import { KbqCodeBlockFile } from './types';
+import { KbqCodeBlockFile, KbqTabLinkTemplateContext } from './types';
 import * as i0 from "@angular/core";
 /** Localization configuration provider. */
 export declare const KBQ_CODE_BLOCK_LOCALE_CONFIGURATION: InjectionToken<KbqCodeBlockLocaleConfiguration>;
@@ -12,6 +12,11 @@ export declare const kbqCodeBlockLocaleConfigurationProvider: (configuration: Kb
 export declare const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`. */
 export declare const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;
+/** Marks a template as a custom tab link. */
+export declare class KbqCodeBlockTabLinkContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockTabLinkContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqCodeBlockTabLinkContent, "ng-template[kbqCodeBlockTabLinkContent]", ["kbqCodeBlockTabLinkContent"], {}, {}, never, never, true, never>;
+}
 /**
  * Component which highlights blocks of code.
  */
@@ -21,6 +26,8 @@ export declare class KbqCodeBlock implements AfterViewInit {
      * Reference to the scrollable code content.
      */
     readonly scrollableCodeContent: CdkScrollable;
+    /** @docs-private */
+    protected readonly tabLinkTemplate: TemplateRef<KbqTabLinkTemplateContext>;
     /** Whether to display line numbers. */
     lineNumbers: boolean;
     /** Whether the code block should be filled. */
@@ -218,7 +225,7 @@ export declare class KbqCodeBlock implements AfterViewInit {
      */
     protected downloadCode(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlock, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; }, ["tabLinkTemplate"], never, true, never>;
     static ngAcceptInputType_lineNumbers: unknown;
     static ngAcceptInputType_filled: unknown;
     static ngAcceptInputType_canToggleSoftWrap: unknown;

package/code-block/code-block.module.d.ts

@@ -2,6 +2,6 @@ import * as i0 from "@angular/core";
 import * as i1 from "./code-block";
 export declare class KbqCodeBlockModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, never, [typeof i1.KbqCodeBlock], [typeof i1.KbqCodeBlock]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, never, [typeof i1.KbqCodeBlock, typeof i1.KbqCodeBlockTabLinkContent], [typeof i1.KbqCodeBlock, typeof i1.KbqCodeBlockTabLinkContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
 }

package/code-block/code-block.scss

@@ -114,6 +114,7 @@
     &.kbq-code-block_soft-wrap {
         .kbq-code-block__code {
             white-space: pre-wrap;
+            overflow-wrap: anywhere;
         }
     }
 

package/code-block/types.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Context provided to the tab link template.
+ * @property $implicit - Code block file for the current tab.
+ * @property fallbackFileName - Displayed when the file has no explicit name.
+ */
+export type KbqTabLinkTemplateContext = {
+    $implicit: KbqCodeBlockFile;
+    fallbackFileName: string;
+};
 /** Code block file object. */
 export type KbqCodeBlockFile = {
     /**

package/core/common-behaviors/flex.d.ts

@@ -0,0 +1,4 @@
+/** Controls the direction of flex items: horizontal (`'row'`) or vertical (`'column'`). */
+export type KbqFlexDirection = 'row' | 'column';
+/** Controls flex item wrapping: single-line (`'nowrap'`) or multi-line (`'wrap'`). */
+export type KbqFlexWrap = 'nowrap' | 'wrap';

package/core/common-behaviors/index.d.ts

@@ -5,6 +5,7 @@ export { CanColor, CanColorCtor, KbqColorDirective, KbqComponentColors, mixinCol
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanUpdateErrorState, CanUpdateErrorStateCtor, KbqErrorStateTracker, mixinErrorState } from './error-state';
+export * from './flex';
 export * from './hover';
 export * from './orientation';
 export * from './read-state';

package/core/form-field/form-field-ref.d.ts

@@ -1,10 +1,12 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, ModelSignal } from '@angular/core';
 /**
  * @deprecated Will be removed in next major release, use `KbqFormField` instead.
  */
 export interface KbqFormFieldRef {
     control: any;
     canCleanerClearByEsc: boolean;
+    /** Use when KbqFormField is in an overlay container. */
+    inOverlay: ModelSignal<boolean>;
     /**
      * @TODO should be removed, is private method (#DS-2915)
      * @deprecated use `formField.control?.errorState` instead

package/core/locales/en-US.d.ts

@@ -95,6 +95,8 @@ export declare const enUSLocaleData: {
     clampedText: {
         openText: string;
         closeText: string;
+        showMoreText: string;
+        moreText: string;
     };
     navbarIc: {
         toggle: {

package/core/locales/es-LA.d.ts

@@ -94,6 +94,8 @@ export declare const esLALocaleData: {
     clampedText: {
         openText: string;
         closeText: string;
+        showMoreText: string;
+        moreText: string;
     };
     navbarIc: {
         toggle: {