From 7771833f0ec893e24199cfc6e718652ede6e268f Mon Sep 17 00:00:00 2001
From: Artem Belik <artyombelyk@gmail.com>
Date: Wed, 12 Nov 2025 09:32:41 +0300
Subject: [PATCH 1/4] fix: missed component class name 'kbq-' prefix (#DS-3753)

---
 .../e2e/components/file-upload.ts             |  2 +-
 packages/components-dev/file-upload/module.ts |  4 +-
 .../core/styles/typography/_typography.scss   | 16 ++---
 .../ellipsis-center.directive.spec.ts         |  4 +-
 .../ellipsis-center.directive.ts              |  5 +-
 .../file-upload/_file-upload-theme.scss       | 66 +++++++++----------
 .../components/file-upload/file-drop.spec.ts  | 10 +--
 packages/components/file-upload/file-drop.ts  |  3 +-
 .../file-upload/file-upload.karma-spec.ts     |  4 +-
 .../components/file-upload/file-upload.scss   | 11 ++--
 .../file-upload/file-upload.spec.ts           |  4 +-
 .../multiple-file-upload.component.html       | 35 +++++-----
 .../multiple-file-upload.component.scss       | 26 ++++----
 .../single-file-upload.component.html         | 12 ++--
 .../single-file-upload.component.scss         | 12 ++--
 .../markdown.component.spec.ts.snap           |  8 +--
 .../components/markdown/_markdown-theme.scss  |  1 -
 .../components/markdown/markdown.component.ts |  4 +-
 packages/components/markdown/markdown.scss    |  6 +-
 packages/components/modal/modal.scss          |  7 +-
 .../scrollbar/scrollbar.component.scss        |  5 +-
 .../components/toggle/toggle.component.html   |  8 ++-
 packages/components/toggle/toggle.scss        |  8 +--
 ...eadcrumbs-truncate-center-items-example.ts |  4 +-
 24 files changed, 127 insertions(+), 138 deletions(-)

diff --git a/packages/components-dev/e2e/components/file-upload.ts b/packages/components-dev/e2e/components/file-upload.ts
index 37ae1a6af2..55cfaab672 100644
--- a/packages/components-dev/e2e/components/file-upload.ts
+++ b/packages/components-dev/e2e/components/file-upload.ts
@@ -158,7 +158,7 @@ export class DevFileUploadStateAndStyle {
         afterNextRender(() => {
             this.document
                 .querySelectorAll('.dev-dragover .kbq-file-upload')
-                .forEach((el) => this.renderer.addClass(el, 'dragover'));
+                .forEach((el) => this.renderer.addClass(el, 'kbq-file-drop_dragover'));
 
             this.document
                 .querySelectorAll('.dev-error .kbq-file-upload')
diff --git a/packages/components-dev/file-upload/module.ts b/packages/components-dev/file-upload/module.ts
index 77f5e16b45..4a25861fb7 100644
--- a/packages/components-dev/file-upload/module.ts
+++ b/packages/components-dev/file-upload/module.ts
@@ -246,7 +246,7 @@ export class DevFileUploadStateAndStyle {
         afterNextRender(() => {
             this.document
                 .querySelectorAll('.dev-dragover .kbq-file-upload')
-                .forEach((el) => this.renderer.addClass(el, 'dragover'));
+                .forEach((el) => this.renderer.addClass(el, 'kbq-file-drop_dragover'));
             this.document
                 .querySelectorAll('.dev-error .kbq-file-upload')
                 .forEach((el) => this.renderer.addClass(el, 'kbq-error'));
@@ -308,7 +308,7 @@ export class DevFileUploadStateAndStyle {
     },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-class DevExamples {}
+export class DevExamples {}
 
 @Component({
     standalone: true,
diff --git a/packages/components/core/styles/typography/_typography.scss b/packages/components/core/styles/typography/_typography.scss
index 7711baa35e..84e78fcb54 100644
--- a/packages/components/core/styles/typography/_typography.scss
+++ b/packages/components/core/styles/typography/_typography.scss
@@ -1,9 +1,5 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use 'sass:map';
-
 @use 'typography-utils' as *;
-
 @use '../common/tokens' as *;
 
 // TODO: REMOVE
@@ -303,28 +299,28 @@
 @mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
-        .md-h#{$i} {
+        .kbq-md-h#{$i} {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
-    .md-body {
+    .kbq-md-body {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
-    .md-body-mono {
+    .kbq-md-body-mono {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
-    .md-caption {
+    .kbq-md-caption {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
-    .md-table-cell {
+    .kbq-md-table-cell {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
-    .md-table-header {
+    .kbq-md-table-header {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }
 }
diff --git a/packages/components/ellipsis-center/ellipsis-center.directive.spec.ts b/packages/components/ellipsis-center/ellipsis-center.directive.spec.ts
index aec5c3f961..1595780a86 100644
--- a/packages/components/ellipsis-center/ellipsis-center.directive.spec.ts
+++ b/packages/components/ellipsis-center/ellipsis-center.directive.spec.ts
@@ -70,8 +70,8 @@ describe(KbqEllipsisCenterDirective.name, () => {
         componentInstance.ellipsisCenterDirective.refresh();
         tick(); // wait for setTimeout
 
-        const startEl: HTMLElement = nativeElement.querySelector('.data-text-start')!;
-        const endEl: HTMLElement = nativeElement.querySelector('.data-text-end')!;
+        const startEl: HTMLElement = nativeElement.querySelector('.kbq-ellipsis-center_data-text-start')!;
+        const endEl: HTMLElement = nativeElement.querySelector('.kbq-ellipsis-center_data-text-end')!;
 
         expect(startEl).toBeTruthy();
         expect(endEl).toBeTruthy();
diff --git a/packages/components/ellipsis-center/ellipsis-center.directive.ts b/packages/components/ellipsis-center/ellipsis-center.directive.ts
index 4fac6a076f..c2f6b943e1 100644
--- a/packages/components/ellipsis-center/ellipsis-center.directive.ts
+++ b/packages/components/ellipsis-center/ellipsis-center.directive.ts
@@ -79,7 +79,10 @@ export class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnI
 
         this.content = this._kbqEllipsisCenter;
 
-        const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {
+        const [dataTextStart, dataTextEnd] = [
+            'kbq-ellipsis-center_data-text-start',
+            'kbq-ellipsis-center_data-text-end'
+        ].map((querySelector) => {
             const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);
 
             if (element) {
diff --git a/packages/components/file-upload/_file-upload-theme.scss b/packages/components/file-upload/_file-upload-theme.scss
index 9436c6930e..19efd60a17 100644
--- a/packages/components/file-upload/_file-upload-theme.scss
+++ b/packages/components/file-upload/_file-upload-theme.scss
@@ -1,5 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens';
 
 @mixin kbq-file-upload-theme() {
@@ -19,11 +17,11 @@
                     color: var(--kbq-file-upload-single-default-icon-button-color);
                 }
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-single-default-upload-icon-color);
                 }
 
-                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-default-left-icon-color);
                 }
 
@@ -32,27 +30,27 @@
                 }
             }
 
-            &.dragover {
+            &.kbq-file-drop_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;
             }
 
             &.kbq-error:not(.kbq-disabled) {
-                &:not(.dragover) {
+                &:not(.kbq-file-drop_dragover) {
                     background-color: var(--kbq-file-upload-single-states-error-container-background);
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-single-states-error-upload-icon-color);
                 }
 
-                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                .kbq-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) {
+                .kbq-file-item__text,
+                .kbq-file-dropzone__text:not(.kbq-link) {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
 
@@ -69,16 +67,16 @@
                 background-color: var(--kbq-file-upload-single-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
                 }
 
-                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
                 }
 
-                .dropzone__text,
-                .file-item__text {
+                .kbq-file-dropzone__text,
+                .kbq-file-item__text {
                     color: var(--kbq-file-upload-single-states-disabled-text-block-color);
                 }
 
@@ -103,7 +101,7 @@
                 border: 2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color);
             }
 
-            .btn-upload {
+            .kbq-file-btn-upload {
                 border-top-color: var(--kbq-file-upload-multiple-default-container-border);
             }
 
@@ -113,16 +111,16 @@
             }
 
             &:not(.kbq-disabled, .kbq-error) {
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-default-upload-icon-color);
                 }
             }
 
-            &.dragover {
+            &.kbq-file-drop_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 {
+                .kbq-file-btn-upload {
                     border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
                 }
 
@@ -130,7 +128,7 @@
                     border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color) !important;
                 }
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
                 }
             }
@@ -139,11 +137,11 @@
                 background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
                 }
 
-                .dropzone__text,
+                .kbq-file-dropzone__text,
                 .kbq-file-multiple-uploaded__header {
                     color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
                 }
@@ -152,12 +150,12 @@
                     border-bottom-color: var(--kbq-file-upload-multiple-states-disabled-grid-divider-color) !important;
                 }
 
-                .multiple__uploaded-item {
+                .kbq-file-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-item__text,
                     .kbq-file-upload__size {
                         color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
                     }
@@ -173,21 +171,21 @@
                     background-color: var(--kbq-background-error-less);
                     border-color: var(--kbq-line-error) !important;
 
-                    .kbq-dropzone__icon {
+                    .kbq-file-dropzone__icon {
                         color: var(--kbq-file-upload-multiple-states-error-upload-icon-color);
                     }
 
-                    .dropzone__text:not(.kbq-link),
+                    .kbq-file-dropzone__text:not(.kbq-link),
                     .kbq-file-multiple-uploaded__header {
                         color: var(--kbq-file-upload-multiple-states-error-text-block-color);
                     }
                 }
 
-                .multiple__uploaded-item {
-                    &:has(.kbq-file-upload__row.error) {
+                .kbq-file-multiple__uploaded-item {
+                    &:has(.kbq-file-upload__row.kbq-error) {
                         background-color: var(--kbq-background-error-less);
 
-                        .file-item__text,
+                        .kbq-file-item__text,
                         .kbq-file-upload__size {
                             color: var(--kbq-foreground-error);
                         }
@@ -203,7 +201,7 @@
                 }
             }
 
-            .multiple__uploaded-item {
+            .kbq-file-multiple__uploaded-item {
                 .kbq-file-upload__file .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-left-icon-color);
                 }
@@ -233,19 +231,19 @@
 
     // @TODO: remove when redesign applied, use default font (#DS-3858)
     .kbq-single-file-upload {
-        & .file-item__text-wrapper,
-        & .dropzone__text {
+        & .kbq-file-item__text-wrapper,
+        & .kbq-file-dropzone__text {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-multiple-file-upload {
-        .multiple__header {
+        .kbq-file-multiple__header {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
         // @TODO: remove when redesign applied, use default font (#DS-3858)
-        .multiple__caption {
+        .kbq-file-multiple__caption {
             &,
             .kbq-link {
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
@@ -258,7 +256,7 @@
         }
 
         // @TODO: remove when redesign applied, use default font (#DS-3858)
-        .multiple__uploaded-item {
+        .kbq-file-multiple__uploaded-item {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
diff --git a/packages/components/file-upload/file-drop.spec.ts b/packages/components/file-upload/file-drop.spec.ts
index 9728658f39..9b54e7e883 100644
--- a/packages/components/file-upload/file-drop.spec.ts
+++ b/packages/components/file-upload/file-drop.spec.ts
@@ -46,17 +46,17 @@ describe('FileDropDirective', () => {
     });
 
     it('FileDropDirective: dragover/dragleave', () => {
-        expect(dndZone.classList.contains('dragover')).toBeFalsy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
 
         dispatchFakeEvent(dndZone, 'dragover');
         fixture.detectChanges();
 
-        expect(dndZone.classList.contains('dragover')).toBeTruthy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeTruthy();
 
         dispatchFakeEvent(dndZone, 'dragleave');
         fixture.detectChanges();
 
-        expect(dndZone.classList.contains('dragover')).toBeFalsy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
     });
 
     it('FileDropDirective: drop with files', (done) => {
@@ -70,14 +70,14 @@ describe('FileDropDirective', () => {
         dispatchFakeEvent(dndZone, 'dragover');
         fixture.detectChanges();
 
-        expect(dndZone.classList.contains('dragover')).toBeTruthy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeTruthy();
 
         dispatchEvent(dndZone, event);
         fixture.detectChanges();
 
         setTimeout(() => {
             expect(component.onDrop).toHaveBeenCalledWith(expect.objectContaining({ length: fakeFiles.length }));
-            expect(dndZone.classList.contains('dragover')).toBeFalsy();
+            expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
             done();
         });
     });
diff --git a/packages/components/file-upload/file-drop.ts b/packages/components/file-upload/file-drop.ts
index 9168585ccd..a034f84255 100644
--- a/packages/components/file-upload/file-drop.ts
+++ b/packages/components/file-upload/file-drop.ts
@@ -9,7 +9,8 @@ const entryIsFile = (entry?: FileSystemEntry): entry is FileSystemFileEntry => !
     selector: '[kbqFileDrop]',
     exportAs: 'kbqFileDrop',
     host: {
-        '[class.dragover]': 'dragover',
+        class: 'kbq-file-drop',
+        '[class.kbq-file-drop_dragover]': 'dragover',
         '(dragover)': 'onDragOver($event)',
         '(dragleave)': 'onDragLeave($event)',
         '(drop)': 'onDrop($event)'
diff --git a/packages/components/file-upload/file-upload.karma-spec.ts b/packages/components/file-upload/file-upload.karma-spec.ts
index b34563c20f..ee17964ad9 100644
--- a/packages/components/file-upload/file-upload.karma-spec.ts
+++ b/packages/components/file-upload/file-upload.karma-spec.ts
@@ -11,9 +11,9 @@ import { KbqFileUploadModule } from './file-upload.module';
 import { KbqMultipleFileUploadComponent } from './multiple-file-upload.component';
 import { KbqSingleFileUploadComponent } from './single-file-upload.component';
 
-const fileItemRowCssClass = 'multiple__uploaded-item';
+const fileItemRowCssClass = 'kbq-file-multiple__uploaded-item';
 
-const fileItemCssClass = 'file-item';
+const fileItemCssClass = 'kbq-file-item';
 
 const FILE_NAME = 'test.file';
 
diff --git a/packages/components/file-upload/file-upload.scss b/packages/components/file-upload/file-upload.scss
index b75870a2a8..a907e7b7fc 100644
--- a/packages/components/file-upload/file-upload.scss
+++ b/packages/components/file-upload/file-upload.scss
@@ -1,6 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
-
 @use './file-upload-theme' as theme;
 
 .kbq-file-upload {
@@ -9,8 +6,8 @@
     align-items: center;
     position: relative;
 
-    .dropzone,
-    .file-item {
+    .kbq-file-dropzone,
+    .kbq-file-item {
         display: flex;
         align-items: center;
     }
@@ -19,14 +16,14 @@
         position: relative;
         display: flex;
 
-        .data-text-start {
+        .kbq-ellipsis-center_data-text-start {
             flex: 0 1 auto;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: pre;
         }
 
-        .data-text-end {
+        .kbq-ellipsis-center_data-text-end {
             flex: 1 0 auto;
             overflow: hidden;
             white-space: pre;
diff --git a/packages/components/file-upload/file-upload.spec.ts b/packages/components/file-upload/file-upload.spec.ts
index 6f6a3c26e0..b9c22b2f52 100644
--- a/packages/components/file-upload/file-upload.spec.ts
+++ b/packages/components/file-upload/file-upload.spec.ts
@@ -50,8 +50,8 @@ const getMockedChangeEventForSingle = (fileNameOrFakeFile: string | Partial<File
 
 const fileItemActionCssClass = 'kbq-file-upload__action';
 
-const fileItemCssClass = 'file-item';
-const fileItemTextCssClass = 'file-item__text';
+const fileItemCssClass = 'kbq-file-item';
+const fileItemTextCssClass = 'kbq-file-item__text';
 
 const maxFileExceeded = (file: File): string | null => {
     const kilo = 1024;
diff --git a/packages/components/file-upload/multiple-file-upload.component.html b/packages/components/file-upload/multiple-file-upload.component.html
index 575f05be83..d006fcf663 100644
--- a/packages/components/file-upload/multiple-file-upload.component.html
+++ b/packages/components/file-upload/multiple-file-upload.component.html
@@ -3,24 +3,25 @@
     class="kbq-file-upload"
     [class.kbq-disabled]="disabled"
     [class.kbq-error]="invalid"
-    [class.selected]="files?.length"
-    [ngClass]="size"
+    [class.kbq-selected]="files?.length"
+    [class.kbq-file-upload_default]="size === 'default'"
+    [class.kbq-file-upload_compact]="size === 'compact'"
     (filesDropped)="onFileDropped($event)"
 >
     @if (!files.length) {
-        <div class="dropzone">
+        <div class="kbq-file-dropzone">
             @if (size === 'default') {
-                <i kbq-icon="kbq-cloud-arrow-up-o_32" class="kbq-dropzone__icon"></i>
-                <div class="dropzone__text">
-                    <div class="multiple__header">{{ config.title }}</div>
+                <i kbq-icon="kbq-cloud-arrow-up-o_32" class="kbq-file-dropzone__icon"></i>
+                <div class="kbq-file-dropzone__text">
+                    <div class="kbq-file-multiple__header">{{ config.title }}</div>
                     <div>
                         <!-- prettier-ignore -->
-                        <div class="multiple__caption">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]="disabled" [tabIndex]="-1" [for]="inputId">{{ config.browseLink }}<ng-container *ngTemplateOutlet="inputTemplate" /></label>{{ separatedCaptionText[1] }}</div>
+                        <div class="kbq-file-multiple__caption">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]="disabled" [tabIndex]="-1" [for]="inputId">{{ config.browseLink }}<ng-container *ngTemplateOutlet="inputTemplate" /></label>{{ separatedCaptionText[1] }}</div>
                     </div>
                 </div>
             } @else {
-                <i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-dropzone__icon"></i>
-                <span class="dropzone__text multiple__caption">
+                <i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-file-dropzone__icon"></i>
+                <span class="kbq-file-dropzone__text kbq-file-multiple__caption">
                     {{ separatedCaptionTextForCompactSize[0] }}
                     <label kbq-link pseudo [disabled]="disabled" [for]="inputId" [tabIndex]="-1">
                         {{ config.browseLink }}
@@ -31,7 +32,7 @@
             }
         </div>
     } @else {
-        <div class="file-upload__dropzone">
+        <div class="kbq-file-upload__dropzone">
             <div class="kbq-file-upload__grid">
                 <div class="kbq-file-multiple-uploaded__header">
                     <div class="kbq-file-multiple-uploaded__header-inner">
@@ -47,12 +48,12 @@
                 <kbq-list-selection [autoSelect]="false" [disabled]="disabled">
                     @for (file of files; track file; let index = $index) {
                         <kbq-list-option
-                            class="multiple__uploaded-item"
+                            class="kbq-file-multiple__uploaded-item"
                             [value]="file.file.name"
                             (keydown.backspace)="deleteFile(index)"
                             (keydown.delete)="deleteFile(index)"
                         >
-                            <div class="kbq-file-upload__row" [class.error]="file.hasError">
+                            <div class="kbq-file-upload__row" [class.kbq-error]="file.hasError">
                                 <div
                                     class="kbq-file-upload__file kbq-file-upload__grid-cell"
                                     [style.max-width.px]="fileSizeCellMaxWidth"
@@ -76,7 +77,7 @@
                                         }
                                     }
                                     <span
-                                        class="file-item__text"
+                                        class="kbq-file-item__text"
                                         [debounceInterval]="0"
                                         [kbqEllipsisCenter]="file.file.name"
                                     ></span>
@@ -95,10 +96,10 @@
                     }
                 </kbq-list-selection>
             </div>
-            <div class="btn-upload">
-                <div class="dropzone">
-                    <i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-dropzone__icon"></i>
-                    <span class="dropzone__text multiple__caption">
+            <div class="kbq-file-btn-upload">
+                <div class="kbq-file-dropzone">
+                    <i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-file-dropzone__icon"></i>
+                    <span class="kbq-file-dropzone__text kbq-file-multiple__caption">
                         {{ separatedCaptionTextWhenSelected[0] }}
                         <label kbq-link pseudo [disabled]="disabled" [for]="inputId" [tabIndex]="-1">
                             {{ config.browseLink }}
diff --git a/packages/components/file-upload/multiple-file-upload.component.scss b/packages/components/file-upload/multiple-file-upload.component.scss
index 421987de1d..a636a73e9d 100644
--- a/packages/components/file-upload/multiple-file-upload.component.scss
+++ b/packages/components/file-upload/multiple-file-upload.component.scss
@@ -1,5 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 // todo нужно рефакторить со стилями тут сложно
@@ -8,7 +6,7 @@
     border-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
     border-style: dashed;
 
-    &.default:not(.selected) {
+    &.kbq-file-upload_default:not(.kbq-selected) {
         justify-content: center;
 
         padding: var(--kbq-file-upload-size-multiple-big-container-padding-vertical)
@@ -18,25 +16,25 @@
 
         min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
 
-        .dropzone {
+        .kbq-file-dropzone {
             gap: var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal);
         }
 
-        .dropzone__text {
-            .multiple__caption {
+        .kbq-file-dropzone__text {
+            .kbq-file-multiple__caption {
                 padding-top: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);
             }
         }
     }
 
-    &.compact:not(.selected) {
+    &.kbq-file-upload_compact:not(.kbq-selected) {
         padding: var(--kbq-file-upload-multiple-compact-container-padding-vertical)
             var(--kbq-file-upload-multiple-compact-container-padding-horizontal);
 
-        .dropzone {
+        .kbq-file-dropzone {
             gap: var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal);
 
-            .dropzone__text.multiple__caption {
+            .kbq-file-dropzone__text.kbq-file-multiple__caption {
                 padding-top: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
 
                 padding-bottom: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
@@ -44,7 +42,7 @@
         }
     }
 
-    .kbq-list-option.multiple__uploaded-item {
+    .kbq-list-option.kbq-file-multiple__uploaded-item {
         border-radius: 0;
         padding: 0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width));
 
@@ -86,7 +84,7 @@
             align-items: center;
             gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
 
-            .file-item__text {
+            .kbq-file-item__text {
                 width: 90%;
             }
         }
@@ -134,7 +132,7 @@
         }
     }
 
-    .btn-upload {
+    .kbq-file-btn-upload {
         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);
@@ -142,12 +140,12 @@
         border-top-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-top-style: dashed;
 
-        .dropzone {
+        .kbq-file-dropzone {
             gap: var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal);
         }
     }
 
-    .file-upload__dropzone {
+    .kbq-file-upload__dropzone {
         width: 100%;
         height: 100%;
     }
diff --git a/packages/components/file-upload/single-file-upload.component.html b/packages/components/file-upload/single-file-upload.component.html
index 9cd7fff267..8e333fe8d9 100644
--- a/packages/components/file-upload/single-file-upload.component.html
+++ b/packages/components/file-upload/single-file-upload.component.html
@@ -6,15 +6,15 @@
     (filesDropped)="onFileDropped($event)"
 >
     @if (!file) {
-        <div class="dropzone">
-            <i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-dropzone__icon"></i>
+        <div class="kbq-file-dropzone">
+            <i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-file-dropzone__icon"></i>
             <!-- prettier-ignore -->
-            <span class="dropzone__text">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]="disabled" [tabIndex]="-1" [for]="inputId">{{ config.browseLink }}<input #input type="file" class="cdk-visually-hidden" tabindex="0" [id]="inputId" [accept]="acceptedFiles" [disabled]="disabled" (change)="onFileSelectedViaClick($event)"></label>{{ separatedCaptionText[1] }}</span>
+            <span class="kbq-file-dropzone__text">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]="disabled" [tabIndex]="-1" [for]="inputId">{{ config.browseLink }}<input #input type="file" class="cdk-visually-hidden" tabindex="0" [id]="inputId" [accept]="acceptedFiles" [disabled]="disabled" (change)="onFileSelectedViaClick($event)"></label>{{ separatedCaptionText[1] }}</span>
         </div>
     } @else {
         @if (file) {
-            <div class="file-item">
-                <div class="file-item__text-wrapper">
+            <div class="kbq-file-item">
+                <div class="kbq-file-item__text-wrapper">
                     @if ({ loading: file.loading | async, progress: file.progress | async }; as asyncData) {
                         @if (!asyncData.loading) {
                             <ng-content select="[kbq-icon]" />
@@ -23,7 +23,7 @@
                             <kbq-progress-spinner [mode]="progressMode" [value]="asyncData.progress || 0" />
                         }
                     }
-                    <div class="file-item__text" [kbqEllipsisCenter]="file.file.name" [minVisibleLength]="10"></div>
+                    <div class="kbq-file-item__text" [kbqEllipsisCenter]="file.file.name" [minVisibleLength]="10"></div>
                 </div>
                 @if (showFileSize) {
                     <div class="kbq-file-item__size">
diff --git a/packages/components/file-upload/single-file-upload.component.scss b/packages/components/file-upload/single-file-upload.component.scss
index 039437dfe6..b813f68612 100644
--- a/packages/components/file-upload/single-file-upload.component.scss
+++ b/packages/components/file-upload/single-file-upload.component.scss
@@ -1,5 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 .kbq-single-file-upload .kbq-file-upload {
@@ -17,7 +15,7 @@
     border-width: var(--kbq-file-upload-size-single-container-border-width);
     border-style: dashed;
 
-    & .dropzone__text {
+    & .kbq-file-dropzone__text {
         padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
 
         padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
@@ -25,21 +23,21 @@
         gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
     }
 
-    & .dropzone {
+    & .kbq-file-dropzone {
         gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
     }
 
-    .file-item {
+    .kbq-file-item {
         width: 100%;
 
-        .file-item__text-wrapper {
+        .kbq-file-item__text-wrapper {
             display: flex;
             align-items: center;
             width: 100%;
 
             gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
 
-            .file-item__text {
+            .kbq-file-item__text {
                 width: 120px;
                 flex-grow: 1;
             }
diff --git a/packages/components/markdown/__snapshots__/markdown.component.spec.ts.snap b/packages/components/markdown/__snapshots__/markdown.component.spec.ts.snap
index 1b04b63135..d9e501fe2f 100644
--- a/packages/components/markdown/__snapshots__/markdown.component.spec.ts.snap
+++ b/packages/components/markdown/__snapshots__/markdown.component.spec.ts.snap
@@ -6,7 +6,7 @@ DebugElement {
     class="kbq-markdown"
   >
     <pre
-      class="markdown-input"
+      class="kbq-markdown__input"
     >
       
 # H1
@@ -65,7 +65,7 @@ npm install jquery
 
     </pre>
     <div
-      class="markdown-output"
+      class="kbq-markdown__output"
     >
       <h1
         class="kbq-markdown__h1"
@@ -467,10 +467,10 @@ DebugElement {
     class="kbq-markdown"
   >
     <pre
-      class="markdown-input"
+      class="kbq-markdown__input"
     />
     <div
-      class="markdown-output"
+      class="kbq-markdown__output"
     >
       <h1
         class="kbq-markdown__h1"
diff --git a/packages/components/markdown/_markdown-theme.scss b/packages/components/markdown/_markdown-theme.scss
index d2d3838698..62a5557b8c 100644
--- a/packages/components/markdown/_markdown-theme.scss
+++ b/packages/components/markdown/_markdown-theme.scss
@@ -1,5 +1,4 @@
 @use '../core/styles/common/tokens' as *;
-
 @use './markdown-tokens';
 
 @mixin kbq-markdown-theme() {
diff --git a/packages/components/markdown/markdown.component.ts b/packages/components/markdown/markdown.component.ts
index f047e70bf2..e4d21b3eff 100644
--- a/packages/components/markdown/markdown.component.ts
+++ b/packages/components/markdown/markdown.component.ts
@@ -32,8 +32,8 @@ export const kbqMarkdownMarkedOptionsProvider = (options: MarkedOptions): Provid
     styleUrls: ['./markdown.scss', 'markdown-tokens.scss'],
     // no need format line with ng-content it's broke textContent for markdownService.parseToHtml()
     template: `
-        <pre #contentWrapper class="markdown-input" ngPreserveWhitespaces><ng-content /></pre>
-        <div class="markdown-output" [innerHtml]="resultHtml"></div>
+        <pre #contentWrapper class="kbq-markdown__input" ngPreserveWhitespaces><ng-content /></pre>
+        <div class="kbq-markdown__output" [innerHtml]="resultHtml"></div>
     `,
     host: {
         class: 'kbq-markdown'
diff --git a/packages/components/markdown/markdown.scss b/packages/components/markdown/markdown.scss
index a906fbd68f..81cf3b85e7 100644
--- a/packages/components/markdown/markdown.scss
+++ b/packages/components/markdown/markdown.scss
@@ -1,15 +1,13 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 .kbq-markdown {
     display: block;
 
-    .markdown-input {
+    .kbq-markdown__input {
         display: none;
     }
 
-    .markdown-output {
+    .kbq-markdown__output {
         flex: 1;
 
         & > :first-child {
diff --git a/packages/components/modal/modal.scss b/packages/components/modal/modal.scss
index 60df8f0672..3eabad7245 100644
--- a/packages/components/modal/modal.scss
+++ b/packages/components/modal/modal.scss
@@ -1,9 +1,5 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
-
 @use './modal-confirm';
-
 @use './modal-theme' as *;
 
 .kbq-modal-container {
@@ -21,8 +17,11 @@
 
     list-style: none;
 
+    // DEPRECATED: Unused. Will be removed in next major release.
+    /* stylelint-disable */
     &.zoom-enter,
     &.zoom-appear {
+        /* stylelint-enable */
         animation-duration: 0.3s;
         // reset scale avoid mousePosition bug
         transform: none;
diff --git a/packages/components/scrollbar/scrollbar.component.scss b/packages/components/scrollbar/scrollbar.component.scss
index e903503379..21960db384 100644
--- a/packages/components/scrollbar/scrollbar.component.scss
+++ b/packages/components/scrollbar/scrollbar.component.scss
@@ -1,7 +1,4 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
-
 @use './scrollbar-component-theme' as *;
 
 .kbq-scrollbar-component {
@@ -143,11 +140,13 @@
     transform: scale(calc(1 / 0.1));
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .os-size-observer-listener.ltr {
     margin-right: -266px;
     margin-left: 0;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .os-size-observer-listener.rtl {
     margin-left: -266px;
     margin-right: 0;
diff --git a/packages/components/toggle/toggle.component.html b/packages/components/toggle/toggle.component.html
index 33b02665ae..34aee875cc 100644
--- a/packages/components/toggle/toggle.component.html
+++ b/packages/components/toggle/toggle.component.html
@@ -1,4 +1,4 @@
-<label class="kbq-toggle-layout" [attr.for]="inputId" [class.left]="labelPosition === 'left'">
+<label class="kbq-toggle-layout" [attr.for]="inputId" [class.kbq-toggle_left]="labelPosition === 'left'">
     <input
         #input
         role="switch"
@@ -25,7 +25,11 @@
         </div>
     </div>
 
-    <div class="kbq-toggle__content" [class.left]="labelPosition === 'left'" [class.right]="labelPosition === 'right'">
+    <div
+        class="kbq-toggle__content"
+        [class.kbq-toggle_left]="labelPosition === 'left'"
+        [class.kbq-toggle_right]="labelPosition === 'right'"
+    >
         <span class="kbq-toggle-label" (cdkObserveContent)="onLabelTextChange()">
             <ng-content />
         </span>
diff --git a/packages/components/toggle/toggle.scss b/packages/components/toggle/toggle.scss
index 6c0ed5a778..672abbc080 100644
--- a/packages/components/toggle/toggle.scss
+++ b/packages/components/toggle/toggle.scss
@@ -1,5 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens';
 @use '../core/styles/common/animation';
 @use './toggle-theme' as theme;
@@ -27,7 +25,7 @@ $toggle-thumb-offset: 8px;
 
         cursor: inherit;
 
-        &.left {
+        &.kbq-toggle_left {
             flex-direction: row-reverse;
         }
 
@@ -105,11 +103,11 @@ $toggle-thumb-offset: 8px;
     flex: 1;
 
     &:has(.kbq-toggle-label:not(:empty)) {
-        &.left {
+        &.kbq-toggle_left {
             margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
         }
 
-        &.right {
+        &.kbq-toggle_right {
             margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
         }
     }
diff --git a/packages/docs-examples/components/breadcrumbs/breadcrumbs-truncate-center-items/breadcrumbs-truncate-center-items-example.ts b/packages/docs-examples/components/breadcrumbs/breadcrumbs-truncate-center-items/breadcrumbs-truncate-center-items-example.ts
index a5b5966920..afdc57d37a 100644
--- a/packages/docs-examples/components/breadcrumbs/breadcrumbs-truncate-center-items/breadcrumbs-truncate-center-items-example.ts
+++ b/packages/docs-examples/components/breadcrumbs/breadcrumbs-truncate-center-items/breadcrumbs-truncate-center-items-example.ts
@@ -53,14 +53,14 @@ import { KbqToolTipModule } from '@koobiq/components/tooltip';
             position: relative;
             display: flex;
 
-            .data-text-start {
+            .kbq-ellipsis-center_data-text-start {
                 flex: 0 1 auto;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: pre;
             }
 
-            .data-text-end {
+            .kbq-ellipsis-center_data-text-end {
                 flex: 1 0 auto;
                 overflow: hidden;
                 white-space: pre;

From b5f49e074bfbe05a5a5e2df45901c53aaf553f1f Mon Sep 17 00:00:00 2001
From: Artem Belik <artyombelyk@gmail.com>
Date: Wed, 12 Nov 2025 09:48:21 +0300
Subject: [PATCH 2/4] refactor: toggle specs

---
 packages/components/toggle/toggle.component.html    | 6 +++---
 packages/components/toggle/toggle.component.spec.ts | 2 +-
 packages/components/toggle/toggle.scss              | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/components/toggle/toggle.component.html b/packages/components/toggle/toggle.component.html
index 34aee875cc..0948d96361 100644
--- a/packages/components/toggle/toggle.component.html
+++ b/packages/components/toggle/toggle.component.html
@@ -1,4 +1,4 @@
-<label class="kbq-toggle-layout" [attr.for]="inputId" [class.kbq-toggle_left]="labelPosition === 'left'">
+<label class="kbq-toggle-layout" [attr.for]="inputId" [class.kbq-toggle-layout_left]="labelPosition === 'left'">
     <input
         #input
         role="switch"
@@ -27,8 +27,8 @@
 
     <div
         class="kbq-toggle__content"
-        [class.kbq-toggle_left]="labelPosition === 'left'"
-        [class.kbq-toggle_right]="labelPosition === 'right'"
+        [class.kbq-toggle__content_left]="labelPosition === 'left'"
+        [class.kbq-toggle__content_right]="labelPosition === 'right'"
     >
         <span class="kbq-toggle-label" (cdkObserveContent)="onLabelTextChange()">
             <ng-content />
diff --git a/packages/components/toggle/toggle.component.spec.ts b/packages/components/toggle/toggle.component.spec.ts
index 2236c5d1c6..14d81b5277 100644
--- a/packages/components/toggle/toggle.component.spec.ts
+++ b/packages/components/toggle/toggle.component.spec.ts
@@ -137,7 +137,7 @@ describe('KbqToggle', () => {
             testComponent.labelPos = 'left';
             fixture.detectChanges();
 
-            expect(toggleNativeElement.querySelector('.left')).not.toBeNull();
+            expect(toggleNativeElement.querySelector('.kbq-toggle-layout_left')).not.toBeNull();
         });
 
         it('should not trigger the click event multiple times', () => {
diff --git a/packages/components/toggle/toggle.scss b/packages/components/toggle/toggle.scss
index 672abbc080..c1cfeb15d3 100644
--- a/packages/components/toggle/toggle.scss
+++ b/packages/components/toggle/toggle.scss
@@ -25,7 +25,7 @@ $toggle-thumb-offset: 8px;
 
         cursor: inherit;
 
-        &.kbq-toggle_left {
+        &.kbq-toggle-layout_left {
             flex-direction: row-reverse;
         }
 
@@ -103,11 +103,11 @@ $toggle-thumb-offset: 8px;
     flex: 1;
 
     &:has(.kbq-toggle-label:not(:empty)) {
-        &.kbq-toggle_left {
+        &.kbq-toggle__content_left {
             margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
         }
 
-        &.kbq-toggle_right {
+        &.kbq-toggle__content_right {
             margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
         }
     }

From a1702d01d762b804cdd38f0058a2d51cf7e61a1f Mon Sep 17 00:00:00 2001
From: Artem Belik <artyombelyk@gmail.com>
Date: Wed, 12 Nov 2025 09:51:22 +0300
Subject: [PATCH 3/4] refactor: file

---
 packages/components/file-upload/file-upload-tokens.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/file-upload/file-upload-tokens.scss b/packages/components/file-upload/file-upload-tokens.scss
index 77e2182474..d4243b9f47 100644
--- a/packages/components/file-upload/file-upload-tokens.scss
+++ b/packages/components/file-upload/file-upload-tokens.scss
@@ -87,8 +87,7 @@
     --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) {
+:where(.kbq-file-upload.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;

From bcf2c0e284d64c6c98f8650882dfc411d15de1b4 Mon Sep 17 00:00:00 2001
From: Artem Belik <artyombelyk@gmail.com>
Date: Mon, 17 Nov 2025 16:17:17 +0300
Subject: [PATCH 4/4] refactor: typography

---
 .../core/styles/typography/_typography.scss     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/components/core/styles/typography/_typography.scss b/packages/components/core/styles/typography/_typography.scss
index 84e78fcb54..52d111b7c0 100644
--- a/packages/components/core/styles/typography/_typography.scss
+++ b/packages/components/core/styles/typography/_typography.scss
@@ -299,27 +299,44 @@
 @mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
+        // DEPRECATED: .md-h# class is deprecated, use .kbq-md-h# instead
+        .md-h#{$i},
         .kbq-md-h#{$i} {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
+    // DEPRECATED: .md-body class is deprecated, use .kbq-md-body instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body,
     .kbq-md-body {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
+    // DEPRECATED: .md-body-mono class is deprecated, use .kbq-md-body-mono instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body-mono,
     .kbq-md-body-mono {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
+    // DEPRECATED: .md-caption class is deprecated, use .kbq-md-caption instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-caption,
     .kbq-md-caption {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
+    // DEPRECATED: .md-table-cell class is deprecated, use .kbq-md-table-cell instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-cell,
     .kbq-md-table-cell {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
+    // DEPRECATED: .md-table-header class is deprecated, use .kbq-md-table-header instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-header,
     .kbq-md-table-header {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }