fix(list,select): disabled and selected (#DS-5375)

packages/components/core/option/_option-theme.scss

@@ -36,6 +36,10 @@
             @include kbq-option(states-disabled);
         }
 
+        &.kbq-selected.kbq-disabled {
+            background: var(--kbq-list-states-selected-container-background);
+        }
+
         &:is(.kbq-selected, .kbq-active):has(+ :is(.kbq-selected, .kbq-active)) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
@@ -55,6 +59,10 @@
                 @include kbq-option(multiple-states-selected-hover);
             }
         }
+
+        &.kbq-selected.kbq-disabled {
+            background: var(--kbq-list-multiple-states-selected-container-background);
+        }
     }
 }
 

packages/components/list/_list-theme.scss

@@ -54,6 +54,12 @@
         &.kbq-disabled {
             @include _kbq-list-item(states-disabled);
         }
+
+        &.kbq-selected.kbq-disabled {
+            --kbq-option-background: var(--kbq-list-states-selected-container-background);
+
+            background: var(--kbq-list-states-selected-container-background);
+        }
     }
 
     .kbq-list-option.kbq-list-option_multiple {
@@ -70,6 +76,12 @@
                 @include _kbq-list-item(multiple-states-selected-active);
             }
         }
+
+        &.kbq-selected.kbq-disabled {
+            --kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);
+
+            background: var(--kbq-list-multiple-states-selected-container-background);
+        }
     }
 
     .kbq-list-selection.cdk-keyboard-focused {

packages/components/list/e2e.playwright-spec.ts

@@ -15,4 +15,15 @@ test.describe('KbqListModule', () => {
             await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png');
         });
     });
+
+    test.describe('E2eListSelectionState', () => {
+        const getComponent = (page: Page) => page.getByTestId('e2eListSelectionState');
+
+        test('selected disabled option', async ({ page }) => {
+            await page.goto('/E2eListSelectionState');
+            const component = getComponent(page);
+
+            await expect(component).toHaveScreenshot('02-light.png');
+        });
+    });
 });

packages/components/list/e2e.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqListModule } from '@koobiq/components/list';
@@ -218,3 +219,29 @@ import { KbqListModule } from '@koobiq/components/list';
     }
 })
 export class E2eListStates {}
+
+@Component({
+    selector: 'e2e-list-selection-state',
+    imports: [KbqListModule, FormsModule],
+    template: `
+        <kbq-list-selection multiple="checkbox" [(ngModel)]="selected">
+            <kbq-list-option [value]="1">Selected</kbq-list-option>
+            <kbq-list-option disabled [value]="2">Selected + Disabled</kbq-list-option>
+            <kbq-list-option [value]="3">Selected</kbq-list-option>
+        </kbq-list-selection>
+    `,
+    styles: `
+        :host {
+            display: block;
+            width: 400px;
+            padding: 8px;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        'data-testid': 'e2eListSelectionState'
+    }
+})
+export class E2eListSelectionState {
+    protected readonly selected = [1, 2, 3];
+}

packages/components/select/e2e.playwright-spec.ts

@@ -102,6 +102,19 @@ test.describe('KbqSelectModule', () => {
         });
     });
 
+    test.describe('E2eSelectSelectionState', () => {
+        const getComponent = (page: Page) => page.getByTestId('e2eSelectSelectionState');
+
+        test('selected disabled option', async ({ page }) => {
+            await page.goto('/E2eSelectSelectionState');
+            const component = getComponent(page);
+
+            await component.getByTestId('e2eSelect').click();
+
+            await expect(component).toHaveScreenshot('05-light.png');
+        });
+    });
+
     test.describe('E2eSelectWithSearchAndFooter', () => {
         const getComponent = (page: Page) => page.getByTestId('e2eSelectWithSearchAndFooter');
         const getSelect = (locator: Locator) => locator.getByTestId('e2eSelect');

packages/components/select/e2e.ts

@@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { ChangeDetectionStrategy, Component, signal, ViewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { KbqFormFieldModule } from '@koobiq/components/form-field';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqInputModule } from '@koobiq/components/input';
 import { KbqTagsModule } from '@koobiq/components/tags';
@@ -128,6 +129,44 @@ export class E2eMultiSelectStates {}
 })
 export class E2eMultilineSelectStates {}
 
+@Component({
+    selector: 'e2e-select-selection-state',
+    imports: [KbqFormFieldModule, KbqSelectModule],
+    template: `
+        <kbq-form-field>
+            <kbq-select
+                data-testid="e2eSelect"
+                placeholder="Placeholder"
+                [multiline]="true"
+                [panelWidth]="400"
+                [value]="selected"
+            >
+                <kbq-option [value]="1">Selected</kbq-option>
+                <kbq-option disabled [value]="2">Selected + Disabled</kbq-option>
+                <kbq-option [value]="3">Selected</kbq-option>
+                <kbq-option [value]="4">Option</kbq-option>
+
+                <kbq-cleaner />
+            </kbq-select>
+        </kbq-form-field>
+    `,
+    styles: `
+        :host {
+            display: block;
+            width: 440px;
+            height: 180px;
+            padding: 8px;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        'data-testid': 'e2eSelectSelectionState'
+    }
+})
+export class E2eSelectSelectionState {
+    protected readonly selected = [1, 2, 3];
+}
+
 @Component({
     selector: 'e2e-select-with-search-and-footer',
     imports: [

packages/e2e/routes.ts

@@ -36,7 +36,7 @@ import { E2eIconStateAndStyle, E2eIconSvg } from '../components/icon/e2e';
 import { E2eInlineEditMenuButton, E2eInlineEditStates, E2eInlineEditTruncation } from '../components/inline-edit/e2e';
 import { E2eInputStateAndStyle } from '../components/input/e2e';
 import { E2eLinkStates } from '../components/link/e2e';
-import { E2eListStates } from '../components/list/e2e';
+import { E2eListSelectionState, E2eListStates } from '../components/list/e2e';
 import { E2eLoaderOverlayCard, E2eLoaderOverlayStates } from '../components/loader-overlay/e2e';
 import { E2eMarkdownStates } from '../components/markdown/e2e';
 import { E2eModalFullCustom, E2eModalStates } from '../components/modal/e2e';
@@ -64,6 +64,7 @@ import {
     E2eSelectLongOptionText,
     E2eSelectPositioning,
     E2eSelectRtlPositioning,
+    E2eSelectSelectionState,
     E2eSelectStates,
     E2eSelectWithGroupsPositioning,
     E2eSelectWithGroupsRtlPositioning,
@@ -155,6 +156,7 @@ const components = [
     E2eModalStates,
     E2eModalFullCustom,
     E2eListStates,
+    E2eListSelectionState,
     E2eLoaderOverlayStates,
     E2eLoaderOverlayCard,
     E2eAutocompleteStates,
@@ -189,6 +191,7 @@ const components = [
     E2eSelectStates,
     E2eMultiSelectStates,
     E2eMultilineSelectStates,
+    E2eSelectSelectionState,
     E2eTreeStates,
     E2eTreeSelectStates,
     E2eMultiTreeSelectStates,