scb-wc-test 0.1.25 → 0.1.27

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

@@ -1,17 +1,9 @@
-import{n as l,t as p,i as b,a as d,x as u}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,s,e){try{customElements.get(r)||t(r,s,e)}catch(i){var a=String(i||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var f=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(n,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,a=n.length-1,i;a>=0;a--)(i=n[a])&&(e=(s?i(t,r,e):i(e))||e);return s&&e&&f(t,r,e),e};let o=class extends b{constructor(){super(...arguments),this.label="",this.isCurrent=!1,this.href=""}static get styles(){return d`
+import{n as l,t as p,i as b,a as f,x as u}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,s,e){try{customElements.get(r)||t(r,s,e)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var d=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(i,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,a=i.length-1,n;a>=0;a--)(n=i[a])&&(e=(s?n(t,r,e):n(e))||e);return s&&e&&d(t,r,e),e};let c=class extends b{constructor(){super(...arguments),this.label="",this.isCurrent=!1,this.href=""}static get styles(){return f`
     .breadcrumb-separator {
-      margin: 0 8px;
+      margin: var(--spacing-0) var(--spacing-3);
       color: var(--md-sys-color-on-surface);
     }
-    .breadcrumb-link { 
-        color: var(--md-sys-color-primary);
-        text-decoration-thickness: 1px;
-        
-      }
-      .breadcrumb-link:hover { 
-        text-decoration-thickness: 2px;
-      }
     `}render(){switch(!0){case this.isCurrent:return u`<span class="breadcrumb-current">${this.label}</span>`;default:return u`
           <scb-link href="${this.href}">${this.label}</scb-link>
           <span class="breadcrumb-separator">/</span>
-        `}}};c([l({type:String})],o.prototype,"label",2);c([l({type:Boolean,attribute:"is-current"})],o.prototype,"isCurrent",2);c([l({type:String,attribute:"item-href"})],o.prototype,"href",2);o=c([p("scb-breadcrumb-item")],o);
+        `}}};o([l({type:String})],c.prototype,"label",2);o([l({type:Boolean,attribute:"is-current"})],c.prototype,"isCurrent",2);o([l({type:String,attribute:"item-href"})],c.prototype,"href",2);c=o([p("scb-breadcrumb-item")],c);

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

@@ -1,11 +1,11 @@
-import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./scb-breadcrumb-item.js";import"../../vendor/vendor-material.js";import"../scb-link/scb-link.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,i,a){try{customElements.get(s)||r(s,i,a)}catch(l){var t=String(l||"");if(t.indexOf("already been used")===-1&&t.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,c=(e,r,s,i)=>{for(var a=i>1?void 0:i?f(r,s):r,t=e.length-1,l;t>=0;t--)(l=e[t])&&(a=(i?l(r,s,a):l(a))||a);return i&&a&&u(r,s,a),a};let n=class extends p{constructor(){super(...arguments),this.showAll=!1}static get styles(){return b`
+import{n as d,t as b,i as m,a as p,x as o}from"../../vendor/vendor.js";import"./scb-breadcrumb-item.js";import"../../vendor/vendor-material.js";import"../scb-link/scb-link.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,t,a){try{customElements.get(s)||r(s,t,a)}catch(l){var i=String(l||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,c=(e,r,s,t)=>{for(var a=t>1?void 0:t?h(r,s):r,i=e.length-1,l;i>=0;i--)(l=e[i])&&(a=(t?l(r,s,a):l(a))||a);return t&&a&&u(r,s,a),a};let n=class extends m{constructor(){super(...arguments),this.showAll=!1}static get styles(){return p`
       .scb-breadcrumb {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
       }
       .breadcrumb-separator {
-        margin: 0 8px;
+        margin: var(--spacing-0) var(--spacing-3);
         color: var(--md-sys-color-on-surface);
       }
       .collapsed > scb-breadcrumb-item {
@@ -13,7 +13,8 @@ import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./
       }
       .collapsed > scb-breadcrumb-item:nth-child(-n+3),
       .collapsed > scb-breadcrumb-item:nth-last-child(-n+3) {
-        display: inline-flex;
+        display: flex;
+        align-items: anchor-center;
       }
       .ellipsis:focus {
         outline: none;
@@ -51,9 +52,9 @@ import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./
           transform: translateY(0);
         }
       }
-    `}_onEllipsisClick(){this.showAll?this.showAll=!1:(this.showAll=!0,this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded > scb-breadcrumb-item");e&&(e.forEach((r,s)=>{r.classList.add("breadcrumb-animate"),r.style.animationDelay=`${s*60}ms`}),setTimeout(()=>{e.forEach(r=>{r.classList.remove("breadcrumb-animate"),r.style.animationDelay=""})},600))}))}render(){let e=[];this.children.length||(e=Array.from(this.shadowRoot?this.shadowRoot.querySelectorAll("scb-breadcrumb-item"):[])),e.length||(e=Array.from(this.children).filter(s=>s.tagName.toLowerCase()==="scb-breadcrumb-item")),e.length>0&&e[e.length-1].setAttribute("is-current","true");const r=e.length>6&&!this.showAll;return o`
+    `}_onEllipsisClick(){this.showAll?this.showAll=!1:(this.showAll=!0,this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded > scb-breadcrumb-item");e&&(e.forEach((r,s)=>{r.classList.add("breadcrumb-animate"),r.style.animationDelay=`${s*60}ms`}),setTimeout(()=>{e.forEach(r=>{r.classList.remove("breadcrumb-animate"),r.style.animationDelay=""})},600))}))}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this.requestUpdate()}),this._observer.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect()}render(){let e=[];this.children.length||(e=Array.from(this.shadowRoot?this.shadowRoot.querySelectorAll("scb-breadcrumb-item"):[])),e.length||(e=Array.from(this.children).filter(s=>s.tagName.toLowerCase()==="scb-breadcrumb-item")),e.length>0&&e[e.length-1].setAttribute("is-current","true");const r=e.length>6&&!this.showAll;return o`
       <div class="scb-breadcrumb ${r?"collapsed":"expanded"}">
-        ${r?e.map((s,i)=>i===3?o`<span
+        ${r?e.map((s,t)=>t===3?o`<span
                     class="ellipsis"
                     aria-label="Visa alla"
                     role="button"
@@ -62,4 +63,4 @@ import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./
                     @keydown=${a=>{(a.key==="Enter"||a.key===" ")&&this._onEllipsisClick()}}
                   ><md-icon><md-focus-ring></md-focus-ring>more_horiz</md-icon></span><span class="breadcrumb-separator">/</span>${s}`:o`${s}`):e.map(s=>s)}
       </div>
-    `}};c([d({type:Boolean})],n.prototype,"showAll",2);n=c([m("scb-breadcrumb")],n);
+    `}};c([d({type:Boolean})],n.prototype,"showAll",2);n=c([b("scb-breadcrumb")],n);

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

@@ -1,108 +1,111 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
-import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as m,x as t,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.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 l=customElements.define.bind(customElements);customElements.define=function(n,a,c){try{customElements.get(n)||l(n,a,c)}catch(d){var o=String(d||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(e,l,n,a)=>{for(var c=a>1?void 0:a?u(l,n):l,o=e.length-1,d;o>=0;o--)(d=e[o])&&(c=(a?d(l,n,c):d(c))||c);return a&&c&&b(l,n,c),c};let i=class extends m{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.title="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight=""}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",l=this.direction?`${this.direction.toLowerCase()}`:"",n=this.cardHref?"clickable":"",a=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",c=(d=!1)=>d?t`<a class="title" href="${this.cardHref}" tabindex="0">${this.title}</a><md-icon>arrow_forward</md-icon>`:t`<span class="title">${this.title}</span>`,o=()=>(this.mediaType||"").toLowerCase()==="avatar"?t`
-          <div class="media">
-            <slot name="media">
-              <scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
-            </slot>
-          </div>
-        `:this.mediaHref?t`
-          <div class="media">
-            <img src="${this.mediaHref}" alt="" />
-          </div>
-        `:null;switch(this.type){case"standard":return t`
-          <div class="scb-card ${e} ${l} ${n}">
-            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-            ${o()}
-            <div class="full-content">
-              <div class="top-content">
-                ${this.title?t`<div class="header">${c(!!this.cardHref)}</div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${a?t`<div class="date">${a}</div>`:""}
-              </div>
+import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x as i,E as b,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.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 n=customElements.define.bind(customElements);customElements.define=function(l,r,o){try{customElements.get(l)||n(l,r,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,f=Object.getOwnPropertyDescriptor,e=(a,n,l,r)=>{for(var o=r>1?void 0:r?f(n,l):n,d=a.length-1,c;d>=0;d--)(c=a[d])&&(o=(r?c(n,l,o):c(o))||o);return r&&o&&y(n,l,o),o};let t=class extends u{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.title="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.__onImgLoad=a=>{const n=a.currentTarget.closest(".media");n&&n.classList.add("is-loaded")},this.__onKeyDown=a=>{(a.key==="Enter"||a.key===" ")&&this.cardHref&&(a.preventDefault(),window.open(this.cardHref,"_self"))},this.__handleHrefNavigation=a=>{this.cardHref&&(a.target.closest("a")||window.open(this.cardHref,"_self"))}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return i`
+        <div class="media">
+          <slot name="media">
+            <scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
+          </slot>
+        </div>
+      `;if(this.mediaHref||this.mediaSrcset){const n=this.mediaAspect?`aspect-ratio:${this.mediaAspect};`:"",l=this.mediaPlaceholder?"has-ph":"",r=this.mediaFit||"cover",o=this.mediaPosition||"center";return i`
+        <div class="media ${l}" style="${n}">
+          <!-- Tillåt egna <source>-element via slot om man vill använda <picture> -->
+          <slot name="media-sources"></slot>
+          <img
+            src="${this.mediaHref||""}"
+            srcset="${this.mediaSrcset||""}"
+            sizes="${this.mediaSizes||""}"
+            alt="${this.mediaAlt||""}"
+            loading="${this.mediaLoading}"
+            decoding="${this.mediaDecoding}"
+            fetchpriority="${this.mediaFetchPriority}"
+            style="object-fit:${r};object-position:${o};"
+            width="${this.mediaWidth||b}"
+            height="${this.mediaHeight||b}"
+            @load=${this.__onImgLoad}
+          />
+        </div>
+      `}return null}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",n=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",l=this.cardHref?"clickable":"",r=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",o=(h=!1)=>h?i`<a class="title" href="${this.cardHref}" tabindex="0">${this.title}</a><md-icon>arrow_forward</md-icon>`:i`<span class="title">${this.title}</span>`,d=()=>this.__mediaTemplate(),c=this.cardHref?{role:"link",tabindex:"0","aria-label":this.title||"Kort"}:{role:"group",tabindex:"-1","aria-label":this.title||"Kort"},p=h=>i`
+      <div
+        class="scb-card ${a} ${n} ${l}"
+        @click=${this.cardHref?this.__handleHrefNavigation:null}
+        @keydown=${this.cardHref?this.__onKeyDown:null}
+        style="cursor:${this.cardHref?"pointer":"default"};"
+        ...=${c}
+      >
+        ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+        ${d()}
+        ${h}
+      </div>
+      <md-focus-ring></md-focus-ring>
+    `;switch(this.type){case"standard":return p(i`
+          <div class="full-content">
+            <div class="top-content">
+              ${this.title?i`<div class="header">${o(!!this.cardHref)}</div>`:""}
+              ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+              ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${r?i`<div class="date">${r}</div>`:""}
             </div>
           </div>
-          <md-focus-ring></md-focus-ring>
-        `;case"list":return t`
-          <div class="scb-card ${e} vertical ${n}">
-            ${o()}
-            <div class="full-content">
-              <div class="top-content">
-                ${this.title?t`<div class="header"><span class="title">${this.title}</span></div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${a?t`<div class="date">${a}</div>`:""}
-              </div>
-              <div class="content list">
-                <slot></slot>
-              </div>
+        `);case"list":return p(i`
+          <div class="full-content">
+            <div class="top-content">
+              ${this.title?i`<div class="header"><span class="title">${this.title}</span></div>`:""}
+              ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+              ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${r?i`<div class="date">${r}</div>`:""}
+            </div>
+            <div class="content list">
+              <slot></slot>
             </div>
           </div>
-        `;case"social":return t`
-          <div class="scb-card ${e} ${l} ${n}">
-            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-            ${o()}
-            <div class="full-content">
-              <div class="top-content">
-                ${this.title?t`<div class="header">${c(!!this.cardHref)}</div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${a?t`<div class="date">${a}</div>`:""}
-              </div>
-              <div class="content">
-                <div class="social-metrics">
-                  <span class="comments"><md-icon>mode_comment</md-icon> <span>${this.commentsText}: ${this.comments}</span></span>
-                  <span class="likes"><md-icon>thumb_up</md-icon> <span>${this.likesText}: ${this.likes}</span></span>
-                </div>
+        `);case"social":return p(i`
+          <div class="full-content">
+            <div class="top-content">
+              ${this.title?i`<div class="header">${o(!!this.cardHref)}</div>`:""}
+              ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+              ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${r?i`<div class="date">${r}</div>`:""}
+            </div>
+            <div class="content">
+              <div class="social-metrics">
+                <span class="comments"><md-icon>mode_comment</md-icon> <span>${this.commentsText}: ${this.comments}</span></span>
+                <span class="likes"><md-icon>thumb_up</md-icon> <span>${this.likesText}: ${this.likes}</span></span>
               </div>
             </div>
           </div>
-          <md-focus-ring></md-focus-ring>
-        `;case"link":return t`
-          <div class="scb-card ${e} ${l} ${n}">
-            ${o()}
-            <div class="full-content">
-              <div class="top-content">
-                ${this.title?t`<div class="header"><span class="title">${this.title}</span></div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${a?t`<div class="date">${a}</div>`:""}
-              </div>
-              <div class="content links">
-                <slot></slot>
-              </div>
+        `);case"link":return p(i`
+          <div class="full-content">
+            <div class="top-content">
+              ${this.title?i`<div class="header"><span class="title">${this.title}</span></div>`:""}
+              ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+              ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${r?i`<div class="date">${r}</div>`:""}
+            </div>
+            <div class="content links">
+              <slot></slot>
             </div>
           </div>
-        `;case"action":return t`
-          <div class="scb-card ${e} ${l} ${n}">
-            ${o()}
-            <div class="full-content">
-              <div class="top-content">
-                ${this.title?t`<div class="header"><span class="title">${this.title}</span></div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${a?t`<div class="date">${a}</div>`:""}
-              </div>
-              <div class="content actions">
-                <slot></slot>
-              </div>
+        `);case"action":return p(i`
+          <div class="full-content">
+            <div class="top-content">
+              ${this.title?i`<div class="header"><span class="title">${this.title}</span></div>`:""}
+              ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+              ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${r?i`<div class="date">${r}</div>`:""}
+            </div>
+            <div class="content actions">
+              <slot></slot>
             </div>
           </div>
-        `;default:return t`
-          <div class="scb-card ${e} ${l} ${n}">
-            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-            ${o()}
-            <div class="full-content">
-              <div class="top-content">
-                ${this.title?t`<div class="header">${c(!!this.cardHref)}</div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${a?t`<div class="date">${a}</div>`:""}
-              </div>
+        `);default:return p(i`
+          <div class="full-content">
+            <div class="top-content">
+              ${this.title?i`<div class="header">${o(!!this.cardHref)}</div>`:""}
+              ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+              ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${r?i`<div class="date">${r}</div>`:""}
             </div>
           </div>
-          <md-focus-ring></md-focus-ring>
-        `}}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),e.has("type")&&(this.type==="list"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density"))}async firstUpdated(){if(i.__iconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),this.cardHref){const e=this.renderRoot.querySelector(".scb-card");e&&e.addEventListener("click",l=>{l.target.closest("a")||(window.location.href=this.cardHref)})}}};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=h`
+        `)}}updated(a){super.updated(a),a.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),a.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),a.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),a.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),a.has("type")&&(this.type==="list"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")),this.style.setProperty("--scb-card-media-fit",this.mediaFit||"cover"),this.style.setProperty("--scb-card-media-position",this.mediaPosition||"center")}async firstUpdated(){t.__iconLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(a=>a.i),__vite__mapDeps([0,1]),import.meta.url),t.__iconLoaded=!0),t.__rippleLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(a=>a.r),__vite__mapDeps([0,1]),import.meta.url),t.__rippleLoaded=!0)}};t.__iconLoaded=!1;t.__rippleLoaded=!1;t.styles=v`
     :host {
       display: block;
       box-sizing: border-box;
@@ -190,9 +193,35 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as m,x
     }
 
     .media {
+      position: relative;
       display: inline-flex;
       flex: 0 0 auto;
+      overflow: hidden;
+      border-radius: var(--md-sys-shape-corner-large);
     }
+    .media img {
+      display: block;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      height: auto;
+      object-fit: var(--scb-card-media-fit, cover);
+      object-position: var(--scb-card-media-position, center);
+    }
+
+    /* Skeleton-placeholder */
+    .media.has-ph::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(90deg,
+          rgba(0,0,0,.06) 25%,
+          rgba(0,0,0,.12) 37%,
+          rgba(0,0,0,.06) 63%);
+      animation: scb-card-shimmer 1.2s infinite linear;
+    }
+    .media.is-loaded::before { content: none; }
+    @keyframes scb-card-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
 
     .full-content { padding: var(--spacing-7) var(--spacing-6); }
     .top-content {
@@ -206,7 +235,7 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as m,x
       font-size: var(--md-sys-typescale-headline-small-size);
       font-weight: var(--weight-bold);
       line-height: var(--md-sys-typescale-headline-small-line-height);
-      letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+      letter-spacing: var(--md-sys-typescale-headline-small-tracking);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -242,16 +271,7 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as m,x
     .date {
       font-size: var(--md-sys-typescale-body-medium-size);
       line-height: var(--md-sys-typescale-body-medium-line-height);
-      letter-spacing: var(--md-sys-typescale-body-medium-Tracking);
-    }
-
-    .media img {
-      display: block;
-      border-radius: var(--md-sys-shape-corner-large);
-      inline-size: 100%;
-      max-inline-size: 100%;
-      height: auto;
-      object-fit: cover;
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     }
 
     .media ::slotted(scb-avatar) {
@@ -278,7 +298,7 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as m,x
 
     .scb-card.horizontal .media img {
       margin: 0;
-      object-fit: cover;
+      object-fit: var(--scb-card-media-fit, cover);
       aspect-ratio: var(--scb-card-horizontal-media-aspect);
       flex: 0 1 var(--scb-card-horizontal-media-max);
       min-inline-size: var(--scb-card-horizontal-media-min);
@@ -332,4 +352,4 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as m,x
     .scb-card.filled .content.list ::slotted(scb-list) {
       --scb-list-bg: var(--md-sys-color-surface-dim);
     }
-  `;s([r({type:String})],i.prototype,"type",2);s([r({type:String})],i.prototype,"variant",2);s([r({type:String})],i.prototype,"direction",2);s([r({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);s([r({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);s([r({type:String,attribute:"card-href"})],i.prototype,"cardHref",2);s([r({type:String})],i.prototype,"title",2);s([r({type:String,attribute:"sub-label"})],i.prototype,"subLabel",2);s([r({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([r({type:Date,reflect:!0})],i.prototype,"date",2);s([r({type:String,attribute:"social-comments-text"})],i.prototype,"commentsText",2);s([r({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);s([r({type:String,attribute:"social-likes-text"})],i.prototype,"likesText",2);s([r({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);s([r({type:String,reflect:!0})],i.prototype,"sizing",2);s([r({type:String,reflect:!0})],i.prototype,"width",2);s([r({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",2);s([r({type:String,reflect:!0})],i.prototype,"height",2);s([r({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",2);i=s([v("scb-card")],i);
+  `;e([s({type:String})],t.prototype,"type",2);e([s({type:String})],t.prototype,"variant",2);e([s({type:String})],t.prototype,"direction",2);e([s({type:String,attribute:"media-type"})],t.prototype,"mediaType",2);e([s({type:String,attribute:"media-href"})],t.prototype,"mediaHref",2);e([s({type:String,attribute:"media-alt"})],t.prototype,"mediaAlt",2);e([s({type:String,attribute:"media-srcset"})],t.prototype,"mediaSrcset",2);e([s({type:String,attribute:"media-sizes"})],t.prototype,"mediaSizes",2);e([s({type:String,attribute:"media-loading"})],t.prototype,"mediaLoading",2);e([s({type:String,attribute:"media-decoding"})],t.prototype,"mediaDecoding",2);e([s({type:String,attribute:"media-fetchpriority"})],t.prototype,"mediaFetchPriority",2);e([s({type:String,attribute:"media-fit"})],t.prototype,"mediaFit",2);e([s({type:String,attribute:"media-position"})],t.prototype,"mediaPosition",2);e([s({type:String,attribute:"media-width"})],t.prototype,"mediaWidth",2);e([s({type:String,attribute:"media-height"})],t.prototype,"mediaHeight",2);e([s({type:String,attribute:"media-aspect"})],t.prototype,"mediaAspect",2);e([s({type:Boolean,attribute:"media-placeholder"})],t.prototype,"mediaPlaceholder",2);e([s({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);e([s({type:String})],t.prototype,"title",2);e([s({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);e([s({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);e([s({type:Date,reflect:!0})],t.prototype,"date",2);e([s({type:String,attribute:"social-comments-text"})],t.prototype,"commentsText",2);e([s({type:Number,attribute:"social-comments",reflect:!0})],t.prototype,"comments",2);e([s({type:String,attribute:"social-likes-text"})],t.prototype,"likesText",2);e([s({type:Number,attribute:"social-likes",reflect:!0})],t.prototype,"likes",2);e([s({type:String,reflect:!0})],t.prototype,"sizing",2);e([s({type:String,reflect:!0})],t.prototype,"width",2);e([s({type:String,reflect:!0,attribute:"max-width"})],t.prototype,"maxWidth",2);e([s({type:String,reflect:!0})],t.prototype,"height",2);e([s({type:String,reflect:!0,attribute:"max-height"})],t.prototype,"maxHeight",2);t=e([g("scb-card")],t);

package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js

@@ -1,33 +1,36 @@
-import{a as d,n as r,i as p,x as a,t as y}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,l,n){try{customElements.get(o)||i(o,l,n)}catch(h){var c=String(h||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(e,i,o,l)=>{for(var n=l>1?void 0:l?u(i,o):i,c=e.length-1,h;c>=0;c--)(h=e[c])&&(n=(l?h(i,o,n):h(n))||n);return l&&n&&g(i,o,n),n};let t=class extends p{constructor(){super(...arguments),this.keyfigure=0,this.subLabel="",this.supportingText="",this.cardHref="",this.icon="",this.size="standard",this.unit="",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.sizing="stretch"}formatNumber(e){if(typeof e=="number")return e.toLocaleString("sv-SE").replace(/\u00A0/g," ");const i=Number(e);return Number.isNaN(i)?String(e):i.toLocaleString("sv-SE").replace(/\u00A0/g," ")}render(){const e=!!this.cardHref,i=this.formatNumber(this.keyfigure);return a`
+import{a as d,n as a,i as p,x as l,t as y}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 t=customElements.define.bind(customElements);customElements.define=function(r,n,o){try{customElements.get(r)||t(r,n,o)}catch(c){var h=String(c||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var u=Object.defineProperty,g=Object.getOwnPropertyDescriptor,s=(e,t,r,n)=>{for(var o=n>1?void 0:n?g(t,r):t,h=e.length-1,c;h>=0;h--)(c=e[h])&&(o=(n?c(t,r,o):c(o))||o);return n&&o&&u(t,r,o),o};let i=class extends p{constructor(){super(...arguments),this.keyfigure=0,this.subLabel="",this.supportingText="",this.cardHref="",this.icon="",this.size="standard",this.unit="",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.sizing="stretch",this.__onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&this.cardHref&&(e.preventDefault(),window.location.href=this.cardHref)},this.__handleHrefNavigation=e=>{this.cardHref&&(e.target.closest("a")||(window.location.href=this.cardHref))}}formatNumber(e){if(typeof e=="number")return e.toLocaleString("sv-SE").replace(/\u00A0/g," ");const t=Number(e);return Number.isNaN(t)?String(e):t.toLocaleString("sv-SE").replace(/\u00A0/g," ")}render(){const e=!!this.cardHref,t=this.formatNumber(this.keyfigure),r=(this.unit||"").trim(),n=r?`${t} ${r}`:t;return l`
       <div
         class="scb-keyfigure-card ${e?"clickable":""} ${this.size}"
         role=${e?"link":"group"}
         tabindex=${e?"0":"-1"}
-        aria-label=${this.subLabel||""}
+        aria-label=${this.subLabel||n}
+        @click=${e?this.__handleHrefNavigation:null}
+        @keydown=${e?this.__onKeyDown:null}
+        style="cursor:${e?"pointer":"default"};"
       >
-        ${e?a`<md-ripple></md-ripple>`:""}
-        ${this.icon?a`<md-icon>${this.icon}</md-icon>`:""}
+        ${e?l`<md-ripple></md-ripple>`:""}
+        ${this.icon?l`<md-icon>${this.icon}</md-icon>`:""}
 
-        ${this.keyfigure!==void 0&&this.keyfigure!==null&&this.keyfigure!==""?a`
+        ${this.keyfigure!==void 0&&this.keyfigure!==null&&this.keyfigure!==""?l`
           <div class="keyfigure">
-            <span class="value">
-              ${i}${this.unit?a`<span class="unit">${this.unit}</span>`:""}
+            <span class="value" aria-label="${n}">
+              ${t}${r?l`<span class="unit" aria-hidden="true">\u00A0${r}</span>`:""}
             </span>
-            ${e?a`<md-icon>arrow_forward</md-icon>`:""}
+            ${e?l`<md-icon>arrow_forward</md-icon>`:""}
           </div>
         `:""}
 
-        ${this.subLabel?a`
+        ${this.subLabel?l`
           <div class="sub-label">
-            ${e?a`<a href="${this.cardHref}" tabindex="-1">${this.subLabel}</a>`:this.subLabel}
+            ${e?l`<a href="${this.cardHref}" tabindex="-1">${this.subLabel}</a>`:this.subLabel}
           </div>
         `:""}
 
-        ${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
+        ${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:""}
       </div>
 
       <md-focus-ring></md-focus-ring>
-    `}__applyInnerSizing(){const e=this.renderRoot.querySelector(".scb-keyfigure-card");if(!e)return;this.width&&this.width.trim()!==""?(e.style.inlineSize="100%",e.style.maxInlineSize="100%"):(e.style.removeProperty("inline-size"),e.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?e.style.blockSize="100%":e.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?e.style.maxBlockSize="100%":e.style.removeProperty("max-block-size")}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),(e.has("width")||e.has("height")||e.has("maxHeight")||e.has("sizing"))&&this.__applyInnerSizing()}firstUpdated(){if(this.__applyInnerSizing(),this.cardHref){const e=this.renderRoot.querySelector(".scb-keyfigure-card");e&&(e.addEventListener("click",i=>{i.target.closest("a")||(window.location.href=this.cardHref)}),e.addEventListener("keydown",i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),window.location.href=this.cardHref)}))}}};t.styles=d`
+    `}__applyInnerSizing(){const e=this.renderRoot.querySelector(".scb-keyfigure-card");if(!e)return;this.width&&this.width.trim()!==""?(e.style.inlineSize="100%",e.style.maxInlineSize="100%"):(e.style.removeProperty("inline-size"),e.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?e.style.blockSize="100%":e.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?e.style.maxBlockSize="100%":e.style.removeProperty("max-block-size")}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),(e.has("width")||e.has("height")||e.has("maxHeight")||e.has("sizing"))&&this.__applyInnerSizing()}firstUpdated(){this.__applyInnerSizing()}};i.styles=d`
     :host {
       display: block;
       box-sizing: border-box;
@@ -97,7 +100,7 @@ import{a as d,n as r,i as p,x as a,t as y}from"../../vendor/vendor.js";import"..
       letter-spacing: var(--md-sys-typescale-headline-large-tracking);
     }
     .keyfigure .value { white-space: nowrap; }
-    .keyfigure .unit { margin-inline-start: .25em; }
+    .keyfigure .unit { margin-inline-start: .25em; white-space: nowrap; }
 
     .sub-label {
       font-size: var(--md-sys-typescale-title-medium-size);
@@ -120,4 +123,4 @@ import{a as d,n as r,i as p,x as a,t as y}from"../../vendor/vendor.js";import"..
       line-height: var(--md-sys-typescale-display-medium-line-height);
       letter-spacing: var(--md-sys-typescale-display-medium-tracking);
     }
-  `;s([r({attribute:"keyfigure"})],t.prototype,"keyfigure",2);s([r({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);s([r({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);s([r({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);s([r({type:String})],t.prototype,"icon",2);s([r({type:String})],t.prototype,"size",2);s([r({type:String})],t.prototype,"unit",2);s([r({type:String})],t.prototype,"width",2);s([r({type:String,attribute:"max-width"})],t.prototype,"maxWidth",2);s([r({type:String})],t.prototype,"height",2);s([r({type:String,attribute:"max-height"})],t.prototype,"maxHeight",2);s([r({type:String,reflect:!0})],t.prototype,"sizing",2);t=s([y("scb-keyfigure-card")],t);
+  `;s([a({attribute:"keyfigure"})],i.prototype,"keyfigure",2);s([a({type:String,attribute:"sub-label"})],i.prototype,"subLabel",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"card-href"})],i.prototype,"cardHref",2);s([a({type:String})],i.prototype,"icon",2);s([a({type:String})],i.prototype,"size",2);s([a({type:String})],i.prototype,"unit",2);s([a({type:String})],i.prototype,"width",2);s([a({type:String,attribute:"max-width"})],i.prototype,"maxWidth",2);s([a({type:String})],i.prototype,"height",2);s([a({type:String,attribute:"max-height"})],i.prototype,"maxHeight",2);s([a({type:String,reflect:!0})],i.prototype,"sizing",2);i=s([y("scb-keyfigure-card")],i);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.25",
+    "version":  "0.1.27",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -273,5 +273,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "05D76A892C0C90F95AC836FB20F81F914E21BD5CECF4A100D826E23AC63AC27A"
+    "buildHash":  "76634EA48E454A3CAD4956F1E9591F79B83002232CD775FBE6B180BF39CF3F64"
 }

package/scb-breadcrumb/scb-breadcrumb-item.js

@@ -1,10 +1,10 @@
 import { LitElement as u, css as b, html as l } from "lit";
-import { property as n, customElement as m } from "lit/decorators.js";
+import { property as c, customElement as m } from "lit/decorators.js";
 import "../scb-link/scb-link.js";
-var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (p, t, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? f(t, o) : t, c = p.length - 1, i; c >= 0; c--)
-    (i = p[c]) && (r = (s ? i(t, o, r) : i(r)) || r);
-  return s && r && h(t, o, r), r;
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (o, t, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? h(t, n) : t, p = o.length - 1, i; p >= 0; p--)
+    (i = o[p]) && (r = (s ? i(t, n, r) : i(r)) || r);
+  return s && r && f(t, n, r), r;
 };
 let e = class extends u {
   constructor() {
@@ -13,17 +13,9 @@ let e = class extends u {
   static get styles() {
     return b`
     .breadcrumb-separator {
-      margin: 0 8px;
+      margin: var(--spacing-0) var(--spacing-3);
       color: var(--md-sys-color-on-surface);
     }
-    .breadcrumb-link { 
-        color: var(--md-sys-color-primary);
-        text-decoration-thickness: 1px;
-        
-      }
-      .breadcrumb-link:hover { 
-        text-decoration-thickness: 2px;
-      }
     `;
   }
   render() {
@@ -39,13 +31,13 @@ let e = class extends u {
   }
 };
 a([
-  n({ type: String })
+  c({ type: String })
 ], e.prototype, "label", 2);
 a([
-  n({ type: Boolean, attribute: "is-current" })
+  c({ type: Boolean, attribute: "is-current" })
 ], e.prototype, "isCurrent", 2);
 a([
-  n({ type: String, attribute: "item-href" })
+  c({ type: String, attribute: "item-href" })
 ], e.prototype, "href", 2);
 e = a([
   m("scb-breadcrumb-item")

package/scb-breadcrumb/scb-breadcrumb.d.ts

@@ -3,6 +3,9 @@ export declare class SCBBreadcrumb extends LitElement {
     showAll: boolean;
     static get styles(): import('lit').CSSResult;
     private _onEllipsisClick;
+    private _observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): TemplateResult;
 }
 declare global {