@govtechsg/sgds-web-component 3.19.0-rc.1 → 3.19.0-rc.3

package/index.umd.min.js

@@ -3667,31 +3667,31 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
                 style=${this.borderRadius?`border-radius: ${this.borderRadius}`:ie}
               ></div>`}):ie}
       </div>
-    `}}ad.styles=[id],e([Ze(".skeleton")],ad.prototype,"skeleton",void 0),e([Ve({type:String,reflect:!0})],ad.prototype,"width",void 0),e([Ve({type:String,reflect:!0})],ad.prototype,"height",void 0),e([Ve({type:String,reflect:!0})],ad.prototype,"borderRadius",void 0),e([Ve({type:Number,reflect:!0})],ad.prototype,"rows",void 0),e([Ve({type:Boolean,reflect:!0})],ad.prototype,"sheen",void 0),rt("sgds-skeleton",ad),rt("sgds-spinner",Ha);var od=n`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-of-type) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;class nd extends Pe{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.linear=!1,this.defaultActiveStep=0,this._totalSteps=0,this._boundHandleItemClick=this._handleStepClick.bind(this)}connectedCallback(){super.connectedCallback(),this._totalSteps=this.steps.length,this.addEventListener("i-sgds-click",this._boundHandleItemClick)}_handleSlotChange(){this._items=this._slotNodes,this._totalSteps=this._items.length,this._updateStepItems()}_updateStepItems(){this._items&&this._items.length>0&&this._items.forEach((e,t)=>{e.stepIndex=t,e.active=this.activeStep===t,e._isCompleted=e.completed||this.activeStep>t,e.isClickable=this.linear?!e.disabled&&this.clickable&&(this.activeStep-1==t||this.activeStep+1==t):!e.disabled&&this.clickable,e.orientation=this.orientation,this._items.length>1&&(e.isFirstOfType=0===t,e.classList.toggle("last",t===this._items.length-1))})}getComponent(e=this.activeStep){var t,s;const i=this._slotNodes.length>1?this._items:this.steps;return i&&i.length>0?null===(t=i[e])||void 0===t?void 0:t.component:null===(s=this.steps[e])||void 0===s?void 0:s.component}nextStep(){var e;this.emit("sgds-next-step"),this.activeStep<this._totalSteps-1&&((null===(e=this._slotNodes[this.activeStep+1])||void 0===e?void 0:e.disabled)||this.activeStep++)}previousStep(){var e;this.emit("sgds-previous-step"),this.activeStep>0&&((null===(e=this._slotNodes[this.activeStep-1])||void 0===e?void 0:e.disabled)||this.activeStep--)}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this._totalSteps-1&&(this.activeStep=this._totalSteps-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep=e}_handleActiveStepChange(){this._updateStepItems(),this.emit("sgds-arrived")}_handleClickableChange(){this._updateStepItems()}_handleOrientationChange(){this._updateStepItems()}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}_handleStepClick(e){var t;const s=e;e.stopPropagation();const i=null===(t=s.detail)||void 0===t?void 0:t.stepIndex;this._onStepperItemClick(i)}render(){return ee`
+    `}}ad.styles=[id],e([Ze(".skeleton")],ad.prototype,"skeleton",void 0),e([Ve({type:String,reflect:!0})],ad.prototype,"width",void 0),e([Ve({type:String,reflect:!0})],ad.prototype,"height",void 0),e([Ve({type:String,reflect:!0})],ad.prototype,"borderRadius",void 0),e([Ve({type:Number,reflect:!0})],ad.prototype,"rows",void 0),e([Ve({type:Boolean,reflect:!0})],ad.prototype,"sheen",void 0),rt("sgds-skeleton",ad),rt("sgds-spinner",Ha);var od=n`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-of-type) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;class nd extends Pe{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.linear=!1,this.defaultActiveStep=0,this._items=[],this._totalSteps=0,this._boundHandleItemClick=this._handleStepClick.bind(this),this.hasDefaultSlot=!1,this.hasSlotController=new Hi(this,"[default]")}connectedCallback(){super.connectedCallback(),this._totalSteps=this.steps.length,this.addEventListener("i-sgds-click",this._boundHandleItemClick)}_handleSlotChange(){this._items=this._slotNodes,this._totalSteps=this._items.length,this._updateStepItems()}updated(){this.hasDefaultSlot||(this.hasDefaultSlot=this.hasSlotController.test("[default]"))}_updateStepItems(){this._items&&this._items.length>0&&this._items.forEach((e,t)=>{e.stepIndex=t,e.active=this.activeStep===t,e._isCompleted=e.completed||this.activeStep>t,e.isClickable=this.linear?!e.disabled&&this.clickable&&(this.activeStep-1==t||this.activeStep+1==t):!e.disabled&&this.clickable,e.orientation=this.orientation,this._items.length>1&&(e.isFirstOfType=0===t,e.classList.toggle("last",t===this._items.length-1))})}getComponent(e=this.activeStep){var t,s;const i=this.hasDefaultSlot?this._items:this.steps;return console.log(e,this._items),i&&i.length>0?null===(t=i[e])||void 0===t?void 0:t.component:null===(s=this.steps[e])||void 0===s?void 0:s.component}nextStep(){var e;this.emit("sgds-next-step"),this.activeStep<this._totalSteps-1&&((null===(e=this._slotNodes[this.activeStep+1])||void 0===e?void 0:e.disabled)||this.activeStep++)}previousStep(){var e;this.emit("sgds-previous-step"),this.activeStep>0&&((null===(e=this._slotNodes[this.activeStep-1])||void 0===e?void 0:e.disabled)||this.activeStep--)}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this._totalSteps-1&&(this.activeStep=this._totalSteps-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep=e}_handleActiveStepChange(){this._updateStepItems(),this.emit("sgds-arrived")}_handleClickableChange(){this._updateStepItems()}_handleOrientationChange(){this._updateStepItems()}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}_handleStepClick(e){var t;const s=e;e.stopPropagation();const i=null===(t=s.detail)||void 0===t?void 0:t.stepIndex;this._onStepperItemClick(i)}render(){return ee`
       <div
         class="stepper ${We({[`${this.orientation}`]:this.orientation,clickable:this.clickable})}"
       >
         <slot @slotchange=${this._handleSlotChange}></slot>
 
-        ${this.steps.map(({stepHeader:e,iconName:t},s)=>ee`
-            <div class="stepper-item-container">
-              <div
-                class="stepper-item ${We({"is-active":this.activeStep===s,"is-completed":this.activeStep>s,"is-clickable":this.clickable&&this.activeStep>s})}"
-                tabindex=${this.clickable&&this.activeStep>s?"0":"-1"}
-                aria-current=${this.activeStep===s?"step":"false"}
-                aria-disabled=${this.activeStep<=s?"true":"false"}
-                @click="${this.clickable?()=>this._onStepperItemClick(s):null}"
-                @keydown=${this.clickable?e=>this._handleKeyDown(e,s):null}
-              >
-                <div class="stepper-marker">
-                  ${t?ee`<sgds-icon name=${t} size="md"></sgds-icon>`:s+1}
+        ${this.hasDefaultSlot?ie:this.steps.map(({stepHeader:e,iconName:t},s)=>ee`
+                <div class="stepper-item-container">
+                  <div
+                    class="stepper-item ${We({"is-active":this.activeStep===s,"is-completed":this.activeStep>s,"is-clickable":this.clickable&&this.activeStep>s})}"
+                    tabindex=${this.clickable&&this.activeStep>s?"0":"-1"}
+                    aria-current=${this.activeStep===s?"step":"false"}
+                    aria-disabled=${this.activeStep<=s?"true":"false"}
+                    @click="${this.clickable?()=>this._onStepperItemClick(s):null}"
+                    @keydown=${this.clickable?e=>this._handleKeyDown(e,s):null}
+                  >
+                    <div class="stepper-marker">
+                      ${t?ee`<sgds-icon name=${t} size="md"></sgds-icon>`:s+1}
+                    </div>
+                    <div class="stepper-detail">${e}</div>
+                  </div>
                 </div>
-                <div class="stepper-detail">${e}</div>
-              </div>
-            </div>
-          `)}
+              `)}
       </div>
-    `}}nd.styles=[...Pe.styles,od],nd.dependencies={"sgds-icon":Bt},e([Ve({type:Array})],nd.prototype,"steps",void 0),e([Ve({type:Number,reflect:!0})],nd.prototype,"activeStep",void 0),e([Ve({type:String,reflect:!0})],nd.prototype,"orientation",void 0),e([Ve({type:Boolean,reflect:!0})],nd.prototype,"clickable",void 0),e([Ve({type:Boolean,reflect:!0})],nd.prototype,"linear",void 0),e([xa("activeStep")],nd.prototype,"defaultActiveStep",void 0),e([Le()],nd.prototype,"_slotNodes",void 0),e([at("activeStep",{waitUntilFirstUpdate:!0})],nd.prototype,"_handleActiveStepChange",null),e([at("clickable",{waitUntilFirstUpdate:!0})],nd.prototype,"_handleClickableChange",null),e([at("orientation",{waitUntilFirstUpdate:!0})],nd.prototype,"_handleOrientationChange",null);var rd=n`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper-detail{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-label{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper-item.clickable:focus .stepper-label,.stepper-item.clickable:focus-visible .stepper-label,.stepper-item.clickable:hover .stepper-label{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-label{color:var(--sgds-primary-color-default)}.stepper-item.completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot{color:var(--sgds-color-subtle);display:flex;flex-direction:column;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);gap:var(--sgds-gap-xs);letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;class ld extends Pe{constructor(){super(...arguments),this.stepHeader="",this.stepIndex=0,this.active=!1,this.disabled=!1,this.completed=!1,this.isClickable=!1,this.orientation="horizontal",this.isFirstOfType=!1,this._isCompleted=!1}render(){const e=!this.disabled&&this.isClickable;return ee`
+    `}}nd.styles=[...Pe.styles,od],nd.dependencies={"sgds-icon":Bt},e([Ve({type:Array})],nd.prototype,"steps",void 0),e([Ve({type:Number,reflect:!0})],nd.prototype,"activeStep",void 0),e([Ve({type:String,reflect:!0})],nd.prototype,"orientation",void 0),e([Ve({type:Boolean,reflect:!0})],nd.prototype,"clickable",void 0),e([Ve({type:Boolean,reflect:!0})],nd.prototype,"linear",void 0),e([xa("activeStep")],nd.prototype,"defaultActiveStep",void 0),e([Le()],nd.prototype,"_slotNodes",void 0),e([Ve({type:Boolean})],nd.prototype,"hasDefaultSlot",void 0),e([at("activeStep",{waitUntilFirstUpdate:!0})],nd.prototype,"_handleActiveStepChange",null),e([at("clickable",{waitUntilFirstUpdate:!0})],nd.prototype,"_handleClickableChange",null),e([at("orientation",{waitUntilFirstUpdate:!0})],nd.prototype,"_handleOrientationChange",null);var rd=n`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;flex-shrink:0;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper-detail{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{max-width:unset;padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-label{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper-item.clickable:focus .stepper-label,.stepper-item.clickable:focus-visible .stepper-label,.stepper-item.clickable:hover .stepper-label{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-label{color:var(--sgds-primary-color-default)}.stepper-item.completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot{color:var(--sgds-color-subtle);display:flex;flex-direction:column;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);gap:var(--sgds-gap-xs);letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;class ld extends Pe{constructor(){super(...arguments),this.stepHeader="",this.stepIndex=0,this.active=!1,this.disabled=!1,this.completed=!1,this.isClickable=!1,this.orientation="horizontal",this.isFirstOfType=!1,this._isCompleted=!1}render(){const e=!this.disabled&&this.isClickable;return ee`
       <div class="stepper-item-container">
         <div
           class="stepper-item ${We({first:this.isFirstOfType,active:this.active,completed:this._isCompleted,clickable:this.isClickable,vertical:"vertical"===this.orientation,disabled:this.disabled})}"