scb-wc-test 0.1.11 → 0.1.13

package/scb-icon-button/scb-icon-button.js

@@ -1,40 +1,39 @@
-import { css as u, LitElement as h, html as a } from "lit";
-import { property as s, customElement as b } from "lit/decorators.js";
-var m = Object.defineProperty, p = Object.getOwnPropertyDescriptor, l = (t, o, e, r) => {
-  for (var i = r > 1 ? void 0 : r ? p(o, e) : o, d = t.length - 1, c; d >= 0; d--)
-    (c = t[d]) && (i = (r ? c(o, e, i) : c(i)) || i);
-  return r && i && m(o, e, i), i;
+import { css as p, LitElement as m, html as s } from "lit";
+import { property as d, customElement as f } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "../scb-tooltip/scb-tooltip.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (t, e, i, r) => {
+  for (var n = r > 1 ? void 0 : r ? v(e, i) : e, u = t.length - 1, a; u >= 0; u--)
+    (a = t[u]) && (n = (r ? a(e, i, n) : a(n)) || n);
+  return r && n && g(e, i, n), n;
 };
-let n = class extends h {
+let o = class extends m {
   constructor() {
-    super(...arguments), this.ariaLabel = "", this.variant = "standard", this.icon = "home", this.toggle = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.error = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__onChange = () => {
-      const t = this.__lastBtn;
-      this.dispatchEvent(new CustomEvent("change", {
-        detail: { selected: !!(t != null && t.selected) },
-        bubbles: !0,
-        composed: !0
-      }));
+    super(...arguments), this.ariaLabel = "", this.tooltip = "", this.variant = "standard", this.icon = "home", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__onInnerChange = () => {
+      const t = this.__getMdHost(), e = !!(t != null && t.selected);
+      this.toggle && (this.selected = e), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { selected: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
     };
   }
-  __attachChangeListener() {
-    var o, e, r;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
-      "md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button"
-    );
-    t && t !== this.__lastBtn && ((r = (e = this.__lastBtn) == null ? void 0 : e.removeEventListener) == null || r.call(e, "change", this.__onChange), t.addEventListener("change", this.__onChange), this.__lastBtn = t);
-  }
   async firstUpdated() {
-    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener();
+    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncAria();
   }
   updated(t) {
-    super.updated(t), t.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), t.has("variant") || t.has("icon") || t.has("toggle") ? this.__ensureDepsLoaded().then(() => queueMicrotask(() => this.__attachChangeListener())) : queueMicrotask(() => this.__attachChangeListener());
+    super.updated(t), t.has("variant") || t.has("toggle") || t.has("icon") || t.has("ariaLabel") || t.has("selected") || t.has("disabled") || t.has("tooltip") ? this.__ensureDepsLoaded().then(
+      () => queueMicrotask(() => {
+        this.__attachChangeListener(), this.__syncAria();
+      })
+    ) : queueMicrotask(() => this.__attachChangeListener());
   }
-  // koppla loss lyssnare om host tas bort
   disconnectedCallback() {
-    var t, o;
-    super.disconnectedCallback(), (o = (t = this.__lastBtn) == null ? void 0 : t.removeEventListener) == null || o.call(t, "change", this.__onChange), this.__lastBtn = null;
+    var t, e, i;
+    super.disconnectedCallback(), (e = (t = this.__lastBtn) == null ? void 0 : t.removeEventListener) == null || e.call(t, "change", this.__onInnerChange), this.__lastBtn = null, (i = this.__ariaObserver) == null || i.disconnect();
   }
-  //  Ladda in rätt Material-komponenter vid behov (variant + ikon)
   async __ensureDepsLoaded() {
     if (!this.__loadedVariants.has(this.variant)) {
       switch (this.variant) {
@@ -55,154 +54,172 @@ let n = class extends h {
     }
     this.__iconLoaded || (await import("@material/web/icon/icon.js"), this.__iconLoaded = !0);
   }
-  render() {
-    const t = this.ariaLabel.trim() || this.icon, o = this.error ? "error" : void 0, e = a`
+  // Hämta md-* host. Om den är inuti <scb-tooltip>, sök i dess light DOM.
+  __getMdHost() {
+    const t = this.renderRoot.querySelector(
+      "md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button"
+    );
+    if (t) return t;
+    const e = this.renderRoot.querySelector("scb-tooltip");
+    if (e) {
+      const i = e.querySelector(
+        "md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button"
+      );
+      if (i) return i;
+    }
+    return null;
+  }
+  __getInnerButton(t) {
+    const e = t == null ? void 0 : t.shadowRoot;
+    return e ? e.querySelector("button") || e.querySelector('[role="button"]') : null;
+  }
+  // Ta bort alla native title-tooltips (förhindrar visning av t.ex. ikonnamn).
+  __stripNativeTitles(t) {
+    if (!t) return;
+    t.removeAttribute("title");
+    const e = this.__getInnerButton(t);
+    e == null || e.removeAttribute("title");
+    const i = t.shadowRoot;
+    i && i.querySelectorAll("[title]").forEach((r) => r.removeAttribute("title"));
+  }
+  __syncAria() {
+    var u;
+    const t = this.__getMdHost();
+    if (!t) return;
+    const e = this.__getInnerButton(t), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim() || this.icon.trim(), r = this.getAttribute("aria-controls"), n = this.getAttribute("aria-expanded");
+    e && (i ? e.setAttribute("aria-label", i) : e.removeAttribute("aria-label"), r !== null ? e.setAttribute("aria-controls", r) : e.removeAttribute("aria-controls"), n !== null ? e.setAttribute("aria-expanded", n) : e.removeAttribute("aria-expanded"), e.removeAttribute("title")), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), t.removeAttribute("title"), this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.hasAttribute("aria-controls") && this.removeAttribute("aria-controls"), this.hasAttribute("aria-expanded") && this.removeAttribute("aria-expanded"), this.__stripNativeTitles(t), (u = this.__ariaObserver) == null || u.disconnect(), this.__ariaObserver = new MutationObserver(() => {
+      const a = this.__getMdHost(), c = this.__getInnerButton(a);
+      if (!a || !c) return;
+      const b = (this.ariaLabel || this.getAttribute("aria-label") || "").trim() || this.icon.trim(), h = this.getAttribute("aria-controls"), _ = this.getAttribute("aria-expanded");
+      b ? c.setAttribute("aria-label", b) : c.removeAttribute("aria-label"), h !== null ? c.setAttribute("aria-controls", h) : c.removeAttribute("aria-controls"), _ !== null ? c.setAttribute("aria-expanded", _) : c.removeAttribute("aria-expanded"), this.__stripNativeTitles(a), a.removeAttribute("aria-label"), a.removeAttribute("aria-controls"), a.removeAttribute("aria-expanded"), a.removeAttribute("title"), this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.hasAttribute("aria-controls") && this.removeAttribute("aria-controls"), this.hasAttribute("aria-expanded") && this.removeAttribute("aria-expanded");
+    }), this.__ariaObserver.observe(this, {
+      attributes: !0,
+      attributeFilter: ["aria-label", "aria-controls", "aria-expanded"]
+    });
+  }
+  __attachChangeListener() {
+    var e, i;
+    const t = this.__getMdHost();
+    t && t !== this.__lastBtn && ((i = (e = this.__lastBtn) == null ? void 0 : e.removeEventListener) == null || i.call(e, "change", this.__onInnerChange), t.addEventListener("change", this.__onInnerChange), this.__lastBtn = t), this.toggle && t && "selected" in t && (t.selected = this.selected), this.__stripNativeTitles(t || null);
+  }
+  __renderMd(t = !1) {
+    const e = !!t, i = s`
       <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
       <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
-    `, r = a`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
-    if (this.toggle) {
-      const i = this.selected || !1;
+    `, r = s`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+    if (this.toggle)
       switch (this.variant) {
         case "filled":
-          return a`
+          return s`
             <md-filled-icon-button
+              ?scb-tooltip-button=${e}
               toggle
-              variant=${o}
+              ?selected=${this.selected}
               ?disabled=${this.disabled}
-              aria-label=${t}
-              aria-pressed="${i}"
-            >${e}</md-filled-icon-button>
+            >${i}</md-filled-icon-button>
           `;
         case "outlined":
-          return a`
+          return s`
             <md-outlined-icon-button
+              ?scb-tooltip-button=${e}
               toggle
-              variant=${o}
+              ?selected=${this.selected}
               ?disabled=${this.disabled}
-              aria-label=${t}
-              aria-pressed="${i}"
-            >${e}</md-outlined-icon-button>
+            >${i}</md-outlined-icon-button>
           `;
         case "filled-tonal":
-          return a`
+          return s`
             <md-filled-tonal-icon-button
+              ?scb-tooltip-button=${e}
               toggle
-              variant=${o}
+              ?selected=${this.selected}
               ?disabled=${this.disabled}
-              aria-label=${t}
-              aria-pressed="${i}"
-            >${e}</md-filled-tonal-icon-button>
+            >${i}</md-filled-tonal-icon-button>
           `;
         default:
-          return a`
+          return s`
             <md-icon-button
-              role="button"
+              ?scb-tooltip-button=${e}
               toggle
-              variant=${o}
+              ?selected=${this.selected}
               ?disabled=${this.disabled}
-              aria-label=${t}
-              aria-pressed="${i}"
-            >${e}</md-icon-button>
+            >${i}</md-icon-button>
           `;
       }
-    }
     switch (this.variant) {
       case "filled":
-        return a`
-          <md-filled-icon-button
-            variant=${o}
-            ?disabled=${this.disabled}
-            aria-label=${t}
-          >${r}</md-filled-icon-button>
+        return s`
+          <md-filled-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
+            ${r}
+          </md-filled-icon-button>
         `;
       case "outlined":
-        return a`
-          <md-outlined-icon-button
-            variant=${o}
-            ?disabled=${this.disabled}
-            aria-label=${t}
-          >${r}</md-outlined-icon-button>
+        return s`
+          <md-outlined-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
+            ${r}
+          </md-outlined-icon-button>
         `;
       case "filled-tonal":
-        return a`
-          <md-filled-tonal-icon-button
-            variant=${o}
-            ?disabled=${this.disabled}
-            aria-label=${t}
-          >${r}</md-filled-tonal-icon-button>
+        return s`
+          <md-filled-tonal-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
+            ${r}
+          </md-filled-tonal-icon-button>
         `;
       default:
-        return a`
-          <md-icon-button
-            variant=${o}
-            ?disabled=${this.disabled}
-            aria-label=${t}
-          >${r}</md-icon-button>
+        return s`
+          <md-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
+            ${r}
+          </md-icon-button>
         `;
     }
   }
+  render() {
+    const t = (this.tooltip || this.ariaLabel || "").trim();
+    return t ? s`
+        <scb-tooltip
+          variant="plain"
+          position="top"
+          trigger="hover"
+          .delay=${0.12}
+          .arrow=${!0}
+          supporting-text=${t}
+        >
+          ${this.__renderMd(!0)}
+        </scb-tooltip>
+      ` : this.__renderMd(!1);
+  }
 };
-n.styles = u`
-    /*Error-styling på alla underliggande knappar*/
-    :host([error]) md-filled-icon-button[variant='error'],
-    :host([error]) md-outlined-icon-button[variant='error'],
-    :host([error]) md-filled-tonal-icon-button[variant='error'],
-    :host([error]) md-icon-button[variant='error'] {
-      --md-sys-color-primary: var(--md-sys-color-error);
-      --md-sys-color-on-primary: var(--md-sys-color-on-error);
-    }
-    :host([error]) md-outlined-icon-button[variant='error'] md-icon,
-    :host([error]) md-icon-button[variant='error'] md-icon {
-      color: var(--md-sys-color-error) !important;
-    }
-    :host([error]) md-outlined-icon-button[variant='error'] {
-      --_outline-color: var(--md-sys-color-error);
-      --md-outlined-icon-button-pressed-outline-color: var(--md-sys-color-error);
-    }
-    :host([error]) md-outlined-icon-button[variant='error']:hover {
-      --md-outlined-icon-button-outline-width: 2px;
-    }
-    :host([error]) md-filled-tonal-icon-button[variant='error'] {
-      --md-filled-tonal-icon-button-container-color: var(--md-sys-color-error-container);
-      --md-filled-tonal-icon-button-label-text-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-hover-label-text-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-focus-label-text-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-hover-icon-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-pressed-icon-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-focus-icon-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
-      --md-filled-tonal-icon-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
-    }
-  `;
+o.styles = p``;
+l([
+  d({ type: String, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
 l([
-  s({ type: String, reflect: !0, attribute: "aria-label" })
-], n.prototype, "ariaLabel", 2);
+  d({ type: String })
+], o.prototype, "tooltip", 2);
 l([
-  s({ type: String })
-], n.prototype, "variant", 2);
+  d({ type: String })
+], o.prototype, "variant", 2);
 l([
-  s({ type: String })
-], n.prototype, "icon", 2);
+  d({ type: String })
+], o.prototype, "icon", 2);
 l([
-  s({ type: Boolean, reflect: !0 })
-], n.prototype, "toggle", 2);
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "toggle", 2);
 l([
-  s({ type: String })
-], n.prototype, "toggleofficon", 2);
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "selected", 2);
 l([
-  s({ type: String })
-], n.prototype, "toggleonicon", 2);
+  d({ type: String })
+], o.prototype, "toggleofficon", 2);
 l([
-  s({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled", 2);
+  d({ type: String })
+], o.prototype, "toggleonicon", 2);
 l([
-  s({ type: Boolean, reflect: !0 })
-], n.prototype, "error", 2);
-n = l([
-  b("scb-icon-button")
-], n);
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+o = l([
+  f("scb-icon-button")
+], o);
 export {
-  n as ScbIconButton
+  o as ScbIconButton
 };

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

@@ -1,12 +1,17 @@
 import { LitElement } from 'lit';
 export declare class ScbKeyFigureCard extends LitElement {
-    keyfigure: number;
+    keyfigure: number | string;
     subLabel: string;
     supportingText: string;
     cardHref: string;
     icon: string;
     size: 'standard' | 'large';
+    unit: string;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    stretch: boolean;
     static styles: import('lit').CSSResult;
+    private formatNumber;
     render(): import('lit-html').TemplateResult<1>;
     firstUpdated(): void;
 }

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

@@ -1,119 +1,165 @@
-import { css as p, LitElement as g, html as r } from "lit";
-import { property as n, customElement as y } from "lit/decorators.js";
+import { css as d, LitElement as u, html as a } from "lit";
+import { property as s, customElement as g } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
-var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (i, s, l, t) => {
-  for (var a = t > 1 ? void 0 : t ? m(s, l) : s, o = i.length - 1, d; o >= 0; o--)
-    (d = i[o]) && (a = (t ? d(s, l, a) : d(a)) || a);
-  return t && a && h(s, l, a), a;
+var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, t, o, n) => {
+  for (var l = n > 1 ? void 0 : n ? y(t, o) : t, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (l = (n ? p(t, o, l) : p(l)) || l);
+  return n && l && h(t, o, l), l;
 };
-let e = class extends g {
+let i = class extends u {
   constructor() {
-    super(...arguments), this.keyfigure = 0, this.subLabel = "", this.supportingText = "", this.cardHref = "", this.icon = "", this.size = "standard";
+    super(...arguments), this.keyfigure = 0, this.subLabel = "", this.supportingText = "", this.cardHref = "", this.icon = "", this.size = "standard", this.unit = "", this.fullHeight = !1, this.fullWidth = !1, this.stretch = !1;
+  }
+  formatNumber(e) {
+    if (typeof e == "number")
+      return e.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
+    const t = Number(e);
+    return Number.isNaN(t) ? String(e) : t.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
   }
   render() {
-    const i = this.cardHref ? "clickable" : "", l = ((t) => typeof t == "number" ? t.toLocaleString("sv-SE").replace(/\u00A0/g, " ") : t)(this.keyfigure);
-    return r`
-        <div class="scb-keyfigure-card ${i} ${this.size}">
-                ${this.cardHref ? r`<md-ripple></md-ripple>` : ""}
-                ${this.icon ? r`<md-icon>${this.icon}</md-icon>` : ""}
-                ${this.keyfigure ? r`
-                    <div class="keyfigure">
-                    ${l}
-                    ${this.cardHref ? r`<md-icon>arrow_forward</md-icon>` : l}
-                    </div>` : ""}
-                ${this.subLabel ? r`
-                    <div class="sub-label">
-                        ${this.cardHref ? r`<a href="${this.subLabel}" tabindex="0">${this.subLabel}</a>` : this.subLabel}
-                    </div>` : ""}
-                ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-        </div>
-        `;
+    const e = !!this.cardHref, t = this.formatNumber(this.keyfigure);
+    return a`
+      <div
+        class="scb-keyfigure-card ${e ? "clickable" : ""} ${this.size}"
+        role=${e ? "link" : "group"}
+        tabindex=${e ? "0" : "-1"}
+        aria-label=${this.subLabel || ""}
+      >
+        ${e ? a`<md-ripple></md-ripple>` : ""}
+        ${this.icon ? a`<md-icon>${this.icon}</md-icon>` : ""}
+
+        ${this.keyfigure !== void 0 && this.keyfigure !== null && this.keyfigure !== "" ? a`
+          <div class="keyfigure">
+            <span class="value">
+              ${t}${this.unit ? a`<span class="unit">${this.unit}</span>` : ""}
+            </span>
+            ${e ? a`<md-icon>arrow_forward</md-icon>` : ""}
+          </div>
+        ` : ""}
+
+        ${this.subLabel ? a`
+          <div class="sub-label">
+            ${e ? a`<a href="${this.cardHref}" tabindex="-1">${this.subLabel}</a>` : this.subLabel}
+          </div>
+        ` : ""}
+
+        ${this.supportingText ? a`<div class="supporting-text">${this.supportingText}</div>` : ""}
+      </div>
+    `;
   }
   firstUpdated() {
     if (this.cardHref) {
-      const i = this.renderRoot.querySelector(".scb-keyfigure-card");
-      i && i.addEventListener("click", (s) => {
-        s.target.closest("a") || (window.location.href = this.cardHref);
-      });
+      const e = this.renderRoot.querySelector(".scb-keyfigure-card");
+      e && (e.addEventListener("click", (t) => {
+        t.target.closest("a") || (window.location.href = this.cardHref);
+      }), e.addEventListener("keydown", (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), window.location.href = this.cardHref);
+      }));
     }
   }
 };
-e.styles = p`
-    :host{ --scb-card-min-w:  360px; }
+i.styles = d`
+    :host { --scb-keyfigure-card-max-w: var(--scb-card-max-w, 360px); }
+
     :host {
-        max-width: var(--scb-card-min-w);
-        width: fit-content;;
-        display: block;
+      display: block;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: var(--scb-keyfigure-card-max-w);
     }
-    .scb-keyfigure-card {
-        color: var(--md-sys-color-on-surface);
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-3);
-        width: fit-content;
-        max-width: var(--scb-card-min-w);
-        position: relative;
-        border-radius: var(--md-sys-shape-corner-large);
-        background: var(--md-sys-color-surface-dim);
-        padding: var(--spacing-7) var(--spacing-6);
+    :host([full-width]) { max-inline-size: none; }
+    :host([stretch]), :host([full-height]) { block-size: 100%; }
+
+    :host([stretch]) .scb-keyfigure-card,
+    :host([full-height]) .scb-keyfigure-card {
+      block-size: 100%;
     }
-    .keyfigure{
-        letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
-        gap: var(--spacing-3);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: var(--md-sys-typescale-headline-large-size);
-        font-weight: var(--weight-bold);
-        line-height: var(--md-sys-typescale-headline-large-line-height);
-        letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+
+    .scb-keyfigure-card {
+      color: var(--md-sys-color-on-surface);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large);
+      background: var(--md-sys-color-surface-dim);
+      padding: var(--spacing-7);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      overflow: hidden;
     }
-    .sub-label a {
-        color: inherit;
-        text-decoration: none;
+
+    .keyfigure {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--spacing-3);
+      font-size: var(--md-sys-typescale-headline-large-size);
+      font-weight: var(--weight-bold);
+      line-height: var(--md-sys-typescale-headline-large-line-height);
+      letter-spacing: var(--md-sys-typescale-headline-large-tracking);
     }
+    .keyfigure .value { white-space: nowrap; }
+    .keyfigure .unit { margin-inline-start: .25em; }
+
     .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);
     }
+    .sub-label a { color: inherit; text-decoration: none; }
+
     .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);
-    }
-    .scb-keyfigure-card.clickable {
-        cursor: pointer;
+      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);
     }
+
+    .scb-keyfigure-card.clickable { cursor: pointer; }
+
     .scb-keyfigure-card.large .keyfigure {
-        font-size: var(--md-sys-typescale-display-medium-size);
-        line-height: var(--md-sys-typescale-display-medium-line-height);
-        letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+      font-size: var(--md-sys-typescale-display-medium-size);
+      line-height: var(--md-sys-typescale-display-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-display-medium-tracking);
     }
   `;
-c([
-  n({ type: Number })
-], e.prototype, "keyfigure", 2);
-c([
-  n({ type: String, attribute: "sub-label" })
-], e.prototype, "subLabel", 2);
-c([
-  n({ type: String, attribute: "supporting-text" })
-], e.prototype, "supportingText", 2);
-c([
-  n({ type: String, attribute: "card-href" })
-], e.prototype, "cardHref", 2);
-c([
-  n({ type: String })
-], e.prototype, "icon", 2);
-c([
-  n({ type: String })
-], e.prototype, "size", 2);
-e = c([
-  y("scb-keyfigure-card")
-], e);
+r([
+  s({ attribute: "keyfigure" })
+], i.prototype, "keyfigure", 2);
+r([
+  s({ type: String, attribute: "sub-label" })
+], i.prototype, "subLabel", 2);
+r([
+  s({ type: String, attribute: "supporting-text" })
+], i.prototype, "supportingText", 2);
+r([
+  s({ type: String, attribute: "card-href" })
+], i.prototype, "cardHref", 2);
+r([
+  s({ type: String })
+], i.prototype, "icon", 2);
+r([
+  s({ type: String })
+], i.prototype, "size", 2);
+r([
+  s({ type: String })
+], i.prototype, "unit", 2);
+r([
+  s({ type: Boolean, reflect: !0, attribute: "full-height" })
+], i.prototype, "fullHeight", 2);
+r([
+  s({ type: Boolean, reflect: !0, attribute: "full-width" })
+], i.prototype, "fullWidth", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "stretch", 2);
+i = r([
+  g("scb-keyfigure-card")
+], i);
 export {
-  e as ScbKeyFigureCard
+  i as ScbKeyFigureCard
 };

package/scb-link/scb-link.d.ts

@@ -6,6 +6,7 @@ export declare class ScbLink extends LitElement {
     rel?: string;
     download?: string;
     disabled: boolean;
+    ariaLabel: string;
     static styles: import('lit').CSSResult;
     render(): TemplateResult;
 }