scb-wc-test 0.1.74 → 0.1.76

package/all.js

@@ -52,6 +52,8 @@ 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-stepper/scb-step.js';
+import './mvc/components/scb-stepper/scb-stepper.js';
 import './mvc/components/scb-switch/scb-switch.js';
 import './mvc/components/scb-tabs/scb-primary-tab.js';
 import './mvc/components/scb-tabs/scb-secondary-tab.js';
@@ -115,6 +117,8 @@ 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-stepper/scb-step.js';
+import './scb-stepper/scb-stepper.js';
 import './scb-switch/scb-switch.js';
 import './scb-tabs/scb-primary-tab.js';
 import './scb-tabs/scb-secondary-tab.js';

package/index.d.ts

@@ -49,6 +49,8 @@ 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-stepper/scb-step';
+export * from './scb-stepper/scb-stepper';
 export * from './scb-switch/scb-switch';
 export * from './scb-tabs/scb-primary-tab';
 export * from './scb-tabs/scb-secondary-tab';

package/index.js

@@ -1,7 +1,7 @@
 import { ScbAccordionItem as e } from "./scb-accordion/scb-accordion-item.js";
 import { ScbAccordion as c } from "./scb-accordion/scb-accordion.js";
-import { ScbAppBar as S } from "./scb-app-bar/scb-app-bar.js";
-import { ScbAvatar as p } from "./scb-avatar/scb-avatar.js";
+import { ScbAppBar as m } from "./scb-app-bar/scb-app-bar.js";
+import { ScbAvatar as b } from "./scb-avatar/scb-avatar.js";
 import { ScbBadge as f } from "./scb-badge/scb-badge.js";
 import { SCBBreadcrumbItem as i } from "./scb-breadcrumb/scb-breadcrumb-item.js";
 import { SCBBreadcrumb as n } from "./scb-breadcrumb/scb-breadcrumb.js";
@@ -27,8 +27,8 @@ import { ScbStack as _ } from "./scb-grid/scb-stack.js";
 import { ScbHeaderDrawerGroup as rr } from "./scb-header/scb-header-drawer-group.js";
 import { ScbHeaderDrawerItem as er } from "./scb-header/scb-header-drawer-item.js";
 import { ScbHeaderTab as cr } from "./scb-header/scb-header-tab.js";
-import { ScbHeaderUtility as Sr } from "./scb-header/scb-header-utility.js";
-import { ScbHeader as pr } from "./scb-header/scb-header.js";
+import { ScbHeaderUtility as mr } from "./scb-header/scb-header-utility.js";
+import { ScbHeader as br } from "./scb-header/scb-header.js";
 import { ScbHorizontalScroller as fr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
 import { ScbIconButton as ir } from "./scb-icon-button/scb-icon-button.js";
 import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
@@ -49,21 +49,23 @@ import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-b
 import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
 import { ScbSnackbar as Qr } from "./scb-snackbar/scb-snackbar.js";
 import { ScbStatusPill as Wr } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as Yr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as _r } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as ro } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as eo } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as co } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as So } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as po } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as fo } from "./scb-tooltip/scb-tooltip.js";
+import { ScbStep as Yr } from "./scb-stepper/scb-step.js";
+import { ScbStepper as _r } from "./scb-stepper/scb-stepper.js";
+import { ScbSwitch as ro } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as eo } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as co } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as mo } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField2 as bo } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as fo } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as io } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as uo } from "./scb-tooltip/scb-tooltip.js";
 export {
   n as SCBBreadcrumb,
   i as SCBBreadcrumbItem,
   c as ScbAccordion,
   e as ScbAccordionItem,
-  S as ScbAppBar,
-  p as ScbAvatar,
+  m as ScbAppBar,
+  b as ScbAvatar,
   f as ScbBadge,
   C as ScbButton,
   l as ScbCalendarCard,
@@ -82,11 +84,11 @@ export {
   J as ScbFooterSection,
   Y as ScbGrid,
   W as ScbGridItem,
-  pr as ScbHeader,
+  br as ScbHeader,
   rr as ScbHeaderDrawerGroup,
   er as ScbHeaderDrawerItem,
   cr as ScbHeaderTab,
-  Sr as ScbHeaderUtility,
+  mr as ScbHeaderUtility,
   fr as ScbHorizontalScroller,
   ir as ScbIconButton,
   nr as ScbKeyFigureCard,
@@ -98,23 +100,25 @@ export {
   kr as ScbNotification,
   yr as ScbNotificationCard,
   Pr as ScbPagination,
-  _r as ScbPrimaryTab,
+  eo as ScbPrimaryTab,
   Mr as ScbProgressIndicator,
   Nr as ScbRadioButton,
   zr as ScbRadioGroup,
   Ur as ScbSearch,
-  ro as ScbSecondaryTab,
+  co as ScbSecondaryTab,
   qr as ScbSegmentedButton,
   Jr as ScbSegmentedItem,
   Qr as ScbSnackbar,
   _ as ScbStack,
   Wr as ScbStatusPill,
+  Yr as ScbStep,
+  _r as ScbStepper,
   z as ScbSubDrawer,
   Hr as ScbSubMenu,
-  Yr as ScbSwitch,
-  eo as ScbTabs,
-  co as ScbTextField2,
-  po as ScbToc,
-  So as ScbTocItem,
-  fo as ScbTooltip
+  ro as ScbSwitch,
+  mo as ScbTabs,
+  bo as ScbTextField2,
+  io as ScbToc,
+  fo as ScbTocItem,
+  uo as ScbTooltip
 };

package/mvc/components/all.js

@@ -49,6 +49,8 @@ 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-stepper/scb-step.js';
+import './scb-stepper/scb-stepper.js';
 import './scb-switch/scb-switch.js';
 import './scb-tabs/scb-primary-tab.js';
 import './scb-tabs/scb-secondary-tab.js';

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

@@ -0,0 +1,95 @@
+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`
+    :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;
+      
+    }
+    
+    .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;
+    }
+    md-icon {
+      font-size: 20px;
+    }
+    :host([active]) .symbol {
+      background-color: var(--md-sys-color-primary);
+    }
+    :host([completed]) .symbol {
+      background-color: var(--md-sys-color-primary);
+    }
+    .label {
+      margin-top: 8px;
+      text-align: center;
+      font-size: 16px;
+      color: var(--md-sys-color-on-surface, #222);
+      max-width: 90px;
+      word-break: break-word;
+      margin-bottom: 8px;
+    }
+    :host([active]) .label, :host([active]) slot {
+      font-weight: 600;
+    }
+    .content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    :host([variant="vertical"]) {
+      flex-direction: row;
+      align-items: flex-start;
+        gap: 16px;
+
+    }
+    :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);

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

@@ -0,0 +1,78 @@
+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}>
+        <slot></slot>
+    </div>
+    `}};a.styles=c`
+    :host {
+        --scb-stepper-width: 100%;
+        --scb-stepper-height: 100%;
+      display: block;
+      padding: 16px;
+      width: 100%;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font);
+      max-width: var(--scb-stepper-width);
+      height: var(--scb-stepper-height);
+    }
+    .steps {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      width: 100%;
+      gap: 24px;
+        height: 100%;
+    }
+    :host([variant='vertical']) .steps {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 32px;
+    }
+    ::slotted(scb-step) {
+      position: relative;
+      flex: 1 1 0;
+      min-width: 80px;
+      z-index: 1;
+    }
+    /* Horisontell connector */
+    ::slotted(scb-step:not(:first-child))::before {
+      content: '';
+      position: absolute;
+      left: -50%;
+      top: 16px;
+      width: calc(100% - 24px);
+      height: 1px;
+      background: var(--n-70);
+      border-radius: 1px;
+      z-index: 0;
+    }
+    /* Vertikal connector */
+    ::slotted(scb-step[variant="vertical"]:not(:first-child))::before {
+        display: none;
+    }
+    ::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
+        content: '';
+        position: absolute;
+        left: 16px;
+        top: 40px;
+        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;
+        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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.74",
+    "version":  "0.1.76",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -262,6 +262,14 @@
                                               "import":  "./scb-status-pill/scb-status-pill.js",
                                               "require":  "./scb-status-pill/scb-status-pill.js"
                                           },
+                    "./scb-stepper":  {
+                                          "import":  "./scb-stepper/scb-stepper.js",
+                                          "require":  "./scb-stepper/scb-stepper.js"
+                                      },
+                    "./scb-stepper/scb-step":  {
+                                                   "import":  "./scb-stepper/scb-step.js",
+                                                   "require":  "./scb-stepper/scb-step.js"
+                                               },
                     "./scb-switch":  {
                                          "import":  "./scb-switch/scb-switch.js",
                                          "require":  "./scb-switch/scb-switch.js"
@@ -296,5 +304,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "922846D166359F8518F6DD94D36AC02417E5D65B100D6C150B1157F88436D2C7"
+    "buildHash":  "3D7F0B98A0A0FA5BCFAFC2684A93EE1AC54E4178D2537C2064B8CAD4DCAE7D05"
 }

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),

package/scb-stepper/scb-step.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ * Ett steg i en stepper-komponent.
+ * @slot - Innehåll för steget
+ */
+export declare class ScbStep extends LitElement {
+    label: string;
+    symbolVariant: 'number' | 'icon' | 'marker';
+    number: number;
+    active: boolean;
+    completed: boolean;
+    changeOnCompleted: boolean;
+    islast: boolean;
+    variant: 'horizontal' | 'vertical';
+    icon: string;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}