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

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

@@ -47,6 +47,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;
@@ -71,6 +75,10 @@
                 background: var(--kbq-list-multiple-states-selected-active-container-background);
             }
         }
+
+        &.kbq-selected.kbq-disabled {
+            background: var(--kbq-list-multiple-states-selected-container-background);
+        }
     }
 }
 

packages/components/list/_list-theme.scss

@@ -59,6 +59,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 {
@@ -77,6 +83,12 @@
                 background: var(--kbq-list-multiple-states-selected-active-container-background);
             }
         }
+
+        &.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

@@ -16,6 +16,17 @@ test.describe('KbqListModule', () => {
         });
     });
 
+    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');
+        });
+    });
+
     test.describe('E2eListOptionActionVisibility', () => {
         const getOptionAction = (page: Page, option: string) =>
             page.getByTestId(option).locator('.kbq-action-container');

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 { KbqOptionModule } from '@koobiq/components/core';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
@@ -221,6 +222,32 @@ 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];
+}
+
 /**
  * Unlike `E2eListStates`, this fixture forces no state classes at all — the option action must be
  * revealed by real hover / real keyboard focus only. See `kbq-option-action-visibility` mixin.

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

@@ -135,6 +135,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';
@@ -131,6 +132,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

@@ -52,7 +52,7 @@ import {
 } from '../components/inline-edit/e2e';
 import { E2eInputStateAndStyle } from '../components/input/e2e';
 import { E2eLinkStates, E2eLinkWithCaption } from '../components/link/e2e';
-import { E2eListOptionActionVisibility, E2eListStates } from '../components/list/e2e';
+import { E2eListOptionActionVisibility, 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';
@@ -86,6 +86,7 @@ import {
     E2eSelectPanelMaxHeight,
     E2eSelectPositioning,
     E2eSelectRtlPositioning,
+    E2eSelectSelectionState,
     E2eSelectStates,
     E2eSelectWithGroupsPositioning,
     E2eSelectWithGroupsRtlPositioning,
@@ -196,6 +197,7 @@ const components = [
     E2eModalStates,
     E2eModalFullCustom,
     E2eListStates,
+    E2eListSelectionState,
     E2eListOptionActionVisibility,
     E2eLoaderOverlayStates,
     E2eLoaderOverlayCard,
@@ -237,6 +239,7 @@ const components = [
     E2eSelectStates,
     E2eMultiSelectStates,
     E2eMultilineSelectStates,
+    E2eSelectSelectionState,
     E2eTreeStates,
     E2eTreeSelectStates,
     E2eMultiTreeSelectStates,