feat: add overlay base class (WIP)

src/components/core/base-elements.ts

@@ -1,3 +1,4 @@
 export * from './base-elements/action-base-element.js';
 export * from './base-elements/button-base-element.js';
 export * from './base-elements/link-base-element.js';
+export * from './base-elements/overlay-base-element.js';

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

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+
+import { EventEmitter } from '../eventing/event-emitter.js';
+import type { SbbOpenedClosedState } from '../interfaces.js';
+
+/** Base class for overlay components. */
+export abstract class SbbOverlayBaseElement extends LitElement {
+  public static readonly events = {
+    willOpen: 'willOpen',
+    didOpen: 'didOpen',
+    willClose: 'willClose',
+    didClose: 'didClose',
+  } as const;
+
+  /** The state of the component. */
+  protected set state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  protected get state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
+
+  /** Emits whenever the component starts the opening transition. */
+  protected willOpen: EventEmitter = new EventEmitter(this, SbbOverlayBaseElement.events.willOpen);
+
+  /** Emits whenever the component is opened. */
+  protected didOpen: EventEmitter = new EventEmitter(this, SbbOverlayBaseElement.events.didOpen);
+
+  /** Emits whenever the component begins the closing transition. */
+  protected willClose: EventEmitter = new EventEmitter(
+    this,
+    SbbOverlayBaseElement.events.willClose,
+  );
+
+  /** Emits whenever the component is closed. */
+  protected didClose: EventEmitter = new EventEmitter(this, SbbOverlayBaseElement.events.didClose);
+
+  /** Opens the component. */
+  public abstract open(): void;
+  /** Closes the component. */
+  public abstract close(): void;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.state ||= 'closed';
+  }
+}

src/components/dialog/dialog/dialog-base-element.ts

@@ -1,55 +1,26 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { SbbFocusHandler } from '../../core/a11y.js';
+import { SbbOverlayBaseElement } from '../../core/base-elements.js';
 import { SbbLanguageController } from '../../core/controllers.js';
 import { hostContext, SbbScrollHandler } from '../../core/dom.js';
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nDialog } from '../../core/i18n.js';
-import type { SbbDialogCloseEventDetails, SbbOpenedClosedState } from '../../core/interfaces.js';
+import type { SbbDialogCloseEventDetails } from '../../core/interfaces.js';
 import { SbbNegativeMixin } from '../../core/mixins.js';
 import { applyInertMechanism, removeInertMechanism } from '../../core/overlay.js';
 import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only.js';
 
 // A global collection of existing dialogs
 export const dialogRefs: SbbDialogBaseElement[] = [];
 
-export abstract class SbbDialogBaseElement extends SbbNegativeMixin(LitElement) {
-  public static readonly events = {
-    willOpen: 'willOpen',
-    didOpen: 'didOpen',
-    willClose: 'willClose',
-    didClose: 'didClose',
-  } as const;
-
+export abstract class SbbDialogBaseElement extends SbbNegativeMixin(SbbOverlayBaseElement) {
   /** This will be forwarded as aria-label to the relevant nested element. */
   @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
 
-  /** The state of the overlay. */
-  protected set state(state: SbbOpenedClosedState) {
-    this.setAttribute('data-state', state);
-  }
-  protected get state(): SbbOpenedClosedState {
-    return this.getAttribute('data-state') as SbbOpenedClosedState;
-  }
-
-  /** Emits whenever the `sbb-dialog` starts the opening transition. */
-  protected willOpen: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbDialogBaseElement.events.willOpen,
-  );
-
-  /** Emits whenever the `sbb-dialog` is opened. */
-  protected didOpen: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbDialogBaseElement.events.didOpen,
-  );
-
-  /** Emits whenever the `sbb-dialog` begins the closing transition. */
-  protected willClose: EventEmitter = new EventEmitter(this, SbbDialogBaseElement.events.willClose);
-
   /** Emits whenever the `sbb-dialog` is closed. */
-  protected didClose: EventEmitter<SbbDialogCloseEventDetails> = new EventEmitter(
+  protected override didClose: EventEmitter<SbbDialogCloseEventDetails> = new EventEmitter(
     this,
     SbbDialogBaseElement.events.didClose,
   );
@@ -66,13 +37,11 @@ export abstract class SbbDialogBaseElement extends SbbNegativeMixin(LitElement)
   protected ariaLiveRef!: SbbScreenReaderOnlyElement;
   protected language = new SbbLanguageController(this);
 
-  /** Opens the dialog element. */
-  public abstract open(): void;
   protected abstract onDialogAnimationEnd(event: AnimationEvent): void;
   protected abstract setDialogFocus(): void;
   protected abstract closeAttribute: string;
 
-  /** Closes the dialog element. */
+  /** Closes the component. */
   public close(result?: any, target?: HTMLElement): any {
     if (this.state !== 'opened') {
       return;
@@ -94,7 +63,6 @@ export abstract class SbbDialogBaseElement extends SbbNegativeMixin(LitElement)
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    this.state ||= 'closed';
     this.dialogController?.abort();
     this.dialogController = new AbortController();
 

src/components/dialog/dialog/dialog.ts

@@ -53,7 +53,7 @@ export class SbbDialogElement extends SbbDialogBaseElement {
   private _dialogId = `sbb-dialog-${nextId++}`;
   protected closeAttribute: string = 'sbb-dialog-close';
 
-  /** Opens the dialog element. */
+  /** Opens the component. */
   public open(): void {
     if (this.state !== 'closed') {
       return;

src/components/dialog/dialog/readme.md

@@ -98,10 +98,10 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro
 
 ## Methods
 
-| Name    | Privacy | Description                | Parameters                         | Return | Inherited From       |
-| ------- | ------- | -------------------------- | ---------------------------------- | ------ | -------------------- |
-| `open`  | public  | Opens the dialog element.  |                                    | `void` | SbbDialogBaseElement |
-| `close` | public  | Closes the dialog element. | `result: any, target: HTMLElement` | `any`  | SbbDialogBaseElement |
+| Name    | Privacy | Description           | Parameters                         | Return | Inherited From        |
+| ------- | ------- | --------------------- | ---------------------------------- | ------ | --------------------- |
+| `open`  | public  | Opens the component.  |                                    | `void` | SbbOverlayBaseElement |
+| `close` | public  | Closes the component. | `result: any, target: HTMLElement` | `any`  | SbbOverlayBaseElement |
 
 ## Events
 

src/components/overlay/overlay.ts

@@ -69,7 +69,7 @@ export class SbbOverlayElement extends SbbDialogBaseElement {
   );
   private _overlayContentElement: HTMLElement | null = null;
 
-  /** Opens the overlay element. */
+  /** Opens the component. */
   public open(): void {
     if (this.state !== 'closed') {
       return;

src/components/overlay/readme.md

@@ -85,10 +85,10 @@ When using a button to trigger the overlay, ensure to manage the appropriate ARI
 
 ## Methods
 
-| Name    | Privacy | Description                | Parameters                         | Return | Inherited From       |
-| ------- | ------- | -------------------------- | ---------------------------------- | ------ | -------------------- |
-| `open`  | public  | Opens the overlay element. |                                    | `void` | SbbDialogBaseElement |
-| `close` | public  | Closes the dialog element. | `result: any, target: HTMLElement` | `any`  | SbbDialogBaseElement |
+| Name    | Privacy | Description           | Parameters                         | Return | Inherited From        |
+| ------- | ------- | --------------------- | ---------------------------------- | ------ | --------------------- |
+| `open`  | public  | Opens the component.  |                                    | `void` | SbbOverlayBaseElement |
+| `close` | public  | Closes the component. | `result: any, target: HTMLElement` | `any`  | SbbOverlayBaseElement |
 
 ## Events