scb-wc-test 0.1.85 → 0.1.87

package/scb-card/scb-card.js

@@ -1,16 +1,16 @@
-import { css as m, LitElement as v, html as i } from "lit";
-import { property as s, customElement as u } from "lit/decorators.js";
+import { css as m, LitElement as u, html as i } from "lit";
+import { property as s, customElement as b } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.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";
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (o, r, n, a) => {
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (o, r, n, a) => {
   for (var l = a > 1 ? void 0 : a ? g(r, n) : r, d = o.length - 1, c; d >= 0; d--)
     (c = o[d]) && (l = (a ? c(r, n, l) : c(l)) || l);
-  return a && l && b(r, n, l), l;
+  return a && l && v(r, n, l), l;
 };
-let t = class extends v {
+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.subtitle = "", 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 = (o) => {
       const r = o.currentTarget.closest(".media");
@@ -52,7 +52,6 @@ let t = class extends v {
       const l = `aspect-ratio:${a || `${r}/${n}`};`, d = this.mediaPlaceholder ? "has-ph" : "", c = this.mediaFit || "cover", p = this.mediaPosition || "center";
       return i`
         <div class="media ${d}" style="${l}">
-          <!-- Tillåt egna <source>-element via slot om man vill använda <picture> -->
           <slot name="media-sources"></slot>
           <img
             src="${this.mediaHref || ""}"
@@ -73,7 +72,9 @@ let t = class extends v {
     return null;
   }
   render() {
-    const o = this.variant ? `${this.variant.toLowerCase()}` : "", r = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", n = this.cardHref ? "clickable" : "", a = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", l = (p = !1) => p ? 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 = (p) => i`
+    const o = this.variant ? `${this.variant.toLowerCase()}` : "", r = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", n = this.cardHref ? "clickable" : "", a = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", l = (p = !1) => p ? 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 = (p) => i`
       <div
         class="scb-card ${o} ${r} ${n}"
         @click=${this.cardHref ? this.__handleHrefNavigation : null}
@@ -126,8 +127,14 @@ let t = class extends v {
             </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>
+                <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>
@@ -176,7 +183,7 @@ let t = class extends v {
   updated(o) {
     super.updated(o), o.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), o.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), o.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), o.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), o.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() {
+  async firstUpdated(o) {
     t.__iconLoaded || (await import("@material/web/icon/icon.js"), t.__iconLoaded = !0), t.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), t.__rippleLoaded = !0);
   }
 };
@@ -196,34 +203,44 @@ t.styles = m`
       --scb-card-horizontal-media-min: 96px;
       --scb-card-horizontal-media-aspect: 16 / 9;
     }
-    :host([type="standard"]) { --scb-card-max-w: var(--scb-card-standard-max-w); }
-    :host([type="list"])     { --scb-card-max-w: var(--scb-card-list-max-w); }
-    :host([type="social"])   { --scb-card-max-w: var(--scb-card-social-max-w); }
-    :host([type="link"])     { --scb-card-max-w: var(--scb-card-link-max-w); }
-    :host([type="action"])   { --scb-card-max-w: var(--scb-card-action-max-w); }
+    :host([type='standard']) {
+      --scb-card-max-w: var(--scb-card-standard-max-w);
+    }
+    :host([type='list']) {
+      --scb-card-max-w: var(--scb-card-list-max-w);
+    }
+    :host([type='social']) {
+      --scb-card-max-w: var(--scb-card-social-max-w);
+    }
+    :host([type='link']) {
+      --scb-card-max-w: var(--scb-card-link-max-w);
+    }
+    :host([type='action']) {
+      --scb-card-max-w: var(--scb-card-action-max-w);
+    }
 
     :host([height]) .scb-card,
     :host([max-height]) .scb-card,
-    :host([sizing="stretch"]) .scb-card {
+    :host([sizing='stretch']) .scb-card {
       block-size: 100%;
     }
 
-    :host([sizing="stretch"]) {
+    :host([sizing='stretch']) {
       inline-size: 100%;
       block-size: 100%;
       max-inline-size: none;
     }
 
-    :host([sizing="content-width"]) {
+    :host([sizing='content-width']) {
       display: inline-block;
       inline-size: auto;
       block-size: auto;
     }
-    :host([sizing="content-width"]) .scb-card {
+    :host([sizing='content-width']) .scb-card {
       inline-size: max-content;
     }
 
-    :host([sizing="content-height"]) {
+    :host([sizing='content-height']) {
       inline-size: 100%;
       block-size: auto;
       max-inline-size: none;
@@ -236,7 +253,9 @@ t.styles = m`
       display: none;
       border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
     }
-    :host(:focus-within) md-focus-ring { display: block; }
+    :host(:focus-within) md-focus-ring {
+      display: block;
+    }
 
     .scb-card {
       color: var(--md-sys-color-on-surface);
@@ -253,14 +272,26 @@ t.styles = m`
     }
 
     .scb-card:focus,
-    .scb-card:focus-visible { outline: none; }
+    .scb-card:focus-visible {
+      outline: none;
+    }
     .scb-card a:focus,
-    .scb-card a:focus-visible { outline: none; }
+    .scb-card a:focus-visible {
+      outline: none;
+    }
 
-    .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; }
+    .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;
@@ -291,16 +322,29 @@ t.styles = m`
       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%);
+        linear-gradient(
+          90deg,
+          rgba(0, 0, 0, 0.06) 25%,
+          rgba(0, 0, 0, 0.12) 37%,
+          rgba(0, 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%); } }
+    .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); }
+    .full-content {
+      padding: var(--spacing-7) var(--spacing-6);
+    }
     .top-content {
       display: flex;
       flex-direction: column;
@@ -331,8 +375,13 @@ t.styles = m`
       overflow-wrap: normal;
       hyphens: auto;
     }
-    .header a.title { color: inherit; text-decoration: none; }
-    .header md-icon { flex: 0 0 auto; }
+    .header a.title {
+      color: inherit;
+      text-decoration: none;
+    }
+    .header md-icon {
+      flex: 0 0 auto;
+    }
 
     .sub-label {
       font-size: var(--md-sys-typescale-title-medium-size);
@@ -361,8 +410,12 @@ t.styles = m`
       column-gap: var(--spacing-6);
       padding: var(--spacing-6);
     }
-    .scb-card.horizontal .media { align-self: flex-start; }
-    .scb-card.horizontal .media ::slotted(scb-avatar) { margin: 0; }
+    .scb-card.horizontal .media {
+      align-self: flex-start;
+    }
+    .scb-card.horizontal .media ::slotted(scb-avatar) {
+      margin: 0;
+    }
     .scb-card.horizontal .full-content {
       align-self: flex-start;
       padding: 0;
@@ -370,8 +423,12 @@ t.styles = m`
       min-inline-size: 0;
       flex: 1 1 auto;
     }
-    .scb-card.horizontal .header { align-items: flex-start; }
-    .scb-card.horizontal .header md-icon { align-self: flex-start; }
+    .scb-card.horizontal .header {
+      align-items: flex-start;
+    }
+    .scb-card.horizontal .header md-icon {
+      align-self: flex-start;
+    }
 
     .scb-card.horizontal .media img {
       margin: 0;
@@ -384,7 +441,7 @@ t.styles = m`
       block-size: auto;
     }
 
-    :host([sizing="content-width"]) .scb-card.horizontal:has(.media img) .full-content {
+    :host([sizing='content-width']) .scb-card.horizontal:has(.media img) .full-content {
       inline-size: max-content;
       flex: 0 1 auto;
     }
@@ -401,13 +458,16 @@ t.styles = m`
       font-size: var(--md-sys-typescale-title-large-size);
       vertical-align: middle;
     }
-    .comments, .likes {
+    .comments,
+    .likes {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
     }
 
-    .scb-card .content.list { margin-top: var(--spacing-7); }
+    .scb-card .content.list {
+      margin-top: var(--spacing-7);
+    }
 
     .scb-card .content.actions ::slotted(*) {
       margin-top: var(--spacing-7);
@@ -416,7 +476,9 @@ t.styles = m`
       gap: var(--spacing-3);
     }
 
-    .scb-card .content.links { margin-top: var(--spacing-3); }
+    .scb-card .content.links {
+      margin-top: var(--spacing-3);
+    }
     .scb-card .content.links ::slotted(a),
     .scb-card .content.links ::slotted(scb-link) {
       display: block;
@@ -431,13 +493,13 @@ t.styles = m`
     }
   `;
 e([
-  s({ type: String })
+  s({ type: String, reflect: !0 })
 ], t.prototype, "type", 2);
 e([
-  s({ type: String })
+  s({ type: String, reflect: !0 })
 ], t.prototype, "variant", 2);
 e([
-  s({ type: String })
+  s({ type: String, reflect: !0 })
 ], t.prototype, "direction", 2);
 e([
   s({ type: String, attribute: "media-type" })
@@ -482,28 +544,28 @@ e([
   s({ type: Boolean, attribute: "media-placeholder" })
 ], t.prototype, "mediaPlaceholder", 2);
 e([
-  s({ type: String, attribute: "card-href" })
+  s({ type: String, attribute: "card-href", reflect: !0 })
 ], t.prototype, "cardHref", 2);
 e([
-  s({ type: String })
+  s({ type: String, reflect: !0 })
 ], t.prototype, "title", 2);
 e([
-  s({ type: String })
+  s({ type: String, reflect: !0 })
 ], t.prototype, "subtitle", 2);
 e([
-  s({ type: String, attribute: "supporting-text" })
+  s({ type: String, attribute: "supporting-text", reflect: !0 })
 ], t.prototype, "supportingText", 2);
 e([
   s({ type: Date, reflect: !0 })
 ], t.prototype, "date", 2);
 e([
-  s({ type: String, attribute: "social-comments-text" })
+  s({ type: String, attribute: "social-comments-text", reflect: !0 })
 ], 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" })
+  s({ type: String, attribute: "social-likes-text", reflect: !0 })
 ], t.prototype, "likesText", 2);
 e([
   s({ type: Number, attribute: "social-likes", reflect: !0 })
@@ -524,7 +586,7 @@ e([
   s({ type: String, reflect: !0, attribute: "max-height" })
 ], t.prototype, "maxHeight", 2);
 t = e([
-  u("scb-card")
+  b("scb-card")
 ], t);
 export {
   t as ScbCard

package/scb-fact-card/scb-fact-card-content.d.ts

@@ -5,5 +5,9 @@ export declare class ScbFactCardContent extends LitElement {
     supportingText: string;
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
-    private _hasSlotContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-fact-card-content': ScbFactCardContent;
+    }
 }

package/scb-fact-card/scb-fact-card-content.js

@@ -1,83 +1,76 @@
-import { css as d, LitElement as h, html as a } from "lit";
-import { property as c, customElement as g } from "lit/decorators.js";
-var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (r, t, i, e) => {
-  for (var s = e > 1 ? void 0 : e ? y(t, i) : t, o = r.length - 1, p; o >= 0; o--)
-    (p = r[o]) && (s = (e ? p(t, i, s) : p(s)) || s);
-  return e && s && u(t, i, s), s;
+import { css as d, LitElement as g, html as l } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+var y = Object.defineProperty, h = Object.getOwnPropertyDescriptor, r = (c, s, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? h(s, a) : s, n = c.length - 1, p; n >= 0; n--)
+    (p = c[n]) && (t = (i ? p(s, a, t) : p(t)) || t);
+  return i && t && y(s, a, t), t;
 };
-let l = class extends h {
+let e = class extends g {
   constructor() {
     super(...arguments), this.title = "", this.subtitle = "", this.supportingText = "";
   }
   render() {
-    return a`
-        ${this.title ? a`
-        <div class="label">
-            ${this.title}
-        </div>` : ""}
-        ${this.subtitle ? a`<div class="sub-label">${this.subtitle}</div>` : ""}
-        ${this.supportingText ? a`<div class="supporting-text">${this.supportingText}</div>` : ""}
-        <slot @slotchange=${this.requestUpdate}></slot>
-        ${this._hasSlotContent() ? a`<div class="content links"><slot></slot></div>` : ""}
-        `;
-  }
-  _hasSlotContent() {
-    const r = this.shadowRoot && this.shadowRoot.querySelector("slot");
-    if (!r) return !1;
-    const t = r.assignedNodes({ flatten: !0 });
-    return t.length > 0 && t.some((i) => {
-      var e;
-      return i.nodeType === Node.TEXT_NODE ? (e = i.textContent) == null ? void 0 : e.trim() : !0;
-    });
+    return l`
+      ${this.title ? l`<div class="label">${this.title}</div>` : ""}
+      ${this.subtitle ? l`<div class="sub-label">${this.subtitle}</div>` : ""}
+      ${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : ""}
+
+      <div class="content links">
+        <slot></slot>
+      </div>
+    `;
   }
 };
-l.styles = d`
-        :host {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-3);
-            width: 100%;
-        }
-        .label{
-            letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            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);
-        }
-        .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);
-        }
-        .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);
-        }
-        .content.links ::slotted(*) {
-          margin-top: var(--spacing-3);
-          display: flex;
-          flex-direction: column;
-          gap: var(--spacing-3);
-        }
-    `;
-n([
-  c({ type: String, attribute: "title" })
-], l.prototype, "title", 2);
-n([
-  c({ type: String, attribute: "subtitle" })
-], l.prototype, "subtitle", 2);
-n([
-  c({ type: String, attribute: "supporting-text" })
-], l.prototype, "supportingText", 2);
-l = n([
-  g("scb-fact-card-content")
-], l);
+e.styles = d`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+      width: 100%;
+    }
+
+    .label {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+    .content.links ::slotted(*) {
+      margin-top: var(--spacing-3);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+  `;
+r([
+  o({ type: String, reflect: !0, attribute: "title" })
+], e.prototype, "title", 2);
+r([
+  o({ type: String, reflect: !0, attribute: "subtitle" })
+], e.prototype, "subtitle", 2);
+r([
+  o({ type: String, reflect: !0, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+e = r([
+  u("scb-fact-card-content")
+], e);
 export {
-  l as ScbFactCardContent
+  e as ScbFactCardContent
 };

package/scb-keyfigure-card/scb-keyfigure-card.d.ts

@@ -1,5 +1,7 @@
 import { LitElement, PropertyValues } from 'lit';
 export declare class ScbKeyFigureCard extends LitElement {
+    private static __iconLoaded;
+    private static __rippleLoaded;
     keyfigure: number | string;
     subtitle: string;
     supportingText: string;
@@ -14,10 +16,10 @@ export declare class ScbKeyFigureCard extends LitElement {
     sizing: 'stretch' | 'content-width' | 'content-height';
     static styles: import('lit').CSSResult;
     private formatNumber;
+    protected firstUpdated(): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
     private __applyInnerSizing;
     protected updated(changed: PropertyValues): void;
-    firstUpdated(): void;
     private __onKeyDown;
     private __handleHrefNavigation;
 }

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

@@ -1,14 +1,12 @@
-import { css as p, LitElement as u, html as a } from "lit";
-import { property as s, customElement as d } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
-import "@material/web/ripple/ripple.js";
+import { css as p, LitElement as d, html as a } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
 var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, r, n, o) => {
   for (var l = o > 1 ? void 0 : o ? g(r, n) : r, h = e.length - 1, c; h >= 0; h--)
     (c = e[h]) && (l = (o ? c(r, n, l) : c(l)) || l);
   return o && l && y(r, n, l), l;
 };
-let i = class extends u {
+let i = class extends d {
   constructor() {
     super(...arguments), this.keyfigure = 0, this.subtitle = "", 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);
@@ -22,6 +20,9 @@ let i = class extends u {
     const r = Number(e);
     return Number.isNaN(r) ? String(e) : r.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
   }
+  async firstUpdated() {
+    i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), this.__applyInnerSizing();
+  }
   render() {
     const e = !!this.cardHref, r = this.formatNumber(this.keyfigure), n = (this.unit || "").trim(), o = n ? `${r} ${n}` : r;
     return a`
@@ -66,12 +67,10 @@ let i = class extends u {
   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.__iconLoaded = !1;
+i.__rippleLoaded = !1;
 i.styles = p`
-
     :host {
       display: block;
       box-sizing: border-box;
@@ -89,7 +88,6 @@ i.styles = p`
       font-feature-settings: "tnum" 0, "pnum" 1;
     }
 
-
     :host([sizing="stretch"]) {
       inline-size: 100%;
       block-size: 100%;
@@ -158,6 +156,13 @@ i.styles = p`
       font-weight: var(--weight-semibold);
       line-height: var(--md-sys-typescale-title-medium-line-height);
       letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
     }
     .sub-label a { color: inherit; text-decoration: none; }
 
@@ -165,6 +170,13 @@ i.styles = p`
       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);
+
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+      overflow: visible;
+      text-overflow: clip;
     }
 
     .scb-keyfigure-card.clickable { cursor: pointer; }
@@ -212,7 +224,7 @@ t([
   s({ type: String, reflect: !0 })
 ], i.prototype, "sizing", 2);
 i = t([
-  d("scb-keyfigure-card")
+  u("scb-keyfigure-card")
 ], i);
 export {
   i as ScbKeyFigureCard

package/scb-notification-card/scb-notification-card.d.ts

@@ -1,20 +1,34 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+type NotificationVariant = 'success' | 'error' | 'warning' | 'info';
+type NotificationDirection = 'horizontal' | 'vertical';
+type NotificationSizing = 'stretch' | 'content-width' | 'content-height';
 export declare class ScbNotificationCard extends LitElement {
-    variant: string;
-    direction: 'horizontal' | 'vertical';
+    variant: NotificationVariant;
+    direction: NotificationDirection;
     title: string;
     subtitle: string;
     supportingText: string;
     open: boolean;
     linkText: string;
-    linkhref: string;
+    linkHref: string;
     showIcon: boolean;
     showCloseButton: boolean;
+    sizing: NotificationSizing;
+    width: string;
+    maxWidth: string;
+    height: string;
+    maxHeight: string;
     fullHeight: boolean;
     fullWidth: boolean;
     static styles: import('lit').CSSResult[];
-    /** Return icon name for notification variant */
     private _iconForVariant;
     private _closeNotification;
+    protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-notification-card': ScbNotificationCard;
+    }
+}
+export {};