scb-wc-test 0.1.11 → 0.1.13

package/scb-card/scb-card.js

@@ -1,143 +1,131 @@
 import { css as p, LitElement as h, html as t } from "lit";
-import { property as e, customElement as v } from "lit/decorators.js";
+import { property as s, customElement as v } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 import "../scb-list/scb-list.js";
 import "../scb-button/scb-button.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (a, r, l, d) => {
-  for (var c = d > 1 ? void 0 : d ? b(r, l) : r, n = a.length - 1, o; n >= 0; n--)
-    (o = a[n]) && (c = (d ? o(r, l, c) : o(c)) || c);
-  return d && c && m(r, l, c), c;
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (a, r, c, l) => {
+  for (var d = l > 1 ? void 0 : l ? b(r, c) : r, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (d = (l ? o(r, c, d) : o(d)) || d);
+  return l && d && m(r, c, d), d;
 };
 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;
+    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" : "", d = this.mediaType ? `${this.mediaType.toLowerCase()}` : "";
+    const a = this.variant ? `${this.variant.toLowerCase()}` : "", r = this.direction ? `${this.direction.toLowerCase()}` : "", c = this.cardHref ? "clickable" : "", l = 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="${d}" 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>
-            `;
+          <div class="scb-card ${a} ${r} ${c}">
+            ${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 ${a} vertical ${l}">
-                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" 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>
+          <div class="scb-card ${a} vertical ${c}">
+            ${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>
         `;
       case "social":
         return t`
-                <div class="scb-card ${a} ${r} ${l}">
-                    ${this.cardHref ? t`<md-ripple></md-ripple>` : ""}
-                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" 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} ${c}">
+            ${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>
         `;
       case "link":
         return t`
-                <div class="scb-card ${a} ${r} ${l}">
-                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" 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} ${c}">
+            ${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>
         `;
       case "action":
         return t`
-                <div class="scb-card ${a} ${r} ${l}">
-                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" 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} ${c}">
+            ${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>
         `;
       default:
         return t`
-            <div class="scb-card ${a} ${r} ${l}">
-                ${this.cardHref ? t`<md-ripple></md-ripple>` : ""}
-                ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" 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} ${c}">
+            ${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>
         `;
     }
   }
@@ -151,193 +139,220 @@ let i = class extends h {
   }
 };
 i.styles = p`
-    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
-    :host{ --scb-card-min-w:  360px; }
-
     :host {
-        max-width: var(--scb-card-min-w);
-        width: 100%;
-        display: block;
-    }
-    /* 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);
+      --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;
     }
-        .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);
     }
 
+    .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);
+    }
   `;
-s([
-  e({ type: String })
+e([
+  s({ type: String })
 ], i.prototype, "type", 2);
-s([
-  e({ type: String })
+e([
+  s({ type: String })
 ], i.prototype, "variant", 2);
-s([
-  e({ type: String })
+e([
+  s({ type: String })
 ], i.prototype, "direction", 2);
-s([
-  e({ type: String, attribute: "media-type" })
+e([
+  s({ type: String, attribute: "media-type" })
 ], i.prototype, "mediaType", 2);
-s([
-  e({ type: String, attribute: "media-href" })
+e([
+  s({ type: String, attribute: "media-href" })
 ], i.prototype, "mediaHref", 2);
-s([
-  e({ type: String, attribute: "card-href" })
+e([
+  s({ type: String, attribute: "card-href" })
 ], i.prototype, "cardHref", 2);
-s([
-  e({ type: String })
+e([
+  s({ type: String })
 ], i.prototype, "label", 2);
-s([
-  e({ type: String, attribute: "sub-label" })
+e([
+  s({ type: String, attribute: "sub-label" })
 ], i.prototype, "subLabel", 2);
-s([
-  e({ type: String, attribute: "supporting-text" })
+e([
+  s({ type: String, attribute: "supporting-text" })
 ], i.prototype, "supportingText", 2);
-s([
-  e({ type: Date, reflect: !0 })
+e([
+  s({ type: Date, reflect: !0 })
 ], i.prototype, "date", 2);
-s([
-  e({ type: String, attribute: "social-comments-text" })
+e([
+  s({ type: String, attribute: "social-comments-text" })
 ], i.prototype, "commentsText", 2);
-s([
-  e({ type: Number, attribute: "social-comments", reflect: !0 })
+e([
+  s({ type: Number, attribute: "social-comments", reflect: !0 })
 ], i.prototype, "comments", 2);
-s([
-  e({ type: String, attribute: "social-likes-text" })
+e([
+  s({ type: String, attribute: "social-likes-text" })
 ], i.prototype, "likesText", 2);
-s([
-  e({ type: Number, attribute: "social-likes", reflect: !0 })
+e([
+  s({ type: Number, attribute: "social-likes", reflect: !0 })
 ], i.prototype, "likes", 2);
-i = s([
+e([
+  s({ type: Boolean, reflect: !0, attribute: "full-height" })
+], i.prototype, "fullHeight", 2);
+e([
+  s({ type: Boolean, reflect: !0, attribute: "full-width" })
+], i.prototype, "fullWidth", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "stretch", 2);
+i = e([
   v("scb-card")
 ], i);
 export {

package/scb-checkbox/scb-checkbox.d.ts

@@ -9,6 +9,7 @@ export declare class ScbCheckbox extends LitElement {
     connectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
+    private __syncInnerAria;
     static styles: import('lit').CSSResult;
     render(): TemplateResult;
 }