fix: rebase

src/components/dialog/dialog-actions/dialog-actions.spec.ts

@@ -1,7 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import './dialog-actions';
 
 describe('sbb-dialog-actions', () => {

src/components/dialog/dialog-actions/dialog-actions.ts

@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionGroupElement } from '../../action-group';
-import { hostAttributes } from '../../core/common-behaviors';
+import { hostAttributes } from '../../core/decorators';
 
 import style from './dialog-actions.scss?lit&inline';
 

src/components/dialog/dialog-content/dialog-content.ts

@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/common-behaviors';
+import { hostAttributes } from '../../core/decorators';
 
 import style from './dialog-content.scss?lit&inline';
 

src/components/dialog/dialog-title/dialog-title.spec.ts

@@ -1,7 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import './dialog-title';
 
 describe('sbb-dialog-title', () => {

src/components/dialog/dialog-title/dialog-title.ts

@@ -3,8 +3,9 @@ import { nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { FocusVisibleWithinController } from '../../core/a11y';
-import { LanguageController, hostAttributes } from '../../core/common-behaviors';
+import { SbbFocusVisibleWithinController } from '../../core/a11y';
+import { SbbLanguageController } from '../../core/controllers';
+import { hostAttributes } from '../../core/decorators';
 import type { Breakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
@@ -63,7 +64,7 @@ export class SbbDialogTitleElement extends SbbTitleElement {
     this,
     SbbDialogTitleElement.events.backClick,
   );
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   public constructor() {
     super();
@@ -73,7 +74,7 @@ export class SbbDialogTitleElement extends SbbTitleElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    new FocusVisibleWithinController(this);
+    new SbbFocusVisibleWithinController(this);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {

src/components/dialog/dialog/dialog.e2e.ts

@@ -42,7 +42,7 @@ describe('sbb-dialog', () => {
         <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
-    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!;
+    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
   });
 
   it('renders', () => {

src/components/dialog/dialog/dialog.spec.ts

@@ -7,7 +7,7 @@ import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import type { SbbDialogElement } from './dialog';
 import './dialog';
 import '../dialog-title';
-import '../dialog-content/dialog';
+import '../dialog-content';
 
 describe(`sbb-dialog`, () => {
   describe('renders an open dialog', async () => {

src/components/dialog/dialog/dialog.stories.ts

@@ -14,9 +14,10 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { sbbSpread } from '../../../storybook/helpers/spread';
 import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread, breakpoints } from '../../core/dom';
+import { breakpoints } from '../../core/dom/breakpoint';
 import sampleImages from '../../core/images';
 import type { SbbTitleLevel } from '../../title';
 import { SbbDialogTitleElement } from '../dialog-title';
@@ -331,10 +332,12 @@ const FormTemplate = ({
         method and returning the form values to update the details.
       </div>
       <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-        <sbb-form-field error-space="none" label="Message" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
           <input placeholder="Your custom massage" value="Hello 👋" name="message" />
         </sbb-form-field>
-        <sbb-form-field error-space="none" label="Favorite animal" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Favorite animal</label>
           <select name="animal">
             <option>Red Panda</option>
             <option>Cheetah</option>

src/components/dialog/dialog/dialog.ts

@@ -1,25 +1,26 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
-import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
-import { LanguageController, SbbNegativeMixin } from '../../core/common-behaviors';
-import { ScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
+import { SbbFocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
+import { SbbLanguageController } from '../../core/controllers';
+import { SbbScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nDialog } from '../../core/i18n';
+import { SbbNegativeMixin } from '../../core/mixins';
 import { AgnosticResizeObserver } from '../../core/observers';
 import type { SbbOverlayState } from '../../core/overlay';
 import { applyInertMechanism, removeInertMechanism } from '../../core/overlay';
+import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only';
 import type { SbbDialogActionsElement } from '../dialog-actions';
 import type { SbbDialogTitleElement } from '../dialog-title';
 
 import style from './dialog.scss?lit&inline';
 
 import '../../button/secondary-button';
 import '../../button/transparent-button';
-import '../../screenreader-only';
+import '../../screen-reader-only';
 import '../../title';
 
 // A global collection of existing dialogs
@@ -88,7 +89,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
     setTimeout(() => this._onContentResize()),
   );
-  private _ariaLiveRef!: HTMLElement;
+  private _ariaLiveRef!: SbbScreenReaderOnlyElement;
   private _ariaLiveRefToggle = false;
 
   /** Emits whenever the `sbb-dialog` starts the opening transition. */
@@ -113,8 +114,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
   private _openDialogController!: AbortController;
-  private _focusHandler = new FocusHandler();
-  private _scrollHandler = new ScrollHandler();
+  private _focusHandler = new SbbFocusHandler();
+  private _scrollHandler = new SbbScrollHandler();
   private _returnValue: any;
   private _isPointerDownEventOnDialog: boolean = false;
   private _overflows: boolean = false;
@@ -124,7 +125,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   // Last element which had focus before the dialog was opened.
   private _lastFocusedElement?: HTMLElement;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * Opens the dialog element.
@@ -245,10 +246,14 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     }
   }
 
-  protected override firstUpdated(): void {
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    this._ariaLiveRef =
+      this.shadowRoot!.querySelector<SbbScreenReaderOnlyElement>('sbb-screen-reader-only')!;
+
     // Synchronize the negative state before the first opening to avoid a possible color flash if it is negative.
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
     this._syncNegative();
+    super.firstUpdated(_changedProperties);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -470,10 +475,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           </div>
         </div>
       </div>
-      <sbb-screenreader-only
-        aria-live="polite"
-        ${ref((el?: Element) => (this._ariaLiveRef = el as HTMLElement))}
-      ></sbb-screenreader-only>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
   }
 }

src/components/overlay/overlay.stories.ts

@@ -225,10 +225,12 @@ const FormTemplate = (args: Args): TemplateResult => html`
         method and returning the form values to update the details.
       </div>
       <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-        <sbb-form-field error-space="none" label="Message" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
           <input placeholder="Your custom massage" value="Hello 👋" name="message" />
         </sbb-form-field>
-        <sbb-form-field error-space="none" label="Favorite animal" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Favorite animal</label>
           <select name="animal">
             <option>Red Panda</option>
             <option>Cheetah</option>