scb-wc-test 0.1.11 → 0.1.13

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

@@ -1,256 +1,262 @@
-import{b as p,n as d,i as h,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"../../vendor/preload-helper.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 a=customElements.define.bind(customElements);customElements.define=function(r,l,c){try{customElements.get(r)||a(r,l,c)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(e,a,r,l)=>{for(var c=l>1?void 0:l?b(a,r):a,n=e.length-1,o;n>=0;n--)(o=e[n])&&(c=(l?o(a,r,c):o(c))||c);return l&&c&&m(a,r,c),c};let i=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",a=this.direction?`${this.direction.toLowerCase()}`:"",r=this.cardHref?"clickable":"",l=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return t`
-                <div class="scb-card ${e} ${a} ${r}">
-                    ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-                    ${this.mediaHref?t`<img src="${this.mediaHref}" class="${l}" alt="" ?hidden=${!this.mediaHref} />`:""}
-                    <div class="full-content">
-                        <div class="top-content">
-                           ${this.label?t`
-                            <div class="header">
-                                ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
-                            </div>`:""}
-                            ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                            ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                            ${this.date?t`<div class="date">${this.date}</div>`:""}
-                        </div>
-                    </div>
-                </div>
-            `;case"list":return t`
-                <div class="scb-card ${e} vertical ${r}">
-                    ${this.mediaHref?t`<img src="${this.mediaHref}" class="${l}" alt="" ?hidden=${!this.mediaHref} />`:""}
-                    <div class="full-content">
-                        <div class="top-content">
-                           ${this.label?t`                            
-                            <div class="header">
-                                ${this.label}
-                            </div>`:""}
-                            ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                            ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                            ${this.date?t`<div class="date">${this.date}</div>`:""}
-                        </div>
-                        <div class="content list">
-                            <slot></slot>
-                        </div>
-                    </div>
-                </div>
+import{a as p,n as s,i as h,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"../../vendor/preload-helper.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 r=customElements.define.bind(customElements);customElements.define=function(l,c,d){try{customElements.get(l)||r(l,c,d)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,r,l,c)=>{for(var d=c>1?void 0:c?b(r,l):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(d=(c?o(r,l,d):o(d))||d);return c&&d&&m(r,l,d),d};let e=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",l=this.cardHref?"clickable":"",c=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return t`
+          <div class="scb-card ${a} ${r} ${l}">
+            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
+            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+            <div class="full-content">
+              <div class="top-content">
+                ${this.label?t`
+                  <div class="header">
+                    ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                  </div>`:""}
+                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?t`<div class="date">${this.date}</div>`:""}
+              </div>
+            </div>
+          </div>
+        `;case"list":return t`
+          <div class="scb-card ${a} vertical ${l}">
+            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+            <div class="full-content">
+              <div class="top-content">
+                ${this.label?t`<div class="header">${this.label}</div>`:""}
+                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?t`<div class="date">${this.date}</div>`:""}
+              </div>
+              <div class="content list">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
         `;case"social":return t`
-                <div class="scb-card ${e} ${a} ${r}">
-                    ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-                    ${this.mediaHref?t`<img src="${this.mediaHref}" class="${l}" alt="" ?hidden=${!this.mediaHref} />`:""}
-                    <div class="full-content">
-                        <div class="top-content">
-                           ${this.label?t`
-                            <div class="header">
-                                ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
-                            </div>`:""}
-                            ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                            ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                            ${this.date?t`<div class="date">${this.date}</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>
+          <div class="scb-card ${a} ${r} ${l}">
+            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
+            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+            <div class="full-content">
+              <div class="top-content">
+                ${this.label?t`
+                  <div class="header">
+                    ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                  </div>`:""}
+                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?t`<div class="date">${this.date}</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>
+          </div>
         `;case"link":return t`
-                <div class="scb-card ${e} ${a} ${r}">
-                    ${this.mediaHref?t`<img src="${this.mediaHref}" class="${l}" alt="" ?hidden=${!this.mediaHref} />`:""}
-                    <div class="full-content">
-                        <div class="top-content">
-                            ${this.label?t`
-                            <div class="header">
-                                ${this.label}
-                            </div>`:""}
-                            ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                            ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                            ${this.date?t`<div class="date">${this.date}</div>`:""}
-                        </div>
-                        <div class="content links">
-                            <slot></slot>
-                        </div>
-                    </div>
-                </div>
+          <div class="scb-card ${a} ${r} ${l}">
+            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+            <div class="full-content">
+              <div class="top-content">
+                ${this.label?t`<div class="header">${this.label}</div>`:""}
+                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?t`<div class="date">${this.date}</div>`:""}
+              </div>
+              <div class="content links">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
         `;case"action":return t`
-                <div class="scb-card ${e} ${a} ${r}">
-                    ${this.mediaHref?t`<img src="${this.mediaHref}" class="${l}" alt="" ?hidden=${!this.mediaHref} />`:""}
-                    <div class="full-content">
-                        <div class="top-content">
-                            ${this.label?t`
-                            <div class="header">
-                                ${this.label}
-                            </div>`:""}
-                            ${this.subLabel?t`
-                            <div class="sub-label">${this.subLabel}</div>`:""}
-                            ${this.supportingText?t`
-                            <div class="supporting-text">${this.supportingText}</div>`:""}
-                            ${this.date?t`
-                            <div class="date">${this.date}</div>`:""}
-                        </div>
-                        <div class="content actions">
-                            <slot></slot>
-                        </div>
-                    </div>
-                </div>
+          <div class="scb-card ${a} ${r} ${l}">
+            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+            <div class="full-content">
+              <div class="top-content">
+                ${this.label?t`<div class="header">${this.label}</div>`:""}
+                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?t`<div class="date">${this.date}</div>`:""}
+              </div>
+              <div class="content actions">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
         `;default:return t`
-            <div class="scb-card ${e} ${a} ${r}">
-                ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-                ${this.mediaHref?t`<img src="${this.mediaHref}" class="${l}" alt="" ?hidden=${!this.mediaHref} />`:""}
-                <div class="full-content">
-                    <div class="top-content">
-                        ${this.label?t`
-                        <div class="header">
-                            ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
-                        </div>`:""}
-                        ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                        ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                        ${this.date?t`<div class="date">${this.date}</div>`:""}
-                    </div>
-                </div>
+          <div class="scb-card ${a} ${r} ${l}">
+            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
+            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+            <div class="full-content">
+              <div class="top-content">
+                ${this.label?t`
+                  <div class="header">
+                    ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                  </div>`:""}
+                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?t`<div class="date">${this.date}</div>`:""}
+              </div>
             </div>
-        `}}firstUpdated(){if(this.cardHref){const e=this.renderRoot.querySelector(".scb-card");e&&e.addEventListener("click",a=>{a.target.closest("a")||(window.location.href=this.cardHref)})}}};i.styles=p`
-    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
-    :host{ --scb-card-min-w:  360px; }
-
+          </div>
+        `}}firstUpdated(){if(this.cardHref){const a=this.renderRoot.querySelector(".scb-card");a&&a.addEventListener("click",r=>{r.target.closest("a")||(window.location.href=this.cardHref)})}}};e.styles=p`
     :host {
-        max-width: var(--scb-card-min-w);
-        width: 100%;
-        display: block;
+      --scb-card-max-w: 360px;
+      display: block;
+      box-sizing: border-box;
+      inline-size: 100%; 
+      min-inline-size: 0;  
+      max-inline-size: var(--scb-card-max-w);
+      height: auto;
     }
-    /* Grundläggande stilar för kortet */
-    .scb-card { 
-        color: var(--md-sys-color-on-surface);
-        display: flex;
-        max-width: var(--scb-card-min-w);
-        position: relative;
-        background: transparent;
-        border-radius: var(--md-sys-shape-corner-large);
-        background: var(--md-sys-color-surface);
-    }
-        .social-metrics md-icon {
-            width: var(--scale-05);
-            height: var(--scale-05);
-            font-size: var(--md-sys-typescale-title-large-size);
-            vertical-align: middle;
-        }
-        .social-metrics {
-            display: flex;
-            margin-top: var(--spacing-4);
-            gap: var(--spacing-5);
-            flex-wrap: wrap;
-        }
-        .comments, .likes {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-2);
-        }
-    .scb-card.outlined {
-        border: 1px solid var(--md-sys-color-outline-variant);
+    :host([type="standard"]) { --scb-card-max-w: var(--scb-card-standard-max-w, 360px); }
+    :host([type="list"])     { --scb-card-max-w: var(--scb-card-list-max-w, 360px); }
+    :host([type="social"])   { --scb-card-max-w: var(--scb-card-social-max-w, 360px); }
+    :host([type="link"])     { --scb-card-max-w: var(--scb-card-link-max-w, 360px); }
+    :host([type="action"])   { --scb-card-max-w: var(--scb-card-action-max-w, 360px); }
+
+    :host([full-width])  { max-inline-size: none; }
+    :host([stretch]),
+    :host([full-height]) { block-size: 100%; } 
+
+    :host([stretch]) .scb-card,
+    :host([full-height]) .scb-card {
+      block-size: 100%;
     }
-    .scb-card.filled {
-      background: var(--md-sys-color-surface-dim);
+
+    .scb-card {
+      color: var(--md-sys-color-on-surface);
+      display: flex;
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large);
+      background: var(--md-sys-color-surface);
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      overflow: hidden;
     }
-    .scb-card.vertical {
-        flex-direction: column;
+
+    .scb-card.outlined { border: 1px solid var(--md-sys-color-outline-variant); }
+    .scb-card.filled   { background: var(--md-sys-color-surface-dim); }
+    .scb-card.vertical { flex-direction: column; }
+    .scb-card.clickable{ cursor: pointer; }
+
+    md-ripple {
+      position: absolute;
+      inset: 0;
+      border-radius: var(--md-sys-shape-corner-large);
+      pointer-events: none;
     }
-    .scb-card.clickable {
-        cursor: pointer;
+
+    .full-content { padding: var(--spacing-7) var(--spacing-6); }
+    .top-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+      min-inline-size: 0; 
     }
 
-    /* Textstilar */
     .header {
-        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);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .header a {
-        color: inherit;
-        text-decoration: none;
+      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);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-inline-size: 0;
     }
+    .header a { color: inherit; text-decoration: none; }
     .sub-label {
-        font-size: var(--md-sys-typescale-title-medium-size);
-        font-weight: var(--weight-semibold);
-        line-height: var(--md-sys-typescale-title-medium-line-height);
-        letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      font-weight: var(--weight-semibold);
+      line-height: var(--md-sys-typescale-title-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     }
     .supporting-text {
-        font-size: var(--md-sys-typescale-body-large-size);
-        line-height: var(--md-sys-typescale-body-large-line-height);
-        letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      font-size: var(--md-sys-typescale-body-large-size);
+      line-height: var(--md-sys-typescale-body-large-line-height);
+      letter-spacing: var(--md-sys-typescale-body-large-tracking);
     }
     .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);
-    }
-    .full-content {
-        padding: var(--spacing-7) var(--spacing-6);
-    }
-    md-ripple {
-        border-radius: var(--md-sys-shape-corner-large);
-    }
-    .top-content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-3);
-  
+      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);
     }
+
     .scb-card img {
-        border-radius: var(--md-sys-shape-corner-large);
-        width: 100%;
-        object-fit: contain;
+      display: block;
+      border-radius: var(--md-sys-shape-corner-large);
+      inline-size: 100%;
+      max-inline-size: 100%;
+      height: auto;
+      object-fit: cover; 
     }
-    .scb-card img.avatar{
-        border-radius: var(--md-sys-shape-corner-full);
-        width: var(--icon-size-large);
-        height: var(--icon-size-large);
-        margin: var(--spacing-7) 0 0 var(--spacing-6);
+    .scb-card img.avatar {
+      border-radius: var(--md-sys-shape-corner-full);
+      width: var(--icon-size-large);
+      height: var(--icon-size-large);
+      margin: var(--spacing-7) 0 0 var(--spacing-6);
+      inline-size: auto;
+      object-fit: cover;
     }
     .scb-card img.avatar + .full-content {
-        padding: var(--spacing-5) var(--spacing-6) var(--spacing-7) var(--spacing-6);
+      padding: var(--spacing-5) var(--spacing-6) var(--spacing-7) var(--spacing-6);
     }
 
-    /* Horisontella kortspecifika stilar */
     .scb-card.horizontal {
-        flex-direction: row;
-        width: 100%;
-        max-width: 576px;
+      flex-direction: row;
+      inline-size: 100%;
+      max-inline-size: 100%;
     }
     .scb-card.horizontal .full-content {
-        padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
-        width: 100%;
+      padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
+      inline-size: 100%;
+      min-inline-size: 0;
     }
-    .scb-card.horizontal img{
-        width: auto;
-        height: 133px;
-        margin: var(--spacing-6);
-    }
-    .scb-card.horizontal img.avatar {
-        border-radius: var(--md-sys-shape-corner-full);
-        width: var(--icon-size-large);
-        height: var(--icon-size-large);
-        margin: var(--spacing-6) 0 var(--spacing-6) var(--spacing-6);
+    .scb-card.horizontal img {
+      height: 133px;
+      width: auto;
+      margin: var(--spacing-6);
+      object-fit: cover;
+      flex: 0 0 auto;
     }
 
-    .scb-card .content.list{
-        margin-top: var(--spacing-7);
+    .social-metrics {
+      display: flex;
+      margin-top: var(--spacing-4);
+      gap: var(--spacing-5);
+      flex-wrap: wrap;
+    }
+    .social-metrics md-icon {
+      width: var(--scale-05);
+      height: var(--scale-05);
+      font-size: var(--md-sys-typescale-title-large-size);
+      vertical-align: middle;
     }
+    .comments, .likes {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .scb-card .content.list { margin-top: var(--spacing-7); }
     .scb-card .content.actions ::slotted(*) {
-        margin-top: var(--spacing-7);
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-3);
+      margin-top: var(--spacing-7);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-3);
     }
     .scb-card .content.links ::slotted(*) {
-        margin-top: var(--spacing-3);
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-3);
+      margin-top: var(--spacing-3);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
     }
 
-  `;s([d({type:String})],i.prototype,"type",2);s([d({type:String})],i.prototype,"variant",2);s([d({type:String})],i.prototype,"direction",2);s([d({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);s([d({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);s([d({type:String,attribute:"card-href"})],i.prototype,"cardHref",2);s([d({type:String})],i.prototype,"label",2);s([d({type:String,attribute:"sub-label"})],i.prototype,"subLabel",2);s([d({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([d({type:Date,reflect:!0})],i.prototype,"date",2);s([d({type:String,attribute:"social-comments-text"})],i.prototype,"commentsText",2);s([d({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);s([d({type:String,attribute:"social-likes-text"})],i.prototype,"likesText",2);s([d({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);i=s([v("scb-card")],i);
+    .scb-card:not(.filled) .content.list ::slotted(scb-list) {
+      --scb-list-bg: var(--md-sys-color-surface);
+    }
+    .scb-card.filled .content.list ::slotted(scb-list) {
+      --scb-list-bg: var(--md-sys-color-surface-dim);
+    }
+  `;i([s({type:String})],e.prototype,"type",2);i([s({type:String})],e.prototype,"variant",2);i([s({type:String})],e.prototype,"direction",2);i([s({type:String,attribute:"media-type"})],e.prototype,"mediaType",2);i([s({type:String,attribute:"media-href"})],e.prototype,"mediaHref",2);i([s({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);i([s({type:String})],e.prototype,"label",2);i([s({type:String,attribute:"sub-label"})],e.prototype,"subLabel",2);i([s({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);i([s({type:Date,reflect:!0})],e.prototype,"date",2);i([s({type:String,attribute:"social-comments-text"})],e.prototype,"commentsText",2);i([s({type:Number,attribute:"social-comments",reflect:!0})],e.prototype,"comments",2);i([s({type:String,attribute:"social-likes-text"})],e.prototype,"likesText",2);i([s({type:Number,attribute:"social-likes",reflect:!0})],e.prototype,"likes",2);i([s({type:Boolean,reflect:!0,attribute:"full-height"})],e.prototype,"fullHeight",2);i([s({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",2);i([s({type:Boolean,reflect:!0})],e.prototype,"stretch",2);e=i([v("scb-card")],e);

package/mvc/components/scb-checkbox/scb-checkbox-group.js

@@ -1,4 +1,4 @@
-import{b as u,n as d,i as b,x as f,t as g}from"../../vendor/vendor.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,o,r){try{customElements.get(e)||s(e,o,r)}catch(a){var i=String(a||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var _=Object.defineProperty,v=Object.getOwnPropertyDescriptor,h=t=>{throw TypeError(t)},l=(t,s,e,o)=>{for(var r=o>1?void 0:o?v(s,e):s,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=(o?a(s,e,r):a(r))||r);return o&&r&&_(s,e,r),r},y=(t,s,e)=>s.has(t)||h("Cannot "+e),p=(t,s,e)=>(y(t,s,"read from private field"),e?e.call(t):s.get(t)),x=(t,s,e)=>s.has(t)?h("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),c;let n=class extends b{constructor(){super(...arguments),this.orientation="vertical",this.disabled=!1,this.spacing="group",x(this,c,()=>{const t=this.shadowRoot?.querySelector("slot");if(!t)return;const s=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-checkbox");for(const e of s)this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation"),this.spacing==="group"?e.style.setProperty("--scb-checkbox-gap","0"):e.style.removeProperty("--scb-checkbox-gap")})}render(){const t=this.orientation==="horizontal"?"row":"column";return f`
+import{a as u,n as d,i as f,x as b,t as g}from"../../vendor/vendor.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,o,r){try{customElements.get(e)||s(e,o,r)}catch(a){var i=String(a||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var _=Object.defineProperty,v=Object.getOwnPropertyDescriptor,h=t=>{throw TypeError(t)},l=(t,s,e,o)=>{for(var r=o>1?void 0:o?v(s,e):s,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=(o?a(s,e,r):a(r))||r);return o&&r&&_(s,e,r),r},y=(t,s,e)=>s.has(t)||h("Cannot "+e),p=(t,s,e)=>(y(t,s,"read from private field"),e?e.call(t):s.get(t)),x=(t,s,e)=>s.has(t)?h("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),c;let n=class extends f{constructor(){super(...arguments),this.orientation="vertical",this.disabled=!1,this.spacing="group",x(this,c,()=>{const t=this.shadowRoot?.querySelector("slot");if(!t)return;const s=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-checkbox");for(const e of s)this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation"),this.spacing==="group"?e.style.setProperty("--scb-checkbox-gap","0"):e.style.removeProperty("--scb-checkbox-gap")})}render(){const t=this.orientation==="horizontal"?"row":"column";return b`
       <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${t}`}>
         <slot @slotchange=${p(this,c)}></slot>
       </div>

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

@@ -1,24 +1,22 @@
-import{b as h,n as l,i as b,E as d,x as p,t as u}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(t,c,r){try{customElements.get(t)||i(t,c,r)}catch(a){var s=String(a||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(e,i,t,c)=>{for(var r=c>1?void 0:c?f(i,t):i,s=e.length-1,a;s>=0;s--)(a=e[s])&&(r=(c?a(i,t,r):a(r))||r);return c&&r&&g(i,t,r),r};let o=class extends b{constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.label="",this.supportingText="",this._checkboxId=""}connectedCallback(){super.connectedCallback(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).slice(2,11)}`}firstUpdated(){const e=this.shadowRoot?.querySelector("md-checkbox");e&&e.addEventListener("change",()=>{const t=e.checked;this.checked=t,this.dispatchEvent(new CustomEvent("change",{detail:{checked:t},bubbles:!0,composed:!0}))}),this.shadowRoot?.querySelector("label.wrap")?.addEventListener("click",t=>{if(this.disabled)return;if(!t.composedPath().some(s=>{const a=s;return a?.tagName?.toLowerCase?.()==="md-checkbox"||a?.classList?.contains("box-wrap")})){t.preventDefault();const s=this.shadowRoot.querySelector("md-checkbox");s&&(s.checked=!s.checked,s.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}})}updated(e){super.updated(e),e.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled)}render(){const e=this.supportingText?`${this._checkboxId}-supporting-text`:void 0;return p`
+import{a as h,n as l,i as b,E as d,x as p,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,o,s){try{customElements.get(e)||i(e,o,s)}catch(a){var r=String(a||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var m=Object.defineProperty,g=Object.getOwnPropertyDescriptor,n=(t,i,e,o)=>{for(var s=o>1?void 0:o?g(i,e):i,r=t.length-1,a;r>=0;r--)(a=t[r])&&(s=(o?a(i,e,s):a(s))||s);return o&&s&&m(i,e,s),s};let c=class extends b{constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.label="",this.supportingText="",this._checkboxId=""}connectedCallback(){super.connectedCallback(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).slice(2,11)}`}firstUpdated(){const t=this.shadowRoot?.querySelector("md-checkbox");t&&t.addEventListener("change",()=>{const e=t.checked;this.checked=e,this.dispatchEvent(new CustomEvent("change",{detail:{checked:e},bubbles:!0,composed:!0}))}),this.shadowRoot?.querySelector("label.wrap")?.addEventListener("click",e=>{if(this.disabled)return;if(!e.composedPath().some(r=>{const a=r;return a?.tagName?.toLowerCase?.()==="md-checkbox"||a?.classList?.contains("box-wrap")})){e.preventDefault();const r=this.shadowRoot.querySelector("md-checkbox");r&&(r.checked=!r.checked,r.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}}),this.__syncInnerAria()}updated(t){super.updated(t),t.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),(t.has("label")||t.has("supportingText"))&&this.__syncInnerAria()}__syncInnerAria(){const i=this.shadowRoot?.querySelector("md-checkbox")?.shadowRoot;if(!i)return;const e=i.querySelector('[role="checkbox"]')||i.querySelector('input[type="checkbox"]');if(!e)return;const o=this.label?`${this._checkboxId}-label`:"",s=this.supportingText?`${this._checkboxId}-supporting-text`:"";o?e.setAttribute("aria-labelledby",o):e.removeAttribute("aria-labelledby"),s?e.setAttribute("aria-describedby",s):e.removeAttribute("aria-describedby")}render(){const t=this.supportingText?`${this._checkboxId}-supporting-text`:void 0;return p`
       <label class="wrap">
         <div class="box-wrap">
           <md-checkbox
             id="${this._checkboxId}"
-            touch-target="wrapper"
             ?disabled=${this.disabled}
             ?indeterminate=${this.indeterminate}
             ?checked=${this.checked}
-            aria-describedby=${e||d}
-            aria-label=${this.label||d}
+            ${d}
           ></md-checkbox>
         </div>
-        ${this.label?p`<span class="lbl">${this.label}</span>`:d}
+        ${this.label?p`<span class="lbl" id="${this._checkboxId}-label">${this.label}</span>`:d}
       </label>
 
-      ${this.supportingText?p`<div id="${this._checkboxId}-supporting-text" class="supporting-text">
+      ${this.supportingText?p`<div id="${t}" class="supporting-text">
             ${this.supportingText}
           </div>`:d}
       <slot></slot>
-    `}};o.styles=h`
+    `}};c.styles=h`
     :host {
       display: inline-grid;
       grid-template-columns: auto;
@@ -55,10 +53,10 @@ import{b as h,n as l,i as b,E as d,x as p,t as u}from"../../vendor/vendor.js";im
     .lbl {
       color: var(--md-sys-color-on-surface);
       font-family: var(--brand-font);
-      font-size: var(--md-sys-typescale-body-large-size);
-      line-height: var(--md-sys-typescale-body-large-line-height);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
       font-weight: var(--weight-regular, 400);
-      letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     }
     :host([disabled]) .lbl { color: var(--n-60); }
 
@@ -73,4 +71,4 @@ import{b as h,n as l,i as b,E as d,x as p,t as u}from"../../vendor/vendor.js";im
       .lbl { color: var(--md-sys-color-on-surface); }
       .supporting-text { color: var(--md-sys-color-on-surface-variant); }
     }
-  `;n([l({type:Boolean,reflect:!0})],o.prototype,"disabled",2);n([l({type:Boolean,reflect:!0})],o.prototype,"indeterminate",2);n([l({type:Boolean,reflect:!0})],o.prototype,"checked",2);n([l({type:String})],o.prototype,"label",2);n([l({type:String,attribute:"supporting-text"})],o.prototype,"supportingText",2);o=n([u("scb-checkbox")],o);export{o as ScbCheckbox};
+  `;n([l({type:Boolean,reflect:!0})],c.prototype,"disabled",2);n([l({type:Boolean,reflect:!0})],c.prototype,"indeterminate",2);n([l({type:Boolean,reflect:!0})],c.prototype,"checked",2);n([l({type:String})],c.prototype,"label",2);n([l({type:String,attribute:"supporting-text"})],c.prototype,"supportingText",2);c=n([u("scb-checkbox")],c);export{c as ScbCheckbox};

package/mvc/components/scb-chips/scb-chip.js

@@ -1,5 +1,5 @@
 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 h}from"../../vendor/preload-helper.js";import{b as p,n as a,i as _,x as n,t as u}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(r,l,s){try{customElements.get(r)||o(r,l,s)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(e,o,r,l)=>{for(var s=l>1?void 0:l?f(o,r):o,d=e.length-1,c;d>=0;d--)(c=e[d])&&(s=(l?c(o,r,s):c(s))||s);return l&&s&&m(o,r,s),s};let t=class extends _{constructor(){super(...arguments),this.variant="assist",this.label="",this.icon="",this.disabled=!1,this.elevated=!1,this.removable=!1,this.selected=!1,this.__loadedVariants=new Set,this.__chipSetLoaded=!1,this.__iconLoaded=!1}updated(e){super.updated(e),(e.has("variant")||e.has("icon"))&&this.__ensureDepsLoaded()}firstUpdated(){this.__ensureDepsLoaded()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"assist":await h(()=>import("../../vendor/vendor-material.js").then(e=>e.k),__vite__mapDeps([0,1]),import.meta.url);break;case"filter":await h(()=>import("../../vendor/vendor-material.js").then(e=>e.m),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}!this._insideChipSet&&!this.__chipSetLoaded&&(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.n),__vite__mapDeps([0,1]),import.meta.url),this.__chipSetLoaded=!0),this.icon&&!this.__iconLoaded&&(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}get _insideChipSet(){return!!this.closest("md-chip-set")}render(){const e=this._renderChip();return this._insideChipSet?e:n`<md-chip-set>${e}</md-chip-set>`}_renderChip(){const e=this.icon?n`<md-icon slot="icon">${this.icon}</md-icon>`:null;switch(this.variant){case"assist":return n`
+import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as a,i as _,x as n,t as u}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(r,l,s){try{customElements.get(r)||o(r,l,s)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(e,o,r,l)=>{for(var s=l>1?void 0:l?f(o,r):o,d=e.length-1,c;d>=0;d--)(c=e[d])&&(s=(l?c(o,r,s):c(s))||s);return l&&s&&m(o,r,s),s};let t=class extends _{constructor(){super(...arguments),this.variant="assist",this.label="",this.icon="",this.disabled=!1,this.elevated=!1,this.removable=!1,this.selected=!1,this.__loadedVariants=new Set,this.__chipSetLoaded=!1,this.__iconLoaded=!1}updated(e){super.updated(e),(e.has("variant")||e.has("icon"))&&this.__ensureDepsLoaded()}firstUpdated(){this.__ensureDepsLoaded()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"assist":await h(()=>import("../../vendor/vendor-material.js").then(e=>e.j),__vite__mapDeps([0,1]),import.meta.url);break;case"filter":await h(()=>import("../../vendor/vendor-material.js").then(e=>e.k),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}!this._insideChipSet&&!this.__chipSetLoaded&&(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.m),__vite__mapDeps([0,1]),import.meta.url),this.__chipSetLoaded=!0),this.icon&&!this.__iconLoaded&&(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}get _insideChipSet(){return!!this.closest("md-chip-set")}render(){const e=this._renderChip();return this._insideChipSet?e:n`<md-chip-set>${e}</md-chip-set>`}_renderChip(){const e=this.icon?n`<md-icon slot="icon">${this.icon}</md-icon>`:null;switch(this.variant){case"assist":return n`
           <md-assist-chip
             label=${this.label}
             ?disabled=${this.disabled}