refactor: rename event names to camelCase (#2215)

Previously our event names were not consistent. Now every event has camelCase notation.

BREAKING CHANGE:
- sbb-alert: Event `will-present` was renamed to `willPresent`. 
- sbb-alert: Event `did-present` was renamed to `didPresent`. 
- sbb-alert: Event `dismissal-requested` was renamed to `dismissalRequested`. 
- sbb-alert-group: Event `did-dismiss-alert` was renamed to `didDismissAlert`. 
- sbb-autocomplete: Event `will-open` was renamed to `willOpen`.
- sbb-autocomplete: Event `did-open` was renamed to `didOpen`.
- sbb-autocomplete: Event `will-close` was renamed to `willClose`.
- sbb-autocomplete: Event `did-close` was renamed to `didClose`.
- sbb-calendar: Event `date-selected` was renamed to `dateSelected`.
- sbb-checkbox: Event `did-change` was renamed to `didChange`.
- sbb-dialog: Event `will-open` was renamed to `willOpen`.
- sbb-dialog: Event `did-open` was renamed to `didOpen`.
- sbb-dialog: Event `will-close` was renamed to `willClose`.
- sbb-dialog: Event `did-close` was renamed to `didClose`.
- sbb-dialog: Event `request-back-action` was renamed to `requestBackAction`.
- sbb-expansion-panel: Event `will-open` was renamed to `willOpen`.
- sbb-expansion-panel: Event `did-open` was renamed to `didOpen`.
- sbb-expansion-panel: Event `will-close` was renamed to `willClose`.
- sbb-expansion-panel: Event `did-close` was renamed to `didClose`.
- sbb-expansion-panel-header: Event `toggle-expanded` was renamed to `toggleExpanded`.
- sbb-file-selector: Event `file-changed` was renamed to `fileChanged`.
- sbb-menu: Event `will-open` was renamed to `willOpen`.
- sbb-menu: Event `did-open` was renamed to `didOpen`.
- sbb-menu: Event `will-close` was renamed to `willClose`.
- sbb-menu: Event `did-close` was renamed to `didClose`.
- sbb-notification: Event `will-open` was renamed to `willOpen`.
- sbb-notification: Event `did-open` was renamed to `didOpen`.
- sbb-notification: Event `will-close` was renamed to `willClose`.
- sbb-notification: Event `did-close` was renamed to `didClose`.
- sbb-option: Event `option-selection-change` was renamed to `optionSelectionChange`.
- sbb-option: Event `option-selected` was renamed to `optionSelected`.
- sbb-select: Event `will-open` was renamed to `willOpen`.
- sbb-select: Event `did-open` was renamed to `didOpen`.
- sbb-select: Event `will-close` was renamed to `willClose`.
- sbb-select: Event `did-close` was renamed to `didClose`.
- sbb-tab-group: Event `did-change` was renamed to `didChange`.
- sbb-tag: Event `state-change` was renamed to `stateChange` and was changed to an internal event.
- sbb-toast: Event `will-open` was renamed to `willOpen`.
- sbb-toast: Event `did-open` was renamed to `didOpen`.
- sbb-toast: Event `will-close` was renamed to `willClose`.
- sbb-toast: Event `did-close` was renamed to `didClose`.
- sbb-tooltip: Event `will-open` was renamed to `willOpen`.
- sbb-tooltip: Event `did-open` was renamed to `didOpen`.
- sbb-tooltip: Event `will-close` was renamed to `willClose`.
- sbb-tooltip: Event `did-close` was renamed to `didClose`.

src/components/accordion/accordion.ts

@@ -77,21 +77,15 @@ export class SbbAccordion extends LitElement {
 
   private _setChildrenParameters(): void {
     const expansionPanels = this._expansionPanels;
-    if (!expansionPanels) {
+    if (!expansionPanels || !(expansionPanels.length > 0)) {
       return;
     }
 
     expansionPanels.forEach((panel: SbbExpansionPanel) => {
       panel.titleLevel = this.titleLevel;
-
+      panel.disableAnimation = this.disableAnimation;
       toggleDatasetEntry(panel, 'accordionFirst', false);
       toggleDatasetEntry(panel, 'accordionLast', false);
-
-      if (this.disableAnimation) {
-        panel.setAttribute('disable-animation', 'true');
-      } else {
-        panel.removeAttribute('disable-animation');
-      }
     });
     toggleDatasetEntry(expansionPanels[0], 'accordionFirst', true);
     toggleDatasetEntry(expansionPanels[expansionPanels.length - 1], 'accordionLast', true);
@@ -100,7 +94,11 @@ export class SbbAccordion extends LitElement {
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
-    this.addEventListener('will-open', (e: CustomEvent) => this._closePanels(e), { signal });
+    this.addEventListener(
+      SbbExpansionPanel.events.willOpen,
+      (e: CustomEvent) => this._closePanels(e),
+      { signal },
+    );
   }
 
   protected override render(): TemplateResult {

src/components/alert/alert-group/alert-group.ts

@@ -5,7 +5,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { setAttribute } from '../../core/dom';
 import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
 import type { TitleLevel } from '../../title';
-import type { SbbAlert } from '../alert';
+import { SbbAlert } from '../alert';
 
 import style from './alert-group.scss?lit&inline';
 
@@ -14,14 +14,14 @@ import style from './alert-group.scss?lit&inline';
  *
  * @slot - Use the unnamed slot to add `sbb-alert` elements to the `sbb-alert-group`.
  * @slot accessibility-title - title for this `sbb-alert-group` which is only visible for screen reader users.
- * @event {CustomEvent<SbbAlert>} did-dismiss-alert - Emits when an alert was removed from DOM.
+ * @event {CustomEvent<SbbAlert>} didDismissAlert - Emits when an alert was removed from DOM.
  * @event {CustomEvent<void>} empty - Emits when `sbb-alert-group` becomes empty.
  */
 @customElement('sbb-alert-group')
 export class SbbAlertGroup extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didDismissAlert: 'did-dismiss-alert',
+    didDismissAlert: 'didDismissAlert',
     empty: 'empty',
   } as const;
 
@@ -78,7 +78,9 @@ export class SbbAlertGroup extends LitElement {
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
-    this.addEventListener('dismissal-requested', (e) => this._removeAlert(e), { signal });
+    this.addEventListener(SbbAlert.events.dismissalRequested, (e) => this._removeAlert(e), {
+      signal,
+    });
   }
 
   private _slotChanged(event: Event): void {

src/components/alert/alert-group/readme.md

@@ -51,10 +51,10 @@ and therefore interrupts screen reader flow, to immediately read out the alert c
 
 ## Events
 
-| Name                | Type                    | Description                                 | Inherited From |
-| ------------------- | ----------------------- | ------------------------------------------- | -------------- |
-| `did-dismiss-alert` | `CustomEvent<SbbAlert>` | Emits when an alert was removed from DOM.   |                |
-| `empty`             | `CustomEvent<void>`     | Emits when `sbb-alert-group` becomes empty. |                |
+| Name              | Type                    | Description                                 | Inherited From |
+| ----------------- | ----------------------- | ------------------------------------------- | -------------- |
+| `didDismissAlert` | `CustomEvent<SbbAlert>` | Emits when an alert was removed from DOM.   |                |
+| `empty`           | `CustomEvent<void>`     | Emits when `sbb-alert-group` becomes empty. |                |
 
 ## Slots
 

src/components/alert/alert/alert.ts

@@ -26,17 +26,17 @@ import '../../title';
  * @slot - Use the unnamed slot to add content to the `sbb-alert`.
  * @slot icon - Should be a `sbb-icon` which is displayed next to the title. Styling is optimized for icons of type HIM-CUS.
  * @slot title - Title content.
- * @event {CustomEvent<void>} will-present - Emits when the fade in animation starts.
- * @event {CustomEvent<void>} did-present - Emits when the fade in animation ends and the button is displayed.
- * @event {CustomEvent<void>} dismissal-requested - Emits when dismissal of an alert was requested.
+ * @event {CustomEvent<void>} willPresent - Emits when the fade in animation starts.
+ * @event {CustomEvent<void>} didPresent - Emits when the fade in animation ends and the button is displayed.
+ * @event {CustomEvent<void>} dismissalRequested - Emits when dismissal of an alert was requested.
  */
 @customElement('sbb-alert')
 export class SbbAlert extends LitElement implements LinkProperties {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    willPresent: 'will-present',
-    didPresent: 'did-present',
-    dismissalRequested: 'dismissal-requested',
+    willPresent: 'willPresent',
+    didPresent: 'didPresent',
+    dismissalRequested: 'dismissalRequested',
   } as const;
 
   /**

src/components/alert/alert/readme.md

@@ -97,11 +97,11 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 
 ## Events
 
-| Name                  | Type                | Description                                                        | Inherited From |
-| --------------------- | ------------------- | ------------------------------------------------------------------ | -------------- |
-| `will-present`        | `CustomEvent<void>` | Emits when the fade in animation starts.                           |                |
-| `did-present`         | `CustomEvent<void>` | Emits when the fade in animation ends and the button is displayed. |                |
-| `dismissal-requested` | `CustomEvent<void>` | Emits when dismissal of an alert was requested.                    |                |
+| Name                 | Type                | Description                                                        | Inherited From |
+| -------------------- | ------------------- | ------------------------------------------------------------------ | -------------- |
+| `willPresent`        | `CustomEvent<void>` | Emits when the fade in animation starts.                           |                |
+| `didPresent`         | `CustomEvent<void>` | Emits when the fade in animation ends and the button is displayed. |                |
+| `dismissalRequested` | `CustomEvent<void>` | Emits when dismissal of an alert was requested.                    |                |
 
 ## Slots
 

src/components/autocomplete/autocomplete.ts

@@ -31,19 +31,19 @@ let nextId = 0;
  * Combined with a native input, it displays a panel with a list of available options.
  *
  * @slot - Use the unnamed slot to add `sbb-option` or `sbb-optgroup` elements to the `sbb-autocomplete`.
- * @event {CustomEvent<void>} will-open - Emits whenever the `sbb-autocomplete` starts the opening transition.
- * @event {CustomEvent<void>} did-open - Emits whenever the `sbb-autocomplete` is opened.
- * @event {CustomEvent<void>} will-close - Emits whenever the `sbb-autocomplete` begins the closing transition.
- * @event {CustomEvent<void>} did-close - Emits whenever the `sbb-autocomplete` is closed.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-autocomplete` starts the opening transition.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-autocomplete` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-autocomplete` begins the closing transition.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-autocomplete` is closed.
  */
 @customElement('sbb-autocomplete')
 export class SbbAutocomplete extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    willOpen: 'will-open',
-    didOpen: 'did-open',
-    willClose: 'will-close',
-    didClose: 'did-close',
+    willOpen: 'willOpen',
+    didOpen: 'didOpen',
+    willClose: 'willClose',
+    didClose: 'didClose',
   } as const;
 
   /**
@@ -202,11 +202,9 @@ export class SbbAutocomplete extends LitElement {
     }
     this._syncNegative();
 
-    this.addEventListener(
-      'option-selection-change',
-      (e: CustomEvent) => this._onOptionSelected(e),
-      { signal },
-    );
+    this.addEventListener('optionSelectionChange', (e: CustomEvent) => this._onOptionSelected(e), {
+      signal,
+    });
     this.addEventListener('click', (e) => this._onOptionClick(e), { signal });
   }
 

src/components/autocomplete/readme.md

@@ -66,7 +66,7 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele
 
 ## Events
 
-The `sbb-option` emits the `option-selected` event when selected via user interaction.
+The `sbb-option` emits the `optionSelected` event when selected via user interaction.
 
 ## Keyboard interaction
 
@@ -112,12 +112,12 @@ using `aria-activedescendant` to support navigation though the autocomplete opti
 
 ## Events
 
-| Name         | Type                | Description                                                          | Inherited From |
-| ------------ | ------------------- | -------------------------------------------------------------------- | -------------- |
-| `will-open`  | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` starts the opening transition. |                |
-| `did-open`   | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is opened.                     |                |
-| `will-close` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` begins the closing transition. |                |
-| `did-close`  | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is closed.                     |                |
+| Name        | Type                | Description                                                          | Inherited From |
+| ----------- | ------------------- | -------------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` starts the opening transition. |                |
+| `didOpen`   | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is opened.                     |                |
+| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` begins the closing transition. |                |
+| `didClose`  | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is closed.                     |                |
 
 ## Slots
 

src/components/calendar/calendar.e2e.ts

@@ -92,7 +92,7 @@ describe('sbb-calendar', () => {
   });
 
   it('selects a different date', async () => {
-    const selectedSpy = new EventSpy('date-selected');
+    const selectedSpy = new EventSpy(SbbCalendar.events.dateSelected);
     const selectedDate = element.shadowRoot.querySelector('button[data-day="15 1 2023"]');
 
     expect(selectedDate).to.have.class('sbb-calendar__selected');
@@ -110,7 +110,7 @@ describe('sbb-calendar', () => {
   });
 
   it("clicks on disabled day and doesn't change selection", async () => {
-    const selectedSpy = new EventSpy('date-selected');
+    const selectedSpy = new EventSpy(SbbCalendar.events.dateSelected);
 
     element.max = 1674946800;
     await waitForLitRender(element);

src/components/calendar/calendar.ts

@@ -81,13 +81,13 @@ export type CalendarView = 'day' | 'month' | 'year';
 /**
  * It displays a calendar which allows to choose a date.
  *
- * @event {CustomEvent<Date>} date-selected - Event emitted on date selection.
+ * @event {CustomEvent<Date>} dateSelected - Event emitted on date selection.
  */
 @customElement('sbb-calendar')
 export class SbbCalendar extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    dateSelected: 'date-selected',
+    dateSelected: 'dateSelected',
   } as const;
 
   /** If set to true, two months are displayed */

src/components/calendar/readme.md

@@ -80,6 +80,6 @@ This is helpful if you need a specific state of the component.
 
 ## Events
 
-| Name            | Type                | Description                      | Inherited From |
-| --------------- | ------------------- | -------------------------------- | -------------- |
-| `date-selected` | `CustomEvent<Date>` | Event emitted on date selection. |                |
+| Name           | Type                | Description                      | Inherited From |
+| -------------- | ------------------- | -------------------------------- | -------------- |
+| `dateSelected` | `CustomEvent<Date>` | Event emitted on date selection. |                |

src/components/checkbox/checkbox/checkbox.ts

@@ -47,15 +47,15 @@ const checkboxObserverConfig: MutationObserverInit = {
  * @slot icon - Slot used to render the checkbox icon (disabled inside a selection panel).
  * @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).
- * @event {CustomEvent<void>} did-change - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  */
 @customElement('sbb-checkbox')
 export class SbbCheckbox extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didChange: 'did-change',
-    stateChange: 'state-change',
-    checkboxLoaded: 'checkbox-loaded',
+    didChange: 'didChange',
+    stateChange: 'stateChange',
+    checkboxLoaded: 'checkboxLoaded',
   } as const;
 
   /** Value of checkbox. */

src/components/checkbox/checkbox/readme.md

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

src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts

@@ -59,7 +59,7 @@ describe('sbb-datepicker-next-day', () => {
 
       const nextButton: SbbDatepickerNextDay = doc.querySelector('sbb-datepicker-next-day');
       const inputUpdated: EventSpy<Event> = new EventSpy(
-        'input-updated',
+        'inputUpdated',
         document.querySelector('#parent'),
       );
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set
@@ -91,7 +91,7 @@ describe('sbb-datepicker-next-day', () => {
 
       const nextButton: SbbDatepickerNextDay = doc.querySelector('sbb-datepicker-next-day');
       const inputUpdated: EventSpy<Event> = new EventSpy(
-        'input-updated',
+        'inputUpdated',
         document.querySelector('#parent'),
       );
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set

src/components/datepicker/datepicker-next-day/datepicker-next-day.ts

@@ -132,7 +132,7 @@ export class SbbDatepickerNextDay extends LitElement {
       // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init,
       // assuming that the two components share the same parent element.
       this.parentElement?.addEventListener(
-        'input-updated',
+        'inputUpdated',
         (e: Event) => this._init(e.target as SbbDatepicker),
         { once: true, signal: this._abort.signal },
       );
@@ -149,15 +149,15 @@ export class SbbDatepickerNextDay extends LitElement {
       { signal: this._datePickerController.signal },
     );
     this._datePickerElement.addEventListener(
-      'date-picker-updated',
+      'datePickerUpdated',
       (event: Event) => {
         this._setDisabledState(event.target as SbbDatepicker);
         this._setAriaLabel();
       },
       { signal: this._datePickerController.signal },
     );
     this._datePickerElement.addEventListener(
-      'input-updated',
+      'inputUpdated',
       (event: CustomEvent<InputUpdateEvent>) => {
         this._inputDisabled = event.detail.disabled || event.detail.readonly;
         if (this._max !== event.detail.max) {

src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts

@@ -55,7 +55,7 @@ describe('sbb-datepicker-previous-day', () => {
 
       const prevButton: SbbDatepickerPreviousDay = doc.querySelector('sbb-datepicker-previous-day');
       const inputUpdated: EventSpy<Event> = new EventSpy(
-        'input-updated',
+        'inputUpdated',
         document.querySelector('#parent'),
       );
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set
@@ -87,7 +87,7 @@ describe('sbb-datepicker-previous-day', () => {
 
       const prevButton: SbbDatepickerPreviousDay = doc.querySelector('sbb-datepicker-previous-day');
       const inputUpdated: EventSpy<Event> = new EventSpy(
-        'input-updated',
+        'inputUpdated',
         document.querySelector('#parent'),
       );
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set

src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts

@@ -132,7 +132,7 @@ export class SbbDatepickerPreviousDay extends LitElement {
       // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init,
       // assuming that the two components share the same parent element.
       this.parentElement?.addEventListener(
-        'input-updated',
+        'inputUpdated',
         (e: Event) => this._init(e.target as SbbDatepicker),
         { once: true, signal: this._abort.signal },
       );
@@ -149,15 +149,15 @@ export class SbbDatepickerPreviousDay extends LitElement {
       { signal: this._datePickerController.signal },
     );
     this._datePickerElement.addEventListener(
-      'date-picker-updated',
+      'datePickerUpdated',
       (event: Event) => {
         this._setDisabledState(event.target as SbbDatepicker);
         this._setAriaLabel();
       },
       { signal: this._datePickerController.signal },
     );
     this._datePickerElement.addEventListener(
-      'input-updated',
+      'inputUpdated',
       (event: CustomEvent<InputUpdateEvent>) => {
         this._inputDisabled = event.detail.disabled || event.detail.readonly;
         if (this._min !== event.detail.min) {