scb-wc-test 0.1.75 → 0.1.77

package/mvc/components/scb-app-bar/scb-app-bar.js

@@ -1,4 +1,4 @@
-import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
+import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(a,t,i){try{customElements.get(a)||s(a,t,i)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(e,s,a,t)=>{for(var i=t>1?void 0:t?v(s,a):s,n=e.length-1,o;n>=0;n--)(o=e[n])&&(i=(t?o(s,a,i):o(i))||i);return t&&i&&g(s,a,i),i};let l=class extends c{constructor(){super(...arguments),this.title="",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(t=>{t.tagName==="SCB-AVATAR"&&t.setAttribute("size","small")})}updated(e){e.has("title")&&this.dispatchEvent(new CustomEvent("title-changed",{detail:{title:this.title},bubbles:!0,composed:!0})),e.has("position")&&this.dispatchEvent(new CustomEvent("position-changed",{detail:{position:this.position},bubbles:!0,composed:!0})),e.has("type")&&this.dispatchEvent(new CustomEvent("type-changed",{detail:{type:this.type},bubbles:!0,composed:!0})),e.has("searchSupportingText")&&this.dispatchEvent(new CustomEvent("search-supporting-text-changed",{detail:{searchSupportingText:this.searchSupportingText},bubbles:!0,composed:!0}))}render(){switch(this.type){case"small-flexible":return r`
                     <header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
                         <div class="leading">
                             <slot name="leading"></slot>
@@ -62,6 +62,7 @@ import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"..
                 `}}};l.styles=[h`
             :host {
                 display: block;
+                font-family: var(--brand, Inter);
                 position: relative;
                 container-type: inline-size;
                 container-name: app-bar-container;
@@ -155,4 +156,4 @@ import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"..
                 display: flex;
                 align-items: center;
             }
-        `];p([d({type:String})],l.prototype,"title",2);p([d({type:String})],l.prototype,"type",2);p([d({type:String,reflect:!0})],l.prototype,"position",2);p([d({type:String,attribute:"search-supporting-text"})],l.prototype,"searchSupportingText",2);l=p([g("scb-app-bar")],l);
+        `];p([d({type:String})],l.prototype,"title",2);p([d({type:String})],l.prototype,"type",2);p([d({type:String,reflect:!0})],l.prototype,"position",2);p([d({type:String,attribute:"search-supporting-text"})],l.prototype,"searchSupportingText",2);l=p([m("scb-app-bar")],l);

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

@@ -46,7 +46,11 @@ import{_ as d}from"../../vendor/preload-helper.js";import{a as h,n,i as m,E as p
         ${this.renderBody(t,e)}
       </div>
     `}};i.styles=h`
-    :host { display:block; position:relative; }
+    :host { 
+      display:block; 
+      position:relative;
+      font-family: var(--brand, Inter); 
+    }
 
     .scrim {
       position: var(--scb-dialog-scrim-position, fixed);

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

@@ -1,17 +1,19 @@
-import{a as u,n as l,i as p,x as d,t as h}from"../../vendor/vendor.js";import"./scb-menu-item.js";import"./scb-sub-menu.js";import"../scb-divider/scb-divider.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,i,n){try{customElements.get(e)||s(e,i,n)}catch(r){var o=String(r||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var m=Object.defineProperty,_=Object.getOwnPropertyDescriptor,c=(t,s,e,i)=>{for(var n=i>1?void 0:i?_(s,e):s,o=t.length-1,r;o>=0;o--)(r=t[o])&&(n=(i?r(s,e,n):r(n))||n);return i&&n&&m(s,e,n),n};let a=class extends p{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.__lastTriggerEl=null,this.__onDocumentClick=t=>{if(!this.inSb&&this.open&&!this.isClickInScbMenu(t)){this.__setOpen(!1);return}const s=this.__getActionFromEvent(t);if(s){s==="open"&&(this.__setOpen(!0),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))),s==="close"&&(this.__setOpen(!1),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))),s==="toggle"&&(this.__setOpen(!this.open),this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0}))),t.stopPropagation();return}},this.__onDocumentKeydown=t=>{if(this.open&&t.key==="Escape"){this.__setOpen(!1);return}}}render(){return d`
+import{a as u,n as l,i as p,x as d,t as h}from"../../vendor/vendor.js";import"./scb-menu-item.js";import"./scb-sub-menu.js";import"../scb-divider/scb-divider.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 n=customElements.define.bind(customElements);customElements.define=function(e,i,s){try{customElements.get(e)||n(e,i,s)}catch(r){var o=String(r||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var m=Object.defineProperty,_=Object.getOwnPropertyDescriptor,c=(t,n,e,i)=>{for(var s=i>1?void 0:i?_(n,e):n,o=t.length-1,r;o>=0;o--)(r=t[o])&&(s=(i?r(n,e,s):r(s))||s);return i&&s&&m(n,e,s),s};let a=class extends p{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.__lastTriggerEl=null,this.__onDocumentClick=t=>{if(!this.inSb&&this.open&&!this.isClickInScbMenu(t)){this.__setOpen(!1);return}const n=this.__getActionFromEvent(t);if(n){n==="open"&&(this.__setOpen(!0),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))),n==="close"&&(this.__setOpen(!1),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))),n==="toggle"&&(this.__setOpen(!this.open),this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0}))),t.stopPropagation();return}},this.__onDocumentKeydown=t=>{if(this.open&&t.key==="Escape"){this.__setOpen(!1);return}}}render(){return d`
       <div
         role="menu"
         class="scb-menu-panel${this.open?" open":""}"
       >
         <slot></slot>
       </div>
-    `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),super.disconnectedCallback()}__setOpen(t){this.open=t}__getActionFromEvent(t){if(!this.id)return null;const s=t.composedPath();for(const e of s)if(e instanceof Element){if(e.getAttribute("data-menu-open")===this.id)return this.__lastTriggerEl=e,"open";if(e.getAttribute("data-menu-close")===this.id)return this.__lastTriggerEl=e,"close";if(e.getAttribute("data-menu-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}isClickInScbMenu(t){return t.composedPath().some(e=>e instanceof Element&&(e.tagName==="SCB-MENU"||e.tagName==="SCB-SUB-MENU"))}updated(t){t.has("open")&&(this.__applyOpenSideEffects(),this.open?this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}__applyOpenSideEffects(){this.__updateTriggersExpanded()}__updateTriggersExpanded(){if(!this.id)return;document.querySelectorAll(`[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`).forEach(s=>{s.hasAttribute("aria-controls")&&s.setAttribute("aria-expanded",String(this.open))})}};a.styles=u`
+    `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),super.disconnectedCallback()}__setOpen(t){this.open=t}__getActionFromEvent(t){if(!this.id)return null;const n=t.composedPath();for(const e of n)if(e instanceof Element){if(e.getAttribute("data-menu-open")===this.id)return this.__lastTriggerEl=e,"open";if(e.getAttribute("data-menu-close")===this.id)return this.__lastTriggerEl=e,"close";if(e.getAttribute("data-menu-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}isClickInScbMenu(t){return t.composedPath().some(e=>e instanceof Element&&(e.tagName==="SCB-MENU"||e.tagName==="SCB-SUB-MENU"))}updated(t){t.has("open")&&(this.__applyOpenSideEffects(),this.open?this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}__applyOpenSideEffects(){this.__updateTriggersExpanded()}__updateTriggersExpanded(){if(!this.id)return;document.querySelectorAll(`[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`).forEach(n=>{n.hasAttribute("aria-controls")&&n.setAttribute("aria-expanded",String(this.open))})}};a.styles=u`
     :host {
       position: absolute;
       display: block;
       width: fit-content;
+      font-family: var(--brand-font);
       --scb-menu-max-width: 300px;
       --scb-menu-max-height: 600px;
+      z-index: 1000;
     }
     :host > .scb-menu-panel {
       padding: var(--spacing-3) 0;

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

@@ -7,6 +7,7 @@ import{a as u,n as a,i as c,x as h,t as m}from"../../vendor/vendor.js";import"./
         display: grid;
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
+        font-family: var(--brand, Inter);
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),

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

@@ -1,74 +1,125 @@
-import{a as p,n as i,i as m,x as s,t as h}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(r,n,o){try{customElements.get(r)||l(r,n,o)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,e=(d,l,r,n)=>{for(var o=n>1?void 0:n?v(l,r):l,a=d.length-1,c;a>=0;a--)(c=d[a])&&(o=(n?c(l,r,o):c(o))||o);return n&&o&&b(l,r,o),o};let t=class extends m{constructor(){super(...arguments),this.label="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.icon=""}render(){switch(this.symbolVariant){case"icon":return s`
-            <div class="symbol">
-                ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<md-icon>${this.icon}</md-icon>`}
-            </div>
-            
-            <div class="content">
-                <div class="label">${this.label}</div>
-                <slot></slot>
-            </div>
-        `;case"marker":return s`
-            <div class="symbol">
-            </div>
-            <div class="content">
-                <div class="label">${this.label}</div>
-                <slot></slot>
-            </div>
-        `;default:return s`
-            <div class="symbol">
-                ${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<span>${this.number}</span>`}
-            </div>
-            <div class="content">
-                <div class="label">${this.label}</div>
-                <slot></slot>
-            </div>
-        `}}};t.styles=p`
+import{a as m,n as a,i 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 i=customElements.define.bind(customElements);customElements.define=function(o,n,r){try{customElements.get(o)||i(o,n,r)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(e,i,o,n)=>{for(var r=n>1?void 0:n?u(i,o):i,c=e.length-1,d;c>=0;c--)(d=e[c])&&(r=(n?d(i,o,r):d(r))||r);return n&&r&&h(i,o,r),r};let t=class extends p{constructor(){super(...arguments),this.label="",this.subLabel="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.icon=""}updated(){!this.subLabel||this.subLabel.trim()===""?this.setAttribute("no-content",""):this.removeAttribute("no-content")}handleKeyDown(e){e.key==="Enter"||e.key===" "?(e.preventDefault(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))):(e.key==="ArrowRight"||e.key==="ArrowLeft")&&(this.dispatchEvent(new CustomEvent("scb-stepper-keynav",{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){const e=this.active?"step":void 0,i=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:void 0;switch(this.symbolVariant){case"icon":return l`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${i}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l`<md-icon>${this.icon}</md-icon>`}
+                        </div>
+                        <div class="content">
+                            <div class="label">${this.label}</div>
+                            <div class="sub-label">${this.subLabel}</div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;case"marker":return l`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${i}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l``}
+                        </div>
+                        <div class="content">
+                            <div class="label">${this.label}</div>
+                            <div class="sub-label">${this.subLabel}</div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;default:return l`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${i}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l`<span>${this.number}</span>`}
+                        </div>
+                        <div class="content">
+                            <div class="label">${this.label}</div>
+                            <div class="sub-label">${this.subLabel}</div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `}}};t.styles=m`
     :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      min-width: 80px;
-      flex: 1 1 0;
-      cursor: pointer;
-      background: none;
-      box-sizing: border-box;
-      user-select: none;
-      
-    }
-    
+        font-family: var(--brand-font);
+    }
+    .scb-step-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        flex: 1 1 0;
+        cursor: pointer;
+        background: none;
+        box-sizing: border-box;
+        user-select: none;
+        padding: var(--spacing-4);
+    }
+    .scb-step-content:focus,
+    .scb-step-content:focus-visible {
+        outline: none ;
+        box-shadow: none ;
+    }
     .symbol {
-      background-color: var(--n-70);
-      color: var(--md-sys-color-on-primary);
-      border-radius: 50%;
-      min-width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 14px;
-      position: relative;
-      z-index: 1;
+        background-color: var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+        min-width: var(--icon-size-medium);
+        height: var(--icon-size-medium);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        font-size: var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        position: relative;
+        z-index: 1;
+    }
+    md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
     }
     md-icon {
       font-size: 20px;
     }
     :host([active]) .symbol {
       background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
     :host([completed]) .symbol {
       background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
     .label {
-      margin-top: 8px;
+      margin-top: var(--spacing-3);
       text-align: center;
-      font-size: 16px;
-      color: var(--md-sys-color-on-surface, #222);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      color: var(--md-sys-color-on-surface);
       max-width: 90px;
       word-break: break-word;
-      margin-bottom: 8px;
+      margin-bottom: var(--spacing-3);
     }
-    :host([active]) .label, :host([active]) slot {
+    :host([active]) .label, :host([active]) .sub-label {
       font-weight: 600;
     }
     .content{
@@ -77,19 +128,38 @@ import{a as p,n as i,i as m,x as s,t as h}from"../../vendor/vendor.js";import"..
         align-items: center;
     }
     :host([variant="vertical"]) {
-      flex-direction: row;
-      align-items: flex-start;
-        gap: 16px;
-
+        .scb-step-content {
+            flex-direction: row;
+            align-items: flex-start;
+            gap: var(--spacing-5);
+            padding: var(--spacing-4);
+        }
+    }
+    :host([no-content]) {
+      .scb-step-content {
+        align-items: center;
+        .label {
+            margin-bottom: 0px;
+        }
+    }
     }
     :host([variant="vertical"]) .label{
         margin-top: 0;
     }
     :host([variant="vertical"]) .content{
         align-items: flex-start;
+
     }
     :host([symbol-variant="marker"]) .symbol {
         min-width: 16px;
         height: 16px;
     }
-  `;e([i({type:String,reflect:!0})],t.prototype,"label",2);e([i({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",2);e([i({type:Number,reflect:!0})],t.prototype,"number",2);e([i({type:Boolean,reflect:!0})],t.prototype,"active",2);e([i({type:Boolean,reflect:!0})],t.prototype,"completed",2);e([i({type:Boolean,reflect:!0})],t.prototype,"changeOnCompleted",2);e([i({type:Boolean,reflect:!0})],t.prototype,"islast",2);e([i({type:String,reflect:!0})],t.prototype,"variant",2);e([i({type:String})],t.prototype,"icon",2);t=e([h("scb-step")],t);
+    :host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
+        background-color: transparent;
+        color: var(--md-sys-color-primary);
+        md-icon{
+            font-size: var(--icon-size-small);
+        }
+    }
+
+  `;s([a({type:String,reflect:!0})],t.prototype,"label",2);s([a({type:String,reflect:!0,attribute:"sub-label"})],t.prototype,"subLabel",2);s([a({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",2);s([a({type:Number,reflect:!0})],t.prototype,"number",2);s([a({type:Boolean,reflect:!0})],t.prototype,"active",2);s([a({type:Boolean,reflect:!0})],t.prototype,"completed",2);s([a({type:Boolean,reflect:!0,attribute:"change-on-completed"})],t.prototype,"changeOnCompleted",2);s([a({type:Boolean,reflect:!0})],t.prototype,"islast",2);s([a({type:String,reflect:!0})],t.prototype,"variant",2);s([a({type:String})],t.prototype,"icon",2);t=s([b("scb-step")],t);

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

@@ -1,13 +1,19 @@
-import{a as c,n as p,r as d,i as h,x as f,t as u}from"../../vendor/vendor.js";import"./scb-step.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 t=customElements.define.bind(customElements);customElements.define=function(i,s,r){try{customElements.get(i)||t(i,s,r)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,l=(e,t,i,s)=>{for(var r=s>1?void 0:s?v(t,i):t,n=e.length-1,o;n>=0;n--)(o=e[n])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&b(t,i,r),r};let a=class extends h{constructor(){super(...arguments),this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.activeIndex=0,this._onStepContainerClick=e=>{const t=this._getSteps(),i=e.composedPath(),s=t.findIndex(r=>i.includes(r));s!==-1&&this._onStepClick(s)}}_onStepClick(e){this.activeIndex=e,this._updateSteps()}_updateSteps(){const e=this._getSteps();e.forEach((t,i)=>{t.active=i===this.activeIndex,t.completed=i<this.activeIndex,t.islast=!1,t.changeOnCompleted=this.changeOnCompleted,t.number=i+1,t.variant=this.variant,t.symbolVariant=this.symbolVariant}),e.length>0&&(e[e.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(){this._updateSteps()}updated(){this._updateSteps()}render(){return f`
-    <div class="steps" style="flex-direction: ${this.variant==="vertical"?"column":"row"}; align-items: ${this.variant==="vertical","flex-start"};" @click=${this._onStepContainerClick}>
+import{a as l,n as p,r as h,i as d,x as f,t as v}from"../../vendor/vendor.js";import"./scb-step.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,i,n){try{customElements.get(s)||e(s,i,n)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(t,e,s,i)=>{for(var n=i>1?void 0:i?b(e,s):e,a=t.length-1,c;a>=0;a--)(c=t[a])&&(n=(i?c(e,s,n):c(n))||n);return i&&n&&u(e,s,n),n};let o=class extends d{constructor(){super(...arguments),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.activeIndex=0,this._onKeyNav=t=>{const e=this._getSteps(),s=this.activeIndex;let i=s;t.detail.key==="ArrowRight"?s<e.length-1?i=s+1:i=0:t.detail.key==="ArrowLeft"&&(s>0?i=s-1:i=e.length-1),i!==s&&(this._onStepClick(i),setTimeout(()=>{const n=e[i].shadowRoot?.querySelector(".scb-step-content");n&&"focus"in n&&typeof n.focus=="function"&&n.focus()},0))},this._onStepContainerClick=t=>{const e=this._getSteps(),s=t.composedPath(),i=e.findIndex(n=>s.includes(n));i!==-1&&this._onStepClick(i)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("scb-step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?this.dispatchEvent(new CustomEvent("scb-step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})):t<e&&this.dispatchEvent(new CustomEvent("scb-step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(){this._updateSteps()}updated(){this._updateSteps()}render(){return f`
+      <div
+        class="steps"
+        role="list"
+        aria-label="Steg i processen"
+        @click=${this._onStepContainerClick}
+        @scb-stepper-keynav=${this._onKeyNav}
+      >
         <slot></slot>
-    </div>
-    `}};a.styles=c`
+      </div>
+    `}};o.styles=l`
     :host {
         --scb-stepper-width: 100%;
         --scb-stepper-height: 100%;
       display: block;
-      padding: 16px;
+      padding: var(--spacing-5) 0;
       width: 100%;
       color: var(--md-sys-color-on-surface);
       font-family: var(--brand-font);
@@ -17,34 +23,32 @@ import{a as c,n as p,r as d,i as h,x as f,t as u}from"../../vendor/vendor.js";im
     .steps {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: stretch;
       justify-content: center;
       position: relative;
       width: 100%;
-      gap: 24px;
-        height: 100%;
+      gap: var(--spacing-7);
+      height: 100%;
     }
     :host([variant='vertical']) .steps {
       flex-direction: column;
-      align-items: flex-start;
-      gap: 32px;
+      gap: var(--spacing-8);
     }
     ::slotted(scb-step) {
       position: relative;
       flex: 1 1 0;
-      min-width: 80px;
       z-index: 1;
+      width: 100%;
     }
     /* Horisontell connector */
     ::slotted(scb-step:not(:first-child))::before {
       content: '';
       position: absolute;
       left: -50%;
-      top: 16px;
+      top: 28px;
       width: calc(100% - 24px);
       height: 1px;
       background: var(--n-70);
-      border-radius: 1px;
       z-index: 0;
     }
     /* Vertikal connector */
@@ -54,25 +58,26 @@ import{a as c,n as p,r as d,i as h,x as f,t as u}from"../../vendor/vendor.js";im
     ::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
         content: '';
         position: absolute;
-        left: 16px;
-        top: 40px;
+        left: 28px;
+        top: 52px;
         width: 1px;
         height: calc(100% - 16px);
         background: var(--n-70);
-        border-radius: 1px;
         z-index: 0;
         transform: translateX(-50%);
     }
     ::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
         content: "";
         position: absolute;
-        left: 8px;
-        top: 25px;
+        left: 20px;
+        top: 38px;
         width: 1px;
         height: calc(100% - 2px);
         background: var(--n-70);
-        border-radius: 1px;
         z-index: 0;
         transform: translateX(-50%);
     }
-  `;l([p({type:String,reflect:!0})],a.prototype,"label",2);l([p({type:Boolean,reflect:!0,attribute:"change-on-completed"})],a.prototype,"changeOnCompleted",2);l([p({type:String})],a.prototype,"variant",2);l([p({type:String,reflect:!0,attribute:"symbol-variant"})],a.prototype,"symbolVariant",2);l([d()],a.prototype,"activeIndex",2);a=l([u("scb-stepper")],a);
+    ::slotted(scb-step[symbol-variant="marker"]:not(:first-child))::before  {
+        top: 20px;
+    }
+  `;r([p({type:String,reflect:!0})],o.prototype,"type",2);r([p({type:String,reflect:!0})],o.prototype,"label",2);r([p({type:Boolean,reflect:!0,attribute:"change-on-completed"})],o.prototype,"changeOnCompleted",2);r([p({type:String})],o.prototype,"variant",2);r([p({type:String,reflect:!0,attribute:"symbol-variant"})],o.prototype,"symbolVariant",2);r([h()],o.prototype,"activeIndex",2);o=r([v("scb-stepper")],o);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.75",
+    "version":  "0.1.77",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -304,5 +304,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "D530B6DFBE9DE8D09579B66E6A5F11B57D495F3BB33A88B2906A615C20C2CE1B"
+    "buildHash":  "9654E007E17D24662A82AD02ECACF387F89862A4BE4BFCCB069844AC57ECC2E9"
 }

package/scb-app-bar/scb-app-bar.d.ts

@@ -6,5 +6,6 @@ export declare class ScbAppBar extends LitElement {
     searchSupportingText: string;
     static styles: import('lit').CSSResult[];
     private handleAvatarSlotChange;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/scb-app-bar/scb-app-bar.js

@@ -1,26 +1,30 @@
-import { css as d, LitElement as c, html as s } from "lit";
-import { property as r, customElement as g } from "lit/decorators.js";
+import { css as d, LitElement as c, html as l } from "lit";
+import { property as r, customElement as m } from "lit/decorators.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-search/scb-search.js";
 import "../scb-avatar/scb-avatar.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (n, a, o, e) => {
-  for (var t = e > 1 ? void 0 : e ? v(a, o) : a, p = n.length - 1, h; p >= 0; p--)
-    (h = n[p]) && (t = (e ? h(a, o, t) : h(t)) || t);
-  return e && t && m(a, o, t), t;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (e, s, o, t) => {
+  for (var i = t > 1 ? void 0 : t ? v(s, o) : s, p = e.length - 1, h; p >= 0; p--)
+    (h = e[p]) && (i = (t ? h(s, o, i) : h(i)) || i);
+  return t && i && g(s, o, i), i;
 };
-let i = class extends c {
+let a = class extends c {
   constructor() {
     super(...arguments), this.title = "", this.type = "default", this.position = "default", this.searchSupportingText = "";
   }
-  handleAvatarSlotChange(n) {
-    n.target.assignedElements({ flatten: !0 }).forEach((e) => {
-      e.tagName === "SCB-AVATAR" && e.setAttribute("size", "small");
+  handleAvatarSlotChange(e) {
+    e.target.assignedElements({ flatten: !0 }).forEach((t) => {
+      t.tagName === "SCB-AVATAR" && t.setAttribute("size", "small");
     });
   }
+  // Sänd förändrings-event när egenskaper uppdateras
+  updated(e) {
+    e.has("title") && this.dispatchEvent(new CustomEvent("title-changed", { detail: { title: this.title }, bubbles: !0, composed: !0 })), e.has("position") && this.dispatchEvent(new CustomEvent("position-changed", { detail: { position: this.position }, bubbles: !0, composed: !0 })), e.has("type") && this.dispatchEvent(new CustomEvent("type-changed", { detail: { type: this.type }, bubbles: !0, composed: !0 })), e.has("searchSupportingText") && this.dispatchEvent(new CustomEvent("search-supporting-text-changed", { detail: { searchSupportingText: this.searchSupportingText }, bubbles: !0, composed: !0 }));
+  }
   render() {
     switch (this.type) {
       case "small-flexible":
-        return s`
+        return l`
                     <header class="small-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
                         <div class="leading">
                             <slot name="leading"></slot>
@@ -33,7 +37,7 @@ let i = class extends c {
                     </header>
                 `;
       case "medium-flexible":
-        return s`
+        return l`
                     <header class="medium-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Medium flexible app bar">
                         <div class="action-elements">
                             <div>
@@ -48,7 +52,7 @@ let i = class extends c {
                     </header>
                 `;
       case "large-flexible":
-        return s`
+        return l`
                     <header class="large-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Large flexible app bar">
                         <div class="action-elements">
                             <div style="">
@@ -63,7 +67,7 @@ let i = class extends c {
                     </header>
                 `;
       case "search":
-        return s`
+        return l`
                     <header class="search ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Search app bar">
                         <div class="leading">
                             <slot name="leading"></slot>
@@ -78,7 +82,7 @@ let i = class extends c {
                     </header>
                 `;
       default:
-        return s`
+        return l`
                     <header class="default ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
                         <div class="leading">
                             <slot name="leading"></slot>
@@ -93,10 +97,11 @@ let i = class extends c {
     }
   }
 };
-i.styles = [
+a.styles = [
   d`
             :host {
                 display: block;
+                font-family: var(--brand, Inter);
                 position: relative;
                 container-type: inline-size;
                 container-name: app-bar-container;
@@ -192,21 +197,21 @@ i.styles = [
             }
         `
 ];
-l([
+n([
   r({ type: String })
-], i.prototype, "title", 2);
-l([
+], a.prototype, "title", 2);
+n([
   r({ type: String })
-], i.prototype, "type", 2);
-l([
+], a.prototype, "type", 2);
+n([
   r({ type: String, reflect: !0 })
-], i.prototype, "position", 2);
-l([
+], a.prototype, "position", 2);
+n([
   r({ type: String, attribute: "search-supporting-text" })
-], i.prototype, "searchSupportingText", 2);
-i = l([
-  g("scb-app-bar")
-], i);
+], a.prototype, "searchSupportingText", 2);
+a = n([
+  m("scb-app-bar")
+], a);
 export {
-  i as ScbAppBar
+  a as ScbAppBar
 };

package/scb-dialog/scb-dialog.js

@@ -221,7 +221,11 @@ let i = class extends u {
   }
 };
 i.styles = h`
-    :host { display:block; position:relative; }
+    :host { 
+      display:block; 
+      position:relative;
+      font-family: var(--brand, Inter); 
+    }
 
     .scrim {
       position: var(--scb-dialog-scrim-position, fixed);

package/scb-menu/scb-menu.js

@@ -92,8 +92,10 @@ i.styles = u`
       position: absolute;
       display: block;
       width: fit-content;
+      font-family: var(--brand-font);
       --scb-menu-max-width: 300px;
       --scb-menu-max-height: 600px;
+      z-index: 1000;
     }
     :host > .scb-menu-panel {
       padding: var(--spacing-3) 0;

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

@@ -1,9 +1,9 @@
-import { css as a, LitElement as c, html as m } from "lit";
+import { css as u, 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 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);
+  for (var s = t > 1 ? void 0 : t ? f(i, e) : i, o = r.length - 1, a; o >= 0; o--)
+    (a = r[o]) && (s = (t ? a(i, e, s) : a(s)) || s);
   return t && s && b(i, e, s), s;
 };
 let l = class extends c {
@@ -58,7 +58,7 @@ let l = class extends c {
     return m`<slot></slot>`;
   }
 };
-l.styles = a`
+l.styles = u`
     :host {
         --scb-segmented-button-width: 100%;
         --scb-segmented-button-height: 48px;
@@ -67,6 +67,7 @@ l.styles = a`
         display: grid;
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
+        font-family: var(--brand, Inter);
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),