@koobiq/components 19.0.0 → 19.1.0

package/file-upload/file-upload.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, InputSignal, Renderer2 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher, KbqBaseFileUploadLocaleConfig, KbqEnumValues, KbqMultipleFileUploadLocaleConfig } from '@koobiq/components/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { KbqFileList, KbqFileUploadContext } from './primitives';
 export interface KbqFile extends File {
@@ -22,20 +22,39 @@ export interface KbqInputFile {
     onFileSelectedViaClick(event: Event): void;
     onFileDropped(files: FileList | KbqFile[]): void;
 }
+/**
+ * @docs-private
+ * @deprecated Will be removed in next major release
+ */
 export interface KbqInputFileLabel {
     captionText: string;
     browseLink: string;
     title?: string | undefined;
 }
+/** Upload modes enum. */
+export declare enum KbqFileUploadAllowedType {
+    File = "file",
+    Folder = "folder",
+    Mixed = "mixed"
+}
+/** Allowed upload modes for the upload component. */
+export type KbqFileUploadAllowedTypeValues = KbqEnumValues<KbqFileUploadAllowedType>;
+/** @docs-private */
+export type KbqFileUploadCaptionContext = {
+    captionText: string;
+    browseLink?: string;
+    captionTextSeparator?: string;
+    browseLinkFolder?: string;
+};
 /**
  * @deprecated use FormControl for validation
  */
 export type KbqFileValidatorFn = (file: File) => string | null;
-export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqInputFileLabel>;
+export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqBaseFileUploadLocaleConfig | KbqMultipleFileUploadLocaleConfig>;
 /** @deprecated use `FileValidators.isCorrectExtension` instead. Will be removed in next major release. */
 export declare const isCorrectExtension: (file: File, accept?: string[]) => boolean;
 /** @docs-private */
-export declare abstract class KbqFileUploadBase<T = KbqInputFileLabel> implements CanUpdateErrorState {
+export declare abstract class KbqFileUploadBase<T = KbqBaseFileUploadLocaleConfig> implements CanUpdateErrorState {
     protected abstract localeConfig: InputSignal<Partial<T> | undefined>;
     /** Tracks whether the component is in an error state based on the control, parent form,
      * and `errorStateMatcher`, triggering visual updates and state changes if needed. */

package/file-upload/multiple-file-upload.component.d.ts

@@ -1,22 +1,16 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, DoCheck, ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { ErrorStateMatcher } from '@koobiq/components/core';
+import { ErrorStateMatcher, KbqMultipleFileUploadLocaleConfig } from '@koobiq/components/core';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileValidatorFn, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileUploadCaptionContext, KbqFileValidatorFn } from './file-upload';
 import { KbqFileLoader } from './primitives';
 import * as i0 from "@angular/core";
 import * as i1 from "./primitives/file-picker";
-export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
-    captionTextWhenSelected: string;
-    captionTextForCompactSize: string;
-    gridHeaders: {
-        file: string;
-        size: string;
-    };
+export interface KbqInputFileMultipleLabel extends KbqMultipleFileUploadLocaleConfig {
     [k: string | number | symbol]: unknown;
 }
-export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileMultipleLabel;
+export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqMultipleFileUploadLocaleConfig;
 export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, ControlValueAccessor, DoCheck {
     /**
      * A value responsible for progress spinner type.
@@ -41,8 +35,13 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     errorStateMatcher: ErrorStateMatcher;
     get files(): KbqFileItem[];
     set files(currentFileList: KbqFileItem[]);
+    /**
+     * Determines which kind of items the upload component can accept.
+     * @default mixed
+     */
+    allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
     /** Optional configuration to override default labels with localized text.*/
-    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqInputFileMultipleLabel> | undefined>;
+    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqMultipleFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file list.
      * public output will be renamed to filesChange in next major release (#DS-3700) */
     readonly filesChange: EventEmitter<KbqFileItem[]>;
@@ -65,18 +64,9 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     /** @docs-private */
     hasFocus: boolean;
     /** @docs-private */
-    columnDefs: {
-        header: string;
-        cssClass: string;
-    }[];
-    /** @docs-private */
-    config: KbqInputFileMultipleLabel;
-    /** @docs-private */
-    separatedCaptionText: string[];
-    /** @docs-private */
-    separatedCaptionTextWhenSelected: string[];
+    readonly resolvedLocaleConfig: import("@angular/core").Signal<KbqMultipleFileUploadLocaleConfig>;
     /** @docs-private */
-    separatedCaptionTextForCompactSize: string[];
+    protected readonly captionContext: import("@angular/core").Signal<KbqFileUploadCaptionContext>;
     /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
      * @docs-private
      */
@@ -106,7 +96,8 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
      */
     protected get fileSizeCellMaxWidth(): number;
     /** @docs-private */
-    readonly configuration: KbqInputFileMultipleLabel | null;
+    readonly configuration: KbqMultipleFileUploadLocaleConfig | null;
+    private readonly localeId;
     private readonly focusMonitor;
     private readonly platformId;
     constructor();
@@ -133,12 +124,9 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     onFileDropped(files: KbqFile[]): void;
     /** @docs-private */
     deleteFile(index: number, event?: MouseEvent, origin?: FocusOrigin): void;
-    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private initDefaultParams;
-    private getCaptionText;
     private onFileAdded;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "onlyDirectory": "onlyDirectory"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
 }

package/file-upload/single-file-upload.component.d.ts

@@ -1,13 +1,13 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, DoCheck, ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { ErrorStateMatcher } from '@koobiq/components/core';
+import { ErrorStateMatcher, KbqBaseFileUploadLocaleConfig, KbqFileUploadLocaleConfig } from '@koobiq/components/core';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileValidatorFn, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileUploadCaptionContext, KbqFileValidatorFn } from './file-upload';
 import { KbqFileLoader } from './primitives';
 import * as i0 from "@angular/core";
 import * as i1 from "./primitives/file-picker";
-export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;
+export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqFileUploadLocaleConfig['single'];
 export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, ControlValueAccessor, DoCheck {
     /**
      * A value responsible for progress spinner type.
@@ -33,8 +33,13 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * @default true
      */
     showFileSize: boolean;
+    /**
+     * Determines which kind of items the upload component can accept.
+     * @default mixed
+     */
+    allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
     /** Optional configuration to override default labels with localized text.*/
-    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqInputFileLabel> | undefined>;
+    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqBaseFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file.
      * public output will be renamed to fileChange in next major release (#DS-3700) */
     readonly fileChange: EventEmitter<KbqFileItem | null>;
@@ -43,9 +48,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     /** @docs-private */
     private readonly hint;
     /** @docs-private */
-    config: KbqInputFileLabel;
-    /** @docs-private */
-    separatedCaptionText: string[];
     /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
      * @docs-private
      */
@@ -67,7 +69,12 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      */
     get invalid(): boolean;
     /** @docs-private */
-    readonly configuration: KbqInputFileLabel | null;
+    readonly configuration: KbqBaseFileUploadLocaleConfig | null;
+    /** @docs-private */
+    protected readonly captionContext: import("@angular/core").Signal<KbqFileUploadCaptionContext>;
+    private readonly localeId;
+    /** @docs-private */
+    readonly resolvedLocaleConfig: import("@angular/core").Signal<KbqBaseFileUploadLocaleConfig>;
     private readonly focusMonitor;
     private readonly platformId;
     constructor();
@@ -94,12 +101,9 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     onFileDropped(files: KbqFile[]): void;
     /** @docs-private */
     deleteItem(event?: MouseEvent, origin?: FocusOrigin): void;
-    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private initDefaultParams;
-    private getCaptionText;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; "onlyDirectory": "onlyDirectory"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
     static ngAcceptInputType_showFileSize: unknown;
 }

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -28,6 +28,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get selectedAllEqualsSelectedNothing(): boolean;
     private get visibleOptions();
     private selectionAllInProgress;
+    private internalSelected;
     /** @docs-private */
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -39,14 +40,16 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     toggleSelectionAllByEnterKey(): void;
     /** @docs-private */
     toggleSelectionAll(emitEvent?: boolean): void;
-    private emitChangePipeEvent;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    /** @docs-private */
     onClose(): void;
     /** opens select */
     open(): void;
+    private updateInternalSelected;
+    private emitChangePipeEvent;
     private getFilteredOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiSelectComponent, "kbq-pipe-multi-select", never, {}, {}, never, never, true, never>;

package/filter-bar/pipes/pipe-multi-tree-select.d.ts

@@ -31,6 +31,7 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     get selectedAllEqualsSelectedNothing(): boolean;
     /** true if all visible options selected */
     get allVisibleOptionsSelected(): boolean;
+    private internalSelected;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -45,10 +46,14 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
     /** opens select */
     open(): void;
+    onClear(): void;
+    /** @docs-private */
     onOpen(): void;
+    /** @docs-private */
     onClose(): void;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    private updateInternalSelected;
     private emitChangePipeEvent;
     private toggleParents;
     private transformer;

package/loader-overlay/loader-overlay.scss

@@ -14,6 +14,10 @@
 }
 
 .kbq-loader-overlay {
+    --padding-horizontal: var(--kbq-size-3xl);
+    --loader-margin-bottom: var(--kbq-size-xxl);
+    --content-gap-vertical: var(--kbq-size-l);
+
     position: absolute;
 
     display: flex;
@@ -41,46 +45,33 @@
         max-width: 80%;
     }
 
-    &.kbq-loader-overlay_big {
-        padding-left: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+    padding-left: var(--padding-horizontal);
+    padding-right: var(--padding-horizontal);
 
-        padding-right: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+    .kbq-progress-spinner:has(+ .kbq-loader-overlay-text, + .kbq-loader-overlay-caption) {
+        margin-bottom: var(--loader-margin-bottom);
+    }
 
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
-        }
+    .kbq-loader-overlay-text {
+        margin-bottom: var(--content-gap-vertical);
+    }
 
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
-        }
+    &.kbq-loader-overlay_big {
+        --padding-horizontal: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
     }
 
     &.kbq-loader-overlay_normal {
-        padding-left: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
-
-        padding-right: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
-
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
-        }
-
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
-        }
+        --padding-horizontal: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
     }
 
     &.kbq-loader-overlay_compact {
-        padding-left: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
-
-        padding-right: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
-
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
-        }
-
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
-        }
+        --padding-horizontal: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
     }
 }
 

package/modal/modal.scss

@@ -110,7 +110,7 @@
     padding: var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal)
         var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);
 
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     & > * {
         position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.0.0",
+    "version": "19.1.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.0.0",
-        "@koobiq/angular-moment-adapter": "19.0.0",
-        "@koobiq/angular-luxon-adapter": "19.0.0",
+        "@koobiq/cdk": "19.1.0",
+        "@koobiq/angular-moment-adapter": "19.1.0",
+        "@koobiq/angular-luxon-adapter": "19.1.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/tokens-builder": "3.11.0",
@@ -319,7 +319,7 @@
         }
     },
     "schematics": "./schematics/collection.json",
+    "sideEffects": false,
     "module": "fesm2022/koobiq-components.mjs",
-    "typings": "index.d.ts",
-    "sideEffects": false
+    "typings": "index.d.ts"
 }

package/popover/_popover-theme.scss

@@ -2,7 +2,7 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
 
         &.kbq-popover_arrowless {
             box-shadow: var(--kbq-popover-container-shadow);
@@ -14,7 +14,7 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
         background: var(--kbq-popover-container-background);
     }
 

package/progress-spinner/_progress-spinner-theme.scss

@@ -1,9 +1,19 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-progress-spinner-theme() {
     .kbq-progress-spinner {
+        --stroke: var(--kbq-progress-spinner-circle-background);
+
         .kbq-progress-spinner__circle {
-            stroke: var(--kbq-progress-spinner-circle-background);
+            stroke: var(--stroke);
+        }
+
+        &.kbq-contrast {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-background);
+        }
+
+        &.kbq-contrast-fade {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-fade-background);
         }
     }
 
@@ -18,10 +28,10 @@
 
 @mixin kbq-progress-spinner-typography() {
     .kbq-progress-spinner-text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-progress-spinner-caption {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/progress-spinner/progress-spinner-tokens.scss

@@ -9,6 +9,8 @@
     --kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-progress-spinner-circle-background: var(--kbq-icon-theme);
+    --kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);
+    --kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);
     --kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);
     --kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary);
 }

package/progress-spinner/progress-spinner.scss

@@ -13,7 +13,7 @@
 .kbq-progress-spinner {
     display: flex;
     flex-direction: row;
-    overflow-y: hidden;
+    overflow: hidden;
 }
 
 .kbq-progress-spinner__circle {

package/risk-level/risk-level.component.d.ts

@@ -8,6 +8,9 @@ export declare enum KbqRiskLevelColors {
     Warning = "warning",
     Error = "error"
 }
+/**
+ * @deprecated Will be removed in next major release, use `KbqBadgeModule` instead.
+ */
 export declare class KbqRiskLevel {
     outline: boolean;
     get riskLevelColor(): string;

package/risk-level/risk-level.module.d.ts

@@ -2,6 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/a11y";
 import * as i2 from "@angular/cdk/platform";
 import * as i3 from "./risk-level.component";
+/**
+ * @deprecated Will be removed in next major release, use `KbqBadgeModule` instead.
+ */
 export declare class KbqRiskLevelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqRiskLevelModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRiskLevelModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.KbqRiskLevel], [typeof i3.KbqRiskLevel]>;

package/schematics/migrations/new-icons-pack/README.md

@@ -2,20 +2,68 @@
 
 This schematic provides migration for update icons pack. It includes:
 
-- Change prefixes from `mc` to `kbq` for ts, html, styles
+- Change prefixes from `mc` to `kbq` for TS, HTML, and styles
 - Update icon names for updated/removed icons according to [mapping](data.ts)
 - Fix icons package prefix in styles
+- Optionally use custom migration and replacement data
 
-[Params](schema.ts)
+---
 
-Usage for Angular Cli:
+### Parameters
+
+The schematic supports the following options:
+
+- **`--fix`** (`boolean`)
+  Applies fixes automatically without prompting.
+
+- **`--project`** (`string`)
+  Target Angular/Nx project name.
+
+- **`--update-prefix`** (`boolean`)
+  Whether to change icon prefixes during migration.
+
+- **`--custom-data-path`** (`string`)
+  Path to a custom migration data file.
+  When provided, use `migration.json` file as a default.
+  Use this option if you want to override the default icon mapping data.
+
+- **`--custom-icon-replacement-path`** (`string`)
+  Path to a custom icon attributes replacement file.
+  When provided, use `replacement.json` file as a default.
+  Use this option to customize how icon attributes are replaced during migration.
+
+The schema definition can be found in [`schema.ts`](schema.ts).
+
+### Usage
+
+#### Angular CLI
 
 ```shell
 ng g @koobiq/components:new-icons-pack --fix=true --project <your project>
 ```
 
-Usage for Nx:
+#### Angular CLI with custom data
+
+```shell
+ng g @koobiq/components:new-icons-pack \
+  --custom-data-path migration.json \
+  --custom-icon-replacement-path replacement.json \
+  --fix=true \
+  --project <your-project>
+```
+
+#### Nx
 
 ```shell
 nx g @koobiq/components:new-icons-pack --fix=true --project <your project>
 ```
+
+#### Nx with custom data
+
+```shell
+nx g @koobiq/components:new-icons-pack \
+--custom-data-path migration.json \
+--custom-icon-replacement-path replacement.json \
+--fix=true \
+--project <your-project>
+```