docs(sbb-stepper): improve stories

src/elements/stepper/step/__snapshots__/step.snapshot.spec.snap.js

@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-step renders - DOM"] = 
+snapshots["sbb-step renders DOM"] = 
 `<sbb-step
   id="sbb-step-0"
   role="tabpanel"
@@ -10,35 +10,35 @@ snapshots["sbb-step renders - DOM"] =
   Step content
 </sbb-step>
 `;
-/* end snapshot sbb-step renders - DOM */
+/* end snapshot sbb-step renders DOM */
 
-snapshots["sbb-step renders - Shadow DOM"] = 
+snapshots["sbb-step renders Shadow DOM"] = 
 `<div class="sbb-step--wrapper">
   <div class="sbb-step">
     <slot>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot sbb-step renders - Shadow DOM */
+/* end snapshot sbb-step renders Shadow DOM */
 
-snapshots["sbb-step A11y tree Chrome"] = 
+snapshots["sbb-step renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-step A11y tree Chrome */
+/* end snapshot sbb-step renders A11y tree Chrome */
 
-snapshots["sbb-step A11y tree Firefox"] = 
+snapshots["sbb-step renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-step A11y tree Firefox */
+/* end snapshot sbb-step renders A11y tree Firefox */
 

src/elements/stepper/step/step.snapshot.spec.ts

@@ -7,19 +7,21 @@ import type { SbbStepElement } from './step.js';
 import './step.js';
 
 describe('sbb-step', () => {
-  let element: SbbStepElement;
+  describe('renders', () => {
+    let element: SbbStepElement;
 
-  beforeEach(async () => {
-    element = await fixture(html`<sbb-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();
-  });
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  it('renders - Shadow DOM', async () => {
-    await expect(element).shadowDom.to.be.equalSnapshot();
-  });
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot();
+    testA11yTreeSnapshot();
+  });
 });

src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js

@@ -1,6 +1,189 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
+snapshots["sbb-stepper renders DOM"] = 
+`<sbb-stepper
+  data-disable-animation=""
+  orientation="horizontal"
+  selected-index="0"
+  style="--sbb-stepper-marker-size: 188px;"
+>
+  <sbb-step-label
+    aria-controls="sbb-step-0"
+    data-action=""
+    data-button=""
+    data-orientation="horizontal"
+    data-selected=""
+    dir="ltr"
+    id="sbb-step-label-0"
+    role="tab"
+    slot="step-label"
+    tabindex="0"
+  >
+    Test step label 1
+  </sbb-step-label>
+  <sbb-step
+    aria-labelledby="sbb-step-label-0"
+    data-orientation="horizontal"
+    data-selected=""
+    id="sbb-step-0"
+    role="tabpanel"
+    slot="step"
+  >
+    Test step content 1
+  </sbb-step>
+  <sbb-step-label
+    aria-controls="sbb-step-1"
+    data-action=""
+    data-button=""
+    data-orientation="horizontal"
+    dir="ltr"
+    id="sbb-step-label-1"
+    role="tab"
+    slot="step-label"
+    tabindex="-1"
+  >
+    Test step label 2
+  </sbb-step-label>
+  <sbb-step
+    aria-labelledby="sbb-step-label-1"
+    data-orientation="horizontal"
+    id="sbb-step-1"
+    role="tabpanel"
+    slot="step"
+  >
+    Test step content 2
+  </sbb-step>
+  <sbb-step-label
+    aria-controls="sbb-step-2"
+    data-action=""
+    data-button=""
+    data-disabled=""
+    data-orientation="horizontal"
+    dir="ltr"
+    disabled=""
+    id="sbb-step-label-2"
+    role="tab"
+    slot="step-label"
+    tabindex="-1"
+  >
+    Test step label 3
+  </sbb-step-label>
+  <sbb-step
+    aria-labelledby="sbb-step-label-2"
+    data-orientation="horizontal"
+    id="sbb-step-2"
+    role="tabpanel"
+    slot="step"
+  >
+    Test step content 3
+  </sbb-step>
+  <sbb-step-label
+    data-action=""
+    data-button=""
+    dir="ltr"
+    id="sbb-step-label-3"
+    role="tab"
+    slot="step-label"
+    tabindex="-1"
+  >
+    Test step label 4
+  </sbb-step-label>
+</sbb-stepper>
+`;
+/* end snapshot sbb-stepper renders DOM */
+
+snapshots["sbb-stepper renders Shadow DOM"] = 
+`<div class="sbb-stepper">
+  <div
+    class="sbb-stepper__labels"
+    role="tablist"
+  >
+    <slot name="step-label">
+    </slot>
+  </div>
+  <div class="sbb-stepper__steps">
+    <slot name="step">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-stepper renders Shadow DOM */
+
+snapshots["sbb-stepper renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test step label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 4"
+    },
+    {
+      "role": "text",
+      "name": "Test step content 1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-stepper renders A11y tree Chrome */
+
+snapshots["sbb-stepper renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "1 Test step label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "2 Test step label 2"
+    },
+    {
+      "role": "tab",
+      "name": "3 Test step label 3"
+    },
+    {
+      "role": "tab",
+      "name": "4 Test step label 4"
+    },
+    {
+      "role": "text leaf",
+      "name": "Test step content 1"
+    },
+    {
+      "role": "tabpanel",
+      "name": "2 Test step label 2"
+    },
+    {
+      "role": "tabpanel",
+      "name": "3 Test step label 3"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-stepper renders A11y tree Firefox */
+
 snapshots["sbb-stepper renders - DOM"] = 
 `<sbb-stepper
   data-disable-animation=""