diff --git a/packages/components/core/option/_option-theme.scss b/packages/components/core/option/_option-theme.scss
index 1306ed7f8..6890e5d97 100644
--- a/packages/components/core/option/_option-theme.scss
+++ b/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);
+ }
}
}
diff --git a/packages/components/list/__screenshots__/02-light.png b/packages/components/list/__screenshots__/02-light.png
new file mode 100644
index 000000000..143294eca
Binary files /dev/null and b/packages/components/list/__screenshots__/02-light.png differ
diff --git a/packages/components/list/_list-theme.scss b/packages/components/list/_list-theme.scss
index e694d7e26..bd23bdc67 100644
--- a/packages/components/list/_list-theme.scss
+++ b/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 {
diff --git a/packages/components/list/e2e.playwright-spec.ts b/packages/components/list/e2e.playwright-spec.ts
index 471d5cb7a..1f03e7de1 100644
--- a/packages/components/list/e2e.playwright-spec.ts
+++ b/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');
diff --git a/packages/components/list/e2e.ts b/packages/components/list/e2e.ts
index eee588193..26c3a6b66 100644
--- a/packages/components/list/e2e.ts
+++ b/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: `
+
+ Selected
+ Selected + Disabled
+ Selected
+
+ `,
+ 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.
diff --git a/packages/components/select/__screenshots__/05-light.png b/packages/components/select/__screenshots__/05-light.png
new file mode 100644
index 000000000..ba00ae71c
Binary files /dev/null and b/packages/components/select/__screenshots__/05-light.png differ
diff --git a/packages/components/select/e2e.playwright-spec.ts b/packages/components/select/e2e.playwright-spec.ts
index 882222848..f675959e5 100644
--- a/packages/components/select/e2e.playwright-spec.ts
+++ b/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');
diff --git a/packages/components/select/e2e.ts b/packages/components/select/e2e.ts
index 49028d4f7..83003e40b 100644
--- a/packages/components/select/e2e.ts
+++ b/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: `
+
+
+ Selected
+ Selected + Disabled
+ Selected
+ Option
+
+
+
+
+ `,
+ 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: [
diff --git a/packages/e2e/routes.ts b/packages/e2e/routes.ts
index 69fea1e67..3d2545787 100644
--- a/packages/e2e/routes.ts
+++ b/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,