Merge remote-tracking branch 'origin/main' into feat/introduce-sbb-st…

…epper

.github/workflows/container-image-cleanup.yml

@@ -32,12 +32,12 @@ jobs:
               return !!prNumber && pr?.state === 'closed' && olderThanTwoWeeks(pr.closed_at);
             };
 
-            const packageNames = process.env.PACKAGE_NAME.split(',').map((n) => n.trim());
+            const packageNames = process.env.PACKAGE_NAMES.split(',').map((n) => n.trim());
             let packageDeletionFailed = false;
             for (const packageName of packageNames) {
               const params = {
                 package_type: 'container',
-                package_name: `${repo}/${packageNames}`,
+                package_name: `${repo}/${packageName}`,
                 username: owner
               };
               const { data: versions } = await github.rest.packages.getAllPackageVersionsForPackageOwnedByUser(params);

.github/workflows/continuous-integration-secure.yml

@@ -185,7 +185,7 @@ jobs:
         run: |
           echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
           docker build \
-            --file tools/visual-regression-testing/visual-regression-app.Dockerfile \
+            --file tools/visual-regression-testing/Dockerfile \
             --tag $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER \
             .
           docker push $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER

.github/workflows/continuous-integration.yml

@@ -210,12 +210,14 @@ jobs:
         run: yarn test:visual-regression --update-visual-baseline
         env:
           NODE_ENV: production
+      - name: Build visual-regression-app
+        run: yarn build:visual-regression-app
 
       - name: Build and push visual regression baseline
         run: |
           echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
           docker build \
-            --file tools/visual-regression-testing/baseline.Dockerfile \
+            --file tools/visual-regression-testing/Dockerfile \
             --tag $IMAGE_REPO_VISUAL_REGRESSION:baseline \
             .
           docker push $IMAGE_REPO_VISUAL_REGRESSION:baseline

package.json

@@ -67,71 +67,71 @@
     "@commitlint/config-conventional": "19.2.2",
     "@custom-elements-manifest/analyzer": "0.10.2",
     "@custom-elements-manifest/to-markdown": "0.1.0",
-    "@eslint/eslintrc": "3.0.2",
-    "@eslint/js": "9.2.0",
+    "@eslint/eslintrc": "3.1.0",
+    "@eslint/js": "9.3.0",
     "@lit-labs/router": "^0.1.3",
     "@lit-labs/testing": "0.2.3",
     "@lit/react": "1.0.5",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
     "@sbb-esta/lyne-design-tokens": "0.8.0",
-    "@storybook/addon-a11y": "8.1.1",
-    "@storybook/addon-actions": "8.1.1",
-    "@storybook/addon-essentials": "8.1.1",
-    "@storybook/addon-interactions": "8.1.1",
-    "@storybook/addon-links": "8.1.1",
-    "@storybook/blocks": "8.1.1",
-    "@storybook/test": "8.1.1",
-    "@storybook/web-components": "8.1.1",
-    "@storybook/web-components-vite": "8.1.1",
+    "@storybook/addon-a11y": "8.1.3",
+    "@storybook/addon-actions": "8.1.3",
+    "@storybook/addon-essentials": "8.1.3",
+    "@storybook/addon-interactions": "8.1.3",
+    "@storybook/addon-links": "8.1.3",
+    "@storybook/blocks": "8.1.3",
+    "@storybook/test": "8.1.3",
+    "@storybook/web-components": "8.1.3",
+    "@storybook/web-components-vite": "8.1.3",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.6",
     "@types/node": "20.12.12",
-    "@types/react": "18.3.2",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
-    "@typescript-eslint/parser": "7.9.0",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
+    "@typescript-eslint/parser": "7.10.0",
     "@web/test-runner": "0.18.2",
     "@web/test-runner-commands": "0.9.0",
     "@web/test-runner-playwright": "0.11.0",
     "@web/test-runner-puppeteer": "0.16.0",
     "@web/test-runner-visual-regression": "0.9.0",
-    "chromatic": "11.3.5",
+    "chromatic": "11.4.0",
     "custom-elements-manifest": "2.1.0",
     "date-fns": "3.6.0",
-    "esbuild-sass-plugin": "3.2.0",
-    "eslint": "9.2.0",
+    "esbuild-sass-plugin": "3.3.0",
+    "eslint": "9.3.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import-x": "0.5.0",
     "eslint-plugin-lit": "1.13.0",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-yml": "1.14.0",
-    "glob": "10.3.15",
-    "globals": "15.2.0",
+    "glob": "10.4.1",
+    "globals": "15.3.0",
     "husky": "9.0.11",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.4",
     "lit-analyzer": "2.0.3",
     "madge": "7.0.0",
-    "npm-run-all2": "6.1.2",
-    "playwright": "1.44.0",
+    "npm-run-all2": "6.2.0",
+    "playwright": "1.44.1",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
-    "sass": "1.77.1",
+    "sass": "1.77.2",
     "sinon": "18.0.0",
-    "storybook": "8.1.1",
+    "storybook": "8.1.3",
     "stylelint": "16.5.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-scss": "6.3.0",
     "ts-lit-plugin": "2.0.2",
-    "tsx": "4.10.3",
+    "tsx": "4.11.0",
     "typescript": "5.4.5",
-    "typescript-eslint": "7.9.0",
+    "typescript-eslint": "7.10.0",
     "vite": "5.2.11",
     "vite-plugin-dts": "3.9.1"
   },

src/components/button/button/button.snapshot.spec.ts

@@ -3,12 +3,11 @@ import { html } from 'lit';
 import {
   describeEach,
   describeViewports,
-  fixture,
   isVisualRegressionRun,
   testVisualDiff,
   testVisualDiffHover,
+  visualRegressionFixture,
   visualRegressionSnapshot,
-  visualRegressionWrapperStyles,
 } from '../../core/testing/private.js';
 
 import './button.js';
@@ -29,76 +28,79 @@ describe(`sbb-button`, () => {
       };
 
       // 'l' as default is covered by other cases.
-      const sizeCases = { size: ['s', 'm'] };
+      const sizeCases = { size: ['s', 'm'], icon: [undefined, 'arrow-right-small'] };
 
       describeViewports({ viewports: ['zero', 'medium'] }, () => {
         describeEach(cases, ({ disabled, negative, state }) => {
-          beforeEach(async () => {
-            root = await fixture(
-              html`<div
-                style=${visualRegressionWrapperStyles({
-                  backgroundColor: negative ? '#484040' : undefined,
-                })}
-              >
+          beforeEach(async function () {
+            root = await visualRegressionFixture(
+              html`
                 <sbb-button ?disabled=${disabled} ?negative=${negative} .iconName=${state.icon}>
                   ${state.text}
                 </sbb-button>
-              </div>`,
+              `,
+              this,
+              {
+                backgroundColor: negative ? '#484040' : undefined,
+                focusOutlineDark: negative,
+              },
             );
           });
 
           visualRegressionSnapshot(() => root);
         });
 
-        describeEach(sizeCases, ({ size }) => {
-          beforeEach(async () => {
-            root = await fixture(
-              html`<div style=${visualRegressionWrapperStyles()}>
-                <sbb-button size=${size}>Button</sbb-button>
-              </div>`,
+        describeEach(sizeCases, ({ size, icon }) => {
+          beforeEach(async function () {
+            root = await visualRegressionFixture(
+              html`<sbb-button size=${size} .iconName=${icon}>Button</sbb-button>`,
+              this,
             );
           });
 
           testVisualDiff(() => root);
         });
 
         describe('with ellipsis', () => {
-          beforeEach(async () => {
-            root = await fixture(
-              html`<div style=${visualRegressionWrapperStyles()}>
+          beforeEach(async function () {
+            root = await visualRegressionFixture(
+              html`
                 <sbb-button style="width: 200px;" icon-name="arrow-right-small">
                   Button with long text
                 </sbb-button>
-              </div>`,
+              `,
+              this,
             );
           });
 
           testVisualDiff(() => root);
         });
 
         describe('wide width', () => {
-          beforeEach(async () => {
-            root = await fixture(
-              html`<div style=${visualRegressionWrapperStyles()}>
+          beforeEach(async function () {
+            root = await visualRegressionFixture(
+              html`
                 <sbb-button style="max-width: 100%; width: 600px;" icon-name="arrow-right-small">
                   Wide Button
                 </sbb-button>
-              </div>`,
+              `,
+              this,
             );
           });
 
           testVisualDiff(() => root);
         });
 
         describe('slotted icon', () => {
-          beforeEach(async () => {
-            root = await fixture(
-              html`<div style=${visualRegressionWrapperStyles()}>
+          beforeEach(async function () {
+            root = await visualRegressionFixture(
+              html`
                 <sbb-button>
                   Button
                   <sbb-icon slot="icon" name="chevron-small-right-small"></sbb-icon>
                 </sbb-button>
-              </div>`,
+              `,
+              this,
             );
           });
 
@@ -107,9 +109,9 @@ describe(`sbb-button`, () => {
         });
 
         describe('with hidden slot', () => {
-          beforeEach(async () => {
-            root = await fixture(
-              html`<div style=${visualRegressionWrapperStyles()}>
+          beforeEach(async function () {
+            root = await visualRegressionFixture(
+              html`
                 <sbb-button>
                   Button
                   <sbb-icon
@@ -118,7 +120,8 @@ describe(`sbb-button`, () => {
                     style="display: none;"
                   ></sbb-icon>
                 </sbb-button>
-              </div>`,
+              `,
+              this,
             );
           });
 

src/components/button/common/button-common.scss

@@ -70,6 +70,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 :host([size='s']) {
   --sbb-button-min-height: var(--sbb-size-element-xs);
   --sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-button-gap: var(--sbb-spacing-fixed-1x);
 
   @include sbb.mq($from: medium) {
     --sbb-button-padding-inline: var(--sbb-spacing-fixed-5x);

src/components/core/base-elements/button-base-element.ts

@@ -19,7 +19,12 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
   /** The type attribute to use for the button. */
   @property() public type: SbbButtonType = 'button';
 
-  /** The name of the button element. */
+  /**
+   * The name of the button element.
+   *
+   * @description Developer note: In this case updating the attribute must be synchronous.
+   * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+   */
   @property()
   public set name(name: string) {
     this.setAttribute('name', `${name}`);
@@ -28,7 +33,12 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
     return this.getAttribute('name') ?? '';
   }
 
-  /** The value of the button element. */
+  /**
+   * The value of the button element.
+   *
+   * @description Developer note: In this case updating the attribute must be synchronous.
+   * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+   */
   @property()
   public set value(value: string) {
     this.setAttribute('value', `${value}`);
@@ -128,4 +138,14 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
       );
     }
   }
+
+  public override attributeChangedCallback(
+    name: string,
+    old: string | null,
+    value: string | null,
+  ): void {
+    if (!['name', 'value'].includes(name) || old !== value) {
+      super.attributeChangedCallback(name, old, value);
+    }
+  }
 }

src/components/core/mixins/form-associated-mixin.ts

@@ -52,7 +52,12 @@ export const SbbFormAssociatedMixin = <T extends Constructor<LitElement>>(
       return this.internals.form;
     }
 
-    /** Name of the form element. Will be read from name attribute. */
+    /**
+     * Name of the form element. Will be read from name attribute.
+     *
+     * @description Developer note: In this case updating the attribute must be synchronous.
+     * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+     */
     @property()
     public set name(name: string) {
       this.setAttribute('name', `${name}`);
@@ -112,6 +117,16 @@ export const SbbFormAssociatedMixin = <T extends Constructor<LitElement>>(
     /** Whenever a surrounding form or fieldset is changing its disabled state. */
     @state() protected formDisabled: boolean = false;
 
+    public override attributeChangedCallback(
+      name: string,
+      old: string | null,
+      value: string | null,
+    ): void {
+      if (name !== 'name' || old !== value) {
+        super.attributeChangedCallback(name, old, value);
+      }
+    }
+
     /**
      * Returns true if internals target element has no validity problems; false otherwise.
      * Fires an invalid event at the element in the latter case.

src/components/core/testing/private/describe-viewports.ts

@@ -43,11 +43,14 @@ export function describeViewports(
 
   for (const [size, value] of viewportSizeTests) {
     describe(`viewport=${size}`, function () {
-      before(async () => {
-        await setViewport({ width: value, height: options.viewportHeight ?? 400 });
-      });
-
+      this.ctx['requestViewport'] = { width: value, height: options.viewportHeight ?? 400 };
       fn.call(this);
     });
   }
 }
+
+export async function applyViewport(context: Mocha.Context): Promise<void> {
+  if (context.requestViewport) {
+    await setViewport(context.requestViewport);
+  }
+}