scb-wc-test 0.1.216 → 0.1.217

package/mvc/components/scb-stepper/scb-stepper.js

@@ -1,4 +1,4 @@
-import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./scb-step.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,i,n){try{customElements.get(s)||e(s,i,n)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var E=Object.defineProperty,P=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},p=(t,e,s,i)=>{for(var n=i>1?void 0:i?P(e,s):e,l=t.length-1,d;l>=0;l--)(d=t[l])&&(n=(i?d(e,s,n):d(n))||n);return i&&n&&E(e,s,n),n},_=(t,e,s)=>e.has(t)||S("Cannot "+s),f=(t,e,s)=>(_(t,e,"read from private field"),s?s.call(t):e.get(t)),y=(t,e,s)=>e.has(t)?S("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),b=(t,e,s,i)=>(_(t,e,"write to private field"),e.set(t,s),s),o=(t,e,s)=>(_(t,e,"access private method"),s),v,h,r,m,g,u,x;let a=class extends k{constructor(){super(...arguments),y(this,r),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,y(this,v),y(this,h,0),this._onKeyNav=t=>{const e=this._getSteps(),s=this.activeIndex;let i=s;t.detail.key==="ArrowRight"?s<e.length-1?i=s+1:i=0:t.detail.key==="ArrowLeft"&&(s>0?i=s-1:i=e.length-1),i!==s&&(this._onStepClick(i),setTimeout(()=>{const n=e[i].shadowRoot?.querySelector(".scb-step-content");n&&"focus"in n&&typeof n.focus=="function"&&n.focus()},0))},this._onStepContainerClick=t=>{const e=this._getSteps(),s=t.composedPath(),i=e.findIndex(n=>s.includes(n));i!==-1&&this._onStepClick(i)},this._onSlotChange=()=>{const t=this._getSteps();if(t.length===0){this.activeIndex=0;return}this.activeIndex>t.length-1?this.activeIndex=t.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),o(this,r,u).call(this)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?(this.dispatchEvent(new CustomEvent("step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepnext",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))):t<e&&(this.dispatchEvent(new CustomEvent("step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepprev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(t){this._updateSteps(),o(this,r,m).call(this),o(this,r,u).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&o(this,r,u).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&o(this,r,m).call(this)}render(){return C`
+import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./scb-step.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,i,r){try{customElements.get(s)||e(s,i,r)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var E=Object.defineProperty,z=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},p=(t,e,s,i)=>{for(var r=i>1?void 0:i?z(e,s):e,l=t.length-1,d;l>=0;l--)(d=t[l])&&(r=(i?d(e,s,r):d(r))||r);return i&&r&&E(e,s,r),r},_=(t,e,s)=>e.has(t)||S("Cannot "+s),b=(t,e,s)=>(_(t,e,"read from private field"),s?s.call(t):e.get(t)),y=(t,e,s)=>e.has(t)?S("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),u=(t,e,s,i)=>(_(t,e,"write to private field"),e.set(t,s),s),o=(t,e,s)=>(_(t,e,"access private method"),s),v,h,n,m,f,g,x;let a=class extends k{constructor(){super(...arguments),y(this,n),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,y(this,v),y(this,h,0),this._onKeyNav=t=>{const e=this._getSteps(),s=this.activeIndex;let i=s;t.detail.key==="ArrowRight"?s<e.length-1?i=s+1:i=0:t.detail.key==="ArrowLeft"&&(s>0?i=s-1:i=e.length-1),i!==s&&(this._onStepClick(i),setTimeout(()=>{const r=e[i].shadowRoot?.querySelector(".scb-step-content");r&&"focus"in r&&typeof r.focus=="function"&&r.focus()},0))},this._onStepContainerClick=t=>{const e=this._getSteps(),s=t.composedPath(),i=e.findIndex(r=>s.includes(r));i!==-1&&this._onStepClick(i)},this._onSlotChange=()=>{const t=this._getSteps();if(t.length===0){this.activeIndex=0;return}this.activeIndex>t.length-1?this.activeIndex=t.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),o(this,n,g).call(this)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?(this.dispatchEvent(new CustomEvent("step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepnext",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))):t<e&&(this.dispatchEvent(new CustomEvent("step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepprev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();this.style.setProperty("--scb-stepper-step-count",String(Math.max(1,t.length))),t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(t){this._updateSteps(),o(this,n,m).call(this),o(this,n,g).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&o(this,n,g).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&o(this,n,m).call(this)}render(){return C`
       <div
         class="steps"
         role="list"
@@ -8,10 +8,13 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
       >
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
-    `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(b(this,v,new ResizeObserver(()=>{o(this,r,u).call(this)})),f(this,v).observe(this))}disconnectedCallback(){f(this,v)&&(f(this,v).disconnect(),b(this,v,void 0)),f(this,h)&&(cancelAnimationFrame(f(this,h)),b(this,h,0)),super.disconnectedCallback()}};v=new WeakMap;h=new WeakMap;r=new WeakSet;m=function(){const t=o(this,r,g).call(this,this.spacing),e=o(this,r,g).call(this,this.spacingTop)??t,s=o(this,r,g).call(this,this.spacingBottom)??t,i=o(this,r,g).call(this,this.spacingLeft),n=o(this,r,g).call(this,this.spacingRight);e?this.style.setProperty("--scb-stepper-spacing-block-start",e):this.style.removeProperty("--scb-stepper-spacing-block-start"),s?this.style.setProperty("--scb-stepper-spacing-block-end",s):this.style.removeProperty("--scb-stepper-spacing-block-end"),i?this.style.setProperty("--scb-stepper-spacing-inline-start",i):this.style.removeProperty("--scb-stepper-spacing-inline-start"),n?this.style.setProperty("--scb-stepper-spacing-inline-end",n):this.style.removeProperty("--scb-stepper-spacing-inline-end")};g=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){f(this,h)||b(this,h,requestAnimationFrame(()=>{b(this,h,0),o(this,r,x).call(this)}))};x=function(){const t=this._getSteps();t.length!==0&&t.forEach(e=>{const s=e.shadowRoot;if(!s)return;const i=s.querySelector(".label"),n=s.querySelector(".scb-step-content");if(!i)return;if(this.variant!=="horizontal"){i.style.removeProperty("max-width"),i.style.removeProperty("white-space"),i.style.removeProperty("word-break"),i.style.removeProperty("overflow-wrap");return}i.style.maxWidth="none",i.style.whiteSpace="nowrap",i.style.wordBreak="normal",i.style.overflowWrap="normal";const l=n?.clientWidth??e.clientWidth;l>0&&i.scrollWidth>l&&(i.style.maxWidth="100%",i.style.whiteSpace="normal",i.style.wordBreak="break-word",i.style.overflowWrap="anywhere")})};a.styles=w`
+    `}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(u(this,v,new ResizeObserver(()=>{o(this,n,g).call(this)})),b(this,v).observe(this))}disconnectedCallback(){b(this,v)&&(b(this,v).disconnect(),u(this,v,void 0)),b(this,h)&&(cancelAnimationFrame(b(this,h)),u(this,h,0)),super.disconnectedCallback()}};v=new WeakMap;h=new WeakMap;n=new WeakSet;m=function(){const t=o(this,n,f).call(this,this.spacing),e=o(this,n,f).call(this,this.spacingTop)??t,s=o(this,n,f).call(this,this.spacingBottom)??t,i=o(this,n,f).call(this,this.spacingLeft),r=o(this,n,f).call(this,this.spacingRight);e?this.style.setProperty("--scb-stepper-spacing-block-start",e):this.style.removeProperty("--scb-stepper-spacing-block-start"),s?this.style.setProperty("--scb-stepper-spacing-block-end",s):this.style.removeProperty("--scb-stepper-spacing-block-end"),i?this.style.setProperty("--scb-stepper-spacing-inline-start",i):this.style.removeProperty("--scb-stepper-spacing-inline-start"),r?this.style.setProperty("--scb-stepper-spacing-inline-end",r):this.style.removeProperty("--scb-stepper-spacing-inline-end")};f=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};g=function(){b(this,h)||u(this,h,requestAnimationFrame(()=>{u(this,h,0),o(this,n,x).call(this)}))};x=function(){const t=this._getSteps();t.length!==0&&t.forEach(e=>{const s=e.shadowRoot;if(!s)return;const i=s.querySelector(".label"),r=s.querySelector(".scb-step-content");if(!i)return;if(this.variant!=="horizontal"){i.style.removeProperty("max-width"),i.style.removeProperty("white-space"),i.style.removeProperty("word-break"),i.style.removeProperty("overflow-wrap");return}i.style.maxWidth="none",i.style.whiteSpace="nowrap",i.style.wordBreak="normal",i.style.overflowWrap="normal";const l=r?.clientWidth??e.clientWidth;l>0&&i.scrollWidth>l&&(i.style.maxWidth="100%",i.style.whiteSpace="normal",i.style.wordBreak="break-word",i.style.overflowWrap="anywhere")})};a.styles=w`
     :host {
       --scb-stepper-width: 100%;
       --scb-stepper-height: 100%;
+      --scb-stepper-step-count: 1;
+      --scb-stepper-connector-gap: var(--spacing-2);
+      --scb-stepper-symbol-size: var(--icon-size-medium);
       display: block;
       padding: var(--spacing-5) 0;
       width: 100%;
@@ -32,29 +35,55 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
       justify-content: center;
       position: relative;
       width: 100%;
-      gap: var(--spacing-7);
+      gap: 0;
       height: 100%;
     }
     :host([variant='vertical']) .steps {
       flex-direction: column;
       gap: var(--spacing-8);
     }
+
+    :host([symbol-variant='marker']) {
+      --scb-stepper-symbol-size: 16px;
+    }
     ::slotted(scb-step) {
       position: relative;
       flex: 1 1 0;
       z-index: 1;
       width: 100%;
     }
-    /* Horisontell connector */
-    ::slotted(scb-step:not(:first-child))::before {
+
+    /* Horisontell connector
+       Bygger upp en linje per steg, med glapp både före och efter varje symbol.
+       Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
+    */
+    :host([variant='horizontal']) ::slotted(scb-step)::before,
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
       content: '';
       position: absolute;
-      left: -50%;
-      top: 28px;
-      width: calc(100% - 24px);
+      top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
       height: 1px;
       background: var(--n-70);
       z-index: 0;
+      pointer-events: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::before {
+      left: 0;
+      right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
+      left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+      right: 0;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:first-child)::before {
+      display: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
+      display: none;
     }
     /* Vertikal connector */
     ::slotted(scb-step[variant='vertical']:not(:first-child))::before {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.216",
+    "version":  "0.1.217",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -378,5 +378,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "AC3381ED6E6FD0AEE4594516B98EE46A9BE80C279520987BCD6C8DFB7E1BA6BD"
+    "buildHash":  "7D543E5C712B1CC0E3D0111E2D4EB384ECFD116C990055DCCB9D1B05A662F6F7"
 }

package/scb-stepper/scb-stepper.js

@@ -1,27 +1,27 @@
 import { css as w, LitElement as k, html as C } from "lit";
 import { property as c, customElement as I } from "lit/decorators.js";
 import "./scb-step.js";
-var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, S = (t) => {
+var z = Object.defineProperty, E = Object.getOwnPropertyDescriptor, _ = (t) => {
   throw TypeError(t);
 }, p = (t, e, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? P(e, s) : e, l = t.length - 1, u; l >= 0; l--)
-    (u = t[l]) && (n = (i ? u(e, s, n) : u(n)) || n);
-  return i && n && E(e, s, n), n;
-}, _ = (t, e, s) => e.has(t) || S("Cannot " + s), v = (t, e, s) => (_(t, e, "read from private field"), s ? s.call(t) : e.get(t)), y = (t, e, s) => e.has(t) ? S("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), b = (t, e, s, i) => (_(t, e, "write to private field"), e.set(t, s), s), o = (t, e, s) => (_(t, e, "access private method"), s), d, h, r, m, f, g, x;
-let a = class extends k {
+  for (var r = i > 1 ? void 0 : i ? E(e, s) : e, l = t.length - 1, u; l >= 0; l--)
+    (u = t[l]) && (r = (i ? u(e, s, r) : u(r)) || r);
+  return i && r && z(e, s, r), r;
+}, S = (t, e, s) => e.has(t) || _("Cannot " + s), v = (t, e, s) => (S(t, e, "read from private field"), s ? s.call(t) : e.get(t)), y = (t, e, s) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), f = (t, e, s, i) => (S(t, e, "write to private field"), e.set(t, s), s), o = (t, e, s) => (S(t, e, "access private method"), s), d, h, a, m, b, g, x;
+let n = class extends k {
   constructor() {
-    super(...arguments), y(this, r), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.activeIndex = 0, y(this, d), y(this, h, 0), this._onKeyNav = (t) => {
+    super(...arguments), y(this, a), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.activeIndex = 0, y(this, d), y(this, h, 0), this._onKeyNav = (t) => {
       const e = this._getSteps(), s = this.activeIndex;
       let i = s;
       t.detail.key === "ArrowRight" ? s < e.length - 1 ? i = s + 1 : i = 0 : t.detail.key === "ArrowLeft" && (s > 0 ? i = s - 1 : i = e.length - 1), i !== s && (this._onStepClick(i), setTimeout(() => {
         var l;
-        const n = (l = e[i].shadowRoot) == null ? void 0 : l.querySelector(
+        const r = (l = e[i].shadowRoot) == null ? void 0 : l.querySelector(
           ".scb-step-content"
         );
-        n && "focus" in n && typeof n.focus == "function" && n.focus();
+        r && "focus" in r && typeof r.focus == "function" && r.focus();
       }, 0));
     }, this._onStepContainerClick = (t) => {
-      const e = this._getSteps(), s = t.composedPath(), i = e.findIndex((n) => s.includes(n));
+      const e = this._getSteps(), s = t.composedPath(), i = e.findIndex((r) => s.includes(r));
       i !== -1 && this._onStepClick(i);
     }, this._onSlotChange = () => {
       const t = this._getSteps();
@@ -29,7 +29,7 @@ let a = class extends k {
         this.activeIndex = 0;
         return;
       }
-      this.activeIndex > t.length - 1 ? this.activeIndex = t.length - 1 : this.activeIndex < 0 && (this.activeIndex = 0), this._updateSteps(), o(this, r, g).call(this);
+      this.activeIndex > t.length - 1 ? this.activeIndex = t.length - 1 : this.activeIndex < 0 && (this.activeIndex = 0), this._updateSteps(), o(this, a, g).call(this);
     };
   }
   _onStepClick(t) {
@@ -115,7 +115,7 @@ let a = class extends k {
   }
   _updateSteps() {
     const t = this._getSteps();
-    t.forEach((e, s) => {
+    this.style.setProperty("--scb-stepper-step-count", String(Math.max(1, t.length))), t.forEach((e, s) => {
       e.active = s === this.activeIndex, e.completed = s < this.activeIndex, e.islast = !1, e.changeOnCompleted = this.changeOnCompleted, e.number = s + 1, e.variant = this.variant, e.symbolVariant = this.symbolVariant;
     }), t.length > 0 && (t[t.length - 1].islast = !0);
   }
@@ -123,10 +123,10 @@ let a = class extends k {
     return Array.from(this.querySelectorAll("scb-step"));
   }
   firstUpdated(t) {
-    this._updateSteps(), o(this, r, m).call(this), o(this, r, g).call(this);
+    this._updateSteps(), o(this, a, m).call(this), o(this, a, g).call(this);
   }
   updated(t) {
-    this._updateSteps(), (t.has("variant") || t.has("symbolVariant")) && o(this, r, g).call(this), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && o(this, r, m).call(this);
+    this._updateSteps(), (t.has("variant") || t.has("symbolVariant")) && o(this, a, g).call(this), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && o(this, a, m).call(this);
   }
   render() {
     return C`
@@ -142,30 +142,30 @@ let a = class extends k {
     `;
   }
   connectedCallback() {
-    super.connectedCallback(), typeof ResizeObserver < "u" && (b(this, d, new ResizeObserver(() => {
-      o(this, r, g).call(this);
+    super.connectedCallback(), typeof ResizeObserver < "u" && (f(this, d, new ResizeObserver(() => {
+      o(this, a, g).call(this);
     })), v(this, d).observe(this));
   }
   disconnectedCallback() {
-    v(this, d) && (v(this, d).disconnect(), b(this, d, void 0)), v(this, h) && (cancelAnimationFrame(v(this, h)), b(this, h, 0)), super.disconnectedCallback();
+    v(this, d) && (v(this, d).disconnect(), f(this, d, void 0)), v(this, h) && (cancelAnimationFrame(v(this, h)), f(this, h, 0)), super.disconnectedCallback();
   }
 };
 d = /* @__PURE__ */ new WeakMap();
 h = /* @__PURE__ */ new WeakMap();
-r = /* @__PURE__ */ new WeakSet();
+a = /* @__PURE__ */ new WeakSet();
 m = function() {
-  const t = o(this, r, f).call(this, this.spacing), e = o(this, r, f).call(this, this.spacingTop) ?? t, s = o(this, r, f).call(this, this.spacingBottom) ?? t, i = o(this, r, f).call(this, this.spacingLeft), n = o(this, r, f).call(this, this.spacingRight);
-  e ? this.style.setProperty("--scb-stepper-spacing-block-start", e) : this.style.removeProperty("--scb-stepper-spacing-block-start"), s ? this.style.setProperty("--scb-stepper-spacing-block-end", s) : this.style.removeProperty("--scb-stepper-spacing-block-end"), i ? this.style.setProperty("--scb-stepper-spacing-inline-start", i) : this.style.removeProperty("--scb-stepper-spacing-inline-start"), n ? this.style.setProperty("--scb-stepper-spacing-inline-end", n) : this.style.removeProperty("--scb-stepper-spacing-inline-end");
+  const t = o(this, a, b).call(this, this.spacing), e = o(this, a, b).call(this, this.spacingTop) ?? t, s = o(this, a, b).call(this, this.spacingBottom) ?? t, i = o(this, a, b).call(this, this.spacingLeft), r = o(this, a, b).call(this, this.spacingRight);
+  e ? this.style.setProperty("--scb-stepper-spacing-block-start", e) : this.style.removeProperty("--scb-stepper-spacing-block-start"), s ? this.style.setProperty("--scb-stepper-spacing-block-end", s) : this.style.removeProperty("--scb-stepper-spacing-block-end"), i ? this.style.setProperty("--scb-stepper-spacing-inline-start", i) : this.style.removeProperty("--scb-stepper-spacing-inline-start"), r ? this.style.setProperty("--scb-stepper-spacing-inline-end", r) : this.style.removeProperty("--scb-stepper-spacing-inline-end");
 };
-f = function(t) {
+b = function(t) {
   if (!t) return;
   const e = String(t).trim();
   if (e)
     return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
 };
 g = function() {
-  v(this, h) || b(this, h, requestAnimationFrame(() => {
-    b(this, h, 0), o(this, r, x).call(this);
+  v(this, h) || f(this, h, requestAnimationFrame(() => {
+    f(this, h, 0), o(this, a, x).call(this);
   }));
 };
 x = function() {
@@ -173,21 +173,24 @@ x = function() {
   t.length !== 0 && t.forEach((e) => {
     const s = e.shadowRoot;
     if (!s) return;
-    const i = s.querySelector(".label"), n = s.querySelector(".scb-step-content");
+    const i = s.querySelector(".label"), r = s.querySelector(".scb-step-content");
     if (!i) return;
     if (this.variant !== "horizontal") {
       i.style.removeProperty("max-width"), i.style.removeProperty("white-space"), i.style.removeProperty("word-break"), i.style.removeProperty("overflow-wrap");
       return;
     }
     i.style.maxWidth = "none", i.style.whiteSpace = "nowrap", i.style.wordBreak = "normal", i.style.overflowWrap = "normal";
-    const l = (n == null ? void 0 : n.clientWidth) ?? e.clientWidth;
+    const l = (r == null ? void 0 : r.clientWidth) ?? e.clientWidth;
     l > 0 && i.scrollWidth > l && (i.style.maxWidth = "100%", i.style.whiteSpace = "normal", i.style.wordBreak = "break-word", i.style.overflowWrap = "anywhere");
   });
 };
-a.styles = w`
+n.styles = w`
     :host {
       --scb-stepper-width: 100%;
       --scb-stepper-height: 100%;
+      --scb-stepper-step-count: 1;
+      --scb-stepper-connector-gap: var(--spacing-2);
+      --scb-stepper-symbol-size: var(--icon-size-medium);
       display: block;
       padding: var(--spacing-5) 0;
       width: 100%;
@@ -208,29 +211,55 @@ a.styles = w`
       justify-content: center;
       position: relative;
       width: 100%;
-      gap: var(--spacing-7);
+      gap: 0;
       height: 100%;
     }
     :host([variant='vertical']) .steps {
       flex-direction: column;
       gap: var(--spacing-8);
     }
+
+    :host([symbol-variant='marker']) {
+      --scb-stepper-symbol-size: 16px;
+    }
     ::slotted(scb-step) {
       position: relative;
       flex: 1 1 0;
       z-index: 1;
       width: 100%;
     }
-    /* Horisontell connector */
-    ::slotted(scb-step:not(:first-child))::before {
+
+    /* Horisontell connector
+       Bygger upp en linje per steg, med glapp både före och efter varje symbol.
+       Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
+    */
+    :host([variant='horizontal']) ::slotted(scb-step)::before,
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
       content: '';
       position: absolute;
-      left: -50%;
-      top: 28px;
-      width: calc(100% - 24px);
+      top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
       height: 1px;
       background: var(--n-70);
       z-index: 0;
+      pointer-events: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::before {
+      left: 0;
+      right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
+      left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+      right: 0;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:first-child)::before {
+      display: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
+      display: none;
     }
     /* Vertikal connector */
     ::slotted(scb-step[variant='vertical']:not(:first-child))::before {
@@ -264,40 +293,40 @@ a.styles = w`
   `;
 p([
   c({ type: String, reflect: !0 })
-], a.prototype, "type", 2);
+], n.prototype, "type", 2);
 p([
   c({ type: String, reflect: !0 })
-], a.prototype, "label", 2);
+], n.prototype, "label", 2);
 p([
   c({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
-], a.prototype, "changeOnCompleted", 2);
+], n.prototype, "changeOnCompleted", 2);
 p([
   c({ type: String })
-], a.prototype, "variant", 2);
+], n.prototype, "variant", 2);
 p([
   c({ type: String, reflect: !0, attribute: "symbol-variant" })
-], a.prototype, "symbolVariant", 2);
+], n.prototype, "symbolVariant", 2);
 p([
   c({ type: String, reflect: !0 })
-], a.prototype, "spacing", 2);
+], n.prototype, "spacing", 2);
 p([
   c({ type: String, attribute: "spacing-top", reflect: !0 })
-], a.prototype, "spacingTop", 2);
+], n.prototype, "spacingTop", 2);
 p([
   c({ type: String, attribute: "spacing-bottom", reflect: !0 })
-], a.prototype, "spacingBottom", 2);
+], n.prototype, "spacingBottom", 2);
 p([
   c({ type: String, attribute: "spacing-left", reflect: !0 })
-], a.prototype, "spacingLeft", 2);
+], n.prototype, "spacingLeft", 2);
 p([
   c({ type: String, attribute: "spacing-right", reflect: !0 })
-], a.prototype, "spacingRight", 2);
+], n.prototype, "spacingRight", 2);
 p([
   c({ type: Number, reflect: !0, attribute: "active-index" })
-], a.prototype, "activeIndex", 2);
-a = p([
+], n.prototype, "activeIndex", 2);
+n = p([
   I("scb-stepper")
-], a);
+], n);
 export {
-  a as ScbStepper
+  n as ScbStepper
 };