scb-wc-test 0.1.106 → 0.1.107

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

@@ -1,8 +1,8 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
-import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x as a,t as m}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(i,l,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,b=t=>{throw TypeError(t)},n=(t,e,i,l)=>{for(var o=l>1?void 0:l?y(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&v(e,i,o),o},A=(t,e,i)=>e.has(t)||b("Cannot "+i),$=(t,e,i)=>e.has(t)?b("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(A(t,e,"access private method"),i),_,u;let s=class extends g{constructor(){super(...arguments),$(this,_),this.icon="home",this.tooltip="",this.ariaLabel="",this.variant="standard",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.spacing="",this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__lastMdHost=null,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncTitleAndAria(),p(this,_,u).call(this)}updated(t){if(super.updated(t),t.has("spacing")&&p(this,_,u).call(this),t.has("variant")){this.__ensureDepsLoaded().then(()=>{queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})});return}(t.has("toggle")||t.has("icon")||t.has("toggleofficon")||t.has("toggleonicon")||t.has("selected")||t.has("disabled")||t.has("tooltip")||t.has("ariaLabel"))&&queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})}disconnectedCallback(){this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),this.__lastMdHost=null,super.disconnectedCallback()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break;default:await h(()=>import("../../vendor/vendor-material.js").then(t=>t.d),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button")}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastMdHost&&(this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastMdHost=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected)}__syncTitleAndAria(){const t=this.__getMdHost();if(!t)return;const e=(this.tooltip||this.getAttribute("title")||"").trim(),i=(this.ariaLabel||this.getAttribute("aria-label")||"").trim(),l=this.getAttribute("aria-controls"),o=this.getAttribute("aria-expanded");this.tooltip&&this.setAttribute("title",e);const d=i||e||this.icon.trim()||void 0;d?t.setAttribute("aria-label",d):t.removeAttribute("aria-label"),e?t.setAttribute("title",e):t.removeAttribute("title"),l!==null?t.setAttribute("aria-controls",l):t.removeAttribute("aria-controls"),o!==null?t.setAttribute("aria-expanded",o):t.removeAttribute("aria-expanded")}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}__renderToggleIcons(){return a`
+import{_ as h}from"../../vendor/preload-helper.js";import{a as g,n as a,i as m,x as r,t as f}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(i,l,n){try{customElements.get(i)||e(i,l,n)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,b=t=>{throw TypeError(t)},s=(t,e,i,l)=>{for(var n=l>1?void 0:l?y(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(n=(l?c(e,i,n):c(n))||n);return l&&n&&v(e,i,n),n},A=(t,e,i)=>e.has(t)||b("Cannot "+i),$=(t,e,i)=>e.has(t)?b("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(A(t,e,"access private method"),i),_,u;let o=class extends m{constructor(){super(...arguments),$(this,_),this.icon="home",this.tooltip="",this.ariaLabel="",this.variant="standard",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__lastMdHost=null,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncTitleAndAria(),p(this,_,u).call(this)}updated(t){if(super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,_,u).call(this),t.has("variant")){this.__ensureDepsLoaded().then(()=>{queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})});return}(t.has("toggle")||t.has("icon")||t.has("toggleofficon")||t.has("toggleonicon")||t.has("selected")||t.has("disabled")||t.has("tooltip")||t.has("ariaLabel"))&&queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})}disconnectedCallback(){this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),this.__lastMdHost=null,super.disconnectedCallback()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break;default:await h(()=>import("../../vendor/vendor-material.js").then(t=>t.d),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button")}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastMdHost&&(this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastMdHost=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected)}__syncTitleAndAria(){const t=this.__getMdHost();if(!t)return;const e=(this.tooltip||this.getAttribute("title")||"").trim(),i=(this.ariaLabel||this.getAttribute("aria-label")||"").trim(),l=this.getAttribute("aria-controls"),n=this.getAttribute("aria-expanded");this.tooltip&&this.setAttribute("title",e);const d=i||e||this.icon.trim()||void 0;d?t.setAttribute("aria-label",d):t.removeAttribute("aria-label"),e?t.setAttribute("title",e):t.removeAttribute("title"),l!==null?t.setAttribute("aria-controls",l):t.removeAttribute("aria-controls"),n!==null?t.setAttribute("aria-expanded",n):t.removeAttribute("aria-expanded")}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}__renderToggleIcons(){return r`
       <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
       <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
-    `}__renderSingleIcon(){return a`<md-icon aria-hidden="true">${this.icon}</md-icon>`}__renderMd(){const t=this.toggle?this.__renderToggleIcons():this.__renderSingleIcon();if(this.toggle)switch(this.variant){case"filled":return a`
+    `}__renderSingleIcon(){return r`<md-icon aria-hidden="true">${this.icon}</md-icon>`}__renderMd(){const t=this.toggle?this.__renderToggleIcons():this.__renderSingleIcon();if(this.toggle)switch(this.variant){case"filled":return r`
             <md-filled-icon-button
               toggle
               ?selected=${this.selected}
@@ -10,7 +10,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
             >
               ${t}
             </md-filled-icon-button>
-          `;case"outlined":return a`
+          `;case"outlined":return r`
             <md-outlined-icon-button
               toggle
               ?selected=${this.selected}
@@ -18,7 +18,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
             >
               ${t}
             </md-outlined-icon-button>
-          `;case"filled-tonal":return a`
+          `;case"filled-tonal":return r`
             <md-filled-tonal-icon-button
               toggle
               ?selected=${this.selected}
@@ -26,29 +26,30 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
             >
               ${t}
             </md-filled-tonal-icon-button>
-          `;default:return a`
+          `;default:return r`
             <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled}>
               ${t}
             </md-icon-button>
-          `}switch(this.variant){case"filled":return a`
+          `}switch(this.variant){case"filled":return r`
           <md-filled-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-icon-button>
-        `;case"outlined":return a`
+        `;case"outlined":return r`
           <md-outlined-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-outlined-icon-button>
-        `;case"filled-tonal":return a`
+        `;case"filled-tonal":return r`
           <md-filled-tonal-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-tonal-icon-button>
-        `;default:return a`
+        `;default:return r`
           <md-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-icon-button>
-        `}}render(){return this.__renderMd()}};_=new WeakSet;u=function(){const t=this.mapSpacingToken(this.spacing);t?this.style.setProperty("--scb-icon-button-spacing-block",t):this.style.removeProperty("--scb-icon-button-spacing-block")};s.styles=f`
+        `}}render(){return this.__renderMd()}};_=new WeakSet;u=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-icon-button-spacing-block-start",e):this.style.removeProperty("--scb-icon-button-spacing-block-start"),i?this.style.setProperty("--scb-icon-button-spacing-block-end",i):this.style.removeProperty("--scb-icon-button-spacing-block-end")};o.styles=g`
     :host {
       display: inline-flex;
-      margin-block: var(--scb-icon-button-spacing-block, 0);
+      margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
     }
-  `;n([r({type:String})],s.prototype,"icon",2);n([r({type:String})],s.prototype,"tooltip",2);n([r({type:String,attribute:"aria-label"})],s.prototype,"ariaLabel",2);n([r({type:String})],s.prototype,"variant",2);n([r({type:Boolean,reflect:!0})],s.prototype,"toggle",2);n([r({type:Boolean,reflect:!0})],s.prototype,"selected",2);n([r({type:String})],s.prototype,"toggleofficon",2);n([r({type:String})],s.prototype,"toggleonicon",2);n([r({type:Boolean,reflect:!0})],s.prototype,"disabled",2);n([r({type:String,reflect:!0})],s.prototype,"spacing",2);s=n([m("scb-icon-button")],s);export{s as ScbIconButton};
+  `;s([a({type:String})],o.prototype,"icon",2);s([a({type:String})],o.prototype,"tooltip",2);s([a({type:String,attribute:"aria-label"})],o.prototype,"ariaLabel",2);s([a({type:String})],o.prototype,"variant",2);s([a({type:Boolean,reflect:!0})],o.prototype,"toggle",2);s([a({type:Boolean,reflect:!0})],o.prototype,"selected",2);s([a({type:String})],o.prototype,"toggleofficon",2);s([a({type:String})],o.prototype,"toggleonicon",2);s([a({type:Boolean,reflect:!0})],o.prototype,"disabled",2);s([a({type:String,reflect:!0})],o.prototype,"spacing",2);s([a({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);s([a({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);o=s([f("scb-icon-button")],o);export{o as ScbIconButton};

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

@@ -1,29 +1,30 @@
-import{a as f,n as u,i as p,x as v,t as b}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(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var g=Object.defineProperty,_=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},l=(t,e,s,i)=>{for(var r=i>1?void 0:i?_(e,s):e,n=t.length-1,o;n>=0;n--)(o=t[n])&&(r=(i?o(e,s,r):o(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),c=(t,e,s)=>(y(t,e,"access private method"),s),d,h;let a=class extends p{constructor(){super(),S(this,d),this._internals=null,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.name="",this.spacing="",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(),c(this,d,h).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")&&c(this,d,h).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(n=>n!==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 v`<slot></slot>`}};d=new WeakSet;h=function(){const t=this.mapSpacingToken(this.spacing);t?this.style.setProperty("--scb-segmented-button-spacing-block",t):this.style.removeProperty("--scb-segmented-button-spacing-block")};a.formAssociated=!0;a.styles=f`
+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);
-        margin-block: var(--scb-segmented-button-spacing-block, 0);
+      --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);
     }
-  `;l([u({type:String,reflect:!0})],a.prototype,"variant",2);l([u({type:String,reflect:!0})],a.prototype,"value",2);l([u({type:Array})],a.prototype,"values",2);l([u({type:Boolean,reflect:!0})],a.prototype,"disabled",2);l([u({type:String,reflect:!0})],a.prototype,"name",2);l([u({type:String,reflect:!0})],a.prototype,"spacing",2);a=l([b("scb-segmented-button")],a);
+  `;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/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.106",
+    "version":  "0.1.107",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -337,5 +337,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "98E66BAB76488BA8376D64AE4939481C4C60525EF2850A8C0EF57F23C0CC95D2"
+    "buildHash":  "9C8FDE229A6A7627895483B4195C5836D7D6E708679AC92B7306C433AB2EB029"
 }

package/scb-icon-button/scb-icon-button.d.ts

@@ -22,6 +22,10 @@ export declare class ScbIconButton extends LitElement {
     disabled: boolean;
     /** Vertikalt avstånd till omgivande innehåll. "N" mappar till var(--spacing-N). */
     spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars CSS-värde. */
+    spacingBottom: string;
     private __loadedVariants;
     private __iconLoaded;
     private __lastMdHost;

package/scb-icon-button/scb-icon-button.js

@@ -1,16 +1,16 @@
-import { css as b, LitElement as g, html as a } from "lit";
-import { property as r, customElement as f } from "lit/decorators.js";
+import { css as g, LitElement as _, html as r } from "lit";
+import { property as n, customElement as m } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, _ = (t) => {
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, b = (t) => {
   throw TypeError(t);
 }, o = (t, e, i, l) => {
-  for (var n = l > 1 ? void 0 : l ? v(e, i) : e, d = t.length - 1, h; d >= 0; d--)
-    (h = t[d]) && (n = (l ? h(e, i, n) : h(n)) || n);
-  return l && n && m(e, i, n), n;
-}, y = (t, e, i) => e.has(t) || _("Cannot " + i), $ = (t, e, i) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), p = (t, e, i) => (y(t, e, "access private method"), i), c, u;
-let s = class extends g {
+  for (var a = l > 1 ? void 0 : l ? y(e, i) : e, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (a = (l ? h(e, i, a) : h(a)) || a);
+  return l && a && f(e, i, a), a;
+}, v = (t, e, i) => e.has(t) || b("Cannot " + i), $ = (t, e, i) => e.has(t) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), u = (t, e, i) => (v(t, e, "access private method"), i), c, p;
+let s = class extends _ {
   constructor() {
-    super(...arguments), $(this, c), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = "", this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
+    super(...arguments), $(this, c), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
       const t = this.__getMdHost(), e = !!(t != null && t.selected);
       this.toggle && (this.selected = e), this.dispatchEvent(
         new CustomEvent("change", {
@@ -22,10 +22,10 @@ let s = class extends g {
     };
   }
   async firstUpdated() {
-    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), p(this, c, u).call(this);
+    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), u(this, c, p).call(this);
   }
   updated(t) {
-    if (super.updated(t), t.has("spacing") && p(this, c, u).call(this), t.has("variant")) {
+    if (super.updated(t), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && u(this, c, p).call(this), t.has("variant")) {
       this.__ensureDepsLoaded().then(() => {
         queueMicrotask(() => {
           this.__attachChangeListener(), this.__syncTitleAndAria();
@@ -79,10 +79,10 @@ let s = class extends g {
   __syncTitleAndAria() {
     const t = this.__getMdHost();
     if (!t) return;
-    const e = (this.tooltip || this.getAttribute("title") || "").trim(), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), l = this.getAttribute("aria-controls"), n = this.getAttribute("aria-expanded");
+    const e = (this.tooltip || this.getAttribute("title") || "").trim(), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), l = this.getAttribute("aria-controls"), a = this.getAttribute("aria-expanded");
     this.tooltip && this.setAttribute("title", e);
     const d = i || e || this.icon.trim() || void 0;
-    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), l !== null ? t.setAttribute("aria-controls", l) : t.removeAttribute("aria-controls"), n !== null ? t.setAttribute("aria-expanded", n) : t.removeAttribute("aria-expanded");
+    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), l !== null ? t.setAttribute("aria-controls", l) : t.removeAttribute("aria-controls"), a !== null ? t.setAttribute("aria-expanded", a) : t.removeAttribute("aria-expanded");
   }
   mapSpacingToken(t) {
     if (!t) return;
@@ -91,20 +91,20 @@ let s = class extends g {
       return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   __renderToggleIcons() {
-    return a`
+    return r`
       <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
       <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
     `;
   }
   __renderSingleIcon() {
-    return a`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+    return r`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
   }
   __renderMd() {
     const t = this.toggle ? this.__renderToggleIcons() : this.__renderSingleIcon();
     if (this.toggle)
       switch (this.variant) {
         case "filled":
-          return a`
+          return r`
             <md-filled-icon-button
               toggle
               ?selected=${this.selected}
@@ -114,7 +114,7 @@ let s = class extends g {
             </md-filled-icon-button>
           `;
         case "outlined":
-          return a`
+          return r`
             <md-outlined-icon-button
               toggle
               ?selected=${this.selected}
@@ -124,7 +124,7 @@ let s = class extends g {
             </md-outlined-icon-button>
           `;
         case "filled-tonal":
-          return a`
+          return r`
             <md-filled-tonal-icon-button
               toggle
               ?selected=${this.selected}
@@ -134,7 +134,7 @@ let s = class extends g {
             </md-filled-tonal-icon-button>
           `;
         default:
-          return a`
+          return r`
             <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled}>
               ${t}
             </md-icon-button>
@@ -142,25 +142,25 @@ let s = class extends g {
       }
     switch (this.variant) {
       case "filled":
-        return a`
+        return r`
           <md-filled-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-icon-button>
         `;
       case "outlined":
-        return a`
+        return r`
           <md-outlined-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-outlined-icon-button>
         `;
       case "filled-tonal":
-        return a`
+        return r`
           <md-filled-tonal-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-tonal-icon-button>
         `;
       default:
-        return a`
+        return r`
           <md-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-icon-button>
@@ -172,48 +172,55 @@ let s = class extends g {
   }
 };
 c = /* @__PURE__ */ new WeakSet();
-u = function() {
-  const t = this.mapSpacingToken(this.spacing);
-  t ? this.style.setProperty("--scb-icon-button-spacing-block", t) : this.style.removeProperty("--scb-icon-button-spacing-block");
+p = function() {
+  const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-icon-button-spacing-block-start", e) : this.style.removeProperty("--scb-icon-button-spacing-block-start"), i ? this.style.setProperty("--scb-icon-button-spacing-block-end", i) : this.style.removeProperty("--scb-icon-button-spacing-block-end");
 };
-s.styles = b`
+s.styles = g`
     :host {
       display: inline-flex;
-      margin-block: var(--scb-icon-button-spacing-block, 0);
+      margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
     }
   `;
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "icon", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "tooltip", 2);
 o([
-  r({ type: String, attribute: "aria-label" })
+  n({ type: String, attribute: "aria-label" })
 ], s.prototype, "ariaLabel", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "variant", 2);
 o([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "toggle", 2);
 o([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "selected", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "toggleofficon", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "toggleonicon", 2);
 o([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
 o([
-  r({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], s.prototype, "spacing", 2);
+o([
+  n({ type: String, attribute: "spacing-top", reflect: !0 })
+], s.prototype, "spacingTop", 2);
+o([
+  n({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], s.prototype, "spacingBottom", 2);
 s = o([
-  f("scb-icon-button")
+  m("scb-icon-button")
 ], s);
 export {
   s as ScbIconButton

package/scb-segmented-button/scb-segmented-button.d.ts

@@ -30,6 +30,10 @@ export declare class ScbSegmentedButton extends LitElement {
      * "N" (0–14) mappar till var(--spacing-N), annars valfritt CSS-värde.
      */
     spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars valfritt CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars valfritt CSS-värde. */
+    spacingBottom: string;
     private _form;
     private _formResetHandler;
     private _initialValue;

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

@@ -1,16 +1,16 @@
-import { css as p, LitElement as f, html as v } from "lit";
-import { property as o, customElement as b } from "lit/decorators.js";
+import { css as p, LitElement as f, html as b } from "lit";
+import { property as l, customElement as v } from "lit/decorators.js";
 import "./scb-segmented-item.js";
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, m = (t) => {
   throw TypeError(t);
-}, l = (t, e, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? _(e, s) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (r = (i ? d(e, s, r) : d(r)) || r);
+}, o = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(e, s) : e, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (r = (i ? d(e, s, r) : d(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), c = (t, e, s) => (y(t, e, "access private method"), s), u, h;
-let n = class extends f {
+}, _ = (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) => (_(t, e, "access private method"), s), u, c;
+let a = class extends f {
   constructor() {
-    super(), S(this, u), this._internals = null, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.name = "", this.spacing = "", this._form = null, this._formResetHandler = null, this._initialValue = "", this._initialValues = [], "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), S(this, u), 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 = () => {
@@ -48,10 +48,10 @@ let n = class extends f {
           r && !r.hasAttribute("disabled") && !this.disabled && (this.onSlotClick(s), s.preventDefault());
         }
       }
-    })), this._syncFormValue(), c(this, u, h).call(this);
+    })), this._syncFormValue(), h(this, u, 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") && c(this, u, h).call(this);
+    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, u, c).call(this);
   }
   onSlotClick(t) {
     let e = t.target;
@@ -59,7 +59,7 @@ let n = class extends f {
     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((a) => a !== i), this.dispatchEvent(
+    i && (this.variant === "multi-select" ? (this.values.indexOf(i) === -1 ? this.values = [...this.values, i] : this.values = this.values.filter((n) => n !== i), this.dispatchEvent(
       new CustomEvent("change", {
         detail: { values: this.values },
         bubbles: !0,
@@ -77,8 +77,8 @@ let n = class extends f {
       if (i.tagName === "SCB-SEGMENTED-ITEM") {
         const r = i.getAttribute("value") || "";
         if (r) {
-          let a = !1;
-          this.variant === "multi-select" ? a = !!this.values && this.values.includes(r) : a = r === this.value, i.setAttribute("aria-pressed", a ? "true" : "false"), a ? i.setAttribute("selected", "true") : i.removeAttribute("selected");
+          let n = !1;
+          this.variant === "multi-select" ? n = !!this.values && this.values.includes(r) : n = r === this.value, i.setAttribute("aria-pressed", n ? "true" : "false"), n ? i.setAttribute("selected", "true") : i.removeAttribute("selected");
         }
         this.disabled && i.setAttribute("disabled", "true");
       }
@@ -126,65 +126,72 @@ let n = class extends f {
       return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   render() {
-    return v`<slot></slot>`;
+    return b`<slot></slot>`;
   }
 };
 u = /* @__PURE__ */ new WeakSet();
-h = function() {
-  const t = this.mapSpacingToken(this.spacing);
-  t ? this.style.setProperty("--scb-segmented-button-spacing-block", t) : this.style.removeProperty("--scb-segmented-button-spacing-block");
+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");
 };
-n.formAssociated = !0;
-n.styles = p`
+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);
-        margin-block: var(--scb-segmented-button-spacing-block, 0);
+      --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);
     }
   `;
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "variant", 2);
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "value", 2);
-l([
-  o({ type: Array })
-], n.prototype, "values", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled", 2);
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "name", 2);
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "spacing", 2);
-n = l([
-  b("scb-segmented-button")
-], n);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "variant", 2);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+o([
+  l({ type: Array })
+], a.prototype, "values", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "name", 2);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "spacing", 2);
+o([
+  l({ type: String, attribute: "spacing-top", reflect: !0 })
+], a.prototype, "spacingTop", 2);
+o([
+  l({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], a.prototype, "spacingBottom", 2);
+a = o([
+  v("scb-segmented-button")
+], a);
 export {
-  n as ScbSegmentedButton
+  a as ScbSegmentedButton
 };