@koobiq/components 18.28.0 → 18.30.0

package/file-upload/_file-upload-theme.scss

@@ -3,19 +3,35 @@
 @use '../core/styles/common/tokens';
 
 @mixin kbq-file-upload-theme() {
-    .kbq-file-upload {
-        .kbq-focused,
-        .kbq-link.kbq-focused {
-            border: 2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color);
-        }
-    }
-
     .kbq-single-file-upload {
         .kbq-file-upload {
             // FIXME: move to mixin kbq-file-upload-state
             background-color: var(--kbq-file-upload-single-default-container-background);
             border-color: var(--kbq-file-upload-single-default-container-border) !important;
 
+            .kbq-focused,
+            .kbq-link.kbq-focused {
+                border: 2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color);
+            }
+
+            &:not(.kbq-disabled, .kbq-error) {
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-default-icon-button-color);
+                }
+
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-default-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-default-left-icon-color);
+                }
+
+                .kbq-file-item__size {
+                    color: var(--kbq-file-upload-single-default-file-size-text-color);
+                }
+            }
+
             &.dragover {
                 background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
@@ -27,20 +43,51 @@
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                :not(.kbq-link),
-                .kbq-icon.kbq-empty {
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-states-error-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-states-error-left-icon-color);
+                }
+
+                .file-item__text,
+                .dropzone__text:not(.kbq-link) {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
+
+                .kbq-file-item__size {
+                    color: var(--kbq-file-upload-single-states-error-file-size-text-color);
+                }
+
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-states-error-icon-button-color);
+                }
             }
 
             &.kbq-disabled {
                 background-color: var(--kbq-file-upload-single-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
 
-                &,
-                .kbq-icon.kbq-empty,
-                .kbq-link {
-                    color: var(--kbq-file-upload-single-states-disabled-container-border);
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
+                }
+
+                .dropzone__text,
+                .file-item__text {
+                    color: var(--kbq-file-upload-single-states-disabled-text-block-color);
+                }
+
+                .kbq-file-item__size {
+                    color: var(--kbq-file-upload-single-states-disabled-file-size-text-color);
+                }
+
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-states-disabled-icon-button-color);
                 }
             }
         }
@@ -51,26 +98,40 @@
             background-color: var(--kbq-file-upload-multiple-default-container-background);
             border-color: var(--kbq-file-upload-multiple-default-container-border) !important;
 
+            .kbq-focused,
+            .kbq-link.kbq-focused {
+                border: 2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color);
+            }
+
             .btn-upload {
                 border-top-color: var(--kbq-file-upload-multiple-default-container-border);
             }
 
             .kbq-file-multiple-uploaded__header {
+                color: var(--kbq-foreground-contrast-secondary);
                 border-bottom-color: var(--kbq-file-upload-multiple-default-grid-divider-color);
             }
 
+            &:not(.kbq-disabled, .kbq-error) {
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-default-upload-icon-color);
+                }
+            }
+
             &.dragover {
                 background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
 
+                .btn-upload {
+                    border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
+                }
+
                 .kbq-file-multiple-uploaded__header {
-                    border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-container-background) !important;
+                    border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color) !important;
                 }
 
-                &.selected {
-                    .dropzone {
-                        border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
-                    }
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
                 }
             }
 
@@ -78,15 +139,31 @@
                 background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
 
-                &,
-                .kbq-icon.kbq-empty,
-                .kbq-link {
-                    color: var(--kbq-file-upload-multiple-states-disabled-container-border);
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
+                }
+
+                .dropzone__text,
+                .kbq-file-multiple-uploaded__header {
+                    color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+                }
+
+                .kbq-file-multiple-uploaded__header {
+                    border-bottom-color: var(--kbq-file-upload-multiple-states-disabled-grid-divider-color) !important;
                 }
 
-                &.selected {
-                    .dropzone {
-                        border-top-color: var(--kbq-file-upload-multiple-states-disabled-container-border);
+                .multiple__uploaded-item {
+                    .kbq-file-upload__file .kbq-icon.kbq-empty {
+                        color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
+                    }
+
+                    .file-item__text,
+                    .kbq-file-upload__size {
+                        color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+                    }
+
+                    .kbq-file-upload__action .kbq-icon.kbq-empty {
+                        color: var(--kbq-file-upload-multiple-states-disabled-icon-button-color);
                     }
                 }
             }
@@ -96,9 +173,13 @@
                     background-color: var(--kbq-background-error-less);
                     border-color: var(--kbq-line-error) !important;
 
-                    :not(.kbq-link),
-                    .kbq-icon.kbq-empty {
-                        color: var(--kbq-foreground-error);
+                    .kbq-dropzone__icon {
+                        color: var(--kbq-file-upload-multiple-states-error-upload-icon-color);
+                    }
+
+                    .dropzone__text:not(.kbq-link),
+                    .kbq-file-multiple-uploaded__header {
+                        color: var(--kbq-file-upload-multiple-states-error-text-block-color);
                     }
                 }
 
@@ -106,20 +187,32 @@
                     &:has(.kbq-file-upload__row.error) {
                         background-color: var(--kbq-background-error-less);
 
-                        :not(.kbq-link),
-                        .kbq-icon.kbq-empty {
+                        .file-item__text,
+                        .kbq-file-upload__size {
                             color: var(--kbq-foreground-error);
                         }
+
+                        .kbq-file-upload__file .kbq-icon.kbq-empty {
+                            color: var(--kbq-file-upload-multiple-states-error-left-icon-color);
+                        }
+
+                        .kbq-file-upload__action .kbq-icon.kbq-empty {
+                            color: var(--kbq-file-upload-multiple-states-error-icon-button-color);
+                        }
                     }
                 }
             }
 
             .multiple__uploaded-item {
-                & .kbq-file-upload__file .kbq-icon.kbq-empty {
+                .kbq-file-upload__file .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-left-icon-color);
                 }
 
-                & .kbq-file-upload__action .kbq-icon.kbq-empty {
+                .kbq-file-upload__size {
+                    color: var(--kbq-file-upload-multiple-default-file-size-text-color);
+                }
+
+                .kbq-file-upload__action .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-icon-button-color);
                 }
             }

package/file-upload/file-upload-tokens.scss

@@ -1,4 +1,8 @@
-.kbq-file-upload {
+:where(.kbq-file-upload) {
+    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+}
+
+:where(.kbq-single-file-upload) {
     --kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);
     --kbq-file-upload-size-single-container-border-width: 1px;
     --kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);
@@ -6,18 +10,7 @@
     --kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);
     --kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);
-    --kbq-file-upload-size-multiple-big-container-min-height: 160px;
-    --kbq-file-upload-size-multiple-big-container-min-width: 320px;
-    --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-container-border-width: 1px;
-    --kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);
-    --kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);
-    --kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);
-    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;
-    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);
-    --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-single-min-height: var(--kbq-size-5xl);
     /* THEME TOKENS */
     --kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
@@ -25,6 +18,7 @@
     --kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);
+    --kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
     --kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);
     --kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -32,14 +26,37 @@
     --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
     --kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
+    --kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
+    --kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);
+    --kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);
     --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
+    --kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+:where(.kbq-multiple-file-upload) {
+    --kbq-file-upload-size-multiple-big-container-min-height: 192px;
+    --kbq-file-upload-size-multiple-big-container-min-width: 320px;
+    --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-container-border-width: 1px;
+    --kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);
+    --kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);
+    --kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);
+    --kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;
+    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);
+    /* THEME TOKENS */
     --kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);
     --kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -47,6 +64,7 @@
     --kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);
     --kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);
+    --kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
     --kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -55,6 +73,7 @@
     --kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);
     --kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);
+    --kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
@@ -62,7 +81,16 @@
     --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+    --kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+:where(.kbq-file-upload.compact) {
+    --kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);
+    --kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);
+    --kbq-file-upload-multiple-compact-container-padding-vertical: 11px;
+    --kbq-file-upload-multiple-compact-container-padding-horizontal: 11px;
 }

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

@@ -27,6 +27,7 @@ export interface KbqInputFileLabel {
  */
 export type KbqFileValidatorFn = (file: File) => string | null;
 export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqInputFileLabel>;
+/** @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 implements CanUpdateErrorState {

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

@@ -42,21 +42,23 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     set files(currentFileList: KbqFileItem[]);
     /** Emits an event containing updated file list.
      * public output will be renamed to filesChange in next major release (#DS-3700) */
-    filesChange: EventEmitter<KbqFileItem[]>;
+    readonly filesChange: EventEmitter<KbqFileItem[]>;
     /**
      * Emits an event containing a chunk of files added to the file list.
      * Useful when handling added files, skipping filtering file list.
      */
-    filesAdded: EventEmitter<KbqFileItem[]>;
+    readonly filesAdded: EventEmitter<KbqFileItem[]>;
     /**
      * Emits an event containing a tuple of file and file's index when removed from the file list.
      * Useful when handle removed files, skipping filtering file list.
      */
-    fileRemoved: EventEmitter<[KbqFileItem, number]>;
+    readonly fileRemoved: EventEmitter<[KbqFileItem, number]>;
     /** File Icon Template */
-    customFileIcon: TemplateRef<HTMLElement>;
+    protected readonly customFileIcon: TemplateRef<HTMLElement>;
     /** @docs-private */
-    input: ElementRef<HTMLInputElement>;
+    readonly input: ElementRef<HTMLInputElement>;
+    private readonly listSelection;
+    private readonly fileSizeHeaderCell;
     /** @docs-private */
     protected readonly hint: QueryList<TemplateRef<any>>;
     /** @docs-private */
@@ -95,6 +97,11 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
      * @docs-private
      */
     get invalid(): boolean;
+    /**
+     * Set maxWidth for filesize cell to enable proper ellipsis center,
+     * @docs-private
+     */
+    protected get fileSizeCellMaxWidth(): number;
     /** @docs-private */
     readonly configuration: KbqInputFileMultipleLabel | null;
     constructor();

package/file-upload/multiple-file-upload.component.scss

@@ -18,58 +18,35 @@
 
         min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
 
-        & .dropzone {
+        .dropzone {
             gap: var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal);
         }
 
-        & .dropzone__text {
-            & .multiple__header {
-                display: block;
-            }
-
-            & .multiple__caption {
-                display: block;
+        .dropzone__text {
+            .multiple__caption {
                 padding-top: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);
-                // гап не применяется тк не флекс. в целом гап не нужен, тк по логике дизайна ссылка от текста отделяется пробелом
-                gap: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal);
             }
         }
     }
 
     &.compact:not(.selected) {
-        padding: var(--kbq-file-upload-size-single-container-padding-vertical)
-            var(--kbq-file-upload-size-single-container-padding-horizontal);
-
-        & .dropzone {
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+        padding: var(--kbq-file-upload-multiple-compact-container-padding-vertical)
+            var(--kbq-file-upload-multiple-compact-container-padding-horizontal);
 
-            & .dropzone__text.multiple__caption {
-                padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
+        .dropzone {
+            gap: var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal);
 
-                padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
+            .dropzone__text.multiple__caption {
+                padding-top: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
 
-                gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
+                padding-bottom: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
             }
         }
     }
 
-    & .kbq-list-option.multiple__uploaded-item {
-        padding: 0;
-
-        & .kbq-list-text {
-            padding: calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            var(--kbq-size-3xs)
-                        )
-                )
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            var(--kbq-size-3xs)
-                        )
-                );
-        }
+    .kbq-list-option.multiple__uploaded-item {
+        border-radius: 0;
+        padding: 0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width));
 
         .kbq-icon {
             margin-right: 0;
@@ -86,67 +63,87 @@
         align-items: center;
 
         .kbq-file-upload__file {
-            width: 65%;
-            max-width: 65%;
-
-            gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
+            flex-grow: 1;
         }
 
         .kbq-file-upload__size {
-            width: var(--kbq-size-7xl);
-            min-width: var(--kbq-size-7xl);
-            text-align: left;
+            width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            min-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            max-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
             flex-grow: 1;
+            flex-shrink: 1;
+            text-align: left;
         }
     }
 
     .kbq-file-upload__row {
+        .kbq-file-upload__grid-cell {
+            padding: 0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
+        }
+
         .kbq-file-upload__file {
             display: flex;
             align-items: center;
+            gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
 
             .file-item__text {
-                margin-left: 0;
                 width: 90%;
             }
         }
+
+        .kbq-file-upload__action {
+            $list-option-border-width: var(--kbq-size-3xs);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: calc(
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - $list-option-border-width
+            );
+            padding-bottom: calc(
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - $list-option-border-width
+            );
+            min-height: var(--kbq-size-xxl);
+            min-width: var(--kbq-size-xxl);
+        }
     }
 
     .kbq-file-multiple-uploaded__header {
-        border-bottom-width: 1px;
+        margin: -1px;
+        border-bottom-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-bottom-style: solid;
 
-        .kbq-file-multiple-uploaded__header-inner {
-            padding: kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-vertical, 2px])
-                kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-horizontal 2px]);
+        padding: 0 var(--kbq-size-xxs);
+
+        .kbq-file-upload__grid-cell {
+            $header-cell-vertical-padding: 10px;
+            padding: $header-cell-vertical-padding var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
+                calc($header-cell-vertical-padding - var(--kbq-file-upload-size-multiple-big-container-border-width))
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
+        }
+
+        .kbq-file-upload__action {
+            min-height: var(--kbq-size-xxl);
+            min-width: var(--kbq-size-xxl);
+            padding: var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
+                            --kbq-file-upload-size-multiple-big-container-border-width
+                        )
+                );
         }
     }
 
     .btn-upload {
-        padding: kbq-difference-series-css-variables(
-                [ file-upload-size-single-container-padding-vertical,
-                file-upload-size-single-container-border-width]
-            )
-            kbq-difference-series-css-variables(
-                [ file-upload-size-single-container-padding-horizontal,
-                file-upload-size-single-container-border-width]
-            );
-        border-top-left-radius: var(--kbq-file-upload-size-single-container-border-radius);
+        margin: -1px;
+        padding: calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width))
+            var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);
 
-        border-top-right-radius: var(--kbq-file-upload-size-single-container-border-radius);
-        border-top-width: var(--kbq-file-upload-size-single-container-border-width);
+        border-top-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-top-style: dashed;
 
-        & .dropzone {
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
-
-            & .dropzone__text.multiple__caption {
-                padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-                padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-                gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
-            }
+        .dropzone {
+            gap: var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal);
         }
     }
 

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

@@ -27,6 +27,11 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private _file;
     get file(): KbqFileItem | null;
     set file(currentFile: KbqFileItem | null);
+    /**
+     * Controls whether to display the file size information.
+     * @default true
+     */
+    showFileSize: boolean;
     /** Emits an event containing updated file.
      * public output will be renamed to fileChange in next major release (#DS-3700) */
     fileChange: EventEmitter<KbqFileItem | null>;
@@ -88,5 +93,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     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; }; "disabled": { "alias": "disabled"; "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; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, 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; }; "disabled": { "alias": "disabled"; "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; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
+    static ngAcceptInputType_showFileSize: unknown;
 }

package/file-upload/single-file-upload.component.scss

@@ -11,6 +11,7 @@
             [ file-upload-size-single-container-padding-horizontal,
             file-upload-size-single-container-border-width]
         );
+    min-height: var(--kbq-file-upload-single-min-height);
 
     border-radius: var(--kbq-file-upload-size-single-container-border-radius);
     border-width: var(--kbq-file-upload-size-single-container-border-width);
@@ -43,5 +44,13 @@
                 flex-grow: 1;
             }
         }
+
+        .kbq-file-item__size {
+            padding: 0 var(--kbq-size-s);
+        }
+
+        .kbq-file-upload__action {
+            padding: var(--kbq-size-xxs);
+        }
     }
 }