scb-wc-test 0.1.65 → 0.1.67

package/mvc/components/scb-accordion/scb-accordion-item.js

@@ -1,5 +1,5 @@
 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 g}from"../../vendor/preload-helper.js";import{a as u,n as s,i as m,E as p,x as l,t as v}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 i=customElements.define.bind(customElements);customElements.define=function(o,r,n){try{customElements.get(o)||i(o,r,n)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(t,i,o,r)=>{for(var n=r>1?void 0:r?b(i,o):i,c=t.length-1,d;c>=0;c--)(d=t[c])&&(n=(r?d(i,o,n):d(n))||n);return r&&n&&h(i,o,n),n};let e=class extends m{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=e._uid(),this._onToggle=t=>{const i=t.currentTarget;this.open=!!i.open;const o=this.closest("scb-accordion");this.open&&o&&!o.hasAttribute("detached")&&o.querySelectorAll("scb-accordion-item").forEach(n=>{n!==this&&n.setOpen(!1)}),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${e._uidPrefix}-${++e._uidSeq}`}async firstUpdated(){e._mdIconLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e._mdIconLoaded=!0),e._mdRippleLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e._mdRippleLoaded=!0),this._applyInertByOpen()}_applyInertByOpen(){const t=this.renderRoot.querySelector(".scb-accordion-bottom"),i=this.renderRoot.querySelector("details");!t||!i||(i.open?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}_onKeyDown(t){const i=this.closest("scb-accordion"),r=Array.from(i?.querySelectorAll("scb-accordion-item")||[]).map(d=>d.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(d=>!!d),n=t.currentTarget,c=r.indexOf(n);switch(t.key){case"ArrowDown":t.preventDefault(),c<r.length-1&&r[c+1].focus();break;case"ArrowUp":t.preventDefault(),c>0&&r[c-1].focus();break;case"Home":t.preventDefault(),r.length&&r[0].focus();break;case"End":t.preventDefault(),r.length&&r[r.length-1].focus();break}}setOpen(t){this.open=!!t;const i=this.renderRoot.querySelector("details");i&&(i.open=this.open),this._applyInertByOpen()}updated(t){if(t.has("open")){const i=this.renderRoot.querySelector("details");i&&i.open!==this.open&&(i.open=this.open),this._applyInertByOpen()}}render(){const t=`bottom-${this._unique}`,i=`header-${this._unique}`,o=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?l`
+import{_ as g}from"../../vendor/preload-helper.js";import{a as u,n as s,i as m,E as p,x as l,t as v}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 i=customElements.define.bind(customElements);customElements.define=function(o,r,n){try{customElements.get(o)||i(o,r,n)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(t,i,o,r)=>{for(var n=r>1?void 0:r?b(i,o):i,c=t.length-1,d;c>=0;c--)(d=t[c])&&(n=(r?d(i,o,n):d(n))||n);return r&&n&&h(i,o,n),n};let e=class extends m{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=e._uid(),this._onToggle=t=>{const i=t.currentTarget;this.open=!!i.open;const o=this.closest("scb-accordion");this.open&&o&&!o.hasAttribute("detached")&&o.querySelectorAll("scb-accordion-item").forEach(n=>{n!==this&&n.setOpen(!1)}),this._applyInertByOpen()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${e._uidPrefix}-${++e._uidSeq}`}async firstUpdated(){e._mdIconLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e._mdIconLoaded=!0),e._mdRippleLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e._mdRippleLoaded=!0),this._applyInertByOpen()}_applyInertByOpen(){const t=this.renderRoot.querySelector(".scb-accordion-bottom"),i=this.renderRoot.querySelector("details");!t||!i||(i.open?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}_onKeyDown(t){const i=this.closest("scb-accordion"),r=Array.from(i?.querySelectorAll("scb-accordion-item")||[]).map(d=>d.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(d=>!!d),n=t.currentTarget,c=r.indexOf(n);switch(t.key){case"ArrowDown":t.preventDefault(),c<r.length-1&&r[c+1].focus();break;case"ArrowUp":t.preventDefault(),c>0&&r[c-1].focus();break;case"Home":t.preventDefault(),r.length&&r[0].focus();break;case"End":t.preventDefault(),r.length&&r[r.length-1].focus();break}}setOpen(t){this.open=!!t;const i=this.renderRoot.querySelector("details");i&&(i.open=this.open),this._applyInertByOpen()}updated(t){if(t.has("open")){const i=this.renderRoot.querySelector("details");i&&i.open!==this.open&&(i.open=this.open),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const t=`bottom-${this._unique}`,i=`header-${this._unique}`,o=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?l`
               <scb-avatar
                 label=${this.avatarLabel}
                 alt=${this.avatarAlt}

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

@@ -1,6 +1,12 @@
-import{a as u,n,i as c,x as f,t as h}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 r=customElements.define.bind(customElements);customElements.define=function(t,e,s){try{customElements.get(t)||r(t,e,s)}catch(a){var l=String(a||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,d=(i,r,t,e)=>{for(var s=e>1?void 0:e?b(r,t):r,l=i.length-1,a;l>=0;l--)(a=i[l])&&(s=(e?a(r,t,s):a(s))||s);return e&&s&&m(r,t,s),s};let o=class extends c{constructor(){super(...arguments),this.variant="single-select",this.value="",this.values=[],this.disabled=!1}onSlotClick(i){let r=i.target;if(!r||!r.closest)return;const t=r.closest("scb-segmented-item");if(!t||this.disabled||t.hasAttribute("disabled"))return;const e=t.getAttribute("value")||"";e&&(this.variant==="multi-select"?(this.values.indexOf(e)===-1?this.values=[...this.values,e]:this.values=this.values.filter(l=>l!==e),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0})),this.updateSegments()):e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})),this.updateSegments()))}updateSegments(){const i=this.shadowRoot?.querySelector("slot");if(!i)return;i.assignedElements().forEach(t=>{if(t.tagName==="SCB-SEGMENTED-ITEM"){const e=t.getAttribute("value")||"";if(e){let s=!1;this.variant==="multi-select"?s=!!this.values&&this.values.includes(e):s=e===this.value,t.setAttribute("aria-pressed",s?"true":"false")}this.disabled&&t.setAttribute("disabled","true")}})}firstUpdated(){this.updateSegments();const i=this.shadowRoot?.querySelector("slot");i&&i.addEventListener("click",r=>this.onSlotClick(r))}updated(){this.updateSegments()}render(){return f`<slot></slot>`}};o.styles=u`
+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`
     :host {
-      display: flex;
+        --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;
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),
@@ -18,4 +24,4 @@ import{a as u,n,i as c,x as f,t as h}from"../../vendor/vendor.js";import"./scb-s
     ::slotted([role="button"]:first-child .segmented-item) {
       border-left: 1px solid var(--md-sys-color-outline);
     }
-  `;d([n({type:String,reflect:!0})],o.prototype,"variant",2);d([n({type:String,reflect:!0})],o.prototype,"value",2);d([n({type:Array})],o.prototype,"values",2);d([n({type:Boolean,reflect:!0})],o.prototype,"disabled",2);o=d([h("scb-segmented-button")],o);
+  `;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);

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

@@ -1,35 +1,38 @@
-import{a as p,n as l,i as u,x as c,t as m}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 s=customElements.define.bind(customElements);customElements.define=function(e,o,t){try{customElements.get(e)||s(e,o,t)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var f=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(i,s,e,o)=>{for(var t=o>1?void 0:o?h(s,e):s,a=i.length-1,n;a>=0;a--)(n=i[a])&&(t=(o?n(s,e,t):n(t))||t);return o&&t&&f(s,e,t),t};let r=class extends u{constructor(){super(...arguments),this.label="",this.value="",this.selected=!1,this.icon="",this.disabled=!1}render(){const s=this.parentElement?.hasAttribute?.("disabled"),e=this.disabled||s;return c`
-      <div class="segmented-item" aria-disabled="${e?"true":"false"}">
-        <md-ripple ?disabled="${e}"></md-ripple>
-        ${this.icon?c`<md-icon>${this.icon}</md-icon>`:""}
-        <span>${this.label}</span>
+import{a as m,n as c,i as p,x as d,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,t,e){try{customElements.get(s)||r(s,t,e)}catch(a){var n=String(a||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,l=(o,r,s,t)=>{for(var e=t>1?void 0:t?b(r,s):r,n=o.length-1,a;n>=0;n--)(a=o[n])&&(e=(t?a(r,s,e):a(e))||e);return t&&e&&h(r,s,e),e};let i=class extends p{constructor(){super(...arguments),this.label="",this.value="",this.selected=!1,this.icon="",this.disabled=!1}render(){const r=this.parentElement?.hasAttribute?.("disabled"),s=this.disabled||r,t=!!this.icon,e=!!this.label;return d`
+      <div class="segmented-item${t||this.selected?" has-icon":""}${e?"":" no-label"}"  aria-disabled="${s?"true":"false"}">
+        <md-ripple ?disabled="${s}"></md-ripple>
+        ${this.selected?t&&e?d`<md-icon>check</md-icon>`:t?d`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>`:d`<md-icon>check</md-icon>`:t?d`<md-icon>${this.icon}</md-icon>`:""}
+        ${e?d`<span>${this.label}</span>`:""}
         <md-focus-ring inward></md-focus-ring>
       </div>
-    `}firstUpdated(){this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","button")}};r.styles=p`
+    `}firstUpdated(){this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","button")}};i.styles=m`
     .segmented-item {
-                display: flex;
-                gap: var(--spacing-3);
-      border: 1px solid var(--md-sys-color-outline);
-      border-left: none;
-      background-color: var(--md-sys-color-surface);
-      padding: var(--spacing-3) var(--spacing-8);
-      font: inherit;
-      cursor: pointer;
-      position: relative;
-      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);
-      color: var(--md-sys-color-on-surface);
-      opacity: 1;
-      pointer-events: auto;
-      transition: opacity 0.2s;
-
+        display: flex;
+        gap: var(--spacing-3);
+        align-items: center;
+        border: 1px solid var(--md-sys-color-outline);
+        border-left: none;
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-3) var(--spacing-4);
+        font: inherit;
+        cursor: pointer;
+        position: relative;
+        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);
+        color: var(--md-sys-color-on-surface);
+        justify-content: center;
+        height: 100%;
+        box-sizing: border-box;
+    }
+    .segmented-item span {
+        white-space: nowrap;
     }
     md-icon {
         font-size: 20px;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
     }
     :host([disabled]) .segmented-item,
     .segmented-item[aria-disabled="true"] {
@@ -69,4 +72,4 @@ import{a as p,n as l,i as u,x as c,t as m}from"../../vendor/vendor.js";import"..
       border-top-right-radius: var(--md-sys-shape-corner-full);
       border-bottom-right-radius: var(--md-sys-shape-corner-full);
     }
-  `;d([l({type:String,reflect:!0})],r.prototype,"label",2);d([l({type:String,reflect:!0})],r.prototype,"value",2);d([l({type:Boolean,reflect:!0})],r.prototype,"selected",2);d([l({type:String,reflect:!0})],r.prototype,"icon",2);d([l({type:Boolean,reflect:!0})],r.prototype,"disabled",2);r=d([m("scb-segmented-item")],r);
+  `;l([c({type:String,reflect:!0})],i.prototype,"label",2);l([c({type:String,reflect:!0})],i.prototype,"value",2);l([c({type:Boolean,reflect:!0})],i.prototype,"selected",2);l([c({type:String,reflect:!0})],i.prototype,"icon",2);l([c({type:Boolean,reflect:!0})],i.prototype,"disabled",2);i=l([u("scb-segmented-item")],i);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.65",
+    "version":  "0.1.67",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -288,5 +288,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "B810390FB9229867E7E92F1C6EEBB44AA185F78A0196EA925D0BABAF1A8DFF33"
+    "buildHash":  "22C1A767F3E412A91BA814122D67B359348A1D40CCFAA832CE2025A7575E496F"
 }

package/scb-accordion/scb-accordion-item.d.ts

@@ -25,6 +25,7 @@ export declare class ScbAccordionItem extends LitElement {
     private _applyInertByOpen;
     private _onToggle;
     private _onKeyDown;
+    /** Programmatisk uppdatering som även speglar <details>. */
     setOpen(on: boolean): void;
     protected updated(changed: Map<string, unknown>): void;
     protected render(): TemplateResult;

package/scb-accordion/scb-accordion-item.js

@@ -14,11 +14,7 @@ let e = class extends v {
       const s = this.closest("scb-accordion");
       this.open && s && !s.hasAttribute("detached") && s.querySelectorAll("scb-accordion-item").forEach((n) => {
         n !== this && n.setOpen(!1);
-      }), this._applyInertByOpen(), this.dispatchEvent(new CustomEvent("open-changed", {
-        detail: { open: this.open, title: this.title },
-        bubbles: !0,
-        composed: !0
-      }));
+      }), this._applyInertByOpen();
     };
   }
   static _uid() {
@@ -52,6 +48,7 @@ let e = class extends v {
         break;
     }
   }
+  /** Programmatisk uppdatering som även speglar <details>. */
   setOpen(t) {
     this.open = !!t;
     const i = this.renderRoot.querySelector("details");
@@ -60,7 +57,11 @@ let e = class extends v {
   updated(t) {
     if (t.has("open")) {
       const i = this.renderRoot.querySelector("details");
-      i && i.open !== this.open && (i.open = this.open), this._applyInertByOpen();
+      i && i.open !== this.open && (i.open = this.open), this._applyInertByOpen(), this.dispatchEvent(new CustomEvent("open-changed", {
+        detail: { open: this.open, title: this.title },
+        bubbles: !0,
+        composed: !0
+      }));
     }
   }
   render() {

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

@@ -1,43 +1,55 @@
-import { css as u, LitElement as c, html as m } from "lit";
-import { property as d, customElement as h } from "lit/decorators.js";
+import { css as a, LitElement as c, html as m } from "lit";
+import { property as n, customElement as h } from "lit/decorators.js";
 import "./scb-segmented-item.js";
-var f = Object.defineProperty, p = Object.getOwnPropertyDescriptor, a = (i, t, s, e) => {
-  for (var r = e > 1 ? void 0 : e ? p(t, s) : t, l = i.length - 1, n; l >= 0; l--)
-    (n = i[l]) && (r = (e ? n(t, s, r) : n(r)) || r);
-  return e && r && f(t, s, r), r;
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, d = (r, i, e, t) => {
+  for (var s = t > 1 ? void 0 : t ? f(i, e) : i, o = r.length - 1, u; o >= 0; o--)
+    (u = r[o]) && (s = (t ? u(i, e, s) : u(s)) || s);
+  return t && s && b(i, e, s), s;
 };
-let o = class extends c {
+let l = class extends c {
   constructor() {
     super(...arguments), this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1;
   }
-  onSlotClick(i) {
-    let t = i.target;
-    if (!t || !t.closest) return;
-    const s = t.closest("scb-segmented-item");
-    if (!s || this.disabled || s.hasAttribute("disabled")) return;
-    const e = s.getAttribute("value") || "";
-    e && (this.variant === "multi-select" ? (this.values.indexOf(e) === -1 ? this.values = [...this.values, e] : this.values = this.values.filter((l) => l !== e), this.dispatchEvent(new CustomEvent("change", { detail: { values: this.values }, bubbles: !0, composed: !0 })), this.updateSegments()) : e !== this.value && (this.value = e, this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 })), this.updateSegments()));
+  onSlotClick(r) {
+    let i = r.target;
+    if (!i || !i.closest) return;
+    const e = i.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() {
-    var s;
-    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
-    if (!i) return;
-    i.assignedElements().forEach((e) => {
-      if (e.tagName === "SCB-SEGMENTED-ITEM") {
-        const r = e.getAttribute("value") || "";
-        if (r) {
-          let l = !1;
-          this.variant === "multi-select" ? l = !!this.values && this.values.includes(r) : l = r === this.value, e.setAttribute("aria-pressed", l ? "true" : "false");
+    var e;
+    const r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    if (!r) return;
+    r.assignedElements().forEach((t) => {
+      if (t.tagName === "SCB-SEGMENTED-ITEM") {
+        const s = t.getAttribute("value") || "";
+        if (s) {
+          let o = !1;
+          this.variant === "multi-select" ? o = !!this.values && this.values.includes(s) : o = s === this.value, t.setAttribute("aria-pressed", o ? "true" : "false"), o ? t.setAttribute("selected", "true") : t.removeAttribute("selected");
         }
-        this.disabled && e.setAttribute("disabled", "true");
+        this.disabled && t.setAttribute("disabled", "true");
       }
     });
   }
   firstUpdated() {
-    var t;
+    var i;
     this.updateSegments();
-    const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
-    i && i.addEventListener("click", (s) => this.onSlotClick(s));
+    const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot");
+    r && (r.addEventListener("click", (e) => this.onSlotClick(e)), r.addEventListener("focus", () => {
+      this.dispatchEvent(new CustomEvent("focus", { detail: {}, bubbles: !0, composed: !0 }));
+    }, !0), r.addEventListener("blur", () => {
+      this.dispatchEvent(new CustomEvent("blur", { detail: {}, bubbles: !0, composed: !0 }));
+    }, !0), r.addEventListener("keydown", (e) => {
+      if (e.code === "Space" || e.code === "Enter" || e.code === "NumpadEnter") {
+        const t = e.target;
+        if (t && t.closest) {
+          const s = t.closest("scb-segmented-item");
+          s && !s.hasAttribute("disabled") && !this.disabled && (this.onSlotClick(e), e.preventDefault());
+        }
+      }
+    }));
   }
   updated() {
     this.updateSegments();
@@ -46,9 +58,15 @@ let o = class extends c {
     return m`<slot></slot>`;
   }
 };
-o.styles = u`
+l.styles = a`
     :host {
-      display: flex;
+        --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;
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),
@@ -67,21 +85,21 @@ o.styles = u`
       border-left: 1px solid var(--md-sys-color-outline);
     }
   `;
-a([
-  d({ type: String, reflect: !0 })
-], o.prototype, "variant", 2);
-a([
-  d({ type: String, reflect: !0 })
-], o.prototype, "value", 2);
-a([
-  d({ type: Array })
-], o.prototype, "values", 2);
-a([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-o = a([
+d([
+  n({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+d([
+  n({ type: String, reflect: !0 })
+], l.prototype, "value", 2);
+d([
+  n({ type: Array })
+], l.prototype, "values", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+l = d([
   h("scb-segmented-button")
-], o);
+], l);
 export {
-  o as ScbSegmentedButton
+  l as ScbSegmentedButton
 };

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

@@ -1,25 +1,25 @@
-import { css as p, LitElement as m, html as c } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
+import { css as m, LitElement as p, html as d } from "lit";
+import { property as l, customElement as h } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/focus/md-focus-ring.js";
 import "@material/web/ripple/ripple.js";
-var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (e, o, i, s) => {
-  for (var r = s > 1 ? void 0 : s ? b(o, i) : o, d = e.length - 1, n; d >= 0; d--)
-    (n = e[d]) && (r = (s ? n(o, i, r) : n(r)) || r);
-  return s && r && h(o, i, r), r;
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (s, o, i, t) => {
+  for (var e = t > 1 ? void 0 : t ? b(o, i) : o, n = s.length - 1, c; n >= 0; n--)
+    (c = s[n]) && (e = (t ? c(o, i, e) : c(e)) || e);
+  return t && e && u(o, i, e), e;
 };
-let t = class extends m {
+let r = class extends p {
   constructor() {
     super(...arguments), this.label = "", this.value = "", this.selected = !1, this.icon = "", this.disabled = !1;
   }
   render() {
-    var s;
-    const e = this.parentElement, o = (s = e == null ? void 0 : e.hasAttribute) == null ? void 0 : s.call(e, "disabled"), i = this.disabled || o;
-    return c`
-      <div class="segmented-item" aria-disabled="${i ? "true" : "false"}">
+    var n;
+    const s = this.parentElement, o = (n = s == null ? void 0 : s.hasAttribute) == null ? void 0 : n.call(s, "disabled"), i = this.disabled || o, t = !!this.icon, e = !!this.label;
+    return d`
+      <div class="segmented-item${t || this.selected ? " has-icon" : ""}${e ? "" : " no-label"}"  aria-disabled="${i ? "true" : "false"}">
         <md-ripple ?disabled="${i}"></md-ripple>
-        ${this.icon ? c`<md-icon>${this.icon}</md-icon>` : ""}
-        <span>${this.label}</span>
+        ${this.selected ? t && e ? d`<md-icon>check</md-icon>` : t ? d`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>` : d`<md-icon>check</md-icon>` : t ? d`<md-icon>${this.icon}</md-icon>` : ""}
+        ${e ? d`<span>${this.label}</span>` : ""}
         <md-focus-ring inward></md-focus-ring>
       </div>
     `;
@@ -28,31 +28,34 @@ let t = class extends m {
     this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("role", "button");
   }
 };
-t.styles = p`
+r.styles = m`
     .segmented-item {
-                display: flex;
-                gap: var(--spacing-3);
-      border: 1px solid var(--md-sys-color-outline);
-      border-left: none;
-      background-color: var(--md-sys-color-surface);
-      padding: var(--spacing-3) var(--spacing-8);
-      font: inherit;
-      cursor: pointer;
-      position: relative;
-      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);
-      color: var(--md-sys-color-on-surface);
-      opacity: 1;
-      pointer-events: auto;
-      transition: opacity 0.2s;
-
+        display: flex;
+        gap: var(--spacing-3);
+        align-items: center;
+        border: 1px solid var(--md-sys-color-outline);
+        border-left: none;
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-3) var(--spacing-4);
+        font: inherit;
+        cursor: pointer;
+        position: relative;
+        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);
+        color: var(--md-sys-color-on-surface);
+        justify-content: center;
+        height: 100%;
+        box-sizing: border-box;
+    }
+    .segmented-item span {
+        white-space: nowrap;
     }
     md-icon {
         font-size: 20px;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
     }
     :host([disabled]) .segmented-item,
     .segmented-item[aria-disabled="true"] {
@@ -95,22 +98,22 @@ t.styles = p`
   `;
 a([
   l({ type: String, reflect: !0 })
-], t.prototype, "label", 2);
+], r.prototype, "label", 2);
 a([
   l({ type: String, reflect: !0 })
-], t.prototype, "value", 2);
+], r.prototype, "value", 2);
 a([
   l({ type: Boolean, reflect: !0 })
-], t.prototype, "selected", 2);
+], r.prototype, "selected", 2);
 a([
   l({ type: String, reflect: !0 })
-], t.prototype, "icon", 2);
+], r.prototype, "icon", 2);
 a([
   l({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-t = a([
-  u("scb-segmented-item")
-], t);
+], r.prototype, "disabled", 2);
+r = a([
+  h("scb-segmented-item")
+], r);
 export {
-  t as ScbSegmentedItem
+  r as ScbSegmentedItem
 };

package/scb-wc-test.bundle.js

@@ -1667,7 +1667,7 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */let vo=class extends _c{constructor(){super(...arguments),this.fieldTag=J`md-outlined-field`}};vo.styles=[Ga,yc],vo=d([g("md-outlined-text-field")],vo);var xc=Object.defineProperty,wc=Object.getOwnPropertyDescriptor,X=(o,e,t,r)=>{for(var i=r>1?void 0:r?wc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&xc(e,t,i),i};a.ScbAccordionItem=class extends y{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=a.ScbAccordionItem._uid(),this._onToggle=e=>{const t=e.currentTarget;this.open=!!t.open;const r=this.closest("scb-accordion");this.open&&r&&!r.hasAttribute("detached")&&r.querySelectorAll("scb-accordion-item").forEach(s=>{s!==this&&s.setOpen(!1)}),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}static _uid(){var e,t;return((t=(e=globalThis.crypto)==null?void 0:e.randomUUID)==null?void 0:t.call(e))??`${a.ScbAccordionItem._uidPrefix}-${++a.ScbAccordionItem._uidSeq}`}async firstUpdated(){a.ScbAccordionItem._mdIconLoaded||(await Promise.resolve().then(()=>Y),a.ScbAccordionItem._mdIconLoaded=!0),a.ScbAccordionItem._mdRippleLoaded||(await Promise.resolve().then(()=>br),a.ScbAccordionItem._mdRippleLoaded=!0),this._applyInertByOpen()}_applyInertByOpen(){const e=this.renderRoot.querySelector(".scb-accordion-bottom"),t=this.renderRoot.querySelector("details");!e||!t||(t.open?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}_onKeyDown(e){const t=this.closest("scb-accordion"),i=Array.from((t==null?void 0:t.querySelectorAll("scb-accordion-item"))||[]).map(h=>{var p;return((p=h.renderRoot.querySelector("details"))==null?void 0:p.querySelector(".scb-accordion-top"))||null}).filter(h=>!!h),s=e.currentTarget,n=i.indexOf(s);switch(e.key){case"ArrowDown":e.preventDefault(),n<i.length-1&&i[n+1].focus();break;case"ArrowUp":e.preventDefault(),n>0&&i[n-1].focus();break;case"Home":e.preventDefault(),i.length&&i[0].focus();break;case"End":e.preventDefault(),i.length&&i[i.length-1].focus();break}}setOpen(e){this.open=!!e;const t=this.renderRoot.querySelector("details");t&&(t.open=this.open),this._applyInertByOpen()}updated(e){if(e.has("open")){const t=this.renderRoot.querySelector("details");t&&t.open!==this.open&&(t.open=this.open),this._applyInertByOpen()}}render(){const e=`bottom-${this._unique}`,t=`header-${this._unique}`,r=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?c`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?c`
+ */let vo=class extends _c{constructor(){super(...arguments),this.fieldTag=J`md-outlined-field`}};vo.styles=[Ga,yc],vo=d([g("md-outlined-text-field")],vo);var xc=Object.defineProperty,wc=Object.getOwnPropertyDescriptor,X=(o,e,t,r)=>{for(var i=r>1?void 0:r?wc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&xc(e,t,i),i};a.ScbAccordionItem=class extends y{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=a.ScbAccordionItem._uid(),this._onToggle=e=>{const t=e.currentTarget;this.open=!!t.open;const r=this.closest("scb-accordion");this.open&&r&&!r.hasAttribute("detached")&&r.querySelectorAll("scb-accordion-item").forEach(s=>{s!==this&&s.setOpen(!1)}),this._applyInertByOpen()}}static _uid(){var e,t;return((t=(e=globalThis.crypto)==null?void 0:e.randomUUID)==null?void 0:t.call(e))??`${a.ScbAccordionItem._uidPrefix}-${++a.ScbAccordionItem._uidSeq}`}async firstUpdated(){a.ScbAccordionItem._mdIconLoaded||(await Promise.resolve().then(()=>Y),a.ScbAccordionItem._mdIconLoaded=!0),a.ScbAccordionItem._mdRippleLoaded||(await Promise.resolve().then(()=>br),a.ScbAccordionItem._mdRippleLoaded=!0),this._applyInertByOpen()}_applyInertByOpen(){const e=this.renderRoot.querySelector(".scb-accordion-bottom"),t=this.renderRoot.querySelector("details");!e||!t||(t.open?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}_onKeyDown(e){const t=this.closest("scb-accordion"),i=Array.from((t==null?void 0:t.querySelectorAll("scb-accordion-item"))||[]).map(h=>{var p;return((p=h.renderRoot.querySelector("details"))==null?void 0:p.querySelector(".scb-accordion-top"))||null}).filter(h=>!!h),s=e.currentTarget,n=i.indexOf(s);switch(e.key){case"ArrowDown":e.preventDefault(),n<i.length-1&&i[n+1].focus();break;case"ArrowUp":e.preventDefault(),n>0&&i[n-1].focus();break;case"Home":e.preventDefault(),i.length&&i[0].focus();break;case"End":e.preventDefault(),i.length&&i[i.length-1].focus();break}}setOpen(e){this.open=!!e;const t=this.renderRoot.querySelector("details");t&&(t.open=this.open),this._applyInertByOpen()}updated(e){if(e.has("open")){const t=this.renderRoot.querySelector("details");t&&t.open!==this.open&&(t.open=this.open),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const e=`bottom-${this._unique}`,t=`header-${this._unique}`,r=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?c`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?c`
               <scb-avatar
                 label=${this.avatarLabel}
                 alt=${this.avatarAlt}
@@ -5918,38 +5918,41 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
     :host([spacing="group"]) ::slotted(scb-radio-button) {
       --scb-radio-gap: 0;
     }
-  `,Et([l({type:String})],a.ScbRadioGroup.prototype,"name",2),Et([l({type:String,reflect:!0})],a.ScbRadioGroup.prototype,"orientation",2),Et([l({type:Boolean,reflect:!0})],a.ScbRadioGroup.prototype,"disabled",2),Et([l({type:String,attribute:"aria-label"})],a.ScbRadioGroup.prototype,"ariaLabel",2),Et([l({type:String,reflect:!0})],a.ScbRadioGroup.prototype,"spacing",2),a.ScbRadioGroup=Et([g("scb-radio-group")],a.ScbRadioGroup);var Ih=Object.defineProperty,zh=Object.getOwnPropertyDescriptor,At=(o,e,t,r)=>{for(var i=r>1?void 0:r?zh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Ih(e,t,i),i};a.ScbSegmentedItem=class extends y{constructor(){super(...arguments),this.label="",this.value="",this.selected=!1,this.icon="",this.disabled=!1}render(){var i;const e=this.parentElement,t=(i=e==null?void 0:e.hasAttribute)==null?void 0:i.call(e,"disabled"),r=this.disabled||t;return c`
-      <div class="segmented-item" aria-disabled="${r?"true":"false"}">
+  `,Et([l({type:String})],a.ScbRadioGroup.prototype,"name",2),Et([l({type:String,reflect:!0})],a.ScbRadioGroup.prototype,"orientation",2),Et([l({type:Boolean,reflect:!0})],a.ScbRadioGroup.prototype,"disabled",2),Et([l({type:String,attribute:"aria-label"})],a.ScbRadioGroup.prototype,"ariaLabel",2),Et([l({type:String,reflect:!0})],a.ScbRadioGroup.prototype,"spacing",2),a.ScbRadioGroup=Et([g("scb-radio-group")],a.ScbRadioGroup);var Ih=Object.defineProperty,zh=Object.getOwnPropertyDescriptor,At=(o,e,t,r)=>{for(var i=r>1?void 0:r?zh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Ih(e,t,i),i};a.ScbSegmentedItem=class extends y{constructor(){super(...arguments),this.label="",this.value="",this.selected=!1,this.icon="",this.disabled=!1}render(){var n;const e=this.parentElement,t=(n=e==null?void 0:e.hasAttribute)==null?void 0:n.call(e,"disabled"),r=this.disabled||t,i=!!this.icon,s=!!this.label;return c`
+      <div class="segmented-item${i||this.selected?" has-icon":""}${s?"":" no-label"}"  aria-disabled="${r?"true":"false"}">
         <md-ripple ?disabled="${r}"></md-ripple>
-        ${this.icon?c`<md-icon>${this.icon}</md-icon>`:""}
-        <span>${this.label}</span>
+        ${this.selected?i&&s?c`<md-icon>check</md-icon>`:i?c`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>`:c`<md-icon>check</md-icon>`:i?c`<md-icon>${this.icon}</md-icon>`:""}
+        ${s?c`<span>${this.label}</span>`:""}
         <md-focus-ring inward></md-focus-ring>
       </div>
     `}firstUpdated(){this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","button")}},a.ScbSegmentedItem.styles=b`
     .segmented-item {
-                display: flex;
-                gap: var(--spacing-3);
-      border: 1px solid var(--md-sys-color-outline);
-      border-left: none;
-      background-color: var(--md-sys-color-surface);
-      padding: var(--spacing-3) var(--spacing-8);
-      font: inherit;
-      cursor: pointer;
-      position: relative;
-      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);
-      color: var(--md-sys-color-on-surface);
-      opacity: 1;
-      pointer-events: auto;
-      transition: opacity 0.2s;
-
+        display: flex;
+        gap: var(--spacing-3);
+        align-items: center;
+        border: 1px solid var(--md-sys-color-outline);
+        border-left: none;
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-3) var(--spacing-4);
+        font: inherit;
+        cursor: pointer;
+        position: relative;
+        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);
+        color: var(--md-sys-color-on-surface);
+        justify-content: center;
+        height: 100%;
+        box-sizing: border-box;
+    }
+    .segmented-item span {
+        white-space: nowrap;
     }
     md-icon {
         font-size: 20px;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
     }
     :host([disabled]) .segmented-item,
     .segmented-item[aria-disabled="true"] {
@@ -5989,9 +5992,15 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
       border-top-right-radius: var(--md-sys-shape-corner-full);
       border-bottom-right-radius: var(--md-sys-shape-corner-full);
     }
-  `,At([l({type:String,reflect:!0})],a.ScbSegmentedItem.prototype,"label",2),At([l({type:String,reflect:!0})],a.ScbSegmentedItem.prototype,"value",2),At([l({type:Boolean,reflect:!0})],a.ScbSegmentedItem.prototype,"selected",2),At([l({type:String,reflect:!0})],a.ScbSegmentedItem.prototype,"icon",2),At([l({type:Boolean,reflect:!0})],a.ScbSegmentedItem.prototype,"disabled",2),a.ScbSegmentedItem=At([g("scb-segmented-item")],a.ScbSegmentedItem);var Th=Object.defineProperty,Oh=Object.getOwnPropertyDescriptor,lr=(o,e,t,r)=>{for(var i=r>1?void 0:r?Oh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Th(e,t,i),i};a.ScbSegmentedButton=class extends y{constructor(){super(...arguments),this.variant="single-select",this.value="",this.values=[],this.disabled=!1}onSlotClick(e){let t=e.target;if(!t||!t.closest)return;const r=t.closest("scb-segmented-item");if(!r||this.disabled||r.hasAttribute("disabled"))return;const i=r.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(){var r;const e=(r=this.shadowRoot)==null?void 0:r.querySelector("slot");if(!e)return;e.assignedElements().forEach(i=>{if(i.tagName==="SCB-SEGMENTED-ITEM"){const s=i.getAttribute("value")||"";if(s){let n=!1;this.variant==="multi-select"?n=!!this.values&&this.values.includes(s):n=s===this.value,i.setAttribute("aria-pressed",n?"true":"false")}this.disabled&&i.setAttribute("disabled","true")}})}firstUpdated(){var t;this.updateSegments();const e=(t=this.shadowRoot)==null?void 0:t.querySelector("slot");e&&e.addEventListener("click",r=>this.onSlotClick(r))}updated(){this.updateSegments()}render(){return c`<slot></slot>`}},a.ScbSegmentedButton.styles=b`
+  `,At([l({type:String,reflect:!0})],a.ScbSegmentedItem.prototype,"label",2),At([l({type:String,reflect:!0})],a.ScbSegmentedItem.prototype,"value",2),At([l({type:Boolean,reflect:!0})],a.ScbSegmentedItem.prototype,"selected",2),At([l({type:String,reflect:!0})],a.ScbSegmentedItem.prototype,"icon",2),At([l({type:Boolean,reflect:!0})],a.ScbSegmentedItem.prototype,"disabled",2),a.ScbSegmentedItem=At([g("scb-segmented-item")],a.ScbSegmentedItem);var Th=Object.defineProperty,Oh=Object.getOwnPropertyDescriptor,lr=(o,e,t,r)=>{for(var i=r>1?void 0:r?Oh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Th(e,t,i),i};a.ScbSegmentedButton=class extends y{constructor(){super(...arguments),this.variant="single-select",this.value="",this.values=[],this.disabled=!1}onSlotClick(e){let t=e.target;if(!t||!t.closest)return;const r=t.closest("scb-segmented-item");if(!r||this.disabled||r.hasAttribute("disabled"))return;const i=r.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(){var r;const e=(r=this.shadowRoot)==null?void 0:r.querySelector("slot");if(!e)return;e.assignedElements().forEach(i=>{if(i.tagName==="SCB-SEGMENTED-ITEM"){const s=i.getAttribute("value")||"";if(s){let n=!1;this.variant==="multi-select"?n=!!this.values&&this.values.includes(s):n=s===this.value,i.setAttribute("aria-pressed",n?"true":"false"),n?i.setAttribute("selected","true"):i.removeAttribute("selected")}this.disabled&&i.setAttribute("disabled","true")}})}firstUpdated(){var t;this.updateSegments();const e=(t=this.shadowRoot)==null?void 0:t.querySelector("slot");e&&(e.addEventListener("click",r=>this.onSlotClick(r)),e.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{detail:{},bubbles:!0,composed:!0}))},!0),e.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{detail:{},bubbles:!0,composed:!0}))},!0),e.addEventListener("keydown",r=>{if(r.code==="Space"||r.code==="Enter"||r.code==="NumpadEnter"){const i=r.target;if(i&&i.closest){const s=i.closest("scb-segmented-item");s&&!s.hasAttribute("disabled")&&!this.disabled&&(this.onSlotClick(r),r.preventDefault())}}}))}updated(){this.updateSegments()}render(){return c`<slot></slot>`}},a.ScbSegmentedButton.styles=b`
     :host {
-      display: flex;
+        --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;
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),