fix: add visual regression tests for states

src/elements/link-list/link-list-anchor/link-list-anchor.visual.spec.ts

@@ -1,6 +1,14 @@
 import { html, nothing, type TemplateResult } from 'lit';
 
-import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import {
+  describeEach,
+  describeViewports,
+  visualDiffActive,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+  visualRegressionFixture,
+} from '../../core/testing/private.js';
 
 import './link-list-anchor.js';
 import '../../link/block-link.js';
@@ -24,13 +32,29 @@ const listAnchor = (
 `;
 
 describe(`sbb-link-list-anchor`, () => {
-  const cases = {
-    negative: [false, true],
-    size: ['xs', 's', 'm'],
-  };
+  const cases = { negative: [false, true] };
 
   describeViewports({ viewports: ['zero', 'medium', 'wide'] }, () => {
-    describeEach(cases, ({ negative, size }) => {
+    describeEach(cases, ({ negative }) => {
+      let root: HTMLElement;
+
+      beforeEach(async function () {
+        root = await visualRegressionFixture(listAnchor(negative, 's', true), {
+          backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
+        });
+      });
+
+      for (const state of [visualDiffActive, visualDiffHover, visualDiffFocus]) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withSnapshotElement(root);
+          }),
+        );
+      }
+    });
+
+    describeEach({ ...cases, size: ['xs', 's', 'm'] }, ({ negative, size }) => {
       it(
         'title',
         visualDiffDefault.with(async (setup) => {

src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss

@@ -15,7 +15,7 @@
 }
 
 .app-scroll-container {
-  @include sbb.scrollbar;
-
   overflow: auto;
+
+  @include sbb.scrollbar;
 }