@koobiq/components 19.4.1 → 19.6.0

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-tokens.scss

@@ -149,14 +149,14 @@
         var(--kbq-background-bg) 100%
     );
     --kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);
-    --kbq-code-block-hljs-addition-background: var(--kbq-palette-green-95);
-    --kbq-code-block-hljs-addition-color: var(--kbq-palette-green-25);
+    --kbq-code-block-hljs-addition-background: var(--kbq-plt-green-a2, var(--kbq-palette-green-95));
+    --kbq-code-block-hljs-addition-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
     --kbq-code-block-hljs-attr-background: null;
     --kbq-code-block-hljs-attr-color: null;
     --kbq-code-block-hljs-attribute-background: null;
     --kbq-code-block-hljs-attribute-color: null;
     --kbq-code-block-hljs-built-in-background: null;
-    --kbq-code-block-hljs-built-in-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-built-in-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-bullet-background: null;
     --kbq-code-block-hljs-bullet-color: null;
     --kbq-code-block-hljs-char-escape-background: null;
@@ -166,9 +166,9 @@
     --kbq-code-block-hljs-code-background: null;
     --kbq-code-block-hljs-code-color: null;
     --kbq-code-block-hljs-comment-background: null;
-    --kbq-code-block-hljs-comment-color: var(--kbq-palette-grey-60);
-    --kbq-code-block-hljs-deletion-background: var(--kbq-palette-red-95);
-    --kbq-code-block-hljs-deletion-color: var(--kbq-palette-red-35);
+    --kbq-code-block-hljs-comment-color: var(--kbq-plt-slate-a16, var(--kbq-palette-grey-60));
+    --kbq-code-block-hljs-deletion-background: var(--kbq-plt-red-a2, var(--kbq-palette-red-95));
+    --kbq-code-block-hljs-deletion-color: var(--kbq-plt-red-a16, var(--kbq-palette-red-35));
     --kbq-code-block-hljs-doctag-background: null;
     --kbq-code-block-hljs-doctag-color: null;
     --kbq-code-block-hljs-emphasis-background: null;
@@ -183,19 +183,19 @@
     --kbq-code-block-hljs-link-background: null;
     --kbq-code-block-hljs-link-color: null;
     --kbq-code-block-hljs-literal-background: null;
-    --kbq-code-block-hljs-literal-color: var(--kbq-palette-purple-30);
+    --kbq-code-block-hljs-literal-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));
     --kbq-code-block-hljs-meta-background: null;
-    --kbq-code-block-hljs-meta-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-meta-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-meta-keyword-background: null;
     --kbq-code-block-hljs-meta-keyword-color: null;
     --kbq-code-block-hljs-meta-string-background: null;
-    --kbq-code-block-hljs-meta-string-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-meta-string-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-meta-prompt-background: null;
     --kbq-code-block-hljs-meta-prompt-color: null;
     --kbq-code-block-hljs-name-background: null;
-    --kbq-code-block-hljs-name-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-name-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-number-background: null;
-    --kbq-code-block-hljs-number-color: var(--kbq-palette-purple-30);
+    --kbq-code-block-hljs-number-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));
     --kbq-code-block-hljs-operator-background: null;
     --kbq-code-block-hljs-operator-color: null;
     --kbq-code-block-hljs-params-background: null;
@@ -207,7 +207,7 @@
     --kbq-code-block-hljs-quote-background: null;
     --kbq-code-block-hljs-quote-color: null;
     --kbq-code-block-hljs-regexp-background: null;
-    --kbq-code-block-hljs-regexp-color: var(--kbq-palette-green-25);
+    --kbq-code-block-hljs-regexp-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
     --kbq-code-block-hljs-section-background: null;
     --kbq-code-block-hljs-section-color: null;
     --kbq-code-block-hljs-selector-attr-background: null;
@@ -219,15 +219,15 @@
     --kbq-code-block-hljs-selector-pseudo-background: null;
     --kbq-code-block-hljs-selector-pseudo-color: null;
     --kbq-code-block-hljs-selector-tag-background: null;
-    --kbq-code-block-hljs-selector-tag-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-string-background: null;
-    --kbq-code-block-hljs-string-color: var(--kbq-palette-green-25);
+    --kbq-code-block-hljs-string-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
     --kbq-code-block-hljs-strong-background: null;
     --kbq-code-block-hljs-strong-color: null;
     --kbq-code-block-hljs-subst-background: null;
     --kbq-code-block-hljs-subst-color: null;
     --kbq-code-block-hljs-symbol-background: null;
-    --kbq-code-block-hljs-symbol-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-symbol-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-tag-background: null;
     --kbq-code-block-hljs-tag-color: null;
     --kbq-code-block-hljs-template-tag-background: null;
@@ -235,7 +235,7 @@
     --kbq-code-block-hljs-template-variable-background: null;
     --kbq-code-block-hljs-template-variable-color: null;
     --kbq-code-block-hljs-title-background: null;
-    --kbq-code-block-hljs-title-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-title-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-title-class-background: null;
     --kbq-code-block-hljs-title-class-color: null;
     --kbq-code-block-hljs-title-class-inherited-background: null;
@@ -254,3 +254,22 @@
     --kbq-code-block-hljs-variable-language-color: null;
     --kbq-code-block-tab-size: 4;
 }
+
+.kbq-dark .kbq-code-block {
+    --kbq-code-block-hljs-addition-background: var(--kbq-plt-dark-green-a5, var(--kbq-palette-green-95));
+    --kbq-code-block-hljs-addition-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
+    --kbq-code-block-hljs-built-in-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-comment-color: var(--kbq-plt-dark-slate-a14, var(--kbq-palette-grey-60));
+    --kbq-code-block-hljs-deletion-background: var(--kbq-plt-dark-red-a5, var(--kbq-palette-red-95));
+    --kbq-code-block-hljs-deletion-color: var(--kbq-plt-dark-red-a14, var(--kbq-palette-red-35));
+    --kbq-code-block-hljs-literal-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));
+    --kbq-code-block-hljs-meta-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-meta-string-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-name-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-number-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));
+    --kbq-code-block-hljs-regexp-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
+    --kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-string-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
+    --kbq-code-block-hljs-symbol-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-title-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+}

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. */
@@ -89,6 +96,10 @@ export declare class KbqCodeBlock implements AfterViewInit {
     get hideTabs(): boolean;
     set hideTabs(value: boolean);
     private _hideTabs;
+    /**
+     * Output to support two-way binding on `[(hideTabs)]` property.
+     */
+    readonly hideTabsChange: EventEmitter<boolean>;
     /**
      * Component locale configuration.
      *
@@ -162,9 +173,10 @@ export declare class KbqCodeBlock implements AfterViewInit {
      */
     protected onSelectedTabChange(index: number): void;
     /**
-     * Handles the hover event on the code block element and updates the actionbar display accordingly.
+     * Tracks hover events to show/hide the actionbar when `hideTabs` is `true`.
+     * Reacts to `hideTabs` changes dynamically.
      */
-    private handleHover;
+    private trackHoverState;
     /**
      * Handles the scroll event on the scrollable code content element and updates the header shadow accordingly.
      */
@@ -218,7 +230,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"; "hideTabsChange": "hideTabsChange"; }, ["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/error/error-state-matcher.d.ts

@@ -12,6 +12,16 @@ export declare class ShowOnFormSubmitErrorStateMatcher implements ErrorStateMatc
     static ɵfac: i0.ɵɵFactoryDeclaration<ShowOnFormSubmitErrorStateMatcher, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnFormSubmitErrorStateMatcher>;
 }
+/**
+ * Error state matcher with split behavior based on error's type:
+ * - `required` errors are shown only after the form is submitted.
+ * - All other errors are shown as soon as the control is invalid and touched.
+ */
+export declare class ShowRequiredOnSubmitErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShowRequiredOnSubmitErrorStateMatcher, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ShowRequiredOnSubmitErrorStateMatcher>;
+}
 /** Error state matcher that matches when a control is invalid and dirty or form is submitted. */
 export declare class ShowOnControlDirtyErrorStateMatcher implements ErrorStateMatcher {
     isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;

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/forms/_forms.scss

@@ -12,19 +12,26 @@
     }
 
     .kbq-form-horizontal {
-        $line-height: var(--kbq-typography-text-normal-line-height);
-        $form-field-size-height: var(--kbq-form-field-size-height, var(--kbq-size-3xl));
+        --kbq-forms-horizontal-label-padding-top: var(--kbq-size-xs);
 
         & .kbq-form-row_margin {
             margin-bottom: var(--kbq-forms-size-horizontal-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: calc(($form-field-size-height - $line-height) / 2);
+            padding-top: var(--kbq-forms-horizontal-label-padding-top);
 
             text-align: start;
         }
 
+        & .kbq-form__row:has(.kbq-toggle, .kbq-radio-group, .kbq-checkbox, .kbq-multiple-file-upload) {
+            --kbq-forms-horizontal-label-padding-top: 0;
+        }
+
+        & .kbq-form__row:has(.kbq-single-file-upload) {
+            --kbq-forms-horizontal-label-padding-top: var(--kbq-size-m);
+        }
+
         & .kbq-form__control {
             padding-left: var(--kbq-forms-size-horizontal-control-padding-left);
         }

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: {

package/core/locales/locale-service.d.ts

@@ -140,6 +140,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -350,6 +352,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -556,6 +560,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -768,6 +774,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {
@@ -976,6 +984,8 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         clampedText: {
             openText: string;
             closeText: string;
+            showMoreText: string;
+            moreText: string;
         };
         navbarIc: {
             toggle: {

package/core/locales/pt-BR.d.ts

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

package/core/locales/ru-RU.d.ts

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

package/core/locales/tk-TM.d.ts

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

package/core/locales/types.d.ts

@@ -34,6 +34,8 @@ export type KbqNumberInputLocaleConfig = {
 export type KbqClampedTextLocaleConfig = {
     openText: string;
     closeText: string;
+    showMoreText: string;
+    moreText: string;
 };
 /** Locale configuration for `KbqTimeRange` */
 export type KbqTimeRangeLocaleConfig = {

package/core/option/_option-action-theme.scss

@@ -3,6 +3,7 @@
 @mixin kbq-option-action-theme() {
     .kbq-option-action {
         &.cdk-keyboard-focused {
+            z-index: 1;
             border-color: var(--kbq-states-line-focus-theme);
         }
 

package/core/option/_option-theme.scss

@@ -25,11 +25,6 @@
             @include kbq-option(states-hover);
         }
 
-        &.kbq-active:not(.kbq-disabled),
-        &:active:not(.kbq-disabled) {
-            @include kbq-option(states-active);
-        }
-
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(states-selected);
 
@@ -37,23 +32,18 @@
             &:hover {
                 @include kbq-option(states-selected-hover);
             }
-
-            &.kbq-active,
-            &:active {
-                @include kbq-option(states-selected-active);
-            }
         }
 
         &.kbq-disabled {
             @include kbq-option(states-disabled);
         }
 
-        &:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
+        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
 
-        &:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
+        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
@@ -63,18 +53,15 @@
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(multiple-states-selected);
 
+            &.kbq-hovered,
             &:hover {
                 @include kbq-option(multiple-states-selected-hover);
             }
-
-            &:active {
-                @include kbq-option(multiple-states-selected-active);
-            }
         }
     }
 
     .cdk-keyboard-focused {
-        .kbq-option.kbq-focused {
+        .kbq-option.kbq-active {
             border-color: var(--kbq-list-states-focused-focus-outline-color);
         }
     }

package/core/option/action-container.scss

@@ -27,9 +27,9 @@
     width: var(--kbq-size-3xl);
     height: 100%;
 
-    background:
-        linear-gradient(to right, transparent 0%, var(--kbq-option-background) 70%),
-        linear-gradient(to right, transparent 0%, var(--kbq-background-bg) 80%);
+    background: linear-gradient(var(--kbq-option-background), var(--kbq-option-background)), var(--kbq-background-bg);
+
+    mask-image: linear-gradient(to right, transparent 0%, black var(--kbq-size-xxl));
 }
 
 .kbq-action-container__box {
@@ -39,7 +39,5 @@
     align-items: center;
     justify-content: center;
 
-    background:
-        linear-gradient(to right, var(--kbq-option-background) 0%, var(--kbq-option-background) 100%),
-        linear-gradient(to right, var(--kbq-background-bg) 0%, var(--kbq-background-bg) 100%);
+    background: linear-gradient(var(--kbq-option-background), var(--kbq-option-background)), var(--kbq-background-bg);
 }