scb-wc 0.1.2 → 0.1.4

package/scb-card/scb-card.js

@@ -0,0 +1,1231 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-list/scb-list.js";
+import "../scb-avatar/scb-avatar.js";
+import "../scb-link/scb-link.js";
+import "../scb-tooltip/scb-tooltip.js";
+import "../scb-vignette/scb-vignette.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-test-components/scb-card/scb-card.ts
+var s, c = {
+	fromAttribute: (e) => e ?? "",
+	toAttribute: (e) => typeof e == "string" ? e.trim() === "" ? null : e : null
+}, l = class extends t {
+	static {
+		s = this;
+	}
+	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.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 = (e) => {
+			let t = e.currentTarget.closest(".media");
+			t && t.classList.add("is-loaded");
+		}, this.__onKeyDown = (e) => {
+			let t = this.__effectiveHref();
+			(e.key === "Enter" || e.key === " ") && t && (e.preventDefault(), this.__navigate(t, e));
+		}, this.__handleHrefNavigation = (e) => {
+			let t = this.__effectiveHref();
+			t && (e.target.closest("a") || this.__navigate(t, e));
+		};
+	}
+	static {
+		this.__iconLoaded = !1;
+	}
+	static {
+		this.__rippleLoaded = !1;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      container-type: inline-size;
+      box-sizing: border-box;
+      position: relative;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: var(--scb-card-max-w, none);
+      height: auto;
+      padding: var(--scb-card-focus-ring-gap, 4px);
+      --scb-card-horizontal-media-max: 176px;
+      --scb-card-horizontal-media-min: 96px;
+      --scb-card-horizontal-media-aspect: 3 / 2;
+
+      margin-block-start: var(--scb-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-card-spacing-inline-end, 0);
+
+      --scb-card-size-content-padding-block: var(--spacing-7, 24px);
+      --scb-card-size-content-padding-inline: var(--spacing-6, 20px);
+      --scb-card-size-container-gap: var(--spacing-4, 12px);
+      --scb-card-size-container-gap-with-header: var(--spacing-5, 16px);
+      --scb-card-size-top-gap: var(--spacing-4, 12px);
+
+      --scb-card-size-header-font-size: var(--md-sys-typescale-headline-small-size, 22px);
+      --scb-card-size-header-line-height: var(--md-sys-typescale-headline-small-line-height, 28px);
+      --scb-card-size-header-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.5px);
+
+      --scb-card-size-sub-label-font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-card-size-sub-label-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-card-size-sub-label-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-card-size-supporting-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-card-size-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-card-size-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-card-size-date-font-size: var(--md-sys-typescale-body-small-size, 12px);
+      --scb-card-size-date-line-height: var(--md-sys-typescale-body-small-line-height, 24px);
+      --scb-card-size-date-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.15px);
+
+      --scb-card-size-horizontal-gap: var(--spacing-6, 20px);
+      --scb-card-size-horizontal-padding: var(--spacing-6, 20px);
+      --scb-card-size-horizontal-media-min: 96px;
+      --scb-card-size-horizontal-media-max: 176px;
+
+      --scb-card-size-social-gap: var(--spacing-5, 16px);
+      --scb-card-size-social-icon: var(--scale-05, 20px);
+      --scb-card-size-social-icon-font-size: var(--md-sys-typescale-title-large-size, 20px);
+      --scb-card-size-social-text: var(--md-sys-typescale-body-small-size, 12px);
+
+      --scb-card-size-list-offset: var(--spacing-7, 24px);
+      --scb-card-size-actions-offset: var(--spacing-7, 24px);
+      --scb-card-size-links-offset: var(--spacing-3, 8px);
+      --scb-card-size-links-item-offset: var(--spacing-3, 8px);
+    }
+
+    :host([size='medium']) {
+      --scb-card-size-content-padding-block: var(--spacing-6, 20px);
+      --scb-card-size-content-padding-inline: var(--spacing-5, 16px);
+      --scb-card-size-container-gap: var(--spacing-3, 8px);
+      --scb-card-size-container-gap-with-header: var(--spacing-4, 12px);
+      --scb-card-size-top-gap: var(--spacing-3, 8px);
+
+      --scb-card-size-header-font-size: var(--md-sys-typescale-title-large-size, 20px);
+      --scb-card-size-header-line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+      --scb-card-size-header-letter-spacing: var(--md-sys-typescale-title-large-tracking, -0.3px);
+
+      --scb-card-size-sub-label-font-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-card-size-sub-label-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-card-size-sub-label-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-card-size-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-card-size-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-card-size-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+      --scb-card-size-horizontal-gap: var(--spacing-5, 16px);
+      --scb-card-size-horizontal-padding: var(--spacing-5, 16px);
+      --scb-card-size-horizontal-media-min: 88px;
+      --scb-card-size-horizontal-media-max: 156px;
+
+      --scb-card-size-social-gap: var(--spacing-4, 12px);
+      --scb-card-size-social-icon: var(--scale-04, 18px);
+      --scb-card-size-social-icon-font-size: var(--scale-04, 18px);
+      
+      --scb-card-size-list-offset: var(--spacing-6, 20px);
+      --scb-card-size-actions-offset: var(--spacing-6, 20px);
+      --scb-card-size-links-offset: var(--spacing-2, 4px);
+      --scb-card-size-links-item-offset: var(--spacing-2, 4px);
+    }
+
+    :host([size='small']) {
+      --scb-card-size-content-padding-block: var(--spacing-5, 16px);
+      --scb-card-size-content-padding-inline: var(--spacing-4, 12px);
+      --scb-card-size-container-gap: var(--spacing-3, 8px);
+      --scb-card-size-container-gap-with-header: var(--spacing-3, 8px);
+      --scb-card-size-top-gap: var(--spacing-2, 4px);
+
+      --scb-card-size-header-font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-card-size-header-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-card-size-header-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-card-size-sub-label-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-card-size-sub-label-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-card-size-sub-label-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-card-size-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-card-size-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-card-size-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+      --scb-card-size-horizontal-gap: var(--spacing-4, 12px);
+      --scb-card-size-horizontal-padding: var(--spacing-4, 12px);
+      --scb-card-size-horizontal-media-min: 80px;
+      --scb-card-size-horizontal-media-max: 136px;
+
+      --scb-card-size-social-gap: var(--spacing-3, 8px);
+      --scb-card-size-social-icon: var(--scale-03, 16px);
+      --scb-card-size-social-icon-font-size: var(--scale-03, 16px);
+
+      --scb-card-size-list-offset: var(--spacing-5, 16px);
+      --scb-card-size-actions-offset: var(--spacing-5, 16px);
+      --scb-card-size-links-offset: var(--spacing-2, 4px);
+      --scb-card-size-links-item-offset: var(--spacing-2, 4px);
+    }
+    :host:not(:defined){
+      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);
+    }
+    :host([type='list']) {
+      --scb-card-max-w: var(--scb-card-list-max-w, none);
+    }
+    :host([type='social']) {
+      --scb-card-max-w: var(--scb-card-social-max-w, none);
+    }
+    :host([type='link']) {
+      --scb-card-max-w: var(--scb-card-link-max-w, none);
+    }
+    :host([type='action']) {
+      --scb-card-max-w: var(--scb-card-action-max-w, none);
+    }
+    :host([type='container']) {
+      --scb-card-max-w: var(--scb-card-container-max-w, none);
+    }
+
+    :host([height]) .scb-card,
+    :host([max-height]) .scb-card,
+    :host([sizing='stretch']) .scb-card {
+      block-size: 100%;
+    }
+
+    :host([sizing='stretch']) {
+      inline-size: 100%;
+      block-size: 100%;
+      max-inline-size: none;
+    }
+
+    :host([sizing='content-width']) {
+      display: inline-block;
+      inline-size: auto;
+      block-size: auto;
+    }
+    :host([sizing='content-width']) .scb-card {
+      inline-size: max-content;
+    }
+
+    :host([sizing='content-height']) {
+      inline-size: 100%;
+      block-size: auto;
+      max-inline-size: none;
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large, 16px));
+    }
+    .scb-card:focus-visible + 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);
+      display: flex;
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      background: var(--md-sys-color-surface, #FFFFFF);
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
+
+    :host([type='social']) .scb-card {
+      overflow: visible;
+    }
+
+    .scb-card:focus,
+    .scb-card:focus-visible {
+      outline: none;
+    }
+    .scb-card a:focus,
+    .scb-card a:focus-visible {
+      outline: none;
+    }
+
+    .scb-card.outlined {
+      border: 1px solid var(--md-sys-color-outline-variant, #CCCCCC);
+    }
+    .scb-card.filled {
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+    }
+    .scb-card.filled-alternative {
+      background: var(--md-sys-color-surface-container, #EEF3FF);
+    }
+    .scb-card.vertical {
+      flex-direction: column;
+    }
+    .scb-card.dynamic-direction {
+      flex-direction: column;
+    }
+    .scb-card.clickable {
+      cursor: pointer;
+    }
+    .social-metrics a.comments,
+    .social-metrics a.author {
+      color: var(--md-sys-color-primary, #1F44FF);
+      text-decoration: none;
+      border-radius: 4px;
+      cursor: pointer;
+      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);
+    }
+
+    md-ripple {
+      position: absolute;
+      inset: 0;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      pointer-events: none;
+    }
+
+    .media {
+      position: relative;
+      display: inline-flex;
+      flex: 0 0 auto;
+      overflow: hidden;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+    }
+    .media img {
+      display: block;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      height: auto;
+      object-fit: var(--scb-card-media-fit, cover);
+      object-position: var(--scb-card-media-position, center);
+    }
+
+    /* Skeleton-placeholder */
+    .media.has-ph::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(
+          90deg,
+          rgba(0, 0, 0, 0.06) 25%,
+          rgba(0, 0, 0, 0.12) 37%,
+          rgba(0, 0, 0, 0.06) 63%
+        );
+      animation: scb-card-shimmer 1.2s infinite linear;
+    }
+    .media.is-loaded::before {
+      content: none;
+    }
+    @keyframes scb-card-shimmer {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    .full-content {
+      padding-block-start: var(--scb-card-content-padding-block-start, var(--scb-card-size-content-padding-block));
+      padding-block-end: var(--scb-card-content-padding-block-end, var(--scb-card-size-content-padding-block));
+      padding-inline-start: var(--scb-card-content-padding-inline-start, var(--scb-card-size-content-padding-inline));
+      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;
+      gap: var(--scb-card-size-top-gap);
+      min-inline-size: 0;
+    }
+
+    .header {
+      font-size: var(--scb-card-size-header-font-size);
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--scb-card-size-header-line-height);
+      letter-spacing: var(--scb-card-size-header-letter-spacing);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      column-gap: var(--spacing-3, 8px);
+      min-inline-size: 0;
+    }
+
+    .header .title {
+      display: block;
+      flex: 1 1 auto;
+      min-inline-size: 0;
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+    }
+    .header a.title {
+      color: inherit;
+      text-decoration: none;
+    }
+    .header md-icon {
+      flex: 0 0 auto;
+      align-self: start;
+    }
+
+    .sub-label {
+      font-size: var(--scb-card-size-sub-label-font-size);
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--scb-card-size-sub-label-line-height);
+      letter-spacing: var(--scb-card-size-sub-label-letter-spacing);
+    }
+    .supporting-text {
+      font-size: var(--scb-card-size-supporting-font-size);
+      line-height: var(--scb-card-size-supporting-line-height);
+      letter-spacing: var(--scb-card-size-supporting-letter-spacing);
+    }
+    .date {
+      font-size: var(--scb-card-size-date-font-size);
+      line-height: var(--scb-card-size-date-line-height);
+      letter-spacing: var(--scb-card-size-date-letter-spacing);
+    }
+
+    .media ::slotted(scb-avatar) {
+      margin: var(--spacing-7, 24px) 0 0 var(--spacing-6, 20px);
+    }
+
+    .scb-card.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+      column-gap: var(--scb-card-size-horizontal-gap);
+      padding: var(--scb-card-size-horizontal-padding);
+    }
+    .scb-card.horizontal .media {
+      align-self: flex-start;
+      flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
+      min-inline-size: 0;
+      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;
+    }
+    .scb-card.horizontal .full-content {
+      align-self: flex-start;
+      padding: 0;
+      inline-size: auto;
+      min-inline-size: min(18ch, 100%);
+      flex: 1 1 0%;
+    }
+    .scb-card.horizontal .header {
+      align-items: flex-start;
+    }
+    .scb-card.horizontal .header md-icon {
+      align-self: flex-start;
+    }
+
+    .scb-card.horizontal .media img {
+      margin: 0;
+      object-fit: var(--scb-card-media-fit, cover);
+      aspect-ratio: var(--scb-card-horizontal-media-aspect, 3 / 2);
+      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 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
+        min-inline-size: 0;
+        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: min(18ch, 100%);
+        flex: 1 1 0%;
+      }
+      .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, 3 / 2);
+        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;
+    }
+
+    .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: 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);
+    }
+    .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: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);
+	}
+	get likeButton() {
+		return this.type === "social" ? this.renderRoot.querySelector(".likes scb-icon-button") : null;
+	}
+	__calcAspectWH(e) {
+		let t = (e || "").trim();
+		if (!t) return {
+			w: 600,
+			h: 400
+		};
+		let n = t.includes("/") ? t.split("/") : t.includes(":") ? t.split(":") : t.includes("x") ? t.split("x") : null;
+		if (n && n.length === 2) {
+			let e = Number(n[0]), t = Number(n[1]);
+			if (e > 0 && t > 0) return {
+				w: e,
+				h: t
+			};
+		}
+		let r = Number(t);
+		return isFinite(r) && r > 0 ? {
+			w: 1e3,
+			h: Math.round(1e3 / r)
+		} : {
+			w: 600,
+			h: 400
+		};
+	}
+	__noWrapText(e) {
+		return (e ?? "").replace(/ /g, "\xA0").replace(/-/g, "‑");
+	}
+	get #e() {
+		return this.cardTitle || this.title;
+	}
+	__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
+		}));
+	}
+	__dispatchSocialActionEvent(e, t) {
+		this.dispatchEvent(new CustomEvent(`social-${e}`, {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				action: e,
+				originalEvent: t
+			}
+		}));
+	}
+	__dispatchCardNavigate(e, t) {
+		let n = {
+			href: e,
+			originalEvent: t
+		}, r = new CustomEvent("card-navigate", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: n
+		});
+		if (this.dispatchEvent(r), r.defaultPrevented) return !1;
+		let i = new CustomEvent("cardnavigate", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: n
+		});
+		return this.dispatchEvent(i), !i.defaultPrevented;
+	}
+	__effectiveHref() {
+		return this.cardHref || this.href;
+	}
+	__navigate(e, t) {
+		e && this.__dispatchCardNavigate(e, t) && window.open(e, "_self");
+	}
+	__mediaTemplate() {
+		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>
+          </slot>
+        </div>
+      `;
+		if (this.mediaHref || this.mediaSrcset) {
+			let e = Number(this.mediaWidth) || 0, t = Number(this.mediaHeight) || 0, n = (this.mediaAspect || "").trim();
+			if (!e || !t) {
+				let r = this.__calcAspectWH(n || "3/2");
+				e ||= r.w, t ||= r.h;
+			}
+			let i = `aspect-ratio:${n || `${e}/${t}`};`;
+			return r`
+        <div class="media ${this.mediaPlaceholder ? "has-ph" : ""}" style="${i}">
+          <slot name="media-sources"></slot>
+          <img
+            src="${this.mediaHref || ""}"
+            srcset="${this.mediaSrcset || ""}"
+            sizes="${this.mediaSizes || ""}"
+            alt="${this.mediaAlt || ""}"
+            loading="${this.mediaLoading}"
+            decoding="${this.mediaDecoding}"
+            fetchpriority="${this.mediaFetchPriority}"
+            width="${e}"
+            height="${t}"
+            @load=${this.__onImgLoad}
+          />
+        </div>
+      `;
+		}
+		return null;
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#t() {
+		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() {
+		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");
+	}
+	__syncStringAttribute(e, t) {
+		this.__isSyncingManagedSocialAttributes = !0;
+		try {
+			typeof t == "string" && t.trim() !== "" ? this.setAttribute(e, t) : this.removeAttribute(e);
+		} finally {
+			this.__isSyncingManagedSocialAttributes = !1;
+		}
+	}
+	__syncNumberAttribute(e, t) {
+		this.__isSyncingManagedSocialAttributes = !0;
+		try {
+			typeof t == "number" && Number.isFinite(t) ? this.setAttribute(e, String(t)) : this.removeAttribute(e);
+		} finally {
+			this.__isSyncingManagedSocialAttributes = !1;
+		}
+	}
+	__syncBooleanAttribute(e, t) {
+		this.__isSyncingManagedSocialAttributes = !0;
+		try {
+			t ? this.setAttribute(e, "") : this.removeAttribute(e);
+		} finally {
+			this.__isSyncingManagedSocialAttributes = !1;
+		}
+	}
+	__syncSocialAttributes() {
+		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() {
+		let e = this.variant ? `${this.variant.toLowerCase()}` : "", t = (this.direction || "dynamic").toLowerCase(), n = this.type !== "list" && this.type !== "container" && t !== "vertical" && t !== "horizontal" ? "dynamic-direction" : "", a = this.type === "list" || this.type === "container" ? "vertical" : t === "horizontal" ? "horizontal" : "vertical", o = this.__effectiveHref(), s = (this.type === "standard" || this.type === "social") && !!o, c = s ? "clickable" : "", l = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", u = (e = !1) => e ? r`<a class="title" href="${o}" tabindex="-1"
+            >${this.#e}</a
+          ><md-icon>arrow_forward</md-icon>` : r`<span class="title">${this.#e}</span>`, d = () => this.__mediaTemplate(), f = this.vignetteSpacing || i, p = this.vignetteSpacingTop || i, m = this.vignetteSpacingBottom || (this.vignetteSpacing ? i : "5"), h = this.vignetteSpacingLeft || i, g = this.vignetteSpacingRight || i, _ = () => this.vignette && this.vignette.trim() ? r`<scb-vignette
+            class="content-vignette"
+            variant="${this.vignetteVariant}"
+            label="${this.vignette}"
+            spacing=${f}
+            spacing-top=${p}
+            spacing-bottom=${m}
+            spacing-left=${h}
+            spacing-right=${g}
+          ></scb-vignette>` : i, v = (t) => r`
+      <div
+        class="scb-card ${e} ${a} ${n} ${c}"
+        @click=${s ? this.__handleHrefNavigation : null}
+        @keydown=${s ? this.__onKeyDown : null}
+        style="cursor:${s ? "pointer" : "default"};"
+        role=${s ? "link" : i}
+        tabindex=${s ? "0" : i}
+        aria-label=${this.#e || this.subtitle || "Kort"}
+      >
+        ${s ? r`<md-ripple></md-ripple>` : ""}
+        ${d()}
+        ${t}
+      </div>
+      <md-focus-ring></md-focus-ring>
+    `;
+		switch (this.type) {
+			case "standard": return v(r`
+          <div class="full-content">
+            ${_()}
+            <div class="top-content">
+              ${this.#e ? r`<div class="header">${u(!!o)}</div>` : ""}
+              ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${l ? r`<div class="date">${l}</div>` : ""}
+            </div>
+          </div>
+        `);
+			case "list": return v(r`
+          <div class="full-content">
+            ${_()}
+            <div class="top-content">
+              ${this.#e ? r`<div class="header"><span class="title">${this.#e}</span></div>` : ""}
+              ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${l ? r`<div class="date">${l}</div>` : ""}
+            </div>
+            <div class="content list">
+              <slot></slot>
+            </div>
+          </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}: ` : "", s = this.likesText ? `${this.likesText}: ` : "", c = (e) => (t) => {
+					t.stopPropagation(), this.__dispatchSocialActionEvent(e, t);
+				}, d = 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">${s}${this.likes ?? 0}</span>
+              </span>
+            `;
+				return v(r`
+          <div class="full-content">
+            ${_()}
+            <div class="top-content">
+              ${this.#e ? r`<div class="header">${u(!!o)}</div>` : ""}
+              ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${l ? r`<div class="date">${l}</div>` : ""}
+            </div>
+            <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"
+                      >
+                        ${d}
+                      </scb-tooltip>
+                    ` : d}
+                  ${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>
+          </div>
+        `);
+			case "link": return v(r`
+          <div class="full-content">
+            ${_()}
+            <div class="top-content">
+              ${this.#e ? r`<div class="header"><span class="title">${this.#e}</span></div>` : ""}
+              ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${l ? r`<div class="date">${l}</div>` : ""}
+            </div>
+            <div class="content links">
+              <slot></slot>
+            </div>
+          </div>
+        `);
+			case "action": return v(r`
+          <div class="full-content">
+            ${_()}
+            <div class="top-content">
+              ${this.#e ? r`<div class="header"><span class="title">${this.#e}</span></div>` : ""}
+              ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${l ? r`<div class="date">${l}</div>` : ""}
+            </div>
+            <div class="content actions">
+              <slot></slot>
+            </div>
+          </div>
+        `);
+			case "container": return v(r`
+          <div class="container-content ${this.#e || this.subtitle ? "has-header" : ""}">
+            ${_()}
+            ${this.#e || this.subtitle ? r`
+                  <div class="top-content">
+                    ${this.#e ? r`<div class="header"><span class="title">${this.#e}</span></div>` : ""}
+                    ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+                  </div>
+                ` : ""}
+            <slot></slot>
+          </div>
+        `);
+			default: return v(r`
+          <div class="full-content">
+            ${_()}
+            <div class="top-content">
+              ${this.#e ? r`<div class="header">${u(!!o)}</div>` : ""}
+              ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+              ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+              ${l ? r`<div class="date">${l}</div>` : ""}
+            </div>
+          </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.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(), (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();
+	}
+	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();
+	}
+};
+e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "type", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "direction", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "size", void 0), e([o({
+	type: String,
+	attribute: "media-type"
+})], l.prototype, "mediaType", void 0), e([o({
+	type: String,
+	attribute: "media-href"
+})], l.prototype, "mediaHref", void 0), e([o({
+	type: String,
+	attribute: "media-alt"
+})], l.prototype, "mediaAlt", void 0), e([o({
+	type: String,
+	attribute: "media-srcset"
+})], l.prototype, "mediaSrcset", void 0), e([o({
+	type: String,
+	attribute: "media-sizes"
+})], l.prototype, "mediaSizes", void 0), e([o({
+	type: String,
+	attribute: "media-loading"
+})], l.prototype, "mediaLoading", void 0), e([o({
+	type: String,
+	attribute: "media-decoding"
+})], l.prototype, "mediaDecoding", void 0), e([o({
+	type: String,
+	attribute: "media-fetchpriority"
+})], l.prototype, "mediaFetchPriority", void 0), e([o({
+	type: String,
+	attribute: "media-fit"
+})], l.prototype, "mediaFit", void 0), e([o({
+	type: String,
+	attribute: "media-position"
+})], l.prototype, "mediaPosition", void 0), e([o({
+	type: String,
+	attribute: "media-width"
+})], l.prototype, "mediaWidth", void 0), e([o({
+	type: String,
+	attribute: "media-height"
+})], l.prototype, "mediaHeight", void 0), e([o({
+	type: String,
+	attribute: "media-aspect"
+})], l.prototype, "mediaAspect", void 0), e([o({
+	type: Boolean,
+	attribute: "media-placeholder"
+})], l.prototype, "mediaPlaceholder", void 0), e([o({
+	type: String,
+	attribute: "card-href",
+	reflect: !0,
+	converter: c
+})], l.prototype, "cardHref", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "href", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "title", void 0), e([o({
+	type: String,
+	attribute: "card-title",
+	reflect: !0,
+	converter: c
+})], l.prototype, "cardTitle", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "subtitle", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignette", void 0), e([o({
+	type: String,
+	attribute: "vignette-variant",
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignetteVariant", void 0), e([o({
+	type: String,
+	attribute: "vignette-spacing",
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignetteSpacing", void 0), e([o({
+	type: String,
+	attribute: "vignette-spacing-top",
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignetteSpacingTop", void 0), e([o({
+	type: String,
+	attribute: "vignette-spacing-bottom",
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignetteSpacingBottom", void 0), e([o({
+	type: String,
+	attribute: "vignette-spacing-left",
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignetteSpacingLeft", void 0), e([o({
+	type: String,
+	attribute: "vignette-spacing-right",
+	reflect: !0,
+	converter: c
+})], l.prototype, "vignetteSpacingRight", void 0), e([o({
+	type: String,
+	attribute: "supporting-text",
+	reflect: !0,
+	converter: c
+})], l.prototype, "supportingText", void 0), e([o({
+	type: Date,
+	reflect: !0
+})], l.prototype, "date", void 0), e([o({
+	type: String,
+	attribute: "social-comments-text"
+})], l.prototype, "commentsText", void 0), e([o({
+	type: Number,
+	attribute: "social-comments"
+})], l.prototype, "comments", void 0), e([o({
+	type: Boolean,
+	attribute: "social-comments-disabled"
+})], l.prototype, "commentsDisabled", void 0), e([o({
+	type: String,
+	attribute: "social-comments-href"
+})], l.prototype, "commentsHref", void 0), e([o({
+	type: String,
+	attribute: "social-likes-text"
+})], l.prototype, "likesText", void 0), e([o({
+	type: Number,
+	attribute: "social-likes"
+})], l.prototype, "likes", void 0), e([o({
+	type: Boolean,
+	attribute: "social-likes-disabled"
+})], l.prototype, "likesDisabled", void 0), e([o({
+	type: String,
+	attribute: "social-likes-hover-content"
+})], l.prototype, "likesHoverContent", void 0), e([o({
+	type: Boolean,
+	attribute: "social-has-liked"
+})], l.prototype, "hasLiked", void 0), e([o({
+	type: Boolean,
+	attribute: "social-likes-interactive"
+})], l.prototype, "likesInteractive", void 0), e([o({
+	type: Boolean,
+	attribute: "social-author"
+})], l.prototype, "author", void 0), e([o({
+	type: String,
+	attribute: "social-author-text"
+})], l.prototype, "authorText", void 0), e([o({
+	type: String,
+	attribute: "social-author-href"
+})], l.prototype, "authorHref", void 0), e([o({
+	type: Boolean,
+	attribute: "social-reply-enabled"
+})], l.prototype, "replyEnabled", void 0), e([o({
+	type: Boolean,
+	attribute: "social-edit-enabled"
+})], l.prototype, "editEnabled", void 0), e([o({
+	type: Boolean,
+	attribute: "social-delete-enabled"
+})], l.prototype, "deleteEnabled", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "sizing", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "width", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "max-width",
+	converter: c
+})], l.prototype, "maxWidth", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "height", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "max-height",
+	converter: c
+})], l.prototype, "maxHeight", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: c
+})], l.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0,
+	converter: c
+})], l.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0,
+	converter: c
+})], l.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0,
+	converter: c
+})], l.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0,
+	converter: c
+})], l.prototype, "spacingRight", void 0), e([o({
+	type: String,
+	attribute: "padding",
+	reflect: !0,
+	converter: c
+})], l.prototype, "innerPadding", void 0), e([o({
+	type: String,
+	attribute: "padding-top",
+	reflect: !0,
+	converter: c
+})], l.prototype, "paddingTop", void 0), e([o({
+	type: String,
+	attribute: "padding-bottom",
+	reflect: !0,
+	converter: c
+})], l.prototype, "paddingBottom", void 0), e([o({
+	type: String,
+	attribute: "padding-left",
+	reflect: !0,
+	converter: c
+})], l.prototype, "paddingLeft", void 0), e([o({
+	type: String,
+	attribute: "padding-right",
+	reflect: !0,
+	converter: c
+})], l.prototype, "paddingRight", void 0), l = s = e([a("scb-card")], l);
+//#endregion
+export { l as ScbCard };