scb-wc-test 0.1.75 → 0.1.76

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/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.75",
+    "version":  "0.1.76",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -304,5 +304,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "D530B6DFBE9DE8D09579B66E6A5F11B57D495F3BB33A88B2906A615C20C2CE1B"
+    "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),