scb-wc-test 0.1.340 → 0.1.342

package/scb-card/scb-card.js

@@ -1,5 +1,5 @@
-import { css as L, LitElement as C, html as r, nothing as m } from "lit";
-import { property as a, customElement as F } from "lit/decorators.js";
+import { css as H, LitElement as E, html as r, nothing as g } from "lit";
+import { property as a, customElement as D } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
 import "../scb-list/scb-list.js";
 import "../scb-button/scb-button.js";
@@ -7,20 +7,20 @@ import "../scb-icon-button/scb-icon-button.js";
 import "../scb-link/scb-link.js";
 import "../scb-avatar/scb-avatar.js";
 import "../scb-tooltip/scb-tooltip.js";
-var H = Object.defineProperty, E = Object.getOwnPropertyDescriptor, w = (t) => {
+var B = Object.defineProperty, N = Object.getOwnPropertyDescriptor, P = (t) => {
   throw TypeError(t);
 }, s = (t, e, n, c) => {
-  for (var o = c > 1 ? void 0 : c ? E(e, n) : e, d = t.length - 1, h; d >= 0; d--)
-    (h = t[d]) && (o = (c ? h(e, n, o) : h(o)) || o);
-  return c && o && H(e, n, o), o;
-}, B = (t, e, n) => e.has(t) || w("Cannot " + n), D = (t, e, n) => e.has(t) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), f = (t, e, n) => (B(t, e, "access private method"), n), y, z, k;
+  for (var o = c > 1 ? void 0 : c ? N(e, n) : e, p = t.length - 1, h; p >= 0; p--)
+    (h = t[p]) && (o = (c ? h(e, n, o) : h(o)) || o);
+  return c && o && B(e, n, o), o;
+}, W = (t, e, n) => e.has(t) || P("Cannot " + n), M = (t, e, n) => e.has(t) ? P("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), x = (t, e, n) => (W(t, e, "access private method"), n), f, _, $;
 const l = {
   fromAttribute: (t) => t ?? "",
   toAttribute: (t) => typeof t != "string" || t.trim() === "" ? null : t
 };
-let i = class extends C {
+let i = class extends E {
   constructor() {
-    super(...arguments), D(this, y), this.__managedSocialAttributes = /* @__PURE__ */ new Set([
+    super(...arguments), M(this, f), this.__managedSocialAttributes = /* @__PURE__ */ new Set([
       "social-comments-text",
       "social-comments",
       "social-comments-href",
@@ -32,7 +32,7 @@ let i = class extends C {
       "social-author",
       "social-author-text",
       "social-author-href"
-    ]), this.__isSyncingManagedSocialAttributes = !1, this.type = "standard", this.variant = "standard", this.direction = "vertical", 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.subtitle = "", 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.sizing = "stretch", 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 = (t) => {
+    ]), 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.subtitle = "", 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.sizing = "stretch", 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 = (t) => {
       const e = t.currentTarget.closest(".media");
       e && e.classList.add("is-loaded");
     }, this.__onKeyDown = (t) => {
@@ -58,8 +58,8 @@ let i = class extends C {
     if (!e) return { w: 640, h: 360 };
     const n = e.includes("/") ? e.split("/") : e.includes(":") ? e.split(":") : e.includes("x") ? e.split("x") : null;
     if (n && n.length === 2) {
-      const o = Number(n[0]), d = Number(n[1]);
-      if (o > 0 && d > 0) return { w: o, h: d };
+      const o = Number(n[0]), p = Number(n[1]);
+      if (o > 0 && p > 0) return { w: o, h: p };
     }
     const c = Number(e);
     return isFinite(c) && c > 0 ? { w: 1e3, h: Math.round(1e3 / c) } : { w: 640, h: 360 };
@@ -117,9 +117,9 @@ let i = class extends C {
         const h = this.__calcAspectWH(c || "16/9");
         e || (e = h.w), n || (n = h.h);
       }
-      const o = `aspect-ratio:${c || `${e}/${n}`};`, d = this.mediaPlaceholder ? "has-ph" : "";
+      const o = `aspect-ratio:${c || `${e}/${n}`};`, p = this.mediaPlaceholder ? "has-ph" : "";
       return r`
-        <div class="media ${d}" style="${o}">
+        <div class="media ${p}" style="${o}">
           <slot name="media-sources"></slot>
           <img
             src="${this.mediaHref || ""}"
@@ -172,44 +172,44 @@ let i = class extends C {
     this.type === "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() {
-    const t = this.variant ? `${this.variant.toLowerCase()}` : "", e = this.type === "list" || this.type === "container" ? "vertical" : this.direction ? this.direction.toLowerCase() : "vertical", n = this.__effectiveHref(), c = (this.type === "standard" || this.type === "social") && !!n, o = c ? "clickable" : "", d = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", h = (g = !1) => g ? r`<a class="title" href="${n}" tabindex="-1"
+    const t = this.variant ? `${this.variant.toLowerCase()}` : "", e = (this.direction || "dynamic").toLowerCase(), c = this.type !== "list" && this.type !== "container" && e !== "vertical" && e !== "horizontal" ? "dynamic-direction" : "", o = this.type === "list" || this.type === "container" ? "vertical" : e === "horizontal" ? "horizontal" : "vertical", p = this.__effectiveHref(), h = (this.type === "standard" || this.type === "social") && !!p, A = h ? "clickable" : "", b = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", z = (v = !1) => v ? r`<a class="title" href="${p}" tabindex="-1"
             >${this.title}</a
-          ><md-icon>arrow_forward</md-icon>` : r`<span class="title">${this.title}</span>`, T = () => this.__mediaTemplate(), b = (g) => r`
+          ><md-icon>arrow_forward</md-icon>` : r`<span class="title">${this.title}</span>`, L = () => this.__mediaTemplate(), m = (v) => r`
       <div
-        class="scb-card ${t} ${e} ${o}"
-        @click=${c ? this.__handleHrefNavigation : null}
-        @keydown=${c ? this.__onKeyDown : null}
-        style="cursor:${c ? "pointer" : "default"};"
-        role=${c ? "link" : m}
-        tabindex=${c ? "0" : m}
+        class="scb-card ${t} ${o} ${c} ${A}"
+        @click=${h ? this.__handleHrefNavigation : null}
+        @keydown=${h ? this.__onKeyDown : null}
+        style="cursor:${h ? "pointer" : "default"};"
+        role=${h ? "link" : g}
+        tabindex=${h ? "0" : g}
         aria-label=${this.title || this.subtitle || "Kort"}
       >
-        ${c ? r`<md-ripple></md-ripple>` : ""}
-        ${T()}
-        ${g}
+        ${h ? r`<md-ripple></md-ripple>` : ""}
+        ${L()}
+        ${v}
       </div>
       <md-focus-ring></md-focus-ring>
     `;
     switch (this.type) {
       case "standard":
-        return b(r`
+        return m(r`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? r`<div class="header">${h(!!n)}</div>` : ""}
+              ${this.title ? r`<div class="header">${z(!!p)}</div>` : ""}
               ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
               ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${d ? r`<div class="date">${d}</div>` : ""}
+              ${b ? r`<div class="date">${b}</div>` : ""}
             </div>
           </div>
         `);
       case "list":
-        return b(r`
+        return m(r`
           <div class="full-content">
             <div class="top-content">
               ${this.title ? r`<div class="header"><span class="title">${this.title}</span></div>` : ""}
               ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
               ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${d ? r`<div class="date">${d}</div>` : ""}
+              ${b ? r`<div class="date">${b}</div>` : ""}
             </div>
             <div class="content list">
               <slot></slot>
@@ -217,19 +217,19 @@ let i = class extends C {
           </div>
         `);
       case "social":
-        const g = this.commentsHref, _ = (p) => {
-          p.stopPropagation();
-        }, v = (p) => {
-          var S;
-          const u = (S = this.renderRoot) == null ? void 0 : S.querySelector(".scb-card");
-          u && (p ? u.classList.add("no-hover") : u.classList.remove("no-hover"));
-        }, P = this.commentsText ? `${this.commentsText}: ` : "", A = this.likesText ? `${this.likesText}: ` : "", x = (p) => (u) => {
-          u.stopPropagation(), this.__dispatchSocialActionEvent(p, u);
-        }, $ = this.likesDisabled ? m : r`
+        const v = this.commentsHref, S = (d) => {
+          d.stopPropagation();
+        }, u = (d) => {
+          var T;
+          const y = (T = this.renderRoot) == null ? void 0 : T.querySelector(".scb-card");
+          y && (d ? y.classList.add("no-hover") : y.classList.remove("no-hover"));
+        }, C = this.commentsText ? `${this.commentsText}: ` : "", F = this.likesText ? `${this.likesText}: ` : "", k = (d) => (y) => {
+          y.stopPropagation(), this.__dispatchSocialActionEvent(d, y);
+        }, w = this.likesDisabled ? g : r`
               <span
                 class="likes"
-                @mouseenter=${() => v(!0)}
-                @mouseleave=${() => v(!1)}
+                @mouseenter=${() => u(!0)}
+                @mouseleave=${() => u(!1)}
               >
                 ${this.likesInteractive ? r`
                       <scb-icon-button
@@ -238,36 +238,36 @@ let i = class extends C {
                         icon="thumb_up"
                         ?icon-filled=${this.hasLiked}
                         aria-label="${this.likesText || "Gilla"}"
-                        @click=${(p) => {
-          p.stopPropagation(), this.hasLiked = !this.hasLiked, this.__dispatchLikeEvent("like-click", {
+                        @click=${(d) => {
+          d.stopPropagation(), this.hasLiked = !this.hasLiked, this.__dispatchLikeEvent("like-click", {
             hasLiked: this.hasLiked,
             likes: this.likes ?? 0
           });
         }}
-                        @keydown=${(p) => {
-          (p.key === "Enter" || p.key === " ") && (p.preventDefault(), p.stopPropagation(), this.hasLiked = !this.hasLiked, this.__dispatchLikeEvent("like-click", {
+                        @keydown=${(d) => {
+          (d.key === "Enter" || d.key === " ") && (d.preventDefault(), d.stopPropagation(), this.hasLiked = !this.hasLiked, this.__dispatchLikeEvent("like-click", {
             hasLiked: this.hasLiked,
             likes: this.likes ?? 0
           }));
         }}
-                        @hover=${(p) => {
-          p.preventDefault(), p.stopPropagation(), this.__dispatchLikeEvent("like-hover", {
+                        @hover=${(d) => {
+          d.preventDefault(), d.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">${A}${this.likes ?? 0}</span>
+                <span class="social-text">${F}${this.likes ?? 0}</span>
               </span>
             `;
-        return b(r`
+        return m(r`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? r`<div class="header">${h(!!n)}</div>` : ""}
+              ${this.title ? r`<div class="header">${z(!!p)}</div>` : ""}
               ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
               ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${d ? r`<div class="date">${d}</div>` : ""}
+              ${b ? r`<div class="date">${b}</div>` : ""}
             </div>
             <div class="content">
               <div class="social-metrics">
@@ -276,23 +276,23 @@ let i = class extends C {
                         class="author social-text"
                         href="${this.authorHref || "#"}"
                         tabindex="0"
-                        @click=${_}
-                        @mouseenter=${() => v(!0)}
-                        @mouseleave=${() => v(!1)}
+                        @click=${S}
+                        @mouseenter=${() => u(!0)}
+                        @mouseleave=${() => u(!1)}
                         >${this.authorText}</a
                       >
                     ` : ""}
-                ${this.commentsDisabled ? m : r`
+                ${this.commentsDisabled ? g : r`
                       <span
                         class="comments"
-                        @mouseenter=${() => v(!0)}
-                        @mouseleave=${() => v(!1)}
+                        @mouseenter=${() => u(!0)}
+                        @mouseleave=${() => u(!1)}
                       >
-                        ${g !== "" ? r`
+                        ${v !== "" ? r`
                               <scb-icon-button
-                                href="${g}"
+                                href="${v}"
                                 tabindex="0"
-                                @click=${_}
+                                @click=${S}
                                 variant="standard"
                                 icon="comment"
                                 aria-label="Gå till kommentarer"
@@ -300,7 +300,7 @@ let i = class extends C {
                             ` : r`
                               <md-icon>comment</md-icon>
                             `}
-                        <span class="social-text">${P}${this.comments ?? 0}</span>
+                        <span class="social-text">${C}${this.comments ?? 0}</span>
                       </span>
                     `}
                 ${this.likesHoverContent ? r`
@@ -311,54 +311,54 @@ let i = class extends C {
                         trigger="hover"
                         position="right"
                       >
-                        ${$}
+                        ${w}
                       </scb-tooltip>
-                    ` : $}
+                    ` : w}
                   ${this.replyEnabled ? r`
                         <span class="social-action">
                           <scb-icon-button
                             variant="standard"
                             icon="reply"
                             aria-label="Svara"
-                            @click=${x("reply")}
+                            @click=${k("reply")}
                           ></scb-icon-button>
                           <span class="social-text">Svara</span>
                         </span>
-                      ` : m}
+                      ` : g}
                   ${this.editEnabled ? r`
                         <span class="social-action">
                           <scb-icon-button
                             variant="standard"
                             icon="edit"
                             aria-label="Redigera"
-                            @click=${x("edit")}
+                            @click=${k("edit")}
                           ></scb-icon-button>
                           <span class="social-text">Redigera</span>
                         </span>
-                      ` : m}
+                      ` : g}
                   ${this.deleteEnabled ? r`
                         <span class="social-action">
                           <scb-icon-button
                             variant="standard"
                             icon="delete"
                             aria-label="Ta bort"
-                            @click=${x("delete")}
+                            @click=${k("delete")}
                           ></scb-icon-button>
                           <span class="social-text">Ta bort</span>
                         </span>
-                      ` : m}
+                      ` : g}
               </div>
             </div>
           </div>
         `);
       case "link":
-        return b(r`
+        return m(r`
           <div class="full-content">
             <div class="top-content">
               ${this.title ? r`<div class="header"><span class="title">${this.title}</span></div>` : ""}
               ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
               ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${d ? r`<div class="date">${d}</div>` : ""}
+              ${b ? r`<div class="date">${b}</div>` : ""}
             </div>
             <div class="content links">
               <slot></slot>
@@ -366,13 +366,13 @@ let i = class extends C {
           </div>
         `);
       case "action":
-        return b(r`
+        return m(r`
           <div class="full-content">
             <div class="top-content">
               ${this.title ? r`<div class="header"><span class="title">${this.title}</span></div>` : ""}
               ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
               ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${d ? r`<div class="date">${d}</div>` : ""}
+              ${b ? r`<div class="date">${b}</div>` : ""}
             </div>
             <div class="content actions">
               <slot></slot>
@@ -380,7 +380,7 @@ let i = class extends C {
           </div>
         `);
       case "container":
-        return b(r`
+        return m(r`
           <div class="container-content ${this.title || this.subtitle ? "has-header" : ""}">
             ${this.title || this.subtitle ? r`
                   <div class="top-content">
@@ -392,39 +392,40 @@ let i = class extends C {
           </div>
         `);
       default:
-        return b(r`
+        return m(r`
           <div class="full-content">
             <div class="top-content">
-              ${this.title ? r`<div class="header">${h(!!n)}</div>` : ""}
+              ${this.title ? r`<div class="header">${z(!!p)}</div>` : ""}
               ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
               ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
-              ${d ? r`<div class="date">${d}</div>` : ""}
+              ${b ? r`<div class="date">${b}</div>` : ""}
             </div>
           </div>
         `);
     }
   }
   updated(t) {
-    super.updated(t), t.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), t.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), t.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), t.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), t.has("type") && (this.type === "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(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && f(this, y, z).call(this), (t.has("innerPadding") || t.has("paddingTop") || t.has("paddingBottom") || t.has("paddingLeft") || t.has("paddingRight")) && f(this, y, k).call(this);
+    super.updated(t), t.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), t.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), t.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), t.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), t.has("type") && (this.type === "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(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && x(this, f, _).call(this), (t.has("innerPadding") || t.has("paddingTop") || t.has("paddingBottom") || t.has("paddingLeft") || t.has("paddingRight")) && x(this, f, $).call(this);
   }
   async firstUpdated(t) {
-    i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), f(this, y, z).call(this), f(this, y, k).call(this), this.__syncSocialAttributes();
+    i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), x(this, f, _).call(this), x(this, f, $).call(this), this.__syncSocialAttributes();
   }
 };
-y = /* @__PURE__ */ new WeakSet();
-z = function() {
+f = /* @__PURE__ */ new WeakSet();
+_ = function() {
   const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, n = this.mapSpacingToken(this.spacingBottom) ?? t, c = this.mapSpacingToken(this.spacingLeft), o = this.mapSpacingToken(this.spacingRight);
   e ? this.style.setProperty("--scb-card-spacing-block-start", e) : 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"), c ? this.style.setProperty("--scb-card-spacing-inline-start", c) : this.style.removeProperty("--scb-card-spacing-inline-start"), o ? this.style.setProperty("--scb-card-spacing-inline-end", o) : this.style.removeProperty("--scb-card-spacing-inline-end");
 };
-k = function() {
+$ = function() {
   const t = this.mapSpacingToken(this.innerPadding), e = this.mapSpacingToken(this.paddingTop) ?? t, n = this.mapSpacingToken(this.paddingBottom) ?? t, c = this.mapSpacingToken(this.paddingLeft) ?? t, o = this.mapSpacingToken(this.paddingRight) ?? t;
   e ? this.style.setProperty("--scb-card-content-padding-block-start", e) : 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"), c ? this.style.setProperty("--scb-card-content-padding-inline-start", c) : this.style.removeProperty("--scb-card-content-padding-inline-start"), o ? this.style.setProperty("--scb-card-content-padding-inline-end", o) : this.style.removeProperty("--scb-card-content-padding-inline-end");
 };
 i.__iconLoaded = !1;
 i.__rippleLoaded = !1;
-i.styles = L`
+i.styles = H`
     :host {
       display: block;
+      container-type: inline-size;
       box-sizing: border-box;
       position: relative;
       inline-size: 100%;
@@ -654,6 +655,9 @@ i.styles = L`
     .scb-card.vertical {
       flex-direction: column;
     }
+    .scb-card.dynamic-direction {
+      flex-direction: column;
+    }
     .scb-card.clickable {
       cursor: pointer;
     }
@@ -810,6 +814,10 @@ i.styles = L`
     }
     .scb-card.horizontal .media {
       align-self: flex-start;
+      flex: 0 1 min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
+      min-inline-size: min(var(--scb-card-size-horizontal-media-min, var(--scb-card-horizontal-media-min, 96px)), 100%);
+      max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
+      inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
     }
     .scb-card.horizontal .media ::slotted(scb-avatar) {
       margin: 0;
@@ -832,13 +840,55 @@ i.styles = L`
       margin: 0;
       object-fit: var(--scb-card-media-fit, cover);
       aspect-ratio: var(--scb-card-horizontal-media-aspect, 16 / 9);
-      flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
-      min-inline-size: var(--scb-card-size-horizontal-media-min, var(--scb-card-horizontal-media-min, 96px));
-      max-inline-size: var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
-      inline-size: auto;
+      inline-size: 100%;
       block-size: auto;
     }
 
+    @container (min-width: 500px) {
+      .scb-card.dynamic-direction {
+        flex-direction: row;
+        align-items: flex-start;
+        column-gap: var(--scb-card-size-horizontal-gap);
+        padding: var(--scb-card-size-horizontal-padding);
+      }
+      .scb-card.dynamic-direction .media {
+        align-self: flex-start;
+        flex: 0 1 min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
+        min-inline-size: min(var(--scb-card-size-horizontal-media-min, var(--scb-card-horizontal-media-min, 96px)), 100%);
+        max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
+        inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
+      }
+      .scb-card.dynamic-direction .media ::slotted(scb-avatar) {
+        margin: 0;
+      }
+      .scb-card.dynamic-direction .full-content {
+        align-self: flex-start;
+        padding: 0;
+        inline-size: auto;
+        min-inline-size: 0;
+        flex: 1 1 auto;
+      }
+      .scb-card.dynamic-direction .header {
+        align-items: flex-start;
+      }
+      .scb-card.dynamic-direction .header md-icon {
+        align-self: flex-start;
+      }
+
+      .scb-card.dynamic-direction .media img {
+        margin: 0;
+        object-fit: var(--scb-card-media-fit, cover);
+        aspect-ratio: var(--scb-card-horizontal-media-aspect, 16 / 9);
+        inline-size: 100%;
+        block-size: auto;
+      }
+
+      :host([sizing='content-width']) .scb-card.dynamic-direction:has(.media img) .full-content {
+        inline-size: max-content;
+        flex: 0 1 auto;
+      }
+    }
+
     :host([sizing='content-width']) .scb-card.horizontal:has(.media img) .full-content {
       inline-size: max-content;
       flex: 0 1 auto;
@@ -867,13 +917,6 @@ i.styles = L`
       gap: var(--spacing-2, 4px);
     }
 
-/*     .social-actions {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-3, 8px);
-      flex-wrap: wrap;
-    } */
-
     .social-action {
       display: inline-flex;
       align-items: center;
@@ -1096,7 +1139,7 @@ s([
   a({ type: String, attribute: "padding-right", reflect: !0, converter: l })
 ], i.prototype, "paddingRight", 2);
 i = s([
-  F("scb-card")
+  D("scb-card")
 ], i);
 export {
   i as ScbCard