fix: imports

src/components/stepper/step-label/step-label.scss

@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
 
 :host {
   --sbb-step-label-color: var(--sbb-color-iron);

src/components/stepper/step-label/step-label.ts

@@ -6,7 +6,7 @@ import { SbbConnectedAbortController } from '../../core/controllers.js';
 import { hostAttributes } from '../../core/decorators.js';
 import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
 import { SbbIconNameMixin } from '../../icon.js';
-import type { SbbStepElement } from '../step/step.js';
+import type { SbbStepElement } from '../step.js';
 import type { SbbStepperElement } from '../stepper.js';
 
 import style from './step-label.scss?lit&inline';

src/components/stepper/step/__snapshots__/step.spec.snap.js

@@ -1,15 +1,22 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-step renders"] = 
+snapshots["sbb-step renders - Dom"] = 
+`<sbb-step id="sbb-step-0" role="tabpanel" slot="step">
+  Step content
+</sbb-step>
+`;
+/* end snapshot sbb-step renders - Dom */
+
+snapshots["sbb-step renders - ShadowDom"] = 
 `<div class="sbb-step--wrapper">
   <div class="sbb-step">
     <slot>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot sbb-step renders collapsed */
+/* end snapshot sbb-step renders - ShadowDom */
 
 snapshots["sbb-step A11y tree Chrome"] = 
 `<p>

src/components/stepper/step/step.scss

@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
 
 :host {
   --sbb-step-position: initial;

src/components/stepper/step/step.spec.ts

@@ -3,18 +3,23 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
+import type { SbbStepElement } from './step.js';
 import './step.js';
 
 describe('sbb-step', () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-step>Step content</sbb-step>`);
+  let element: SbbStepElement;
 
-    expect(root).dom.to.be.equal(
-      `<sbb-step id="sbb-step-0" role="tabpanel" slot="step">Step content</sbb-step>`,
-    );
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-step>Step content</sbb-step>`);
+  });
+
+  it('renders - Dom', async () => {
+    await expect(element).dom.to.be.equalSnapshot();
+  });
 
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  it('renders - ShadowDom', async () => {
+    await expect(element).shadowDom.to.be.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-step>Step content</sbb-step>`);
+  testA11yTreeSnapshot();
 });

src/components/stepper/stepper/stepper.scss

@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
 
 :host {
   --sbb-stepper-orientation: row;

src/components/stepper/stepper/stepper.ts

@@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { SbbConnectedAbortController } from '../../core/controllers.js';
 import { breakpoints, isBreakpoint } from '../../core/dom.js';
 import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
-import type { SbbStepElement, SbbStepValidateEventDetails } from '../step/step.js';
+import type { SbbStepElement, SbbStepValidateEventDetails } from '../step.js';
 
 import style from './stepper.scss?lit&inline';