scb-wc-test 0.1.105 → 0.1.107

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

@@ -1,24 +1,32 @@
-import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.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,n,i){try{customElements.get(s)||e(s,n,i)}catch(o){var r=String(o||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var A=Object.defineProperty,I=Object.getOwnPropertyDescriptor,l=(t,e,s,n)=>{for(var i=n>1?void 0:n?I(e,s):e,r=t.length-1,o;r>=0;r--)(o=t[r])&&(i=(n?o(e,s,i):o(i))||i);return n&&i&&A(e,s,i),i};let S=0,a=class extends x{constructor(){super(...arguments),this.supportingText="Hinted search text",this.value="",this.size="default",this.fullScreen=!1,this._inputFocused=!1,this._visibleSuggestions=0,this._activeIndex=-1,this._listboxId=`scb-search-listbox-${++S}`,this._kbMode=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&this._updateInputRingVisibility())},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&this._updateInputRingVisibility()},this._listScrollHandler=()=>{const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)}}connectedCallback(){super.connectedCallback(),this._onWindowResize=this._onWindowResize.bind(this),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){const t=this._inputEl();t&&this._boundNativeKeydown&&t.removeEventListener("keydown",this._boundNativeKeydown,!0),this._detachListScrollListener(),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0),super.disconnectedCallback()}firstUpdated(){this._ensureListboxA11y(),this._updateComboboxA11y();const t=this._inputEl();t&&(this._boundNativeKeydown=e=>this._handleKey(e),t.addEventListener("keydown",this._boundNativeKeydown,!0))}updated(){this._ensureListboxA11y(),this._updateComboboxA11y(),this._attachListScrollListener()}render(){const t=(this.value??"").trim().length>0,e=this._inputFocused&&t&&this._hasSuggestions;return u`
+import{a as y,n as c,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.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,n,i){try{customElements.get(s)||e(s,n,i)}catch(o){var r=String(o||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var A=Object.defineProperty,I=Object.getOwnPropertyDescriptor,l=(t,e,s,n)=>{for(var i=n>1?void 0:n?I(e,s):e,r=t.length-1,o;r>=0;r--)(o=t[r])&&(i=(n?o(e,s,i):o(i))||i);return n&&i&&A(e,s,i),i};let S=0,a=class extends x{constructor(){super(),this._internals=null,this.supportingText="Hinted search text",this.value="",this.name="",this.disabled=!1,this.size="default",this.fullScreen=!1,this._inputFocused=!1,this._visibleSuggestions=0,this._activeIndex=-1,this._listboxId=`scb-search-listbox-${++S}`,this._kbMode=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&this._updateInputRingVisibility())},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&this._updateInputRingVisibility()},this._form=null,this._formResetHandler=null,this._initialValue="",this._listScrollHandler=()=>{const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._onWindowResize=this._onWindowResize.bind(this),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0),this._initialValue=this.value??"",this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue;const t=this._inputEl();t&&(t.value=this._initialValue),this._syncFormValue(),this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y()},this._form.addEventListener("reset",this._formResetHandler,!0)),this._syncFormValue()}disconnectedCallback(){const t=this._inputEl();t&&this._boundNativeKeydown&&t.removeEventListener("keydown",this._boundNativeKeydown,!0),this._detachListScrollListener(),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this._ensureListboxA11y(),this._updateComboboxA11y();const t=this._inputEl();t&&(this._boundNativeKeydown=e=>this._handleKey(e),t.addEventListener("keydown",this._boundNativeKeydown,!0),t.disabled=this.disabled)}updated(t){if(super.updated(t),this._ensureListboxA11y(),this._updateComboboxA11y(),this._attachListScrollListener(),(t.has("value")||t.has("disabled"))&&this._syncFormValue(),t.has("disabled")){this.toggleAttribute("aria-disabled",this.disabled);const e=this._inputEl();e&&(e.disabled=this.disabled)}}render(){const t=(this.value??"").trim().length>0,e=this._inputFocused&&t&&this._hasSuggestions;return u`
       <div class="ripple-wrapper">
         <md-icon class="leading">${t?"arrow_back":"search"}</md-icon>
 
         <input
           id="searchInput"
           type="search"
-          name="textfield"
+          name=${this.name||"textfield"}
           class=${e?"with-list":""}
           .value=${this.value}
           placeholder=${this.supportingText}
           autocomplete="off"
+          ?disabled=${this.disabled}
           @input=${this._onInput}
           @focus=${this._onFocus}
           @blur=${this._onBlur}
           aria-label=${this.supportingText||"Sök"}
         />
 
-        ${t?u`<button class="clear-btn" @click=${this._clearInput} tabindex="-1" aria-label="Rensa sökfält">
-                   <md-icon>close</md-icon>
-                 </button>`:this.trailingIcon?u`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>`:b}
+        ${t?u`<button
+              class="clear-btn"
+              type="button"
+              ?disabled=${this.disabled}
+              @click=${this._clearInput}
+              tabindex="-1"
+              aria-label="Rensa sökfält"
+            >
+              <md-icon>close</md-icon>
+            </button>`:this.trailingIcon?u`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>`:b}
 
         <md-ripple></md-ripple>
         <md-focus-ring class="input-ring"></md-focus-ring>
@@ -32,7 +40,7 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
             </scb-list>
             <md-focus-ring id="optionRing" class="option-ring"></md-focus-ring>
           `:b}
-    `}submit(){const t=this._getActiveItem(),e={value:this.value};t&&(e.active=this._itemPayload(t)),this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:e,bubbles:!0,composed:!0}))}get _hasSuggestions(){return this._visibleSuggestions>=0?this._visibleSuggestions>0:Array.from(this.getElementsByTagName("scb-list-item")).some(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_onSlotChange(){this._filterSuggestions(this.value)}_onInput(t){const e=t.target;this.value=e.value,this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this.dispatchEvent(new CustomEvent("scb-search-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_onFocus(){this._inputFocused=!0,this._updateInputRingVisibility(),this._filterSuggestions(this.value),this._updateComboboxA11y(),this.requestUpdate()}_onBlur(){setTimeout(()=>{this._inputFocused=!1,this._activeIndex=-1,this._kbMode=!1,this._updateInputRingVisibility(),this._updateComboboxA11y(),this._hideOptionRing(),this.requestUpdate()},100)}_updateInputRingVisibility(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}_handleKey(t){if(!this._inputEl())return;const s=this._getVisibleItems(),n=(this.value??"").trim().length>0,i=this._inputFocused&&n&&s.length>0,r=t.key,o=t.keyCode,c=r==="ArrowDown"||r==="Down"||o===40,h=r==="ArrowUp"||r==="Up"||o===38,g=r==="Home"||o===36,v=r==="End"||o===35,_=r==="Enter"||o===13,f=r==="Escape"||r==="Esc"||o===27;if(c){if(!i)return;t.preventDefault(),this._kbMode=!0,this._moveActive(s,1);return}if(h){if(!i)return;t.preventDefault(),this._kbMode=!0,this._moveActive(s,-1);return}if(g){if(!i)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?0:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(v){if(!i)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?s.length-1:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(_){if(!i){this.submit();return}t.preventDefault();const p=this._getActiveItem();if(p){const m=p.getAttribute("label")||"";this.value=m,this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:{value:this.value,active:this._itemPayload(p)},bubbles:!0,composed:!0})),this._visibleSuggestions=0,this._activeIndex=-1,this._kbMode=!1,this._hideOptionRing(),this.requestUpdate()}else this.submit();return}if(f){t.preventDefault(),this._clearInput();return}}_clearInput(){this.value="",this._activeIndex=-1,this._kbMode=!1;const t=this._inputEl();t?.focus(),t&&(t.value=""),this._filterSuggestions(""),this._updateComboboxA11y(),this._hideOptionRing(),this.dispatchEvent(new CustomEvent("scb-search-clear",{bubbles:!0,composed:!0}))}_filterSuggestions(t){const e=(t??"").trim().toLowerCase(),s=Array.from(this.querySelectorAll("scb-list-item"));let n=0;for(const i of s){const r=(i.getAttribute("label")||"").toLowerCase(),o=(i.getAttribute("supporting-text")||"").toLowerCase(),c=`${r} ${o}`.trim();e!==""&&c.includes(e)?(i.removeAttribute("hidden"),n++):i.setAttribute("hidden",""),this._ensureOptionA11y(i)}this._visibleSuggestions=n,this._activeIndex>=n&&(this._activeIndex=-1),this._updateComboboxA11y(),this.requestUpdate()}_inputEl(){return this.renderRoot?.querySelector("#searchInput")??null}_listEl(){return this.renderRoot?.querySelector("scb-list.suggestion-list")??null}_ringEl(){return this.renderRoot?.querySelector("#optionRing")??null}_getVisibleItems(){return Array.from(this.querySelectorAll("scb-list-item")).filter(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_getActiveItem(){const t=this._getVisibleItems();return this._activeIndex<0||this._activeIndex>=t.length?null:t[this._activeIndex]??null}_moveActive(t,e){if(!t.length){this._activeIndex=-1,this._updateComboboxA11y(),this._hideOptionRing();return}let s=this._activeIndex+e;this._activeIndex===-1?s=e>0?0:t.length-1:(s<0&&(s=0),s>=t.length&&(s=t.length-1)),this._activeIndex=s,this._updateComboboxA11y(),this._scrollActiveIntoView()}_scrollActiveIntoView(){const t=this._getActiveItem();t&&t.scrollIntoView({block:"nearest"})}_itemPayload(t){return{label:t.getAttribute("label")||"",supportingText:t.getAttribute("supporting-text")||"",href:t.getAttribute("href")||"",type:t.getAttribute("type")||"",id:t.id||""}}_ensureListboxA11y(){const t=this._listEl();t&&(t.id||(t.id=this._listboxId),t.setAttribute("role","listbox"),t.setAttribute("aria-label","Sökförslag")),Array.from(this.querySelectorAll("scb-list-item")).forEach(s=>this._ensureOptionA11y(s))}_ensureOptionA11y(t){t.id||(t.id=`${this._listboxId}-opt-${Math.random().toString(36).slice(2,8)}`),t.setAttribute("role","option"),t.setAttribute("tabindex","-1")}_updateComboboxA11y(){const t=this._inputEl();if(!t)return;const e=this._getVisibleItems(),s=(this.value??"").trim().length>0,n=this._inputFocused&&s&&e.length>0;t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-controls",this._listboxId),t.setAttribute("aria-expanded",String(n));const i=n?this._getActiveItem():null;i?.id?t.setAttribute("aria-activedescendant",i.id):t.removeAttribute("aria-activedescendant"),this._kbMode&&i&&n?this._positionOptionRing(i):this._hideOptionRing()}_positionOptionRing(t){const e=this._ringEl(),s=this._listEl();if(!e||!s)return;const n=this.getBoundingClientRect(),i=t.getBoundingClientRect(),r=i.top-n.top,o=i.left-n.left,c=i.width,h=i.height;e.style.top=`${r}px`,e.style.left=`${o}px`,e.style.width=`${c}px`,e.style.height=`${h}px`,e.setAttribute("data-show","true")}_hideOptionRing(){const t=this._ringEl();t&&t.removeAttribute("data-show")}_onWindowResize(){const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)}_attachListScrollListener(){const t=this._listEl();!t||this._listWithHandler===t||(this._detachListScrollListener(),t.addEventListener("scroll",this._listScrollHandler,{passive:!0}),this._listWithHandler=t)}_detachListScrollListener(){this._listWithHandler&&(this._listWithHandler.removeEventListener("scroll",this._listScrollHandler),this._listWithHandler=void 0)}};a.styles=y`
+    `}formDisabledCallback(t){this.disabled=t}submit(){const t=this._getActiveItem(),e={value:this.value};t&&(e.active=this._itemPayload(t)),this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:e,bubbles:!0,composed:!0}))}get _hasSuggestions(){return this._visibleSuggestions>=0?this._visibleSuggestions>0:Array.from(this.getElementsByTagName("scb-list-item")).some(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_onSlotChange(){this._filterSuggestions(this.value)}_onInput(t){const e=t.target;this.value=e.value,this._syncFormValue(),this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this.dispatchEvent(new CustomEvent("scb-search-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_onFocus(){this.disabled||(this._inputFocused=!0,this._updateInputRingVisibility(),this._filterSuggestions(this.value),this._updateComboboxA11y(),this.requestUpdate())}_onBlur(){setTimeout(()=>{this._inputFocused=!1,this._activeIndex=-1,this._kbMode=!1,this._updateInputRingVisibility(),this._updateComboboxA11y(),this._hideOptionRing(),this.requestUpdate()},100)}_updateInputRingVisibility(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}_handleKey(t){if(this.disabled||!this._inputEl())return;const s=this._getVisibleItems(),n=(this.value??"").trim().length>0,i=this._inputFocused&&n&&s.length>0,r=t.key,o=t.keyCode,d=r==="ArrowDown"||r==="Down"||o===40,h=r==="ArrowUp"||r==="Up"||o===38,g=r==="Home"||o===36,v=r==="End"||o===35,_=r==="Enter"||o===13,f=r==="Escape"||r==="Esc"||o===27;if(d){if(!i)return;t.preventDefault(),this._kbMode=!0,this._moveActive(s,1);return}if(h){if(!i)return;t.preventDefault(),this._kbMode=!0,this._moveActive(s,-1);return}if(g){if(!i)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?0:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(v){if(!i)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?s.length-1:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(_){if(!i){this.submit();return}t.preventDefault();const p=this._getActiveItem();if(p){const m=p.getAttribute("label")||"";this.value=m,this._syncFormValue(),this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:{value:this.value,active:this._itemPayload(p)},bubbles:!0,composed:!0})),this._visibleSuggestions=0,this._activeIndex=-1,this._kbMode=!1,this._hideOptionRing(),this.requestUpdate()}else this.submit();return}if(f){t.preventDefault(),this._clearInput();return}}_clearInput(){if(this.disabled)return;this.value="",this._activeIndex=-1,this._kbMode=!1;const t=this._inputEl();t&&(t.value="",t.focus()),this._filterSuggestions(""),this._updateComboboxA11y(),this._hideOptionRing(),this._syncFormValue(),this.dispatchEvent(new CustomEvent("scb-search-clear",{bubbles:!0,composed:!0}))}_filterSuggestions(t){const e=(t??"").trim().toLowerCase(),s=Array.from(this.querySelectorAll("scb-list-item"));let n=0;for(const i of s){const r=(i.getAttribute("label")||"").toLowerCase(),o=(i.getAttribute("supporting-text")||"").toLowerCase(),d=`${r} ${o}`.trim();e!==""&&d.includes(e)?(i.removeAttribute("hidden"),n++):i.setAttribute("hidden",""),this._ensureOptionA11y(i)}this._visibleSuggestions=n,this._activeIndex>=n&&(this._activeIndex=-1),this._updateComboboxA11y(),this.requestUpdate()}_inputEl(){return this.renderRoot?.querySelector("#searchInput")??null}_listEl(){return this.renderRoot?.querySelector("scb-list.suggestion-list")??null}_ringEl(){return this.renderRoot?.querySelector("#optionRing")??null}_getVisibleItems(){return Array.from(this.querySelectorAll("scb-list-item")).filter(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_getActiveItem(){const t=this._getVisibleItems();return this._activeIndex<0||this._activeIndex>=t.length?null:t[this._activeIndex]??null}_moveActive(t,e){if(!t.length){this._activeIndex=-1,this._updateComboboxA11y(),this._hideOptionRing();return}let s=this._activeIndex+e;this._activeIndex===-1?s=e>0?0:t.length-1:(s<0&&(s=0),s>=t.length&&(s=t.length-1)),this._activeIndex=s,this._updateComboboxA11y(),this._scrollActiveIntoView()}_scrollActiveIntoView(){const t=this._getActiveItem();t&&t.scrollIntoView({block:"nearest"})}_itemPayload(t){return{label:t.getAttribute("label")||"",supportingText:t.getAttribute("supporting-text")||"",href:t.getAttribute("href")||"",type:t.getAttribute("type")||"",id:t.id||""}}_ensureListboxA11y(){const t=this._listEl();t&&(t.id||(t.id=this._listboxId),t.setAttribute("role","listbox"),t.setAttribute("aria-label","Sökförslag")),Array.from(this.querySelectorAll("scb-list-item")).forEach(s=>this._ensureOptionA11y(s))}_ensureOptionA11y(t){t.id||(t.id=`${this._listboxId}-opt-${Math.random().toString(36).slice(2,8)}`),t.setAttribute("role","option"),t.setAttribute("tabindex","-1")}_updateComboboxA11y(){const t=this._inputEl();if(!t)return;const e=this._getVisibleItems(),s=(this.value??"").trim().length>0,n=this._inputFocused&&s&&e.length>0;t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-controls",this._listboxId),t.setAttribute("aria-expanded",String(n));const i=n?this._getActiveItem():null;i?.id?t.setAttribute("aria-activedescendant",i.id):t.removeAttribute("aria-activedescendant"),this._kbMode&&i&&n?this._positionOptionRing(i):this._hideOptionRing()}_positionOptionRing(t){const e=this._ringEl(),s=this._listEl();if(!e||!s)return;const n=this.getBoundingClientRect(),i=t.getBoundingClientRect(),r=i.top-n.top,o=i.left-n.left,d=i.width,h=i.height;e.style.top=`${r}px`,e.style.left=`${o}px`,e.style.width=`${d}px`,e.style.height=`${h}px`,e.setAttribute("data-show","true")}_hideOptionRing(){const t=this._ringEl();t&&t.removeAttribute("data-show")}_onWindowResize(){const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)}_attachListScrollListener(){const t=this._listEl();!t||this._listWithHandler===t||(this._detachListScrollListener(),t.addEventListener("scroll",this._listScrollHandler,{passive:!0}),this._listWithHandler=t)}_detachListScrollListener(){this._listWithHandler&&(this._listWithHandler.removeEventListener("scroll",this._listScrollHandler),this._listWithHandler=void 0)}_syncFormValue(){if(!this._internals)return;const t=this.disabled?null:this.value;this._internals.setFormValue(t)}};a.formAssociated=!0;a.styles=y`
     :host {
       display: flex;
       flex-direction: column;
@@ -65,7 +73,7 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       --scb-search-icon-size: var(--icon-size-small, 24px);
     }
 
-    :host([size="compact"]) {
+    :host([size='compact']) {
       --scb-search-height: var(--scale-11, 40px);
       --scb-search-padding-x: var(--spacing-4, 12px);
       --scb-search-padding-y: var(--spacing-3, 8px);
@@ -74,6 +82,11 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       --scb-search-line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
     }
 
+    :host([disabled]) {
+      opacity: 0.38;
+      cursor: default;
+    }
+
     .ripple-wrapper {
       position: relative;
       display: flex;
@@ -89,7 +102,9 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       border-radius: var(--scb-search-radius);
       z-index: 4;
     }
-    .ripple-wrapper[data-kb-focus="true"] md-focus-ring.input-ring { display: block; }
+    .ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
+      display: block;
+    }
     input.with-list ~ md-focus-ring.input-ring {
       border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
     }
@@ -104,7 +119,9 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       z-index: 11;
       border-radius: var(--md-sys-shape-corner-small, 8px);
     }
-    md-focus-ring.option-ring[data-show="true"] { display: block; }
+    md-focus-ring.option-ring[data-show='true'] {
+      display: block;
+    }
 
     .leading {
       position: absolute;
@@ -120,9 +137,13 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       color: var(--md-sys-color-on-surface-variant);
       z-index: 2;
     }
-    .leading md-icon { font-size: var(--scb-search-icon-size); line-height: 1; }
+    .leading md-icon {
+      font-size: var(--scb-search-icon-size);
+      line-height: 1;
+    }
 
-    .trailing, .clear-btn {
+    .trailing,
+    .clear-btn {
       position: absolute;
       right: var(--scb-search-padding-x);
       top: 50%;
@@ -135,17 +156,27 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       color: var(--md-sys-color-on-surface-variant);
       z-index: 3;
     }
-    .trailing md-icon { pointer-events: none; font-size: var(--scb-search-icon-size); }
+    .trailing md-icon {
+      pointer-events: none;
+      font-size: var(--scb-search-icon-size);
+    }
 
-    .clear-btn { background: none; border: 0; padding: 0; cursor: pointer; }
-    .clear-btn[hidden] { display: none; }
+    .clear-btn {
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+    .clear-btn[hidden] {
+      display: none;
+    }
+    .clear-btn:disabled {
+      cursor: default;
+    }
 
-    input[type="search"] {
-      padding:
-        var(--scb-search-padding-y)
-        var(--scb-search-trailing-gap)
-        var(--scb-search-padding-y)
-        var(--scb-search-leading-gap);
+    input[type='search'] {
+      padding: var(--scb-search-padding-y) var(--scb-search-trailing-gap)
+        var(--scb-search-padding-y) var(--scb-search-leading-gap);
       min-height: var(--scb-search-height);
       width: 100%;
       box-sizing: border-box;
@@ -163,13 +194,17 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       position: relative;
       z-index: 1;
     }
-    input[type="search"]::placeholder {
+    input[type='search']::placeholder {
       color: var(--md-sys-color-on-surface-variant);
       font-size: var(--scb-search-font-size);
       line-height: var(--scb-search-line-height);
     }
-    input[type="search"]:hover { outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px); }
-    input[type="search"]:focus { outline: none; }
+    input[type='search']:hover {
+      outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px);
+    }
+    input[type='search']:focus {
+      outline: none;
+    }
 
     md-ripple {
       border-radius: var(--scb-search-radius);
@@ -181,10 +216,18 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       --md-ripple-hover-opacity: 0;
     }
 
-    input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
+    input[type='search']::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
 
-    input.with-list     { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
-    input.with-list ~ md-ripple { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
+    input.with-list {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+    input.with-list ~ md-ripple {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
 
     scb-list.suggestion-list {
       position: absolute;
@@ -201,11 +244,16 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       max-height: var(--scb-search-suggestions-max-h, 60vh);
     }
 
-    :host([full-screen]) input[type="search"],
+    :host([full-screen]) input[type='search'],
     :host([full-screen]) input.with-list,
-    :host([full-screen]) input.with-list ~ md-ripple { border-radius: var(--radius-none, 0px) !important; }
+    :host([full-screen]) input.with-list ~ md-ripple {
+      border-radius: var(--radius-none, 0px) !important;
+    }
     :host([full-screen]) scb-list.suggestion-list {
-      position: static; border: 0; border-radius: 0; background: transparent;
+      position: static;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
     }
 
     .list-divider {
@@ -214,9 +262,13 @@ import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       background: var(--md-sys-color-outline);
       width: 100%;
     }
-    :host([full-screen]) .list-divider[aria-hidden="false"] { display: block; }
+    :host([full-screen]) .list-divider[aria-hidden='false'] {
+      display: block;
+    }
 
     @media (prefers-color-scheme: dark) {
-      :host { color: var(--md-sys-color-on-surface); }
+      :host {
+        color: var(--md-sys-color-on-surface);
+      }
     }
-  `;l([d({type:String,attribute:"trailing-icon"})],a.prototype,"trailingIcon",2);l([d({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);l([d({type:String})],a.prototype,"value",2);l([d({type:String,reflect:!0})],a.prototype,"size",2);l([d({type:Boolean,attribute:"full-screen",reflect:!0})],a.prototype,"fullScreen",2);a=l([w("scb-search")],a);
+  `;l([c({type:String,attribute:"trailing-icon"})],a.prototype,"trailingIcon",2);l([c({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);l([c({type:String})],a.prototype,"value",2);l([c({type:String,reflect:!0})],a.prototype,"name",2);l([c({type:Boolean,reflect:!0})],a.prototype,"disabled",2);l([c({type:String,reflect:!0})],a.prototype,"size",2);l([c({type:Boolean,attribute:"full-screen",reflect:!0})],a.prototype,"fullScreen",2);a=l([w("scb-search")],a);

package/mvc/components/scb-segmented-button/scb-segmented-button.js

@@ -1,28 +1,30 @@
-import{a as u,n as a,i as c,x as h,t as m}from"../../vendor/vendor.js";import"./scb-segmented-item.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,t,r){try{customElements.get(e)||s(e,t,r)}catch(l){var o=String(l||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(i,s,e,t)=>{for(var r=t>1?void 0:t?f(s,e):s,o=i.length-1,l;o>=0;o--)(l=i[o])&&(r=(t?l(s,e,r):l(r))||r);return t&&r&&b(s,e,r),r};let d=class extends c{constructor(){super(...arguments),this.variant="single-select",this.value="",this.values=[],this.disabled=!1}onSlotClick(i){let s=i.target;if(!s||!s.closest)return;const e=s.closest("scb-segmented-item");if(!e||this.disabled||e.hasAttribute("disabled"))return;const t=e.getAttribute("value")||"";t&&(this.variant==="multi-select"?(this.values.indexOf(t)===-1?this.values=[...this.values,t]:this.values=this.values.filter(o=>o!==t),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0})),this.updateSegments()):t!==this.value&&(this.value=t,this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0})),this.updateSegments()))}updateSegments(){const i=this.shadowRoot?.querySelector("slot");if(!i)return;i.assignedElements().forEach(e=>{if(e.tagName==="SCB-SEGMENTED-ITEM"){const t=e.getAttribute("value")||"";if(t){let r=!1;this.variant==="multi-select"?r=!!this.values&&this.values.includes(t):r=t===this.value,e.setAttribute("aria-pressed",r?"true":"false"),r?e.setAttribute("selected","true"):e.removeAttribute("selected")}this.disabled&&e.setAttribute("disabled","true")}})}firstUpdated(){this.updateSegments();const i=this.shadowRoot?.querySelector("slot");i&&(i.addEventListener("click",s=>this.onSlotClick(s)),i.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{detail:{},bubbles:!0,composed:!0}))},!0),i.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{detail:{},bubbles:!0,composed:!0}))},!0),i.addEventListener("keydown",s=>{if(s.code==="Space"||s.code==="Enter"||s.code==="NumpadEnter"){const e=s.target;if(e&&e.closest){const t=e.closest("scb-segmented-item");t&&!t.hasAttribute("disabled")&&!this.disabled&&(this.onSlotClick(s),s.preventDefault())}}}))}updated(){this.updateSegments()}render(){return h`<slot></slot>`}};d.styles=u`
+import{a as p,n as l,i as f,x as b,t as v}from"../../vendor/vendor.js";import"./scb-segmented-item.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(u){var o=String(u||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var g=Object.defineProperty,_=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},n=(t,e,s,i)=>{for(var r=i>1?void 0:i?_(e,s):e,o=t.length-1,u;o>=0;o--)(u=t[o])&&(r=(i?u(e,s,r):u(r))||r);return i&&r&&g(e,s,r),r},y=(t,e,s)=>e.has(t)||m("Cannot "+s),S=(t,e,s)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),h=(t,e,s)=>(y(t,e,"access private method"),s),d,c;let a=class extends f{constructor(){super(),S(this,d),this._internals=null,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.name="",this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formResetHandler=null,this._initialValue="",this._initialValues=[],"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue,this.values=Array.isArray(this._initialValues)?[...this._initialValues]:[],this.updateSegments(),this._syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this._initialValue=this.value,this._initialValues=Array.isArray(this.values)?[...this.values]:[],this.updateSegments();const t=this.shadowRoot?.querySelector("slot");t&&(t.addEventListener("click",e=>this.onSlotClick(e)),t.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{detail:{},bubbles:!0,composed:!0}))},!0),t.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{detail:{},bubbles:!0,composed:!0}))},!0),t.addEventListener("keydown",e=>{if(e.code==="Space"||e.code==="Enter"||e.code==="NumpadEnter"){const s=e.target;if(s&&s.closest){const i=s.closest("scb-segmented-item");i&&!i.hasAttribute("disabled")&&!this.disabled&&(this.onSlotClick(e),e.preventDefault())}}})),this._syncFormValue(),h(this,d,c).call(this)}updated(t){super.updated(t),this.updateSegments(),(t.has("value")||t.has("values")||t.has("disabled")||t.has("variant")||t.has("name"))&&this._syncFormValue(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&h(this,d,c).call(this)}onSlotClick(t){let e=t.target;if(!e||!e.closest)return;const s=e.closest("scb-segmented-item");if(!s||this.disabled||s.hasAttribute("disabled"))return;const i=s.getAttribute("value")||"";i&&(this.variant==="multi-select"?(this.values.indexOf(i)===-1?this.values=[...this.values,i]:this.values=this.values.filter(o=>o!==i),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0})),this.updateSegments()):i!==this.value&&(this.value=i,this.dispatchEvent(new CustomEvent("change",{detail:{value:i},bubbles:!0,composed:!0})),this.updateSegments()))}updateSegments(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;t.assignedElements().forEach(s=>{if(s.tagName==="SCB-SEGMENTED-ITEM"){const i=s.getAttribute("value")||"";if(i){let r=!1;this.variant==="multi-select"?r=!!this.values&&this.values.includes(i):r=i===this.value,s.setAttribute("aria-pressed",r?"true":"false"),r?s.setAttribute("selected","true"):s.removeAttribute("selected")}this.disabled&&s.setAttribute("disabled","true")}})}formDisabledCallback(t){this.disabled=t}_syncFormValue(){if(this._internals){if(this.disabled||!this.name){this._internals.setFormValue(null);return}if(this.variant==="multi-select"){if(!this.values||this.values.length===0){this._internals.setFormValue(null);return}const t=new FormData;for(const e of this.values)t.append(this.name,e);this._internals.setFormValue(t)}else{if(!this.value){this._internals.setFormValue(null);return}this._internals.setFormValue(this.value)}}}mapSpacingToken(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}render(){return b`<slot></slot>`}};d=new WeakSet;c=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,s=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-segmented-button-spacing-block-start",e):this.style.removeProperty("--scb-segmented-button-spacing-block-start"),s?this.style.setProperty("--scb-segmented-button-spacing-block-end",s):this.style.removeProperty("--scb-segmented-button-spacing-block-end")};a.formAssociated=!0;a.styles=p`
     :host {
-        --scb-segmented-button-width: 100%;
-        --scb-segmented-button-height: 48px;
-        max-width: var(--scb-segmented-button-width);
-        height: var(--scb-segmented-button-height);
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: 1fr;
-        font-family: var(--brand, Inter);
+      --scb-segmented-button-width: 100%;
+      --scb-segmented-button-height: 48px;
+      max-width: var(--scb-segmented-button-width);
+      height: var(--scb-segmented-button-height);
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      font-family: var(--brand, Inter);
+      margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),
-    ::slotted([role="button"]:first-child .segmented-item) {
+    ::slotted([role='button']:first-child .segmented-item) {
       border-top-left-radius: var(--md-sys-shape-corner-full);
       border-bottom-left-radius: var(--md-sys-shape-corner-full);
     }
     ::slotted(scb-segmented-item:last-child .segmented-item),
-    ::slotted([role="button"]:last-child .segmented-item) {
+    ::slotted([role='button']:last-child .segmented-item) {
       border-top-right-radius: var(--md-sys-shape-corner-full);
       border-bottom-right-radius: var(--md-sys-shape-corner-full);
     }
     /* First button gets left border */
     ::slotted(scb-segmented-item:first-child .segmented-item),
-    ::slotted([role="button"]:first-child .segmented-item) {
+    ::slotted([role='button']:first-child .segmented-item) {
       border-left: 1px solid var(--md-sys-color-outline);
     }
-  `;n([a({type:String,reflect:!0})],d.prototype,"variant",2);n([a({type:String,reflect:!0})],d.prototype,"value",2);n([a({type:Array})],d.prototype,"values",2);n([a({type:Boolean,reflect:!0})],d.prototype,"disabled",2);d=n([m("scb-segmented-button")],d);
+  `;n([l({type:String,reflect:!0})],a.prototype,"variant",2);n([l({type:String,reflect:!0})],a.prototype,"value",2);n([l({type:Array})],a.prototype,"values",2);n([l({type:Boolean,reflect:!0})],a.prototype,"disabled",2);n([l({type:String,reflect:!0})],a.prototype,"name",2);n([l({type:String,reflect:!0})],a.prototype,"spacing",2);n([l({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",2);n([l({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",2);a=n([v("scb-segmented-button")],a);

package/mvc/components/scb-status-pill/scb-status-pill.js

@@ -1,7 +1,7 @@
-import{a as u,n as d,i as m,x as c,t as p}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,r,s){try{customElements.get(e)||t(e,r,s)}catch(n){var o=String(n||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,l=(i,t,e,r)=>{for(var s=r>1?void 0:r?b(t,e):t,o=i.length-1,n;o>=0;o--)(n=i[o])&&(s=(r?n(t,e,s):n(s))||s);return r&&s&&h(t,e,s),s};let a=class extends m{constructor(){super(...arguments),this.status="",this.label="",this.showIcon=!1}render(){return c`
-    ${this.showIcon?this.status==="success"?c`<md-icon>check_circle</md-icon>`:this.status==="warning"?c`<md-icon>warning</md-icon>`:this.status==="error"?c`<md-icon>error</md-icon>`:"":""}
-    <span class="label">${this.label}</span>
-    `}};a.styles=u`
+import{a as g,n as l,i as u,x as p,t as d}from"../../vendor/vendor.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 s=customElements.define.bind(customElements);customElements.define=function(o,n,e){try{customElements.get(o)||s(o,n,e)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var m=Object.defineProperty,h=Object.getOwnPropertyDescriptor,i=(t,s,o,n)=>{for(var e=n>1?void 0:n?h(s,o):s,a=t.length-1,c;a>=0;a--)(c=t[a])&&(e=(n?c(s,o,e):c(e))||e);return n&&e&&m(s,o,e),e};let r=class extends u{constructor(){super(...arguments),this.status="",this.label="",this.showIcon=!1,this.spacing="",this.spacingTop="",this.spacingBottom=""}__resolveSpacingToken(t){const s=(t??"").trim();return s?/^(?:[0-9]|1[0-4])$/.test(s)?`var(--spacing-${s})`:s:""}__applySpacing(){const t=this.__resolveSpacingToken(this.spacingTop||this.spacing),s=this.__resolveSpacingToken(this.spacingBottom||this.spacing);t?this.style.marginBlockStart=t:this.style.removeProperty("margin-block-start"),s?this.style.marginBlockEnd=s:this.style.removeProperty("margin-block-end")}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&this.__applySpacing()}render(){return p`
+      ${this.showIcon?this.status==="success"?p`<md-icon>check_circle</md-icon>`:this.status==="warning"?p`<md-icon>warning</md-icon>`:this.status==="error"?p`<md-icon>error</md-icon>`:"":""}
+      <span class="label">${this.label}</span>
+    `}};r.styles=g`
     :host {
       display: inline-block;
       border-radius: var(--md-sys-shape-corner-full);
@@ -14,22 +14,26 @@ import{a as u,n as d,i as m,x as c,t as p}from"../../vendor/vendor.js";import"..
       gap: var(--spacing-3);
       width: fit-content;
     }
-    .label{
+
+    .label {
       font-size: var(--md-sys-typescale-label-medium-size);
       line-height: var(--md-sys-typescale-label-medium-line-height);
       font-weight: var(--md-sys-typescale-label-medium-weight);
       letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     }
-    :host([status="success"]) {
-        background: var(--md-sys-color-success-container);
-        color: var(--md-sys-color-on-success-container);   
+
+    :host([status='success']) {
+      background: var(--md-sys-color-success-container);
+      color: var(--md-sys-color-on-success-container);
     }
-    :host([status="warning"]) {
+
+    :host([status='warning']) {
       background: var(--md-sys-color-warning-container);
       color: var(--md-sys-color-on-warning-container);
     }
-    :host([status="error"]) {
-        background: var(--md-sys-color-error-container);
-        color: var(--md-sys-color-on-error-container);
+
+    :host([status='error']) {
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
     }
-  `;l([d({type:String})],a.prototype,"status",2);l([d({type:String})],a.prototype,"label",2);l([d({type:Boolean,attribute:"show-icon"})],a.prototype,"showIcon",2);a=l([p("scb-status-pill")],a);
+  `;i([l({type:String})],r.prototype,"status",2);i([l({type:String})],r.prototype,"label",2);i([l({type:Boolean,attribute:"show-icon"})],r.prototype,"showIcon",2);i([l({type:String})],r.prototype,"spacing",2);i([l({type:String,attribute:"spacing-top"})],r.prototype,"spacingTop",2);i([l({type:String,attribute:"spacing-bottom"})],r.prototype,"spacingBottom",2);r=i([d("scb-status-pill")],r);

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

@@ -1,4 +1,4 @@
-import{a as l,n as p,r as h,i as d,x as f,t as v}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(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(t,e,s,i)=>{for(var n=i>1?void 0:i?b(e,s):e,a=t.length-1,c;a>=0;a--)(c=t[a])&&(n=(i?c(e,s,n):c(n))||n);return i&&n&&u(e,s,n),n};let o=class extends d{constructor(){super(...arguments),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.activeIndex=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)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("scb-step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?this.dispatchEvent(new CustomEvent("scb-step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})):t<e&&this.dispatchEvent(new CustomEvent("scb-step-prev",{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(){this._updateSteps()}updated(){this._updateSteps()}render(){return f`
+import{a as b,n as o,r as g,i as u,x as m,t as y}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(l){var c=String(l||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var _=Object.defineProperty,S=Object.getOwnPropertyDescriptor,v=t=>{throw TypeError(t)},a=(t,e,s,i)=>{for(var n=i>1?void 0:i?S(e,s):e,c=t.length-1,l;c>=0;c--)(l=t[c])&&(n=(i?l(e,s,n):l(n))||n);return i&&n&&_(e,s,n),n},x=(t,e,s)=>e.has(t)||v("Cannot "+s),k=(t,e,s)=>e.has(t)?v("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),h=(t,e,s)=>(x(t,e,"access private method"),s),p,f,d;let r=class extends u{constructor(){super(...arguments),k(this,p),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.spacing="",this.spacingTop="",this.spacingBottom="",this.activeIndex=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)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("scb-step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?this.dispatchEvent(new CustomEvent("scb-step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})):t<e&&this.dispatchEvent(new CustomEvent("scb-step-prev",{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(),h(this,p,f).call(this)}updated(t){this._updateSteps(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&h(this,p,f).call(this)}render(){return m`
       <div
         class="steps"
         role="list"
@@ -8,10 +8,10 @@ import{a as l,n as p,r as h,i as d,x as f,t as v}from"../../vendor/vendor.js";im
       >
         <slot></slot>
       </div>
-    `}};o.styles=l`
+    `}};p=new WeakSet;f=function(){const t=h(this,p,d).call(this,this.spacing),e=h(this,p,d).call(this,this.spacingTop)??t,s=h(this,p,d).call(this,this.spacingBottom)??t;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")};d=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};r.styles=b`
     :host {
-        --scb-stepper-width: 100%;
-        --scb-stepper-height: 100%;
+      --scb-stepper-width: 100%;
+      --scb-stepper-height: 100%;
       display: block;
       padding: var(--spacing-5) 0;
       width: 100%;
@@ -19,6 +19,9 @@ import{a as l,n as p,r as h,i as d,x as f,t as v}from"../../vendor/vendor.js";im
       font-family: var(--brand-font);
       max-width: var(--scb-stepper-width);
       height: var(--scb-stepper-height);
+
+      margin-block-start: var(--scb-stepper-spacing-block-start, 0);
+      margin-block-end: var(--scb-stepper-spacing-block-end, 0);
     }
     .steps {
       display: flex;
@@ -52,32 +55,32 @@ import{a as l,n as p,r as h,i as d,x as f,t as v}from"../../vendor/vendor.js";im
       z-index: 0;
     }
     /* Vertikal connector */
-    ::slotted(scb-step[variant="vertical"]:not(:first-child))::before {
-        display: none;
+    ::slotted(scb-step[variant='vertical']:not(:first-child))::before {
+      display: none;
     }
-    ::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
-        content: '';
-        position: absolute;
-        left: 28px;
-        top: 52px;
-        width: 1px;
-        height: calc(100% - 16px);
-        background: var(--n-70);
-        z-index: 0;
-        transform: translateX(-50%);
+    ::slotted(scb-step[variant='vertical']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 28px;
+      top: 52px;
+      width: 1px;
+      height: calc(100% - 16px);
+      background: var(--n-70);
+      z-index: 0;
+      transform: translateX(-50%);
     }
-    ::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
-        content: "";
-        position: absolute;
-        left: 20px;
-        top: 38px;
-        width: 1px;
-        height: calc(100% - 2px);
-        background: var(--n-70);
-        z-index: 0;
-        transform: translateX(-50%);
+    ::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 38px;
+      width: 1px;
+      height: calc(100% - 2px);
+      background: var(--n-70);
+      z-index: 0;
+      transform: translateX(-50%);
     }
-    ::slotted(scb-step[symbol-variant="marker"]:not(:first-child))::before  {
-        top: 20px;
+    ::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
+      top: 20px;
     }
-  `;r([p({type:String,reflect:!0})],o.prototype,"type",2);r([p({type:String,reflect:!0})],o.prototype,"label",2);r([p({type:Boolean,reflect:!0,attribute:"change-on-completed"})],o.prototype,"changeOnCompleted",2);r([p({type:String})],o.prototype,"variant",2);r([p({type:String,reflect:!0,attribute:"symbol-variant"})],o.prototype,"symbolVariant",2);r([h()],o.prototype,"activeIndex",2);o=r([v("scb-stepper")],o);
+  `;a([o({type:String,reflect:!0})],r.prototype,"type",2);a([o({type:String,reflect:!0})],r.prototype,"label",2);a([o({type:Boolean,reflect:!0,attribute:"change-on-completed"})],r.prototype,"changeOnCompleted",2);a([o({type:String})],r.prototype,"variant",2);a([o({type:String,reflect:!0,attribute:"symbol-variant"})],r.prototype,"symbolVariant",2);a([o({type:String,reflect:!0})],r.prototype,"spacing",2);a([o({type:String,attribute:"spacing-top",reflect:!0})],r.prototype,"spacingTop",2);a([o({type:String,attribute:"spacing-bottom",reflect:!0})],r.prototype,"spacingBottom",2);a([g()],r.prototype,"activeIndex",2);r=a([y("scb-stepper")],r);

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

@@ -1,18 +1,21 @@
-import{a as p,n as o,i as f,E as d,x as h,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var s=typeof globalThis<"u"?globalThis:window;if(!s.__scb_ce_guard_installed__){s.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,r,i){try{customElements.get(t)||e(t,r,i)}catch(c){var n=String(c||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,l=(s,e,t,r)=>{for(var i=r>1?void 0:r?y(e,t):e,n=s.length-1,c;n>=0;n--)(c=s[n])&&(i=(r?c(e,t,i):c(i))||i);return r&&i&&u(e,t,i),i};let a=class extends f{constructor(){super(...arguments),this.label="",this.ariaLabel="",this.icons=!1,this.selected=!1,this.disabled=!1,this.fullWidth=!1}updated(){this.toggleAttribute("aria-disabled",this.disabled)}firstUpdated(){this.shadowRoot?.querySelector("md-switch")?.addEventListener("change",e=>{this.selected=e.target.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected},bubbles:!0,composed:!0}))})}render(){const s=this.label.trim().length>0,e=s?d:this.ariaLabel||d,t=h`
+import{a as y,n as r,i as _,E as u,x as b,t as g}from"../../vendor/vendor.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,c,l){try{customElements.get(s)||e(s,c,l)}catch(h){var o=String(h||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},a=(t,e,s,c)=>{for(var l=c>1?void 0:c?w(e,s):e,o=t.length-1,h;o>=0;o--)(h=t[o])&&(l=(c?h(e,s,l):h(l))||l);return c&&l&&v(e,s,l),l},S=(t,e,s)=>e.has(t)||m("Cannot "+s),k=(t,e,s)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),p=(t,e,s)=>(S(t,e,"access private method"),s),n,f,d;let i=class extends _{constructor(){super(),k(this,n),this._internals=null,this.label="",this.ariaLabel="",this.icons=!1,this.selected=!1,this.disabled=!1,this.fullWidth=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this.name="",this.value="on",this._form=null,this._formResetHandler=null,this._initialSelected=!1,"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._initialSelected=this.selected,this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.selected=this._initialSelected,this.__syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0)),this.__syncFormValue()}disconnectedCallback(){this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this.shadowRoot?.querySelector("md-switch")?.addEventListener("change",e=>{this.selected=e.target.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected},bubbles:!0,composed:!0}))}),p(this,n,f).call(this)}updated(t){super.updated(t),t.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),(t.has("selected")||t.has("disabled")||t.has("value"))&&this.__syncFormValue(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,n,f).call(this)}formDisabledCallback(t){this.disabled=t}__syncFormValue(){if(!this._internals)return;const t=this.disabled||!this.selected?null:this.value;this._internals.setFormValue(t)}render(){const t=this.label.trim().length>0,e=t?u:this.ariaLabel||u,s=b`
       <md-switch
         ?icons=${this.icons}
         ?selected=${this.selected}
         ?disabled=${this.disabled}
         aria-label=${e}
       ></md-switch>
-    `;return s?h`
-        <label class="switch-container" ?disabled=${this.disabled}>
-          <span class="switch-label">${this.label}</span>
-          ${t}
-        </label>
-      `:t}};a.styles=p`
+    `;return t?b`
+          <label class="switch-container" ?disabled=${this.disabled}>
+            <span class="switch-label">${this.label}</span>
+            ${s}
+          </label>
+        `:s}};n=new WeakSet;f=function(){const t=p(this,n,d).call(this,this.spacing),e=p(this,n,d).call(this,this.spacingTop)??t,s=p(this,n,d).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-switch-spacing-block-start",e):this.style.removeProperty("--scb-switch-spacing-block-start"),s?this.style.setProperty("--scb-switch-spacing-block-end",s):this.style.removeProperty("--scb-switch-spacing-block-end")};d=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};i.formAssociated=!0;i.styles=y`
     :host {
       display: block;
+      /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+      margin-block-start: var(--scb-switch-spacing-block-start, 0);
+      margin-block-end: var(--scb-switch-spacing-block-end, 0);
     }
 
     .switch-container {
@@ -50,4 +53,4 @@ import{a as p,n as o,i as f,E as d,x as h,t as b}from"../../vendor/vendor.js";im
       /* Ärver färg från container */
       color: var(--scb-switch-label-color, inherit);
     }
-  `;l([o({type:String})],a.prototype,"label",2);l([o({type:String,reflect:!0,attribute:"aria-label"})],a.prototype,"ariaLabel",2);l([o({type:Boolean,reflect:!0})],a.prototype,"icons",2);l([o({type:Boolean,reflect:!0})],a.prototype,"selected",2);l([o({type:Boolean,reflect:!0})],a.prototype,"disabled",2);l([o({type:Boolean,reflect:!0,attribute:"full-width"})],a.prototype,"fullWidth",2);a=l([b("scb-switch")],a);export{a as ScbSwitch};
+  `;a([r({type:String})],i.prototype,"label",2);a([r({type:String,reflect:!0,attribute:"aria-label"})],i.prototype,"ariaLabel",2);a([r({type:Boolean,reflect:!0})],i.prototype,"icons",2);a([r({type:Boolean,reflect:!0})],i.prototype,"selected",2);a([r({type:Boolean,reflect:!0})],i.prototype,"disabled",2);a([r({type:Boolean,reflect:!0,attribute:"full-width"})],i.prototype,"fullWidth",2);a([r({type:String,reflect:!0})],i.prototype,"spacing",2);a([r({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);a([r({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);a([r({type:String})],i.prototype,"name",2);a([r({type:String})],i.prototype,"value",2);i=a([g("scb-switch")],i);export{i as ScbSwitch};

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

@@ -1,23 +1,26 @@
-import{b as n}from"../../vendor/vendor-material.js";import{a as d,n as m,t as b}from"../../vendor/vendor.js";import"./scb-primary-tab.js";import"./scb-secondary-tab.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(a,o,t){try{customElements.get(a)||e(a,o,t)}catch(i){var s=String(i||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,l=(r,e,a,o)=>{for(var t=o>1?void 0:o?u(e,a):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(t=(o?i(e,a,t):i(t))||t);return o&&t&&p(e,a,t),t};let c=class extends n{constructor(){super(...arguments),this.ariaLabel="",this._isDispatching=!1,this._onChange=r=>{if(!r.composed&&!this._isDispatching){r.stopPropagation(),this._isDispatching=!0;const e=r.target.activeTabIndex;this.dispatchEvent(new CustomEvent("change",{detail:{activeTabIndex:e},bubbles:!0,composed:!0})),this._isDispatching=!1}}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tablist")}firstUpdated(r){super.firstUpdated(r),this.addEventListener("change",this._onChange)}};c.styles=[...n.styles,d`
-    :host {
-      /*Containerfärg */
-      --md-primary-tab-container-color: var(--md-sys-color-surface);
-      --md-secondary-tab-container-color: var(--md-sys-color-surface);
+import{b as m}from"../../vendor/vendor-material.js";import{a as u,n as b,t as y}from"../../vendor/vendor.js";import"./scb-primary-tab.js";import"./scb-secondary-tab.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(s,o,r){try{customElements.get(s)||a(s,o,r)}catch(n){var c=String(n||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,v=t=>{throw TypeError(t)},p=(t,a,s,o)=>{for(var r=o>1?void 0:o?g(a,s):a,c=t.length-1,n;c>=0;c--)(n=t[c])&&(r=(o?n(a,s,r):n(r))||r);return o&&r&&f(a,s,r),r},_=(t,a,s)=>a.has(t)||v("Cannot "+s),S=(t,a,s)=>a.has(t)?v("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(t):a.set(t,s),l=(t,a,s)=>(_(t,a,"access private method"),s),e,h,d;let i=class extends m{constructor(){super(...arguments),S(this,e),this.ariaLabel="",this.spacing="",this.spacingTop="",this.spacingBottom="",this._isDispatching=!1,this._onChange=t=>{if(!t.composed&&!this._isDispatching){t.stopPropagation(),this._isDispatching=!0;const a=t.target.activeTabIndex;this.dispatchEvent(new CustomEvent("change",{detail:{activeTabIndex:a},bubbles:!0,composed:!0})),this._isDispatching=!1}}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tablist")}firstUpdated(t){super.firstUpdated(t),this.addEventListener("change",this._onChange),l(this,e,h).call(this)}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&l(this,e,h).call(this)}};e=new WeakSet;h=function(){const t=l(this,e,d).call(this,this.spacing),a=l(this,e,d).call(this,this.spacingTop)??t,s=l(this,e,d).call(this,this.spacingBottom)??t;a?this.style.setProperty("--scb-tabs-spacing-block-start",a):this.style.removeProperty("--scb-tabs-spacing-block-start"),s?this.style.setProperty("--scb-tabs-spacing-block-end",s):this.style.removeProperty("--scb-tabs-spacing-block-end")};d=function(t){if(!t)return;const a=String(t).trim();if(a)return/^\d+$/.test(a)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(a,10)))})`:a};i.styles=[...m.styles,u`
+      :host {
+        /*Containerfärg */
+        --md-primary-tab-container-color: var(--md-sys-color-surface);
+        --md-secondary-tab-container-color: var(--md-sys-color-surface);
 
-      /* Text- och ikonfärger */
-      --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
-      --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
-      --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
-      --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+        /* Text- och ikonfärger */
+        --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+        --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
 
-      /* Indikator och divider */
-      --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
-      --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
-      --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
+        /* Indikator och divider */
+        --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
+        --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
+        --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
 
-      /* State layers (hover/press) */
-      --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
-      --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
-    }
+        /* State layers (hover/press) */
+        --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+        --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
 
-  `];l([m({type:String,reflect:!0,attribute:"aria-label"})],c.prototype,"ariaLabel",2);c=l([b("scb-tabs")],c);
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-tabs-spacing-block-start, 0);
+        margin-block-end: var(--scb-tabs-spacing-block-end, 0);
+      }
+    `];p([b({type:String,reflect:!0,attribute:"aria-label"})],i.prototype,"ariaLabel",2);p([b({type:String,reflect:!0})],i.prototype,"spacing",2);p([b({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);p([b({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);i=p([y("scb-tabs")],i);