From 3e9e672cd7573ecb2bdb23963fc1ef1e368145d7 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 15 Mar 2024 12:36:20 +0100
Subject: [PATCH] feat: react to labels slotchange

---
 src/components/stepper/stepper/stepper.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/stepper/stepper/stepper.ts b/src/components/stepper/stepper/stepper.ts
index ac811fb934b..846d658fd9f 100644
--- a/src/components/stepper/stepper/stepper.ts
+++ b/src/components/stepper/stepper/stepper.ts
@@ -143,11 +143,14 @@ export class SbbStepperElement extends LitElement {
   }
 
   private _configure(): void {
-    const steps = this.steps;
-    steps.forEach((step, index) => {
-      if (step.label) {
-        step.label.internals.ariaPosInSet = `${index + 1}`;
-        step.label.internals.ariaSetSize = `${steps.length}`;
+    console.log('configure...');
+
+    const labels = this.steps.map((s) => s.label);
+    let posInSet = 0;
+    labels.forEach((label) => {
+      if (label) {
+        label.internals.ariaPosInSet = `${++posInSet}`;
+        label.internals.ariaSetSize = `${labels.length}`;
       }
     });
   }
@@ -177,7 +180,6 @@ export class SbbStepperElement extends LitElement {
   }
 
   protected override async firstUpdated(): Promise<void> {
-    this._configure();
     await this.updateComplete;
     this.selectedIndex = !this.linear ? Number(this.getAttribute('selected-index')) || 0 : 0;
     this._checkOrientation();
@@ -194,7 +196,7 @@ export class SbbStepperElement extends LitElement {
     return html`
       <div class="sbb-stepper">
         <div class="sbb-stepper__labels" role="tablist">
-          <slot name="step-label"></slot>
+          <slot name="step-label" @slotchange=${this._configure}></slot>
         </div>
         <div class="sbb-stepper__steps">
           <slot name="step"></slot>