scb-wc-test 0.1.63 → 0.1.65

package/all.js

@@ -46,6 +46,8 @@ import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
 import './mvc/components/scb-radio-button/scb-radio-button.js';
 import './mvc/components/scb-radio-button/scb-radio-group.js';
 import './mvc/components/scb-search/scb-search.js';
+import './mvc/components/scb-segmented-button/scb-segmented-button.js';
+import './mvc/components/scb-segmented-button/scb-segmented-item.js';
 import './mvc/components/scb-snackbar/scb-snackbar.js';
 import './mvc/components/scb-status-pill/scb-status-pill.js';
 import './mvc/components/scb-switch/scb-switch.js';
@@ -105,6 +107,8 @@ import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';
 import './scb-search/scb-search.js';
+import './scb-segmented-button/scb-segmented-button.js';
+import './scb-segmented-button/scb-segmented-item.js';
 import './scb-snackbar/scb-snackbar.js';
 import './scb-status-pill/scb-status-pill.js';
 import './scb-switch/scb-switch.js';

package/index.d.ts

@@ -43,6 +43,8 @@ export * from './scb-progress-indicator/scb-progress-indicator';
 export * from './scb-radio-button/scb-radio-button';
 export * from './scb-radio-button/scb-radio-group';
 export * from './scb-search/scb-search';
+export * from './scb-segmented-button/scb-segmented-button';
+export * from './scb-segmented-button/scb-segmented-item';
 export * from './scb-snackbar/scb-snackbar';
 export * from './scb-status-pill/scb-status-pill';
 export * from './scb-switch/scb-switch';

package/index.js

@@ -6,13 +6,13 @@ import { SCBBreadcrumbItem as f } from "./scb-breadcrumb/scb-breadcrumb-item.js"
 import { SCBBreadcrumb as i } from "./scb-breadcrumb/scb-breadcrumb.js";
 import { ScbButton as n } from "./scb-button/scb-button.js";
 import { ScbCalendarCard as C } from "./scb-calendar-card/scb-calendar-card.js";
-import { ScbCard as I } from "./scb-card/scb-card.js";
+import { ScbCard as l } from "./scb-card/scb-card.js";
 import { ScbCheckboxGroup as D } from "./scb-checkbox/scb-checkbox-group.js";
 import { ScbCheckbox as w } from "./scb-checkbox/scb-checkbox.js";
 import { ScbChip as F } from "./scb-chip/scb-chip.js";
-import { ScbDialog as h } from "./scb-dialog/scb-dialog.js";
-import { ScbDivider as G } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as A } from "./scb-drawer/scb-drawer-item.js";
+import { ScbDialog as g } from "./scb-dialog/scb-dialog.js";
+import { ScbDivider as k } from "./scb-divider/scb-divider.js";
+import { ScbDrawerItem as y } from "./scb-drawer/scb-drawer-item.js";
 import { ScbDrawerSection as L } from "./scb-drawer/scb-drawer-section.js";
 import { ScbDrawer as P } from "./scb-drawer/scb-drawer.js";
 import { ScbSubDrawer as N } from "./scb-drawer/scb-sub-drawer.js";
@@ -33,26 +33,28 @@ import { ScbIconButton as fr } from "./scb-icon-button/scb-icon-button.js";
 import { ScbKeyFigureCard as ir } from "./scb-keyfigure-card/scb-keyfigure-card.js";
 import { ScbLink as nr } from "./scb-link/scb-link.js";
 import { ScbListItem as Cr } from "./scb-list/scb-list-item.js";
-import { ScbList as Ir } from "./scb-list/scb-list.js";
+import { ScbList as lr } from "./scb-list/scb-list.js";
 import { ScbMenuItem as Dr } from "./scb-menu/scb-menu-item.js";
 import { ScbMenu as wr } from "./scb-menu/scb-menu.js";
 import { ScbSubMenu as Fr } from "./scb-menu/scb-sub-menu.js";
-import { ScbNotification as hr } from "./scb-notification/scb-notification.js";
-import { ScbNotificationCard as Gr } from "./scb-notification-card/scb-notification-card.js";
-import { ScbProgressIndicator as Ar } from "./scb-progress-indicator/scb-progress-indicator.js";
+import { ScbNotification as gr } from "./scb-notification/scb-notification.js";
+import { ScbNotificationCard as kr } from "./scb-notification-card/scb-notification-card.js";
+import { ScbProgressIndicator as yr } from "./scb-progress-indicator/scb-progress-indicator.js";
 import { ScbRadioButton as Lr } from "./scb-radio-button/scb-radio-button.js";
 import { ScbRadioGroup as Pr } from "./scb-radio-button/scb-radio-group.js";
 import { ScbSearch as Nr } from "./scb-search/scb-search.js";
-import { ScbSnackbar as zr } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as Ur } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as qr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as Jr } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as Qr } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as Wr } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as Yr } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as _r } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as ro } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as eo } from "./scb-tooltip/scb-tooltip.js";
+import { ScbSegmentedButton as zr } from "./scb-segmented-button/scb-segmented-button.js";
+import { ScbSegmentedItem as Ur } from "./scb-segmented-button/scb-segmented-item.js";
+import { ScbSnackbar as qr } from "./scb-snackbar/scb-snackbar.js";
+import { ScbStatusPill as Jr } from "./scb-status-pill/scb-status-pill.js";
+import { ScbSwitch as Qr } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as Wr } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as Yr } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as _r } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField2 as ro } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as eo } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as co } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as So } from "./scb-tooltip/scb-tooltip.js";
 export {
   i as SCBBreadcrumb,
   f as SCBBreadcrumbItem,
@@ -62,14 +64,14 @@ export {
   p as ScbAvatar,
   n as ScbButton,
   C as ScbCalendarCard,
-  I as ScbCard,
+  l as ScbCard,
   w as ScbCheckbox,
   D as ScbCheckboxGroup,
   F as ScbChip,
-  h as ScbDialog,
-  G as ScbDivider,
+  g as ScbDialog,
+  k as ScbDivider,
   P as ScbDrawer,
-  A as ScbDrawerItem,
+  y as ScbDrawerItem,
   L as ScbDrawerSection,
   U as ScbFactCard,
   z as ScbFactCardContent,
@@ -86,27 +88,29 @@ export {
   fr as ScbIconButton,
   ir as ScbKeyFigureCard,
   nr as ScbLink,
-  Ir as ScbList,
+  lr as ScbList,
   Cr as ScbListItem,
   wr as ScbMenu,
   Dr as ScbMenuItem,
-  hr as ScbNotification,
-  Gr as ScbNotificationCard,
-  Jr as ScbPrimaryTab,
-  Ar as ScbProgressIndicator,
+  gr as ScbNotification,
+  kr as ScbNotificationCard,
+  Wr as ScbPrimaryTab,
+  yr as ScbProgressIndicator,
   Lr as ScbRadioButton,
   Pr as ScbRadioGroup,
   Nr as ScbSearch,
-  Qr as ScbSecondaryTab,
-  zr as ScbSnackbar,
+  Yr as ScbSecondaryTab,
+  zr as ScbSegmentedButton,
+  Ur as ScbSegmentedItem,
+  qr as ScbSnackbar,
   Y as ScbStack,
-  Ur as ScbStatusPill,
+  Jr as ScbStatusPill,
   N as ScbSubDrawer,
   Fr as ScbSubMenu,
-  qr as ScbSwitch,
-  Wr as ScbTabs,
-  Yr as ScbTextField2,
-  ro as ScbToc,
-  _r as ScbTocItem,
-  eo as ScbTooltip
+  Qr as ScbSwitch,
+  _r as ScbTabs,
+  ro as ScbTextField2,
+  co as ScbToc,
+  eo as ScbTocItem,
+  So as ScbTooltip
 };

package/mvc/components/all.js

@@ -43,6 +43,8 @@ import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';
 import './scb-search/scb-search.js';
+import './scb-segmented-button/scb-segmented-button.js';
+import './scb-segmented-button/scb-segmented-item.js';
 import './scb-snackbar/scb-snackbar.js';
 import './scb-status-pill/scb-status-pill.js';
 import './scb-switch/scb-switch.js';

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

@@ -1,53 +1,43 @@
 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 v,n as o,i as u,E as p,x as l,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(n,a,s){try{customElements.get(n)||r(n,a,s)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var h=Object.defineProperty,m=Object.getOwnPropertyDescriptor,i=(e,r,n,a)=>{for(var s=a>1?void 0:a?m(r,n):r,d=e.length-1,c;d>=0;d--)(c=e[d])&&(s=(a?c(r,n,s):c(s))||s);return a&&s&&h(r,n,s),s};let t=class extends u{constructor(){super(...arguments),this.expanded=!1,this.label="",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=t._uid(),this.toggleAccordion=()=>{const e=this.closest("scb-accordion");e?.hasAttribute("detached")||e.querySelectorAll("scb-accordion-item").forEach(n=>{n!==this&&(n.expanded=!1,n._applyInert())}),this.expanded=!this.expanded,this._applyInert()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${t._uidPrefix}-${++t._uidSeq}`}async firstUpdated(){t._mdIconLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),t._mdIconLoaded=!0),t._mdRippleLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),t._mdRippleLoaded=!0),this._applyInert()}disconnectedCallback(){super.disconnectedCallback()}_onKeyDown(e){const r=this.closest("scb-accordion"),a=Array.from(r?.querySelectorAll("scb-accordion-item")||[]).map(c=>c.renderRoot.querySelector(".scb-accordion-top")).filter(c=>!!c),s=e.currentTarget,d=a.indexOf(s);switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleAccordion();break;case"ArrowDown":e.preventDefault(),d<a.length-1&&a[d+1].focus();break;case"ArrowUp":e.preventDefault(),d>0&&a[d-1].focus();break;case"Home":e.preventDefault(),a.length&&a[0].focus();break;case"End":e.preventDefault(),a.length&&a[a.length-1].focus();break}}_renderLeading(){if(!this.leading)return p;switch(this.leadingVariant){case"icon":return l`<md-icon>${this.leadingIcon}</md-icon>`;case"avatar":return l`
-          <scb-avatar
-            label=${this.avatarLabel}
-            alt=${this.avatarAlt}
-            src=${this.avatarVariant==="image"?this.avatarSrc:""}
-            size="medium"
-            shape="circular"
-            variant=${this.avatarVariant}
-          ></scb-avatar>
-        `;case"image":return this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:p;default:return p}}_applyInert(){const e=this.renderRoot.querySelector(".scb-accordion-bottom");e&&(this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}_emitExpandedChanged(){this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0}))}updated(e){e.has("expanded")&&(this._applyInert(),e.get("expanded")!==void 0&&this._emitExpandedChanged())}render(){const e=`bottom-${this._unique}`,r=`header-${this._unique}`;return l`
-      <div part="scb-accordion-item" class="scb-accordion-item">
-        <div
-          id=${r}
+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`
+              <scb-avatar
+                label=${this.avatarLabel}
+                alt=${this.avatarAlt}
+                src=${this.avatarVariant==="image"?this.avatarSrc:""}
+                size="medium"
+                shape="circular"
+                variant=${this.avatarVariant}
+              ></scb-avatar>
+            `:this.leadingVariant==="icon"?l`<md-icon>${this.leadingIcon}</md-icon>`:p:p;return l`
+      <details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
+        <summary
+          id=${i}
           class="scb-accordion-top"
-          tabindex="0"
-          role="button"
-          aria-expanded=${this.expanded}
-          aria-controls=${e}
-          @click=${this.toggleAccordion}
+          aria-controls=${t}
           @keydown=${this._onKeyDown}
         >
           <md-ripple></md-ripple>
 
-          ${this.leading?l`<div class="leading">${this._renderLeading()}</div>`:p}
+          ${this.leading?l`<div class="leading">${o}</div>`:p}
 
           <div class="texts">
             ${this.overline?l`<div class="overline">${this.overline}</div>`:p}
-            <div class="label">${this.label}</div>
+            <div class="title">${this.title}</div>
             ${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:p}
           </div>
 
-          <md-icon class="chevron">${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}</md-icon>
-        </div>
+          <md-icon class="chevron">keyboard_arrow_down</md-icon>
+        </summary>
 
-        <div
-          id=${e}
-          class="scb-accordion-bottom ${this.expanded?"expanded":""}"
-          role="region"
-          aria-labelledby=${r}
-          aria-hidden=${this.expanded?"false":"true"}
-        >
+        <div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
           <div class="bottom-inner">
             <slot>${this.content}</slot>
           </div>
         </div>
-      </div>
+      </details>
 
-      <md-focus-ring for=${r} inward></md-focus-ring>
-    `}};t._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;t._uidSeq=0;t._mdIconLoaded=!1;t._mdRippleLoaded=!1;t.styles=[v`
+      <md-focus-ring for=${i} inward></md-focus-ring>
+    `}};e._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;e._uidSeq=0;e._mdIconLoaded=!1;e._mdRippleLoaded=!1;e.styles=[u`
       :host {
         display: block;
         position: relative;
@@ -68,28 +58,29 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
       .scb-accordion-item {
         border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
         margin-bottom: calc(var(--stroke-border, 1px) * -1);
-        display: flex;
-        flex-direction: column;
         color: var(--md-sys-color-on-surface);
         font-family: var(--brand-font);
       }
 
+      /* Header */
       .scb-accordion-top {
+        list-style: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         cursor: pointer;
         padding-block: var(--spacing-7, 24px);
         padding-inline: var(--spacing-5, 16px);
-        outline: none;
         border-radius: var(--radius-none, 0px);
         gap: var(--spacing-5, 16px);
         color: var(--md-sys-color-on-surface);
         position: relative;
-        overflow: visible;
+        overflow: hidden;
         -webkit-tap-highlight-color: transparent;
+        outline: none;
       }
-      .scb-accordion-top:hover { border-radius: var(--scb-accordion-hover-radius); }
+      .scb-accordion-top::-webkit-details-marker { display: none; }
+      summary::marker { content: ''; }
 
       :host([density="-2"]) .scb-accordion-top,
       :host-context([data-density="-2"]) .scb-accordion-top {
@@ -100,6 +91,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
         padding-block: var(--spacing-4, 12px);
       }
 
+      /* Panelinnehåll + animationer (grid 0fr -> 1fr) */
       .scb-accordion-bottom {
         display: grid;
         grid-template-rows: 0fr;
@@ -112,7 +104,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
         padding-block: var(--scb-accordion-panel-padding-closed);
         padding-inline: var(--spacing-5, 16px);
       }
-      .scb-accordion-bottom.expanded {
+      details[open] .scb-accordion-bottom {
         grid-template-rows: 1fr;
         opacity: 1;
         padding-top: var(--spacing-2, 4px);
@@ -122,7 +114,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
       }
       .bottom-inner { overflow: hidden; }
 
-      .label {
+      .title {
         font-family: var(--brand-font);
         font-size: var(--md-sys-typescale-title-large-size);
         line-height: var(--md-sys-typescale-title-large-line-height);
@@ -156,7 +148,14 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
       }
 
       .texts { display: grid; gap: var(--spacing-1, 2px); }
-      .chevron { margin-left: auto; padding-top: var(--scb-accordion-chevron-nudge-y, 3px); font-size: var(--icon-size-small, 24px); }
+
+      .chevron {
+        margin-left: auto;
+        padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
+        font-size: var(--icon-size-small, 24px);
+        transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
+      }
+      details[open] .chevron { transform: rotate(180deg); }
 
       md-ripple {
         border-radius: inherit;
@@ -165,5 +164,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
         pointer-events: none;
         overflow: hidden;
       }
-      @media (prefers-reduced-motion: reduce) { md-ripple { display: none; } }
-    `];i([o({type:Boolean})],t.prototype,"expanded",2);i([o({type:String,reflect:!0})],t.prototype,"label",2);i([o({type:String})],t.prototype,"content",2);i([o({type:String,attribute:"overline"})],t.prototype,"overline",2);i([o({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);i([o({type:Boolean})],t.prototype,"leading",2);i([o({type:String,attribute:"leading-variant",reflect:!0})],t.prototype,"leadingVariant",2);i([o({type:String,attribute:"leading-icon"})],t.prototype,"leadingIcon",2);i([o({type:String,attribute:"img-href-image",reflect:!0})],t.prototype,"imgHrefImage",2);i([o({type:String,attribute:"avatar-label"})],t.prototype,"avatarLabel",2);i([o({type:String,attribute:"avatar-alt"})],t.prototype,"avatarAlt",2);i([o({type:String,attribute:"avatar-variant"})],t.prototype,"avatarVariant",2);i([o({type:String,attribute:"avatar-src"})],t.prototype,"avatarSrc",2);i([o({type:Number,reflect:!0})],t.prototype,"density",2);t=i([b("scb-accordion-item")],t);
+      @media (prefers-reduced-motion: reduce) {
+        md-ripple { display: none; }
+      }
+    `];a([s({type:Boolean,reflect:!0})],e.prototype,"open",2);a([s({type:String,reflect:!0})],e.prototype,"title",2);a([s({type:String})],e.prototype,"content",2);a([s({type:String,attribute:"overline"})],e.prototype,"overline",2);a([s({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);a([s({type:Boolean})],e.prototype,"leading",2);a([s({type:String,attribute:"leading-variant",reflect:!0})],e.prototype,"leadingVariant",2);a([s({type:String,attribute:"leading-icon"})],e.prototype,"leadingIcon",2);a([s({type:String,attribute:"img-href-image",reflect:!0})],e.prototype,"imgHrefImage",2);a([s({type:String,attribute:"avatar-label"})],e.prototype,"avatarLabel",2);a([s({type:String,attribute:"avatar-alt"})],e.prototype,"avatarAlt",2);a([s({type:String,attribute:"avatar-variant"})],e.prototype,"avatarVariant",2);a([s({type:String,attribute:"avatar-src"})],e.prototype,"avatarSrc",2);a([s({type:Number,reflect:!0})],e.prototype,"density",2);e=a([v("scb-accordion-item")],e);

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

@@ -0,0 +1,21 @@
+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`
+    :host {
+      display: flex;
+    }
+    /* Border radius only on first and last button */
+    ::slotted(scb-segmented-item: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) {
+      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) {
+      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);

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

@@ -0,0 +1,72 @@
+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>
+        <md-focus-ring inward></md-focus-ring>
+      </div>
+    `}firstUpdated(){this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","button")}};r.styles=p`
+    .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;
+
+    }
+    md-icon {
+        font-size: 20px;
+        width: 18px;
+        height: 18px;
+    }
+    :host([disabled]) .segmented-item,
+    .segmented-item[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      filter: grayscale(0.5);
+    }
+    :host([aria-pressed="true"]) .segmented-item {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-primary);
+    }
+    :host(:focus){
+      outline: none;
+    }
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+    :host(:focus) md-focus-ring,
+    md-focus-ring[data-show="true"] {
+      display: block;
+    }
+    :host([disabled]):host(:focus) md-focus-ring,
+    :host([disabled]) md-focus-ring[data-show="true"] {
+      display: none;
+    }
+    :host(:first-child) .segmented-item{
+        border: 1px solid var(--md-sys-color-outline);
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    :host(:last-child) .segmented-item {
+      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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.63",
+    "version":  "0.1.65",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -238,6 +238,14 @@
                                          "import":  "./scb-search/scb-search.js",
                                          "require":  "./scb-search/scb-search.js"
                                      },
+                    "./scb-segmented-button":  {
+                                                   "import":  "./scb-segmented-button/scb-segmented-button.js",
+                                                   "require":  "./scb-segmented-button/scb-segmented-button.js"
+                                               },
+                    "./scb-segmented-button/scb-segmented-item":  {
+                                                                      "import":  "./scb-segmented-button/scb-segmented-item.js",
+                                                                      "require":  "./scb-segmented-button/scb-segmented-item.js"
+                                                                  },
                     "./scb-snackbar":  {
                                            "import":  "./scb-snackbar/scb-snackbar.js",
                                            "require":  "./scb-snackbar/scb-snackbar.js"
@@ -280,5 +288,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "E492862AA916AE07F7AF99579CC78F959F68B95FACD6E0585D36D72D53A91B61"
+    "buildHash":  "B810390FB9229867E7E92F1C6EEBB44AA185F78A0196EA925D0BABAF1A8DFF33"
 }

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

@@ -1,7 +1,7 @@
 import { TemplateResult, LitElement } from 'lit';
 export declare class ScbAccordionItem extends LitElement {
-    expanded: boolean;
-    label: string;
+    open: boolean;
+    title: string;
     content: string;
     overline: string;
     supportingText: string;
@@ -18,16 +18,14 @@ export declare class ScbAccordionItem extends LitElement {
     private static _uidSeq;
     private static _uid;
     private _unique;
-    static _mdIconLoaded: boolean;
-    static _mdRippleLoaded: boolean;
+    private static _mdIconLoaded;
+    private static _mdRippleLoaded;
     protected firstUpdated(): Promise<void>;
-    disconnectedCallback(): void;
     static styles: import('lit').CSSResult[];
-    private toggleAccordion;
+    private _applyInertByOpen;
+    private _onToggle;
     private _onKeyDown;
-    private _renderLeading;
-    private _applyInert;
-    private _emitExpandedChanged;
+    setOpen(on: boolean): void;
     protected updated(changed: Map<string, unknown>): void;
     protected render(): TemplateResult;
 }