scb-wc 0.1.78 → 0.1.80

package/scb-card/scb-card.js

@@ -1,59 +1,88 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
-import "../scb-button/scb-button.js";
-import "../scb-list/scb-list.js";
-import "../scb-icon-button/scb-icon-button.js";
-import "../scb-link/scb-link.js";
-import "../scb-chip/scb-chip.js";
-import "../scb-avatar/scb-avatar.js";
-import "../scb-tooltip/scb-tooltip.js";
 import { LitElement as t, css as n, html as r, nothing as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
 //#region src/scb-components/scb-card/scb-card.ts
-var s, c = [
-	"standard",
-	"list",
-	"social",
-	"link",
-	"action",
-	"container"
-], l = {
+var s = new Set([
+	"social-comments-text",
+	"social-comments",
+	"social-comments-href",
+	"social-likes-text",
+	"social-likes",
+	"social-likes-hover-content",
+	"social-has-liked",
+	"social-likes-interactive",
+	"social-author",
+	"social-author-text",
+	"social-author-href"
+]), c, l, u, d, f, p, m, h, g, _;
+function v() {
+	return h ??= import("../shared/lazy-focus-ring.js"), h;
+}
+function y() {
+	return g ??= import("../shared/lazy-ripple.js"), g;
+}
+function b() {
+	return c ??= import("../scb-list/scb-list.js"), c;
+}
+function x() {
+	return l ??= import("../scb-icon-button/scb-icon-button.js"), l;
+}
+function S() {
+	return u ??= import("../scb-button/scb-button.js"), u;
+}
+function C() {
+	return d ??= import("../scb-link/scb-link.js"), d;
+}
+function w() {
+	return f ??= import("../scb-chip/scb-chip.js"), f;
+}
+function T() {
+	return p ??= import("../scb-avatar/scb-avatar.js"), p;
+}
+function E() {
+	return m ??= import("../scb-tooltip/scb-tooltip.js"), m;
+}
+function D() {
+	return _ ??= import("./scb-card-variants.internal.js"), _;
+}
+var O = {
 	fromAttribute: (e) => e ?? "",
 	toAttribute: (e) => typeof e == "string" ? e.trim() === "" ? null : e : null
-}, u = class extends t {
-	static {
-		s = this;
-	}
+}, k = class extends t {
 	constructor(...e) {
-		super(...e), this.__managedSocialAttributes = new Set([
-			"social-comments-text",
-			"social-comments",
-			"social-comments-href",
-			"social-likes-text",
-			"social-likes",
-			"social-likes-hover-content",
-			"social-has-liked",
-			"social-likes-interactive",
-			"social-author",
-			"social-author-text",
-			"social-author-href"
-		]), this.__isSyncingManagedSocialAttributes = !1, this.type = "standard", this.variant = "standard", this.direction = "dynamic", this.size = "large", 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.href = "", this.title = "", this.cardTitle = "", this.subtitle = "", this.vignette = "", this.vignetteVariant = "filled", this.vignetteSpacing = void 0, this.vignetteSpacingTop = void 0, this.vignetteSpacingBottom = void 0, this.vignetteSpacingLeft = void 0, this.vignetteSpacingRight = void 0, this.supportingText = "", this.commentsText = "", this.commentsDisabled = !1, this.commentsHref = "", this.likesText = "", this.likesDisabled = !1, this.likesHoverContent = "", this.hasLiked = !1, this.likesInteractive = !0, this.author = !1, this.authorText = "", this.authorHref = "", this.replyEnabled = !1, this.editEnabled = !1, this.deleteEnabled = !1, this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.innerPadding = void 0, this.paddingTop = void 0, this.paddingBottom = void 0, this.paddingLeft = void 0, this.paddingRight = void 0, this.__onImgLoad = (e) => {
+		super(...e), this.__dependencyKey = "", this.__focusRingRequested = !1, this.__focusRingLoaded = !1, this.__rippleRequested = !1, this.__rippleLoaded = !1, this.__pendingRippleClick = !1, this.__isSyncingManagedSocialAttributes = !1, this.type = "standard", this.variant = "standard", this.direction = "dynamic", this.size = "large", 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.href = "", this.title = "", this.cardTitle = "", this.subtitle = "", this.vignette = "", this.vignetteVariant = "filled", this.vignetteSpacing = void 0, this.vignetteSpacingTop = void 0, this.vignetteSpacingBottom = void 0, this.vignetteSpacingLeft = void 0, this.vignetteSpacingRight = void 0, this.supportingText = "", this.commentsText = "", this.commentsDisabled = !1, this.commentsHref = "", this.likesText = "", this.likesDisabled = !1, this.likesHoverContent = "", this.hasLiked = !1, this.likesInteractive = !0, this.author = !1, this.authorText = "", this.authorHref = "", this.replyEnabled = !1, this.editEnabled = !1, this.deleteEnabled = !1, this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.innerPadding = void 0, this.paddingTop = void 0, this.paddingBottom = void 0, this.paddingLeft = void 0, this.paddingRight = void 0, this.__onImgLoad = (e) => {
 			let t = e.currentTarget.closest(".media");
 			t && t.classList.add("is-loaded");
+		}, this.__ensureRippleOnInteraction = (e, t = !1) => {
+			if (this.__primaryHref()) {
+				if (e && (this.__pendingRippleEvent = e), t && (this.__pendingRippleClick = !0), this.__rippleLoaded) {
+					this.__syncRipple();
+					return;
+				}
+				this.__rippleRequested || (this.__rippleRequested = !0, y().then(({ ensureRippleReady: e }) => e()).then(() => {
+					this.__rippleLoaded = !0, this.requestUpdate(), this.updateComplete.then(() => this.__syncRipple());
+				}));
+			}
+		}, this.__syncRipple = async () => {
+			let e = this.renderRoot.querySelector("md-ripple"), t = this.renderRoot.querySelector(".scb-card"), n = this.__pendingRippleEvent, r = this.__pendingRippleClick;
+			this.__pendingRippleEvent = void 0, this.__pendingRippleClick = !1;
+			let { syncRippleToControl: i } = await y();
+			await i(e, t, n, r);
+		}, this.__ensureFocusRingOnFocusVisible = () => {
+			this.__focusRingLoaded || this.__focusRingRequested || (this.__focusRingRequested = !0, v().then(({ ensureFocusRingReady: e }) => e()).then(() => {
+				this.__focusRingLoaded = !0, this.requestUpdate();
+			}));
 		}, this.__onKeyDown = (e) => {
-			let t = this.__effectiveHref();
-			(e.key === "Enter" || e.key === " ") && t && (e.preventDefault(), this.__navigate(t, e));
+			let t = this.__primaryHref();
+			(e.key === "Enter" || e.key === " ") && t && (e.preventDefault(), this.__ensureRippleOnInteraction(void 0, !0), this.__navigate(t, e));
 		}, this.__handleHrefNavigation = (e) => {
-			let t = this.__effectiveHref();
+			let t = this.__primaryHref();
 			t && (e.target.closest("a") || this.__navigate(t, e));
+		}, this.__handleSlottedCardLinkClick = (e) => {
+			let t = e.composedPath().find((e) => e instanceof HTMLAnchorElement && e.getAttribute("slot") === "card-link")?.getAttribute("href") || this.__primaryHref();
+			t && (this.__dispatchCardNavigate(t, e) || e.preventDefault());
 		};
 	}
-	static {
-		this.__iconLoaded = !1;
-	}
-	static {
-		this.__rippleLoaded = !1;
-	}
 	static {
 		this.styles = n`
     :host {
@@ -192,18 +221,6 @@ var s, c = [
       min-height: 190px;
     }
 
-    .scb-card.no-hover,
-    .scb-card.no-hover:hover,
-    .scb-card.no-hover:active {
-      /* Ta bort hover/klick-effekter */
-      box-shadow: none !important;
-      cursor: default !important;
-    }
-
-    .scb-card.no-hover md-ripple {
-      display: none !important;
-    }
-
     :host([type='standard']) {
       --scb-card-max-w: var(--scb-card-standard-max-w, none);
     }
@@ -268,6 +285,14 @@ var s, c = [
       display: block;
     }
 
+    .scb-card.has-slotted-card-link:focus-within + md-focus-ring {
+      display: block;
+    }
+
+    :host(:focus-within) .scb-card.has-slotted-card-link + md-focus-ring {
+      display: block;
+    }
+
     .scb-card {
       color: var(--md-sys-color-on-surface, #0F0865);
       font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
@@ -281,10 +306,6 @@ var s, c = [
       max-inline-size: 100%;
     }
 
-    :host([type='social']) .scb-card {
-      overflow: visible;
-    }
-
     .scb-card:focus,
     .scb-card:focus-visible {
       outline: none;
@@ -319,23 +340,24 @@ var s, c = [
       cursor: pointer;
     }
 
-    .social-metrics a.comments,
-    .social-metrics a.author {
-      color: var(--md-sys-color-primary, #1F44FF);
-      text-decoration: none;
-      border-radius: 4px;
+    .scb-card.has-slotted-card-link {
       cursor: pointer;
+    }
+
+    slot[name='card-link']::slotted(a) {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      border-radius: inherit;
+      color: transparent;
+      font-size: 0;
+      text-decoration: none;
       outline: none;
     }
 
-    .social-metrics a.comments:hover,
-    .social-metrics a.comments:focus,
-    .social-metrics a.author:hover,
-    .social-metrics a.author:focus {
-      color: var(--md-sys-color-primary, #1F44FF);
-      text-decoration: var(--scb-link-decoration, underline);
-      text-underline-offset: var(--scb-link-underline-offset, .22em);
-      text-decoration-thickness: var(--scb-link-underline-thickness, 1px);
+    slot[name='card-link']::slotted(a:focus),
+    slot[name='card-link']::slotted(a:focus-visible) {
+      outline: none;
     }
 
     md-ripple {
@@ -353,6 +375,12 @@ var s, c = [
       border-radius: var(--md-sys-shape-corner-large, 16px);
     }
 
+    .media.has-reserved-space {
+      inline-size: 100%;
+      aspect-ratio: var(--scb-card-media-aspect, 3 / 2);
+      min-block-size: var(--scb-card-media-min-block-size, 0);
+    }
+
     .media img,
     .media ::slotted(img) {
       display: block;
@@ -363,6 +391,11 @@ var s, c = [
       object-position: var(--scb-card-media-position, center);
     }
 
+    .media.has-reserved-space img,
+    .media.has-reserved-space ::slotted(img) {
+      block-size: 100%;
+    }
+
     /* Skeleton-placeholder */
     .media.has-ph::before {
       content: '';
@@ -399,21 +432,6 @@ var s, c = [
       padding-inline-end: var(--scb-card-content-padding-inline-end, var(--scb-card-size-content-padding-inline));
     }
 
-    .container-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--scb-card-container-gap, var(--scb-card-size-container-gap));
-      padding-block-start: var(--scb-card-container-padding-block-start, var(--scb-card-content-padding-block-start, var(--scb-card-size-content-padding-block)));
-      padding-block-end: var(--scb-card-container-padding-block-end, var(--scb-card-content-padding-block-end, var(--scb-card-size-content-padding-block)));
-      padding-inline-start: var(--scb-card-container-padding-inline-start, var(--scb-card-content-padding-inline-start, var(--scb-card-size-content-padding-inline)));
-      padding-inline-end: var(--scb-card-container-padding-inline-end, var(--scb-card-content-padding-inline-end, var(--scb-card-size-content-padding-inline)));
-      min-inline-size: 0;
-    }
-
-    .container-content.has-header {
-      gap: var(--scb-card-container-gap-with-header, var(--scb-card-size-container-gap-with-header));
-    }
-
     .top-content {
       display: flex;
       flex-direction: column;
@@ -426,10 +444,6 @@ var s, c = [
       margin-block-end: var(--scb-card-chip-gap, var(--scb-card-size-top-gap));
     }
 
-    .container-content > .chip-slot {
-      margin-block-end: 0;
-    }
-
     .header {
       font-size: var(--scb-card-size-header-font-size);
       font-weight: var(--weight-bold, 700);
@@ -459,7 +473,30 @@ var s, c = [
       text-decoration: none;
     }
 
-    .header md-icon {
+    .card-icon {
+      display: inline-block;
+      inline-size: 1em;
+      block-size: 1em;
+      overflow: hidden;
+      font-family: 'Material Symbols Outlined';
+      font-size: var(--icon-size-medium, 24px);
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      text-transform: none;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga' 1;
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .card-icon.scb-svg-icon {
+      fill: currentColor;
+      font: inherit;
+    }
+
+    .header .card-icon {
       flex: 0 0 auto;
       align-self: start;
     }
@@ -510,6 +547,10 @@ var s, c = [
       inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
     }
 
+    .scb-card.horizontal .media.has-reserved-space {
+      aspect-ratio: var(--scb-card-media-aspect, var(--scb-card-horizontal-media-aspect, 3 / 2));
+    }
+
     .scb-card.horizontal .media ::slotted(scb-avatar) {
       margin: 0;
     }
@@ -526,7 +567,7 @@ var s, c = [
       align-items: flex-start;
     }
 
-    .scb-card.horizontal .header md-icon {
+    .scb-card.horizontal .header .card-icon {
       align-self: flex-start;
     }
 
@@ -538,6 +579,12 @@ var s, c = [
       inline-size: 100%;
       block-size: auto;
     }
+
+    .scb-card.horizontal .media.has-reserved-space img,
+    .scb-card.horizontal .media.has-reserved-space ::slotted(img) {
+      aspect-ratio: auto;
+      block-size: 100%;
+    }
   
     @container (min-width: 500px) {
       .scb-card.dynamic-direction {
@@ -555,6 +602,10 @@ var s, c = [
         inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
       }
 
+      .scb-card.dynamic-direction .media.has-reserved-space {
+        aspect-ratio: var(--scb-card-media-aspect, var(--scb-card-horizontal-media-aspect, 3 / 2));
+      }
+
       .scb-card.dynamic-direction .media ::slotted(scb-avatar) {
         margin: 0;
       }
@@ -571,7 +622,7 @@ var s, c = [
         align-items: flex-start;
       }
 
-      .scb-card.dynamic-direction .header md-icon {
+      .scb-card.dynamic-direction .header .card-icon {
         align-self: flex-start;
       }
 
@@ -584,6 +635,12 @@ var s, c = [
         block-size: auto;
       }
 
+      .scb-card.dynamic-direction .media.has-reserved-space img,
+      .scb-card.dynamic-direction .media.has-reserved-space ::slotted(img) {
+        aspect-ratio: auto;
+        block-size: 100%;
+      }
+
       :host([sizing='content-width']) .scb-card.dynamic-direction:has(.media img) .full-content {
         inline-size: max-content;
         flex: 0 1 auto;
@@ -595,67 +652,6 @@ var s, c = [
       flex: 0 1 auto;
     }
 
-    .social-metrics {
-      display: flex;
-      margin-top: var(--spacing-4, 12px);
-      gap: var(--scb-card-size-social-gap);
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    .social-metrics md-icon {
-      width: var(--scb-card-size-social-icon);
-      height: var(--scb-card-size-social-icon);
-      font-size: var(--scb-card-size-social-icon-font-size, var(--scb-card-size-social-icon));
-      vertical-align: middle;
-    }
-
-    .social-text{
-      font-size: var(--scb-card-size-social-text);
-    }
-
-    .comments,
-    .likes {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2, 4px);
-    }
-
-    .social-action {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--spacing-1, 2px);
-    }
-
-    .scb-card .content.list {
-      margin-top: 0;
-    }
-
-    .scb-card .content.list.has-top-content {
-      margin-top: var(--scb-card-size-list-offset);
-    }
-
-    .scb-card .content.actions ::slotted(*) {
-      margin-top: var(--scb-card-size-actions-offset);
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--spacing-3, 8px);
-    }
-
-    .scb-card .content.links {
-      margin-top: var(--scb-card-size-links-offset);
-      font-size: var(--scb-card-size-link-font-size);
-      line-height: var(--scb-card-size-link-line-height);
-      letter-spacing: var(--scb-card-size-link-letter-spacing);
-    }
-
-    .scb-card .content.links ::slotted(a),
-    .scb-card .content.links ::slotted(scb-link) {
-      display: block;
-      margin-block-start: var(--scb-card-size-links-item-offset);
-    }
-
-    .scb-card .content.links ::slotted(a),
     .scb-card .content.footer ::slotted(a),
     slot[name='supporting-text']::slotted(a) {
       font-size: var(--scb-card-size-link-font-size);
@@ -663,7 +659,6 @@ var s, c = [
       letter-spacing: var(--scb-card-size-link-letter-spacing);
     }
 
-    .scb-card .content.links ::slotted(scb-link),
     .scb-card .content.footer ::slotted(scb-link),
     slot[name='supporting-text']::slotted(scb-link) {
       --scb-link-font-size: var(--scb-card-size-link-font-size);
@@ -678,21 +673,10 @@ var s, c = [
       letter-spacing: var(--scb-card-size-link-letter-spacing);
     }
 
-    .scb-card:not(.filled):not(.filled-alternative) .content.list ::slotted(scb-list) {
-      --scb-list-bg: var(--md-sys-color-surface, #FFFFFF);
-    }
-
-    .scb-card.filled .content.list ::slotted(scb-list) {
-      --scb-list-bg: var(--md-sys-color-surface-dim, #F9F8EF);
-    }
-
-    .scb-card.filled-alternative .content.list ::slotted(scb-list) {
-      --scb-list-bg: var(--md-sys-color-surface-container, #EEF3FF);
-    }
   `;
 	}
 	attributeChangedCallback(e, t, n) {
-		this.__isSyncingManagedSocialAttributes && this.__managedSocialAttributes.has(e) || super.attributeChangedCallback(e, t, n);
+		this.__isSyncingManagedSocialAttributes && s.has(e) || super.attributeChangedCallback(e, t, n);
 	}
 	get likeButton() {
 		return this.cardType === "social" ? this.renderRoot.querySelector(".likes scb-icon-button") : null;
@@ -720,49 +704,41 @@ var s, c = [
 			h: 400
 		};
 	}
-	__noWrapText(e) {
-		return (e ?? "").replace(/ /g, "\xA0").replace(/-/g, "‑");
+	__mediaReserveAspect(e = "") {
+		let t = (this.mediaAspect || "").trim();
+		if (t) return t;
+		let n = Number(this.mediaWidth) || 0, r = Number(this.mediaHeight) || 0;
+		return n > 0 && r > 0 ? `${n} / ${r}` : e;
 	}
-	__decodeHtmlEntities(e) {
-		let t = document.createElement("textarea");
-		return t.innerHTML = e, t.value;
+	__mediaReserveStyle(e = "") {
+		let t = this.__mediaReserveAspect(e);
+		return t ? `--scb-card-media-aspect:${t};` : "";
 	}
-	__normalizePlainText(e) {
-		let t = String(e ?? "");
-		for (let e = 0; e < 5; e += 1) {
-			let e = this.__decodeHtmlEntities(t);
-			if (e === t) break;
-			t = e;
-		}
-		return t.replace(/<\s*(br|\/p|\/div|\/li|\/h[1-6]|\/tr)\b[^>]*>/gi, " ").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+	__slottedMediaAspect() {
+		let e = this.querySelector("[slot=\"media\"]");
+		if (!e) return "";
+		let t = Number(e.getAttribute("width")) || 0, n = Number(e.getAttribute("height")) || 0;
+		return t > 0 && n > 0 ? `${t} / ${n}` : "";
 	}
-	get #e() {
+	get __resolvedTitle() {
 		return this.cardTitle || this.title;
 	}
 	get cardType() {
 		let e = (this.type || "standard").toLowerCase();
-		return c.includes(e) ? e : "standard";
-	}
-	__dispatchLikeEvent(e, t) {
-		this.dispatchEvent(new CustomEvent(e, {
-			bubbles: !0,
-			composed: !0,
-			detail: t
-		})), this.dispatchEvent(new CustomEvent(e.replace("-", ""), {
-			bubbles: !0,
-			composed: !0,
-			detail: t
-		}));
+		switch (e) {
+			case "standard":
+			case "list":
+			case "social":
+			case "link":
+			case "action":
+			case "container": return e;
+			default: return "standard";
+		}
 	}
-	__dispatchSocialActionEvent(e, t) {
-		this.dispatchEvent(new CustomEvent(`social-${e}`, {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				action: e,
-				originalEvent: t
-			}
-		}));
+	__ensureVariantRenderer() {
+		return this.cardType === "standard" || this.__variantRenderer ? Promise.resolve() : D().then((e) => {
+			this.__variantRenderer !== e && (this.__variantRenderer = e, e.ensureScbCardVariantStyles(this.renderRoot), this.requestUpdate());
+		});
 	}
 	__dispatchCardNavigate(e, t) {
 		let n = {
@@ -786,22 +762,50 @@ var s, c = [
 	__effectiveHref() {
 		return this.cardHref || this.href;
 	}
+	__slottedCardLink() {
+		return this.querySelector(":scope > a[slot=\"card-link\"]");
+	}
+	__primaryHref() {
+		return this.__effectiveHref() || this.__slottedCardLink()?.getAttribute("href") || "";
+	}
 	__navigate(e, t) {
 		e && this.__dispatchCardNavigate(e, t) && window.open(e, "_self");
 	}
-	__hasSlottedContent(e) {
-		return Array.from(this.children).some((t) => t.getAttribute("slot") === e);
+	__slotNames() {
+		let e = /* @__PURE__ */ new Set();
+		for (let t of Array.from(this.children)) {
+			let n = t.getAttribute("slot");
+			n && e.add(n);
+		}
+		return e;
 	}
-	__mediaTemplate() {
-		if (this.__hasSlottedContent("media")) return r`
-        <div class="media">
+	__hasSlottedContent(e, t) {
+		return t ? t.has(e) : Array.from(this.children).some((t) => t.getAttribute("slot") === e);
+	}
+	__hasLightDomElement(e) {
+		return !!this.querySelector(e);
+	}
+	__ensureDependenciesReady() {
+		let e = [], t = [], n = this.cardType, r = !!this.vignette?.trim(), i = (n, r) => {
+			t.push(n), e.push(r());
+		};
+		(n === "list" || this.__hasLightDomElement("scb-list, scb-list-item")) && i("list", b), n !== "standard" && i("card-variants", () => this.__ensureVariantRenderer()), (n === "social" && (!this.likesDisabled && this.likesInteractive || !this.commentsDisabled && this.commentsHref || this.replyEnabled || this.editEnabled || this.deleteEnabled) || this.__hasLightDomElement("scb-icon-button")) && i("icon-button", x), this.__hasLightDomElement("scb-button") && i("button", S), this.__hasLightDomElement("scb-link") && i("link", C), (r || this.__hasLightDomElement("scb-chip")) && i("chip", w), ((this.mediaType || "").toLowerCase() === "avatar" || this.__hasLightDomElement("scb-avatar")) && i("avatar", T), (n === "social" && this.likesHoverContent || this.__hasLightDomElement("scb-tooltip")) && i("tooltip", E);
+		let a = t.sort().join("|");
+		a !== this.__dependencyKey && (this.__dependencyKey = a, e.length > 0 && Promise.all(e).then(() => this.requestUpdate()));
+	}
+	__mediaTemplate(e) {
+		if (this.__hasSlottedContent("media", e)) {
+			let e = this.__mediaReserveStyle(this.__slottedMediaAspect());
+			return r`
+        <div class="media ${e ? "has-reserved-space" : ""}" style=${e || i}>
           <slot name="media"></slot>
         </div>
       `;
+		}
 		if ((this.mediaType || "").toLowerCase() === "avatar") return r`
         <div class="media">
           <slot name="media">
-            <scb-avatar variant="icon" label="${this.#e}" icon-name="person"></scb-avatar>
+            <scb-avatar variant="icon" label="${this.__resolvedTitle}" icon-name="person"></scb-avatar>
           </slot>
         </div>
       `;
@@ -811,9 +815,9 @@ var s, c = [
 				let r = this.__calcAspectWH(n || "3/2");
 				e ||= r.w, t ||= r.h;
 			}
-			let i = `aspect-ratio:${n || `${e}/${t}`};`;
+			let i = this.__mediaReserveStyle(`${e} / ${t}`);
 			return r`
-        <div class="media ${this.mediaPlaceholder ? "has-ph" : ""}" style="${i}">
+        <div class="media has-reserved-space ${this.mediaPlaceholder ? "has-ph" : ""}" style=${i}>
           <slot name="media-sources"></slot>
           <img
             src="${this.mediaHref || ""}"
@@ -837,11 +841,11 @@ var s, c = [
 		let t = String(e).trim();
 		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
 	}
-	#t() {
+	__applySpacing() {
 		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
 		t ? this.style.setProperty("--scb-card-spacing-block-start", t) : this.style.removeProperty("--scb-card-spacing-block-start"), n ? this.style.setProperty("--scb-card-spacing-block-end", n) : this.style.removeProperty("--scb-card-spacing-block-end"), r ? this.style.setProperty("--scb-card-spacing-inline-start", r) : this.style.removeProperty("--scb-card-spacing-inline-start"), i ? this.style.setProperty("--scb-card-spacing-inline-end", i) : this.style.removeProperty("--scb-card-spacing-inline-end");
 	}
-	#n() {
+	__applyPadding() {
 		let e = this.mapSpacingToken(this.innerPadding), t = this.mapSpacingToken(this.paddingTop) ?? e, n = this.mapSpacingToken(this.paddingBottom) ?? e, r = this.mapSpacingToken(this.paddingLeft) ?? e, i = this.mapSpacingToken(this.paddingRight) ?? e;
 		t ? this.style.setProperty("--scb-card-content-padding-block-start", t) : this.style.removeProperty("--scb-card-content-padding-block-start"), n ? this.style.setProperty("--scb-card-content-padding-block-end", n) : this.style.removeProperty("--scb-card-content-padding-block-end"), r ? this.style.setProperty("--scb-card-content-padding-inline-start", r) : this.style.removeProperty("--scb-card-content-padding-inline-start"), i ? this.style.setProperty("--scb-card-content-padding-inline-end", i) : this.style.removeProperty("--scb-card-content-padding-inline-end");
 	}
@@ -873,484 +877,339 @@ var s, c = [
 		this.cardType === "social" && (this.__syncStringAttribute("social-comments-text", this.commentsText), this.__syncNumberAttribute("social-comments", this.comments), this.__syncStringAttribute("social-comments-href", this.commentsHref), this.__syncStringAttribute("social-likes-text", this.likesText), this.__syncNumberAttribute("social-likes", this.likes), this.__syncStringAttribute("social-likes-hover-content", this.likesHoverContent), this.__syncBooleanAttribute("social-has-liked", this.hasLiked), this.__syncBooleanAttribute("social-likes-interactive", this.likesInteractive), this.__syncBooleanAttribute("social-author", this.author), this.__syncStringAttribute("social-author-text", this.authorText), this.__syncStringAttribute("social-author-href", this.authorHref));
 	}
 	render() {
-		let e = this.cardType, t = this.variant ? `${this.variant.toLowerCase()}` : "", n = (this.direction || "dynamic").toLowerCase(), a = e !== "list" && e !== "container" && n !== "vertical" && n !== "horizontal" ? "dynamic-direction" : "", o = e === "list" || e === "container" ? "vertical" : n === "horizontal" ? "horizontal" : "vertical", s = this.__effectiveHref(), c = (e === "standard" || e === "social") && !!s, l = c ? "clickable" : "", u = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", d = e === "social" ? this.__normalizePlainText(this.supportingText) : this.supportingText, f = !!this.#e || this.__hasSlottedContent("heading"), p = !!this.subtitle || this.__hasSlottedContent("subtitle"), m = !!d || this.__hasSlottedContent("supporting-text"), h = !!u || this.__hasSlottedContent("date"), g = this.__hasSlottedContent("footer"), _ = (e = !1) => f ? r`
+		let e = this.__slotNames(), t = (t) => this.__hasSlottedContent(t, e), n = this.cardType, a = this.variant ? `${this.variant.toLowerCase()}` : "", o = (this.direction || "dynamic").toLowerCase(), s = n !== "list" && n !== "container" && o !== "vertical" && o !== "horizontal" ? "dynamic-direction" : "", c = n === "list" || n === "container" ? "vertical" : o === "horizontal" ? "horizontal" : "vertical", l = this.__effectiveHref(), u = t("card-link"), d = n === "standard" || n === "social", f = d && !!l && !u, p = d && (!!l || u), m = f ? "clickable" : "", h = u ? "has-slotted-card-link" : "", g = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", _ = !!this.__resolvedTitle || t("heading"), v = !!this.subtitle || t("subtitle"), y = !!this.supportingText || t("supporting-text"), b = !!g || t("date"), x = t("footer"), S = (e = !1) => _ ? r`
             <div class="header">
               <slot name="heading">
-                ${e ? r`<a class="title" href="${s}" tabindex="-1">${this.#e}</a>` : r`<span class="title">${this.#e}</span>`}
+                ${e ? r`<a class="title" href="${l}" tabindex="-1">${this.__resolvedTitle}</a>` : r`<span class="title">${this.__resolvedTitle}</span>`}
               </slot>
-              ${e ? r`<md-icon>arrow_forward</md-icon>` : i}
+              ${e ? r`<span class="card-icon" aria-hidden="true">arrow_forward</span>` : i}
             </div>
-          ` : i, v = () => p ? r`<div class="sub-label"><slot name="subtitle">${this.subtitle}</slot></div>` : i, y = () => m ? r`<div class="supporting-text"><slot name="supporting-text">${d}</slot></div>` : i, b = () => h ? r`<div class="date"><slot name="date">${u}</slot></div>` : i, x = () => this.__mediaTemplate(), S = this.vignetteSpacing || i, C = this.vignetteSpacingTop || i, w = this.vignetteSpacingBottom || (this.vignetteSpacing ? i : "5"), T = this.vignetteSpacingLeft || i, E = this.vignetteSpacingRight || i, D = !!this.vignette?.trim(), O = D ? r`<scb-chip
+          ` : i, C = () => v ? r`<div class="sub-label"><slot name="subtitle">${this.subtitle}</slot></div>` : i, w = (e = this.supportingText) => e || t("supporting-text") ? r`<div class="supporting-text"><slot name="supporting-text">${e}</slot></div>` : i, T = () => b ? r`<div class="date"><slot name="date">${g}</slot></div>` : i, E = () => this.__mediaTemplate(e), D = this.vignetteSpacing || i, O = this.vignetteSpacingTop || i, k = this.vignetteSpacingBottom || (this.vignetteSpacing ? i : "5"), A = this.vignetteSpacingLeft || i, j = this.vignetteSpacingRight || i, M = !!this.vignette?.trim(), N = M ? r`<scb-chip
           class="content-vignette"
           variant="static"
           static-variant="${this.vignetteVariant === "outline" || this.vignetteVariant === "outlined" ? "outlined" : "filled"}"
           label="${this.vignette}"
-          spacing=${S}
-          spacing-top=${C}
-          spacing-bottom=${w}
-          spacing-left=${T}
-          spacing-right=${E}
-        ></scb-chip>` : i, k = this.__hasSlottedContent("scb-chip") || D, A = () => this.__hasSlottedContent("scb-chip") ? r`<div class="chip-slot"><slot name="scb-chip"></slot></div>` : D ? r`<div class="chip-slot">${O}</div>` : i, j = (e = !1, t = !0, n = !0) => r`
-      ${A()}
+          spacing=${D}
+          spacing-top=${O}
+          spacing-bottom=${k}
+          spacing-left=${A}
+          spacing-right=${j}
+        ></scb-chip>` : i, P = t("scb-chip") || M, F = () => t("scb-chip") ? r`<div class="chip-slot"><slot name="scb-chip"></slot></div>` : M ? r`<div class="chip-slot">${N}</div>` : i, I = (e = !1, t = !0, n = !0, a = this.supportingText) => r`
+      ${F()}
       <div class="top-content">
-        ${_(e)}
-        ${v()}
-        ${t ? y() : i}
-        ${n ? b() : i}
+        ${S(e)}
+        ${C()}
+        ${t ? w(a) : i}
+        ${n ? T() : i}
       </div>
-    `, M = () => g ? r`
+    `, L = () => x ? r`
             <div class="content footer">
               <slot name="footer"></slot>
             </div>
-          ` : i, N = k || f || p || m || h, P = (e) => r`
+          ` : i, R = P || _ || v || y || b, z = (e) => r`
       <div
-        class="scb-card ${t} ${o} ${a} ${l}"
-        @click=${c ? this.__handleHrefNavigation : null}
-        @keydown=${c ? this.__onKeyDown : null}
-        style="cursor:${c ? "pointer" : "default"};"
-        role=${c ? "link" : i}
-        tabindex=${c ? "0" : i}
-        aria-label=${this.#e || this.subtitle || "Kort"}
+        class="scb-card ${a} ${c} ${s} ${m} ${h}"
+        @click=${f ? this.__handleHrefNavigation : null}
+        @keydown=${f ? this.__onKeyDown : null}
+        @focusin=${p ? this.__ensureFocusRingOnFocusVisible : null}
+        @pointerenter=${p ? this.__ensureRippleOnInteraction : null}
+        @pointerdown=${p ? this.__ensureRippleOnInteraction : null}
+        style="cursor:${p ? "pointer" : "default"};"
+        role=${f ? "link" : i}
+        tabindex=${f ? "0" : i}
+        aria-label=${this.__resolvedTitle || this.subtitle || "Kort"}
       >
-        ${c ? r`<md-ripple></md-ripple>` : ""}
-        ${x()}
+        ${p && this.__rippleLoaded ? r`<md-ripple></md-ripple>` : i}
+        ${u ? r`<slot
+              name="card-link"
+              @click=${this.__handleSlottedCardLinkClick}
+              @focusin=${this.__ensureFocusRingOnFocusVisible}
+              @pointerenter=${this.__ensureRippleOnInteraction}
+              @pointerdown=${this.__ensureRippleOnInteraction}
+            ></slot>` : i}
+        ${E()}
         ${e}
       </div>
-      <md-focus-ring></md-focus-ring>
+      ${p && this.__focusRingLoaded ? r`<md-focus-ring></md-focus-ring>` : i}
     `;
-		switch (e) {
-			case "standard": return P(r`
-          <div class="full-content">
-            ${j(!!s)}
-            ${M()}
-          </div>
-        `);
-			case "list": return P(r`
-          <div class="full-content">
-            ${N ? j(!1) : i}
-            <div class="content list ${N ? "has-top-content" : ""}">
-              <slot name="list"></slot><slot></slot>
-            </div>
-            ${M()}
-          </div>
-        `);
-			case "social":
-				let e = this.commentsHref, t = (e) => {
-					e.stopPropagation();
-				}, n = (e) => {
-					let t = this.renderRoot?.querySelector(".scb-card");
-					t && (e ? t.classList.add("no-hover") : t.classList.remove("no-hover"));
-				}, a = this.commentsText ? `${this.commentsText}: ` : "", o = this.likesText ? `${this.likesText}: ` : "", c = (e) => (t) => {
-					t.stopPropagation(), this.__dispatchSocialActionEvent(e, t);
-				}, l = this.likesDisabled ? i : r`
-              <span
-                class="likes"
-                @mouseenter=${() => n(!0)}
-                @mouseleave=${() => n(!1)}
-              >
-                ${this.likesInteractive ? r`
-                      <scb-icon-button
-                        id="like-button"
-                        variant="standard"
-                        icon="thumb_up"
-                        ?icon-filled=${this.hasLiked}
-                        aria-label="${this.likesText || "Gilla"}"
-                        @click=${(e) => {
-					e.stopPropagation(), this.hasLiked = !this.hasLiked, this.__dispatchLikeEvent("like-click", {
-						hasLiked: this.hasLiked,
-						likes: this.likes ?? 0
-					});
-				}}
-                        @keydown=${(e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), this.hasLiked = !this.hasLiked, this.__dispatchLikeEvent("like-click", {
-						hasLiked: this.hasLiked,
-						likes: this.likes ?? 0
-					}));
-				}}
-                        @hover=${(e) => {
-					e.preventDefault(), e.stopPropagation(), this.__dispatchLikeEvent("like-hover", {
-						hasLiked: this.hasLiked,
-						likes: this.likes ?? 0
-					});
-				}}
-                      ></scb-icon-button>
-                    ` : r`<md-icon>thumb_up</md-icon>`}
-                <span class="social-text">${o}${this.likes ?? 0}</span>
-              </span>
-            `;
-				return P(r`
-          <div class="full-content">
-            ${j(!!s)}
-            <div class="content">
-              <div class="social-metrics">
-                ${this.author ? r`
-                      <a
-                        class="author social-text"
-                        href="${this.authorHref || "#"}"
-                        tabindex="0"
-                        @click=${t}
-                        @mouseenter=${() => n(!0)}
-                        @mouseleave=${() => n(!1)}
-                        >${this.authorText}</a
-                      >
-                    ` : ""}
-                ${this.commentsDisabled ? i : r`
-                      <span
-                        class="comments"
-                        @mouseenter=${() => n(!0)}
-                        @mouseleave=${() => n(!1)}
-                      >
-                        ${e === "" ? r`
-                              <md-icon>comment</md-icon>
-                            ` : r`
-                              <scb-icon-button
-                                href="${e}"
-                                tabindex="0"
-                                @click=${t}
-                                variant="standard"
-                                icon="comment"
-                                aria-label="Gå till kommentarer"
-                              ></scb-icon-button>
-                            `}
-                        <span class="social-text">${a}${this.comments ?? 0}</span>
-                      </span>
-                    `}
-                ${this.likesHoverContent ? r`
-                      <scb-tooltip
-                        variant="rich"
-                        for="like-button"
-                        supporting-text=${this.__noWrapText(this.likesHoverContent)}
-                        trigger="hover"
-                        position="right"
-                      >
-                        ${l}
-                      </scb-tooltip>
-                    ` : l}
-                ${this.replyEnabled ? r`
-                      <span class="social-action">
-                        <scb-icon-button
-                          variant="standard"
-                          icon="reply"
-                          aria-label="Svara"
-                          @click=${c("reply")}
-                        ></scb-icon-button>
-                        <span class="social-text">Svara</span>
-                      </span>
-                    ` : i}
-                ${this.editEnabled ? r`
-                      <span class="social-action">
-                        <scb-icon-button
-                          variant="standard"
-                          icon="edit"
-                          aria-label="Redigera"
-                          @click=${c("edit")}
-                        ></scb-icon-button>
-                        <span class="social-text">Redigera</span>
-                      </span>
-                    ` : i}
-                ${this.deleteEnabled ? r`
-                      <span class="social-action">
-                        <scb-icon-button
-                          variant="standard"
-                          icon="delete"
-                          aria-label="Ta bort"
-                          @click=${c("delete")}
-                        ></scb-icon-button>
-                        <span class="social-text">Ta bort</span>
-                      </span>
-                    ` : i}
-              </div>
-            </div>
-            ${M()}
-          </div>
-        `);
-			case "link": return P(r`
-          <div class="full-content">
-            ${j(!1)}
-            <div class="content links">
-              <slot name="links"></slot><slot></slot>
-            </div>
-            ${M()}
-          </div>
-        `);
-			case "action": return P(r`
-          <div class="full-content">
-            ${j(!1)}
-            <div class="content actions">
-              <slot name="actions"></slot><slot></slot>
-            </div>
-            ${M()}
-          </div>
-        `);
-			case "container": return P(r`
-          <div class="container-content ${f || p ? "has-header" : ""}">
-            ${A()}
-            ${f || p ? r`
-                  <div class="top-content">
-                    ${_(!1)}
-                    ${v()}
-                  </div>
-                ` : i}
-            <slot></slot>
-            ${M()}
-          </div>
-        `);
-			default: return P(r`
+		return n === "standard" ? z(r`
+      <div class="full-content">
+        ${I(!!l)}
+        ${L()}
+      </div>
+    `) : this.__variantRenderer ? z(this.__variantRenderer.renderScbCardVariant(this, n, {
+			topContentTpl: I,
+			footerTpl: L,
+			contentChipTpl: F,
+			headerTpl: S,
+			subtitleTpl: C,
+			effectiveHref: l,
+			hasHeading: _,
+			hasSubtitle: v,
+			hasListTopContent: R
+		})) : (this.__ensureVariantRenderer(), z(r`
           <div class="full-content">
-            ${j(!!s)}
-            ${M()}
+            ${I(!!l)}
+            ${L()}
           </div>
-        `);
-		}
+        `));
 	}
 	updated(e) {
-		super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), e.has("type") && (this.cardType === "list" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density")), this.mediaFit && this.mediaFit !== "cover" ? this.style.setProperty("--scb-card-media-fit", this.mediaFit) : this.style.removeProperty("--scb-card-media-fit"), this.mediaPosition && this.mediaPosition !== "center" ? this.style.setProperty("--scb-card-media-position", this.mediaPosition) : this.style.removeProperty("--scb-card-media-position"), this.__syncSocialAttributes(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#t(), (e.has("innerPadding") || e.has("paddingTop") || e.has("paddingBottom") || e.has("paddingLeft") || e.has("paddingRight")) && this.#n();
+		super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), e.has("type") && (this.cardType === "list" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density")), this.mediaFit && this.mediaFit !== "cover" ? this.style.setProperty("--scb-card-media-fit", this.mediaFit) : this.style.removeProperty("--scb-card-media-fit"), this.mediaPosition && this.mediaPosition !== "center" ? this.style.setProperty("--scb-card-media-position", this.mediaPosition) : this.style.removeProperty("--scb-card-media-position"), this.__syncSocialAttributes(), this.__ensureDependenciesReady(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing(), (e.has("innerPadding") || e.has("paddingTop") || e.has("paddingBottom") || e.has("paddingLeft") || e.has("paddingRight")) && this.__applyPadding();
 	}
 	async firstUpdated(e) {
-		s.__iconLoaded || (await import("@material/web/icon/icon.js"), s.__iconLoaded = !0), s.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), s.__rippleLoaded = !0), this.#t(), this.#n(), this.__syncSocialAttributes();
+		this.__lightDomObserver = new MutationObserver(() => this.__ensureDependenciesReady()), this.__lightDomObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		}), this.__ensureDependenciesReady(), this.__applySpacing(), this.__applyPadding(), this.__syncSocialAttributes(), this.__primaryHref() && this.contains(document.activeElement) && this.__ensureFocusRingOnFocusVisible(), this.__primaryHref() && this.matches(":hover") && this.__ensureRippleOnInteraction();
+	}
+	disconnectedCallback() {
+		this.__lightDomObserver?.disconnect(), this.__lightDomObserver = void 0, super.disconnectedCallback();
 	}
 };
 e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "type", void 0), e([o({
+	converter: O
+})], k.prototype, "type", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "variant", void 0), e([o({
+	converter: O
+})], k.prototype, "variant", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "direction", void 0), e([o({
+	converter: O
+})], k.prototype, "direction", void 0), e([o({
 	type: String,
 	reflect: !0
-})], u.prototype, "size", void 0), e([o({
+})], k.prototype, "size", void 0), e([o({
 	type: String,
 	attribute: "media-type"
-})], u.prototype, "mediaType", void 0), e([o({
+})], k.prototype, "mediaType", void 0), e([o({
 	type: String,
 	attribute: "media-href"
-})], u.prototype, "mediaHref", void 0), e([o({
+})], k.prototype, "mediaHref", void 0), e([o({
 	type: String,
 	attribute: "media-alt"
-})], u.prototype, "mediaAlt", void 0), e([o({
+})], k.prototype, "mediaAlt", void 0), e([o({
 	type: String,
 	attribute: "media-srcset"
-})], u.prototype, "mediaSrcset", void 0), e([o({
+})], k.prototype, "mediaSrcset", void 0), e([o({
 	type: String,
 	attribute: "media-sizes"
-})], u.prototype, "mediaSizes", void 0), e([o({
+})], k.prototype, "mediaSizes", void 0), e([o({
 	type: String,
 	attribute: "media-loading"
-})], u.prototype, "mediaLoading", void 0), e([o({
+})], k.prototype, "mediaLoading", void 0), e([o({
 	type: String,
 	attribute: "media-decoding"
-})], u.prototype, "mediaDecoding", void 0), e([o({
+})], k.prototype, "mediaDecoding", void 0), e([o({
 	type: String,
 	attribute: "media-fetchpriority"
-})], u.prototype, "mediaFetchPriority", void 0), e([o({
+})], k.prototype, "mediaFetchPriority", void 0), e([o({
 	type: String,
 	attribute: "media-fit"
-})], u.prototype, "mediaFit", void 0), e([o({
+})], k.prototype, "mediaFit", void 0), e([o({
 	type: String,
 	attribute: "media-position"
-})], u.prototype, "mediaPosition", void 0), e([o({
+})], k.prototype, "mediaPosition", void 0), e([o({
 	type: String,
 	attribute: "media-width"
-})], u.prototype, "mediaWidth", void 0), e([o({
+})], k.prototype, "mediaWidth", void 0), e([o({
 	type: String,
 	attribute: "media-height"
-})], u.prototype, "mediaHeight", void 0), e([o({
+})], k.prototype, "mediaHeight", void 0), e([o({
 	type: String,
 	attribute: "media-aspect"
-})], u.prototype, "mediaAspect", void 0), e([o({
+})], k.prototype, "mediaAspect", void 0), e([o({
 	type: Boolean,
 	attribute: "media-placeholder"
-})], u.prototype, "mediaPlaceholder", void 0), e([o({
+})], k.prototype, "mediaPlaceholder", void 0), e([o({
 	type: String,
 	attribute: "card-href",
 	reflect: !0,
-	converter: l
-})], u.prototype, "cardHref", void 0), e([o({
+	converter: O
+})], k.prototype, "cardHref", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "href", void 0), e([o({
+	converter: O
+})], k.prototype, "href", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "title", void 0), e([o({
+	converter: O
+})], k.prototype, "title", void 0), e([o({
 	type: String,
 	attribute: "card-title",
 	reflect: !0,
-	converter: l
-})], u.prototype, "cardTitle", void 0), e([o({
+	converter: O
+})], k.prototype, "cardTitle", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "subtitle", void 0), e([o({
+	converter: O
+})], k.prototype, "subtitle", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "vignette", void 0), e([o({
+	converter: O
+})], k.prototype, "vignette", void 0), e([o({
 	type: String,
 	attribute: "vignette-variant",
-	converter: l
-})], u.prototype, "vignetteVariant", void 0), e([o({
+	converter: O
+})], k.prototype, "vignetteVariant", void 0), e([o({
 	type: String,
 	attribute: "vignette-spacing",
 	reflect: !0,
-	converter: l
-})], u.prototype, "vignetteSpacing", void 0), e([o({
+	converter: O
+})], k.prototype, "vignetteSpacing", void 0), e([o({
 	type: String,
 	attribute: "vignette-spacing-top",
 	reflect: !0,
-	converter: l
-})], u.prototype, "vignetteSpacingTop", void 0), e([o({
+	converter: O
+})], k.prototype, "vignetteSpacingTop", void 0), e([o({
 	type: String,
 	attribute: "vignette-spacing-bottom",
 	reflect: !0,
-	converter: l
-})], u.prototype, "vignetteSpacingBottom", void 0), e([o({
+	converter: O
+})], k.prototype, "vignetteSpacingBottom", void 0), e([o({
 	type: String,
 	attribute: "vignette-spacing-left",
 	reflect: !0,
-	converter: l
-})], u.prototype, "vignetteSpacingLeft", void 0), e([o({
+	converter: O
+})], k.prototype, "vignetteSpacingLeft", void 0), e([o({
 	type: String,
 	attribute: "vignette-spacing-right",
 	reflect: !0,
-	converter: l
-})], u.prototype, "vignetteSpacingRight", void 0), e([o({
+	converter: O
+})], k.prototype, "vignetteSpacingRight", void 0), e([o({
 	type: String,
 	attribute: "supporting-text",
 	reflect: !0,
-	converter: l
-})], u.prototype, "supportingText", void 0), e([o({
+	converter: O
+})], k.prototype, "supportingText", void 0), e([o({
 	type: Date,
 	reflect: !0
-})], u.prototype, "date", void 0), e([o({
+})], k.prototype, "date", void 0), e([o({
 	type: String,
 	attribute: "social-comments-text"
-})], u.prototype, "commentsText", void 0), e([o({
+})], k.prototype, "commentsText", void 0), e([o({
 	type: Number,
 	attribute: "social-comments"
-})], u.prototype, "comments", void 0), e([o({
+})], k.prototype, "comments", void 0), e([o({
 	type: Boolean,
 	attribute: "social-comments-disabled"
-})], u.prototype, "commentsDisabled", void 0), e([o({
+})], k.prototype, "commentsDisabled", void 0), e([o({
 	type: String,
 	attribute: "social-comments-href"
-})], u.prototype, "commentsHref", void 0), e([o({
+})], k.prototype, "commentsHref", void 0), e([o({
 	type: String,
 	attribute: "social-likes-text"
-})], u.prototype, "likesText", void 0), e([o({
+})], k.prototype, "likesText", void 0), e([o({
 	type: Number,
 	attribute: "social-likes"
-})], u.prototype, "likes", void 0), e([o({
+})], k.prototype, "likes", void 0), e([o({
 	type: Boolean,
 	attribute: "social-likes-disabled"
-})], u.prototype, "likesDisabled", void 0), e([o({
+})], k.prototype, "likesDisabled", void 0), e([o({
 	type: String,
 	attribute: "social-likes-hover-content"
-})], u.prototype, "likesHoverContent", void 0), e([o({
+})], k.prototype, "likesHoverContent", void 0), e([o({
 	type: Boolean,
 	attribute: "social-has-liked"
-})], u.prototype, "hasLiked", void 0), e([o({
+})], k.prototype, "hasLiked", void 0), e([o({
 	type: Boolean,
 	attribute: "social-likes-interactive"
-})], u.prototype, "likesInteractive", void 0), e([o({
+})], k.prototype, "likesInteractive", void 0), e([o({
 	type: Boolean,
 	attribute: "social-author"
-})], u.prototype, "author", void 0), e([o({
+})], k.prototype, "author", void 0), e([o({
 	type: String,
 	attribute: "social-author-text"
-})], u.prototype, "authorText", void 0), e([o({
+})], k.prototype, "authorText", void 0), e([o({
 	type: String,
 	attribute: "social-author-href"
-})], u.prototype, "authorHref", void 0), e([o({
+})], k.prototype, "authorHref", void 0), e([o({
 	type: Boolean,
 	attribute: "social-reply-enabled"
-})], u.prototype, "replyEnabled", void 0), e([o({
+})], k.prototype, "replyEnabled", void 0), e([o({
 	type: Boolean,
 	attribute: "social-edit-enabled"
-})], u.prototype, "editEnabled", void 0), e([o({
+})], k.prototype, "editEnabled", void 0), e([o({
 	type: Boolean,
 	attribute: "social-delete-enabled"
-})], u.prototype, "deleteEnabled", void 0), e([o({
+})], k.prototype, "deleteEnabled", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "sizing", void 0), e([o({
+	converter: O
+})], k.prototype, "sizing", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "width", void 0), e([o({
+	converter: O
+})], k.prototype, "width", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "max-width",
-	converter: l
-})], u.prototype, "maxWidth", void 0), e([o({
+	converter: O
+})], k.prototype, "maxWidth", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "height", void 0), e([o({
+	converter: O
+})], k.prototype, "height", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "max-height",
-	converter: l
-})], u.prototype, "maxHeight", void 0), e([o({
+	converter: O
+})], k.prototype, "maxHeight", void 0), e([o({
 	type: String,
 	reflect: !0,
-	converter: l
-})], u.prototype, "spacing", void 0), e([o({
+	converter: O
+})], k.prototype, "spacing", void 0), e([o({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0,
-	converter: l
-})], u.prototype, "spacingTop", void 0), e([o({
+	converter: O
+})], k.prototype, "spacingTop", void 0), e([o({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0,
-	converter: l
-})], u.prototype, "spacingBottom", void 0), e([o({
+	converter: O
+})], k.prototype, "spacingBottom", void 0), e([o({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0,
-	converter: l
-})], u.prototype, "spacingLeft", void 0), e([o({
+	converter: O
+})], k.prototype, "spacingLeft", void 0), e([o({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0,
-	converter: l
-})], u.prototype, "spacingRight", void 0), e([o({
+	converter: O
+})], k.prototype, "spacingRight", void 0), e([o({
 	type: String,
 	attribute: "padding",
 	reflect: !0,
-	converter: l
-})], u.prototype, "innerPadding", void 0), e([o({
+	converter: O
+})], k.prototype, "innerPadding", void 0), e([o({
 	type: String,
 	attribute: "padding-top",
 	reflect: !0,
-	converter: l
-})], u.prototype, "paddingTop", void 0), e([o({
+	converter: O
+})], k.prototype, "paddingTop", void 0), e([o({
 	type: String,
 	attribute: "padding-bottom",
 	reflect: !0,
-	converter: l
-})], u.prototype, "paddingBottom", void 0), e([o({
+	converter: O
+})], k.prototype, "paddingBottom", void 0), e([o({
 	type: String,
 	attribute: "padding-left",
 	reflect: !0,
-	converter: l
-})], u.prototype, "paddingLeft", void 0), e([o({
+	converter: O
+})], k.prototype, "paddingLeft", void 0), e([o({
 	type: String,
 	attribute: "padding-right",
 	reflect: !0,
-	converter: l
-})], u.prototype, "paddingRight", void 0), u = s = e([a("scb-card")], u);
-var d = class extends u {
+	converter: O
+})], k.prototype, "paddingRight", void 0), k = e([a("scb-card")], k);
+var A = class extends k {
 	constructor() {
 		super(), this.type = "list";
 	}
@@ -1358,8 +1217,8 @@ var d = class extends u {
 		return "list";
 	}
 };
-d = e([a("scb-list-card")], d);
-var f = class extends u {
+A = e([a("scb-list-card")], A);
+var j = class extends k {
 	constructor() {
 		super(), this.type = "link";
 	}
@@ -1367,8 +1226,8 @@ var f = class extends u {
 		return "link";
 	}
 };
-f = e([a("scb-link-card")], f);
-var p = class extends u {
+j = e([a("scb-link-card")], j);
+var M = class extends k {
 	constructor() {
 		super(), this.type = "action";
 	}
@@ -1376,8 +1235,8 @@ var p = class extends u {
 		return "action";
 	}
 };
-p = e([a("scb-action-card")], p);
-var m = class extends u {
+M = e([a("scb-action-card")], M);
+var N = class extends k {
 	constructor() {
 		super(), this.type = "social";
 	}
@@ -1385,8 +1244,8 @@ var m = class extends u {
 		return "social";
 	}
 };
-m = e([a("scb-social-card")], m);
-var h = class extends u {
+N = e([a("scb-social-card")], N);
+var P = class extends k {
 	constructor() {
 		super(), this.type = "container";
 	}
@@ -1394,6 +1253,6 @@ var h = class extends u {
 		return "container";
 	}
 };
-h = e([a("scb-container-card")], h);
+P = e([a("scb-container-card")], P);
 //#endregion
-export { p as ScbActionCard, u as ScbCard, h as ScbContainerCard, f as ScbLinkCard, d as ScbListCard, m as ScbSocialCard };
+export { M as ScbActionCard, k as ScbCard, P as ScbContainerCard, j as ScbLinkCard, A as ScbListCard, N as ScbSocialCard };