Merge branch 'main' into feat/provide-lean-context-config

# Conflicts:
#	src/elements/checkbox/checkbox/checkbox.ts
#	src/elements/header/header/readme.md
#	src/storybook/pages/home/home.stories.ts

.storybook/preview-head.html

@@ -27,7 +27,8 @@
 
 <style>
   /* Classes used for the custom sbb-header story. */
-  .last-element {
+  .last-element,
+  .sbb-header-spacer-logo {
     display: none;
   }
 
@@ -41,6 +42,10 @@
     .sbb-header-spacer {
       display: none;
     }
+
+    .sbb-header-spacer-logo {
+      display: block;
+    }
   }
 
   .sbdocs-content {

package.json

@@ -99,10 +99,10 @@
     "@storybook/web-components-vite": "8.4.5",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.10",
-    "@types/node": "20.17.7",
+    "@types/node": "20.17.9",
     "@types/react": "18.3.12",
-    "@typescript-eslint/eslint-plugin": "8.15.0",
-    "@typescript-eslint/parser": "8.15.0",
+    "@typescript-eslint/eslint-plugin": "8.16.0",
+    "@typescript-eslint/parser": "8.16.0",
     "@web/test-runner": "0.19.0",
     "@web/test-runner-commands": "0.9.0",
     "@web/test-runner-playwright": "0.11.0",
@@ -129,7 +129,7 @@
     "octokit": "4.0.2",
     "playwright": "1.47.2",
     "postcss": "8.4.49",
-    "prettier": "3.3.3",
+    "prettier": "3.4.1",
     "react": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
     "sass": "1.81.0",
@@ -142,19 +142,19 @@
     "ts-lit-plugin": "2.0.2",
     "tslib": "2.8.1",
     "typescript": "5.7.2",
-    "typescript-eslint": "8.15.0",
+    "typescript-eslint": "8.16.0",
     "urlpattern-polyfill": "10.0.0",
-    "vite": "5.4.11",
+    "vite": "6.0.1",
     "vite-plugin-dts": "4.3.0"
   },
   "resolutions": {
-    "@types/node": "20.17.7",
+    "@types/node": "20.17.9",
     "@webcomponents/template-shadowroot": "0.2.1",
     "@web/dev-server-core": "0.7.1",
     "jackspeak": "2.1.1",
     "lit": "3.2.1",
     "playwright": "1.47.2",
-    "prettier": "3.3.3"
+    "prettier": "3.4.1"
   },
   "prettier": {
     "singleQuote": true,

src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts

@@ -146,21 +146,23 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('select by mouse', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
     const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
     const optionSelectedEventSpy = new EventSpy(
       SbbAutocompleteGridOptionElement.events.optionSelected,
     );
+    const optTwo = element.querySelector<SbbAutocompleteGridOptionElement>('#option-2')!;
 
     input.focus();
-    await willOpenEventSpy.calledOnce();
-    expect(willOpenEventSpy.count).to.be.equal(1);
     await didOpenEventSpy.calledOnce();
-    expect(didOpenEventSpy.count).to.be.equal(1);
-
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'Enter' });
+    const positionRect = optTwo.getBoundingClientRect();
+
+    await sendMouse({
+      type: 'click',
+      position: [
+        Math.round(positionRect.x + window.scrollX + positionRect.width / 2),
+        Math.round(positionRect.y + window.scrollY + positionRect.height / 2),
+      ],
+    });
     await waitForLitRender(element);
 
     expect(optionSelectedEventSpy.count).to.be.equal(1);
@@ -244,6 +246,8 @@ describe(`sbb-autocomplete-grid`, () => {
     );
     const optOne = element.querySelector('#option-1');
     const optTwo = element.querySelector('#option-2');
+    const keydownSpy = new EventSpy('keydown', input);
+
     input.focus();
 
     await didOpenEventSpy.calledOnce();
@@ -261,6 +265,7 @@ describe(`sbb-autocomplete-grid`, () => {
     await sendKeys({ press: 'Enter' });
     await didCloseEventSpy.calledOnce();
     expect(didCloseEventSpy.count).to.be.equal(1);
+    expect(keydownSpy.lastEvent?.defaultPrevented).to.be.true;
 
     expect(optTwo).not.to.have.attribute('data-active');
     expect(optTwo).to.have.attribute('selected');

src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts

@@ -96,7 +96,7 @@ class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
         break;
 
       case 'Enter':
-        this.selectByKeyboard();
+        this.selectByKeyboard(event);
         break;
 
       case 'ArrowDown':
@@ -118,7 +118,9 @@ class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
    * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
    * would always return a `SbbAutocompleteGridButtonElement`.
    */
-  protected selectByKeyboard(): void {
+  protected selectByKeyboard(event: KeyboardEvent): void {
+    event.preventDefault();
+
     if (this._activeColumnIndex !== 0) {
       (
         this._row[this._activeItemIndex].querySelectorAll(

src/elements/autocomplete/autocomplete-base-element.ts

@@ -179,7 +179,10 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
 
     if (this.triggerElement) {
       // Set the option value
-      this.triggerElement.value = target.value as string;
+      // In order to support React onChange event, we have to get the setter and call it.
+      // https://github.com/facebook/react/issues/11600#issuecomment-345813130
+      const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;
+      setValue.call(this.triggerElement, target.value);
 
       // Manually trigger the change events
       this.triggerElement.dispatchEvent(new Event('change', { bubbles: true }));

src/elements/autocomplete/autocomplete.spec.ts

@@ -116,21 +116,28 @@ describe(`sbb-autocomplete`, () => {
   });
 
   it('select by mouse', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen);
     const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen);
     const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected);
+    const inputEventSpy = new EventSpy('input', input);
+    const changeEventSpy = new EventSpy('change', input);
+    const optTwo = element.querySelector<SbbOptionElement>('#option-2')!;
 
     input.focus();
-    await willOpenEventSpy.calledOnce();
-    expect(willOpenEventSpy.count).to.be.equal(1);
     await didOpenEventSpy.calledOnce();
-    expect(didOpenEventSpy.count).to.be.equal(1);
 
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'Enter' });
+    const positionRect = optTwo.getBoundingClientRect();
+
+    await sendMouse({
+      type: 'click',
+      position: [
+        Math.round(positionRect.x + window.scrollX + positionRect.width / 2),
+        Math.round(positionRect.y + window.scrollY + positionRect.height / 2),
+      ],
+    });
     await waitForLitRender(element);
 
+    expect(inputEventSpy.count).to.be.equal(1);
+    expect(changeEventSpy.count).to.be.equal(1);
     expect(optionSelectedEventSpy.count).to.be.equal(1);
     expect(optionSelectedEventSpy.firstEvent!.target).to.have.property('id', 'option-2');
   });
@@ -139,8 +146,12 @@ describe(`sbb-autocomplete`, () => {
     const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen);
     const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose);
     const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected);
+    const inputEventSpy = new EventSpy('input', input);
+    const changeEventSpy = new EventSpy('change', input);
     const optOne = element.querySelector('#option-1');
     const optTwo = element.querySelector('#option-2');
+    const keydownSpy = new EventSpy('keydown', input);
+
     input.focus();
 
     await didOpenEventSpy.calledOnce();
@@ -158,9 +169,12 @@ describe(`sbb-autocomplete`, () => {
     await sendKeys({ press: 'Enter' });
     await didCloseEventSpy.calledOnce();
     expect(didCloseEventSpy.count).to.be.equal(1);
+    expect(keydownSpy.lastEvent?.defaultPrevented).to.be.true;
 
     expect(optTwo).not.to.have.attribute('data-active');
     expect(optTwo).to.have.attribute('selected');
+    expect(inputEventSpy.count).to.be.equal(1);
+    expect(changeEventSpy.count).to.be.equal(1);
     expect(optionSelectedEventSpy.count).to.be.equal(1);
     expect(input).to.have.attribute('aria-expanded', 'false');
     expect(input).not.to.have.attribute('aria-activedescendant');

src/elements/autocomplete/autocomplete.ts

@@ -82,7 +82,7 @@ class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
         break;
 
       case 'Enter':
-        this.selectByKeyboard();
+        this.selectByKeyboard(event);
         break;
 
       case 'ArrowDown':
@@ -92,7 +92,8 @@ class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
     }
   }
 
-  protected selectByKeyboard(): void {
+  protected selectByKeyboard(event: KeyboardEvent): void {
+    event.preventDefault();
     const activeOption = this.options[this._activeItemIndex];
 
     if (activeOption) {

src/elements/button/mini-button.ts

@@ -1,2 +1 @@
-export * from './mini-button/mini-button-base-element.js';
 export * from './mini-button/mini-button.js';

src/elements/button/mini-button/mini-button.ts

@@ -1,9 +1,11 @@
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { slotState } from '../../core/decorators.js';
+import { SbbDisabledTabIndexActionMixin, SbbNegativeMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
-import { SbbMiniButtonBaseElement } from './mini-button-base-element.js';
 import style from './mini-button.scss?lit&inline';
 
 /**
@@ -14,8 +16,15 @@ import style from './mini-button.scss?lit&inline';
  */
 export
 @customElement('sbb-mini-button')
-class SbbMiniButtonElement extends SbbDisabledTabIndexActionMixin(SbbMiniButtonBaseElement) {
+@slotState()
+class SbbMiniButtonElement extends SbbDisabledTabIndexActionMixin(
+  SbbNegativeMixin(SbbIconNameMixin(SbbButtonBaseElement)),
+) {
   public static override styles: CSSResultGroup = style;
+
+  protected override renderTemplate(): TemplateResult {
+    return super.renderIconSlot();
+  }
 }
 
 declare global {

src/elements/checkbox/checkbox-panel/checkbox-panel.ts

@@ -39,7 +39,6 @@ export type SbbCheckboxPanelStateChange = Extract<
  * @slot subtext - Slot used to render a subtext under the label (only visible within a selection panel).
  * @slot suffix - Slot used to render additional content after the label (only visible within a selection panel).
  * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
  */
@@ -53,7 +52,6 @@ class SbbCheckboxPanelElement extends SbbPanelMixin(
 
   // FIXME using ...super.events requires: https://github.com/sbb-design-systems/lyne-components/issues/2600
   public static readonly events = {
-    didChange: 'didChange',
     stateChange: 'stateChange',
     panelConnected: 'panelConnected',
   } as const;

src/elements/checkbox/checkbox-panel/readme.md

@@ -92,11 +92,10 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `change`    | `Event`             | Event fired on change.                                                           |                |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `input`     | `InputEvent`        | Event fired on input.                                                            |                |
+| Name     | Type         | Description            | Inherited From |
+| -------- | ------------ | ---------------------- | -------------- |
+| `change` | `Event`      | Event fired on change. |                |
+| `input`  | `InputEvent` | Event fired on input.  |                |
 
 ## Slots
 

src/elements/checkbox/checkbox/checkbox.ts

@@ -20,7 +20,6 @@ import '../../visual-checkbox.js';
  *
  * @slot - Use the unnamed slot to add content to the `sbb-checkbox`.
  * @slot icon - Slot used to render the checkbox icon (disabled inside a selection panel).
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
  */
@@ -30,10 +29,6 @@ export
 class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = [checkboxCommonStyle, checkboxStyle];
 
-  public static readonly events = {
-    didChange: 'didChange',
-  } as const;
-
   /**
    * Size variant, either m, s or xs.
    * @default 'm' / 'xs' (lean)

src/elements/checkbox/checkbox/readme.md

@@ -98,11 +98,10 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `change`    | `Event`             | Event fired on change.                                                           |                |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `input`     | `InputEvent`        | Event fired on input.                                                            |                |
+| Name     | Type         | Description            | Inherited From |
+| -------- | ------------ | ---------------------- | -------------- |
+| `change` | `Event`      | Event fired on change. |                |
+| `input`  | `InputEvent` | Event fired on input.  |                |
 
 ## Slots
 

src/elements/container/sticky-bar/sticky-bar.scss

@@ -62,24 +62,20 @@ $intersector-overlapping: 1px;
 }
 
 :host(
-    :is(
-        [data-sticking]:is(
-            [data-slide-vertically],
-            [data-state='sticking'],
-            [data-state='unsticking']
-          ),
-        [data-state='unsticky']
-      )
-  ) {
+  :is(
+    [data-sticking]:is([data-slide-vertically], [data-state='sticking'], [data-state='unsticking']),
+    [data-state='unsticky']
+  )
+) {
   --_sbb-sticky-bar-background-animation-duration: 0s;
 }
 
 :host(
-    [data-sticking]:is(
-        [data-slide-vertically]:not([data-state='unsticky'], [data-state='unsticking']),
-        [data-state='sticking']
-      )
-  ) {
+  [data-sticking]:is(
+      [data-slide-vertically]:not([data-state='unsticky'], [data-state='unsticking']),
+      [data-state='sticking']
+    )
+) {
   --sbb-sticky-bar-slide-vertically-animation-name: slide-in;
 }