fix(sbb-visual-checkbox): fix high contrast mode of indeterminate sta…

…te (#2845)

src/elements/core/testing/private/fixture.ts

@@ -1,3 +1,4 @@
+import { emulateMedia } from '@web/test-runner-commands';
 import type { TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -89,10 +90,17 @@ export async function visualRegressionFixture<T extends HTMLElement>(
     focusOutlineDark?: boolean;
     padding?: string;
     minHeight?: string;
+    forcedColors?: boolean;
   },
 ): Promise<T> {
   const base = tryFindBase(new Error().stack!);
   const { html } = await import('lit-html');
+
+  await emulateMedia({
+    forcedColors: wrapperStyles?.forcedColors ? 'active' : 'none',
+    colorScheme: wrapperStyles?.forcedColors ? 'dark' : 'light',
+  });
+
   return await fixture<T>(
     html`<div
       id="visual-regression-fixture-wrapper"

src/elements/visual-checkbox/visual-checkbox.scss

@@ -81,7 +81,7 @@
     outline: var(--sbb-border-width-2x) solid ButtonBorder;
     outline-offset: calc(-1 * var(--sbb-border-width-2x));
 
-    :host([checked]) & {
+    :host([checked]:not([indeterminate])) & {
       background-color: HighLight;
       outline: none;
     }
@@ -90,7 +90,7 @@
       outline-color: GrayText;
     }
 
-    :host([checked][disabled]) & {
+    :host([checked][disabled]:not([indeterminate])) & {
       background-color: GrayText;
     }
   }

src/elements/visual-checkbox/visual-checkbox.visual.spec.ts

@@ -0,0 +1,51 @@
+import { html } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualRegressionFixture,
+} from '../core/testing/private.js';
+
+import './visual-checkbox.js';
+
+describe(`sbb-visual-checkbox`, () => {
+  const cases = {
+    state: [
+      { indeterminate: undefined, checked: true },
+      { indeterminate: undefined, checked: false },
+      { indeterminate: true, checked: true },
+    ],
+    disabled: [false, true],
+    negative: [false, true],
+    forcedColors: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero'] }, () => {
+    let root: HTMLElement;
+
+    describeEach(cases, ({ state, disabled, negative, forcedColors }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(
+          html`<sbb-visual-checkbox
+            ?indeterminate=${state.indeterminate}
+            ?checked=${state.checked}
+            ?disabled=${disabled}
+            ?negative=${negative}
+          ></sbb-visual-checkbox>`,
+          {
+            forcedColors,
+            backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+          },
+        );
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+  });
+});