scb-wc-test 0.1.251 → 0.1.252

package/mvc/components/scb-card/scb-card.js

@@ -1,12 +1,12 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
-import{_ as x}from"../../vendor/preload-helper.js";import{a as _,n as a,i as z,x as o,t as w}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";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";import"../scb-list/scb-list-item.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,c,n){try{customElements.get(r)||t(r,c,n)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var S=Object.defineProperty,T=Object.getOwnPropertyDescriptor,$=e=>{throw TypeError(e)},s=(e,t,r,c)=>{for(var n=c>1?void 0:c?T(t,r):t,l=e.length-1,p;l>=0;l--)(p=e[l])&&(n=(c?p(t,r,n):p(n))||n);return c&&n&&S(t,r,n),n},L=(e,t,r)=>t.has(e)||$("Cannot "+r),F=(e,t,r)=>t.has(e)?$("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),k=(e,t,r)=>(L(e,t,"access private method"),r),v,g;let i=class extends z{constructor(){super(...arguments),F(this,v),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.href="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.comments=0,this.commentsHref="",this.likesText="",this.likes=0,this.likesHoverContent="",this.hasLiked=!1,this.likesInteractive=!1,this.author=!1,this.authorText="",this.authorHref="",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.__onImgLoad=e=>{const t=e.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=e=>{const t=this.__effectiveHref();(e.key==="Enter"||e.key===" ")&&t&&(e.preventDefault(),this.__navigate(t,e))},this.__handleHrefNavigation=e=>{const t=this.__effectiveHref();t&&(e.target.closest("a")||this.__navigate(t,e))}}get likeButton(){return this.type!=="social"?null:this.renderRoot.querySelector(".likes scb-icon-button")}__calcAspectWH(e){const t=(e||"").trim();if(!t)return{w:640,h:360};const r=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):t.includes("x")?t.split("x"):null;if(r&&r.length===2){const n=Number(r[0]),l=Number(r[1]);if(n>0&&l>0)return{w:n,h:l}}const c=Number(t);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:640,h:360}}__noWrapText(e){return(e??"").replace(/ /g," ").replace(/-/g,"‑")}__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}))}__dispatchCardNavigate(e,t){const r={href:e,originalEvent:t},c=new CustomEvent("card-navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:r});if(this.dispatchEvent(c),c.defaultPrevented)return!1;const n=new CustomEvent("cardnavigate",{bubbles:!0,composed:!0,cancelable:!0,detail:r});return this.dispatchEvent(n),!n.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 o`
+import{_ as k}from"../../vendor/preload-helper.js";import{a as T,n as a,i as P,x as n,t as A}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";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";import"../scb-list/scb-list-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,c,o){try{customElements.get(r)||e(r,c,o)}catch(h){var d=String(h||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var L=Object.defineProperty,H=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},s=(t,e,r,c)=>{for(var o=c>1?void 0:c?H(e,r):e,d=t.length-1,h;d>=0;d--)(h=t[d])&&(o=(c?h(e,r,o):h(o))||o);return c&&o&&L(e,r,o),o},C=(t,e,r)=>e.has(t)||S("Cannot "+r),F=(t,e,r)=>e.has(t)?S("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r),y=(t,e,r)=>(C(t,e,"access private method"),r),g,f,$;const l={fromAttribute:t=>t??"",toAttribute:t=>typeof t!="string"||t.trim()===""?null:t};let i=class extends P{constructor(){super(...arguments),F(this,g),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="vertical",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.commentsHref="",this.likesText="",this.likesHoverContent="",this.hasLiked=!1,this.likesInteractive=!1,this.author=!1,this.authorText="",this.authorHref="",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=>{const e=this.__effectiveHref();(t.key==="Enter"||t.key===" ")&&e&&(t.preventDefault(),this.__navigate(e,t))},this.__handleHrefNavigation=t=>{const e=this.__effectiveHref();e&&(t.target.closest("a")||this.__navigate(e,t))}}attributeChangedCallback(t,e,r){this.__isSyncingManagedSocialAttributes&&this.__managedSocialAttributes.has(t)||super.attributeChangedCallback(t,e,r)}get likeButton(){return this.type!=="social"?null:this.renderRoot.querySelector(".likes scb-icon-button")}__calcAspectWH(t){const e=(t||"").trim();if(!e)return{w:640,h:360};const r=e.includes("/")?e.split("/"):e.includes(":")?e.split(":"):e.includes("x")?e.split("x"):null;if(r&&r.length===2){const o=Number(r[0]),d=Number(r[1]);if(o>0&&d>0)return{w:o,h:d}}const c=Number(e);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:640,h:360}}__noWrapText(t){return(t??"").replace(/ /g," ").replace(/-/g,"‑")}__dispatchLikeEvent(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent(t.replace("-",""),{bubbles:!0,composed:!0,detail:e}))}__dispatchCardNavigate(t,e){const r={href:t,originalEvent:e},c=new CustomEvent("card-navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:r});if(this.dispatchEvent(c),c.defaultPrevented)return!1;const o=new CustomEvent("cardnavigate",{bubbles:!0,composed:!0,cancelable:!0,detail:r});return this.dispatchEvent(o),!o.defaultPrevented}__effectiveHref(){return this.cardHref||this.href}__navigate(t,e){t&&this.__dispatchCardNavigate(t,e)&&window.open(t,"_self")}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return n`
         <div class="media">
           <slot name="media">
             <scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
           </slot>
         </div>
-      `;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,r=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!r){const h=this.__calcAspectWH(c||"16/9");t||(t=h.w),r||(r=h.h)}const n=`aspect-ratio:${c||`${t}/${r}`};`,l=this.mediaPlaceholder?"has-ph":"",p=this.mediaFit||"cover",m=this.mediaPosition||"center";return o`
-        <div class="media ${l}" style="${n}">
+      `;if(this.mediaHref||this.mediaSrcset){let e=Number(this.mediaWidth)||0,r=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!e||!r){const h=this.__calcAspectWH(c||"16/9");e||(e=h.w),r||(r=h.h)}const o=`aspect-ratio:${c||`${e}/${r}`};`,d=this.mediaPlaceholder?"has-ph":"";return n`
+        <div class="media ${d}" style="${o}">
           <slot name="media-sources"></slot>
           <img
             src="${this.mediaHref||""}"
@@ -16,17 +16,16 @@ import{_ as x}from"../../vendor/preload-helper.js";import{a as _,n as a,i as z,x
             loading="${this.mediaLoading}"
             decoding="${this.mediaDecoding}"
             fetchpriority="${this.mediaFetchPriority}"
-            style="object-fit:${p};object-position:${m};"
-            width="${t}"
+            width="${e}"
             height="${r}"
             @load=${this.__onImgLoad}
           />
         </div>
-      `}return null}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",r=this.__effectiveHref(),c=r?"clickable":"",n=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(h=!1)=>h?o`<a class="title" href="${r}" tabindex="-1"
+      `}return null}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}__syncStringAttribute(t,e){this.__isSyncingManagedSocialAttributes=!0;try{typeof e=="string"&&e.trim()!==""?this.setAttribute(t,e):this.removeAttribute(t)}finally{this.__isSyncingManagedSocialAttributes=!1}}__syncNumberAttribute(t,e){this.__isSyncingManagedSocialAttributes=!0;try{typeof e=="number"&&Number.isFinite(e)?this.setAttribute(t,String(e)):this.removeAttribute(t)}finally{this.__isSyncingManagedSocialAttributes=!1}}__syncBooleanAttribute(t,e){this.__isSyncingManagedSocialAttributes=!0;try{e?this.setAttribute(t,""):this.removeAttribute(t)}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(){const t=this.variant?`${this.variant.toLowerCase()}`:"",e=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",r=this.__effectiveHref(),c=r?"clickable":"",o=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",d=(u=!1)=>u?n`<a class="title" href="${r}" tabindex="-1"
             >${this.title}</a
-          ><md-icon>arrow_forward</md-icon>`:o`<span class="title">${this.title}</span>`,p=()=>this.__mediaTemplate(),m=h=>o`
+          ><md-icon>arrow_forward</md-icon>`:n`<span class="title">${this.title}</span>`,h=()=>this.__mediaTemplate(),m=u=>n`
       <div
-        class="scb-card ${e} ${t} ${c}"
+        class="scb-card ${t} ${e} ${c}"
         @click=${r?this.__handleHrefNavigation:null}
         @keydown=${r?this.__onKeyDown:null}
         style="cursor:${r?"pointer":"default"};"
@@ -34,122 +33,138 @@ import{_ as x}from"../../vendor/preload-helper.js";import{a as _,n as a,i as z,x
         tabindex=${r?"0":"-1"}
         aria-label=${this.title||"Kort"}
       >
-        ${r?o`<md-ripple></md-ripple>`:""}
-        ${p()}
-        ${h}
+        ${r?n`<md-ripple></md-ripple>`:""}
+        ${h()}
+        ${u}
       </div>
       <md-focus-ring></md-focus-ring>
-    `;switch(this.type){case"standard":return m(o`
+    `;switch(this.type){case"standard":return m(n`
           <div class="full-content">
             <div class="top-content">
-              ${this.title?o`<div class="header">${l(!!r)}</div>`:""}
-              ${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
-              ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
-              ${n?o`<div class="date">${n}</div>`:""}
+              ${this.title?n`<div class="header">${d(!!r)}</div>`:""}
+              ${this.subtitle?n`<div class="sub-label">${this.subtitle}</div>`:""}
+              ${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${o?n`<div class="date">${o}</div>`:""}
             </div>
           </div>
-        `);case"list":return m(o`
+        `);case"list":return m(n`
           <div class="full-content">
             <div class="top-content">
-              ${this.title?o`<div class="header"><span class="title">${this.title}</span></div>`:""}
-              ${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
-              ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
-              ${n?o`<div class="date">${n}</div>`:""}
+              ${this.title?n`<div class="header"><span class="title">${this.title}</span></div>`:""}
+              ${this.subtitle?n`<div class="sub-label">${this.subtitle}</div>`:""}
+              ${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${o?n`<div class="date">${o}</div>`:""}
             </div>
             <div class="content list">
               <slot></slot>
             </div>
           </div>
-        `);case"social":const h=this.commentsHref,f=d=>{d.stopPropagation()},u=d=>{const b=this.renderRoot?.querySelector(".scb-card");b&&(d?b.classList.add("no-hover"):b.classList.remove("no-hover"))},y=o`
-          <span class="likes" title=""
-            @mouseenter=${()=>u(!0)}
-            @mouseleave=${()=>u(!1)}
+        `);case"social":const u=this.commentsHref,x=p=>{p.stopPropagation()},b=p=>{const v=this.renderRoot?.querySelector(".scb-card");v&&(p?v.classList.add("no-hover"):v.classList.remove("no-hover"))},z=this.commentsText?`${this.commentsText}: `:"",w=this.likesText?`${this.likesText}: `:"",_=n`
+          <span
+            class="likes"
+            @mouseenter=${()=>b(!0)}
+            @mouseleave=${()=>b(!1)}
           >
-              <scb-icon-button
-                  id="like-button"
-                  variant="standard"
-                  icon="thumb_up"
-                  ?icon-filled=${this.hasLiked}  // boolean attribute binding
-                  aria-label="${this.likesText||"Gilla"}"
-                  @click=${d=>{d.stopPropagation(),this.hasLiked=!this.hasLiked,this.__dispatchLikeEvent("like-click",{hasLiked:this.hasLiked,likes:this.likes})}}
-                  @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}))}}
-                          @hover=${d=>{d.preventDefault(),d.stopPropagation(),this.__dispatchLikeEvent("like-hover",{hasLiked:this.hasLiked,likes:this.likes})}}
-                ></scb-icon-button>
-                <span class="social-text">${this.likesText?`${this.likesText}: `:""}${this.likes}</span>
+            <scb-icon-button
+              id="like-button"
+              variant="standard"
+              icon="thumb_up"
+              ?icon-filled=${this.hasLiked}
+              aria-label="${this.likesText||"Gilla"}"
+              @click=${p=>{p.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",{hasLiked:this.hasLiked,likes:this.likes??0}))}}
+              @hover=${p=>{p.preventDefault(),p.stopPropagation(),this.__dispatchLikeEvent("like-hover",{hasLiked:this.hasLiked,likes:this.likes??0})}}
+            ></scb-icon-button>
+            <span class="social-text">${w}${this.likes??0}</span>
           </span>
-        `;return m(o`
+        `;return m(n`
           <div class="full-content">
             <div class="top-content">
-              ${this.title?o`<div class="header">${l(!!r)}</div>`:""}
-              ${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
-              ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
-              ${n?o`<div class="date">${n}</div>`:""}
+              ${this.title?n`<div class="header">${d(!!r)}</div>`:""}
+              ${this.subtitle?n`<div class="sub-label">${this.subtitle}</div>`:""}
+              ${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${o?n`<div class="date">${o}</div>`:""}
             </div>
             <div class="content">
               <div class="social-metrics">
-                ${this.author?o`
-                  <a
-                    class="author social-text"
-                    href="${this.authorHref||"#"}"
-                    tabindex="0"
-                    @click=${f}
-                    @mouseenter=${()=>u(!0)}
-                    @mouseleave=${()=>u(!1)}
-                  >${this.authorText}</a>
-                `:""}
-                <span class="comments"
-                  @mouseenter=${()=>u(!0)}
-                  @mouseleave=${()=>u(!1)}
+                ${this.author?n`
+                      <a
+                        class="author social-text"
+                        href="${this.authorHref||"#"}"
+                        tabindex="0"
+                        @click=${x}
+                        @mouseenter=${()=>b(!0)}
+                        @mouseleave=${()=>b(!1)}
+                        >${this.authorText}</a
+                      >
+                    `:""}
+                <span
+                  class="comments"
+                  @mouseenter=${()=>b(!0)}
+                  @mouseleave=${()=>b(!1)}
                 >
-                  ${h!==""?o`
-                    <scb-icon-button href="${h}" tabindex="0" @click=${f} variant="standard" icon="comment" aria-label="Gå till kommentarer"></scb-icon-button>
-                  `:o`
-                    <md-icon>comment</md-icon>
-                  `}
-                  <span class="social-text">${this.commentsText?`${this.commentsText}: `:""}${this.comments}</span>
+                  ${u!==""?n`
+                        <scb-icon-button
+                          href="${u}"
+                          tabindex="0"
+                          @click=${x}
+                          variant="standard"
+                          icon="comment"
+                          aria-label="Gå till kommentarer"
+                        ></scb-icon-button>
+                      `:n`
+                        <md-icon>comment</md-icon>
+                      `}
+                  <span class="social-text">${z}${this.comments??0}</span>
                 </span>
-                ${this.likesHoverContent?o`
-                      <scb-tooltip variant="rich" for="like-button" supporting-text=${this.__noWrapText(this.likesHoverContent)} trigger="hover" position="right">
-                        ${y}
+                ${this.likesHoverContent?n`
+                      <scb-tooltip
+                        variant="rich"
+                        for="like-button"
+                        supporting-text=${this.__noWrapText(this.likesHoverContent)}
+                        trigger="hover"
+                        position="right"
+                      >
+                        ${_}
                       </scb-tooltip>
-                    `:y}
+                    `:_}
               </div>
             </div>
           </div>
-        `);case"link":return m(o`
+        `);case"link":return m(n`
           <div class="full-content">
             <div class="top-content">
-              ${this.title?o`<div class="header"><span class="title">${this.title}</span></div>`:""}
-              ${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
-              ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
-              ${n?o`<div class="date">${n}</div>`:""}
+              ${this.title?n`<div class="header"><span class="title">${this.title}</span></div>`:""}
+              ${this.subtitle?n`<div class="sub-label">${this.subtitle}</div>`:""}
+              ${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${o?n`<div class="date">${o}</div>`:""}
             </div>
             <div class="content links">
               <slot></slot>
             </div>
           </div>
-        `);case"action":return m(o`
+        `);case"action":return m(n`
           <div class="full-content">
             <div class="top-content">
-              ${this.title?o`<div class="header"><span class="title">${this.title}</span></div>`:""}
-              ${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
-              ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
-              ${n?o`<div class="date">${n}</div>`:""}
+              ${this.title?n`<div class="header"><span class="title">${this.title}</span></div>`:""}
+              ${this.subtitle?n`<div class="sub-label">${this.subtitle}</div>`:""}
+              ${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${o?n`<div class="date">${o}</div>`:""}
             </div>
             <div class="content actions">
               <slot></slot>
             </div>
           </div>
-        `);default:return m(o`
+        `);default:return m(n`
           <div class="full-content">
             <div class="top-content">
-              ${this.title?o`<div class="header">${l(!!r)}</div>`:""}
-              ${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
-              ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
-              ${n?o`<div class="date">${n}</div>`:""}
+              ${this.title?n`<div class="header">${d(!!r)}</div>`:""}
+              ${this.subtitle?n`<div class="sub-label">${this.subtitle}</div>`:""}
+              ${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
+              ${o?n`<div class="date">${o}</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.style.setProperty("--scb-card-media-fit",this.mediaFit||"cover"),this.style.setProperty("--scb-card-media-position",this.mediaPosition||"center"),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&k(this,v,g).call(this)}async firstUpdated(e){i.__iconLoaded||(await x(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await x(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),k(this,v,g).call(this)}};v=new WeakSet;g=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,r=this.mapSpacingToken(this.spacingBottom)??e,c=this.mapSpacingToken(this.spacingLeft),n=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),r?this.style.setProperty("--scb-card-spacing-block-end",r):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"),n?this.style.setProperty("--scb-card-spacing-inline-end",n):this.style.removeProperty("--scb-card-spacing-inline-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=_`
+        `)}}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"))&&y(this,g,f).call(this)}async firstUpdated(t){i.__iconLoaded||(await k(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await k(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),y(this,g,f).call(this),y(this,g,$).call(this),this.__syncSocialAttributes()}};g=new WeakSet;f=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,r=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"),r?this.style.setProperty("--scb-card-spacing-block-end",r):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")};$=function(){const t=this.mapSpacingToken(this.innerPadding),e=this.mapSpacingToken(this.paddingTop)??t,r=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"),r?this.style.setProperty("--scb-card-content-padding-block-end",r):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=T`
     :host {
       display: block;
       box-sizing: border-box;
@@ -176,7 +191,6 @@ import{_ as x}from"../../vendor/preload-helper.js";import{a as _,n as a,i as z,x
     .scb-card.no-hover:active {
       /* Ta bort hover/klick-effekter */
       box-shadow: none !important;
-      background: var(--md-sys-color-surface, #FFFFFF) !important;
       cursor: default !important;
     }
     .scb-card.no-hover md-ripple {
@@ -495,4 +509,7 @@ import{_ as x}from"../../vendor/preload-helper.js";import{a as _,n as a,i as z,x
     .scb-card.filled .content.list ::slotted(scb-list) {
       --scb-list-bg: var(--md-sys-color-surface-dim, #F9F8EF);
     }
-  `;s([a({type:String,reflect:!0})],i.prototype,"type",2);s([a({type:String,reflect:!0})],i.prototype,"variant",2);s([a({type:String,reflect:!0})],i.prototype,"direction",2);s([a({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);s([a({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);s([a({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",2);s([a({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",2);s([a({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",2);s([a({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",2);s([a({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",2);s([a({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",2);s([a({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",2);s([a({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",2);s([a({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",2);s([a({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",2);s([a({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",2);s([a({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",2);s([a({type:String,attribute:"card-href",reflect:!0})],i.prototype,"cardHref",2);s([a({type:String,reflect:!0})],i.prototype,"href",2);s([a({type:String,reflect:!0})],i.prototype,"title",2);s([a({type:String,reflect:!0})],i.prototype,"subtitle",2);s([a({type:String,attribute:"supporting-text",reflect:!0})],i.prototype,"supportingText",2);s([a({type:Date,reflect:!0})],i.prototype,"date",2);s([a({type:String,attribute:"social-comments-text",reflect:!0})],i.prototype,"commentsText",2);s([a({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);s([a({type:String,attribute:"social-comments-href",reflect:!0})],i.prototype,"commentsHref",2);s([a({type:String,attribute:"social-likes-text",reflect:!0})],i.prototype,"likesText",2);s([a({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);s([a({type:String,attribute:"social-likes-hover-content",reflect:!0})],i.prototype,"likesHoverContent",2);s([a({type:Boolean,attribute:"social-has-liked",reflect:!0})],i.prototype,"hasLiked",2);s([a({type:Boolean,attribute:"social-likes-interactive",reflect:!0})],i.prototype,"likesInteractive",2);s([a({type:Boolean,attribute:"social-author",reflect:!0})],i.prototype,"author",2);s([a({type:String,attribute:"social-author-text",reflect:!0})],i.prototype,"authorText",2);s([a({type:String,attribute:"social-author-href",reflect:!0})],i.prototype,"authorHref",2);s([a({type:String,reflect:!0})],i.prototype,"sizing",2);s([a({type:String,reflect:!0})],i.prototype,"width",2);s([a({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",2);s([a({type:String,reflect:!0})],i.prototype,"height",2);s([a({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",2);s([a({type:String,reflect:!0})],i.prototype,"spacing",2);s([a({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);s([a({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);s([a({type:String,attribute:"spacing-left",reflect:!0})],i.prototype,"spacingLeft",2);s([a({type:String,attribute:"spacing-right",reflect:!0})],i.prototype,"spacingRight",2);i=s([w("scb-card")],i);
+    .scb-card.filled-alternative .content.list ::slotted(scb-list) {
+      --scb-list-bg: var(--md-sys-color-surface-container, #EEF3FF);
+    }
+  `;s([a({type:String,reflect:!0,converter:l})],i.prototype,"type",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"variant",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"direction",2);s([a({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);s([a({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);s([a({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",2);s([a({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",2);s([a({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",2);s([a({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",2);s([a({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",2);s([a({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",2);s([a({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",2);s([a({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",2);s([a({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",2);s([a({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",2);s([a({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",2);s([a({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",2);s([a({type:String,attribute:"card-href",reflect:!0,converter:l})],i.prototype,"cardHref",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"href",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"title",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"subtitle",2);s([a({type:String,attribute:"supporting-text",reflect:!0,converter:l})],i.prototype,"supportingText",2);s([a({type:Date,reflect:!0})],i.prototype,"date",2);s([a({type:String,attribute:"social-comments-text"})],i.prototype,"commentsText",2);s([a({type:Number,attribute:"social-comments"})],i.prototype,"comments",2);s([a({type:String,attribute:"social-comments-href"})],i.prototype,"commentsHref",2);s([a({type:String,attribute:"social-likes-text"})],i.prototype,"likesText",2);s([a({type:Number,attribute:"social-likes"})],i.prototype,"likes",2);s([a({type:String,attribute:"social-likes-hover-content"})],i.prototype,"likesHoverContent",2);s([a({type:Boolean,attribute:"social-has-liked"})],i.prototype,"hasLiked",2);s([a({type:Boolean,attribute:"social-likes-interactive"})],i.prototype,"likesInteractive",2);s([a({type:Boolean,attribute:"social-author"})],i.prototype,"author",2);s([a({type:String,attribute:"social-author-text"})],i.prototype,"authorText",2);s([a({type:String,attribute:"social-author-href"})],i.prototype,"authorHref",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"sizing",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"width",2);s([a({type:String,reflect:!0,attribute:"max-width",converter:l})],i.prototype,"maxWidth",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"height",2);s([a({type:String,reflect:!0,attribute:"max-height",converter:l})],i.prototype,"maxHeight",2);s([a({type:String,reflect:!0,converter:l})],i.prototype,"spacing",2);s([a({type:String,attribute:"spacing-top",reflect:!0,converter:l})],i.prototype,"spacingTop",2);s([a({type:String,attribute:"spacing-bottom",reflect:!0,converter:l})],i.prototype,"spacingBottom",2);s([a({type:String,attribute:"spacing-left",reflect:!0,converter:l})],i.prototype,"spacingLeft",2);s([a({type:String,attribute:"spacing-right",reflect:!0,converter:l})],i.prototype,"spacingRight",2);s([a({type:String,attribute:"padding",reflect:!0,converter:l})],i.prototype,"innerPadding",2);s([a({type:String,attribute:"padding-top",reflect:!0,converter:l})],i.prototype,"paddingTop",2);s([a({type:String,attribute:"padding-bottom",reflect:!0,converter:l})],i.prototype,"paddingBottom",2);s([a({type:String,attribute:"padding-left",reflect:!0,converter:l})],i.prototype,"paddingLeft",2);s([a({type:String,attribute:"padding-right",reflect:!0,converter:l})],i.prototype,"paddingRight",2);i=s([A("scb-card")],i);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.251",
+    "version":  "0.1.252",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -382,5 +382,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "60FCB2565A90E9D37AB3ECA3F041272FCECB22D12C127E04C05F368889EC7C01"
+    "buildHash":  "774E4929624B3773932ACD2BD0EF236CF3B9267C139476981E8168CB24AA7B46"
 }

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

@@ -3,6 +3,8 @@ export declare class ScbCard extends LitElement {
     #private;
     private static __iconLoaded;
     private static __rippleLoaded;
+    private readonly __managedSocialAttributes;
+    private __isSyncingManagedSocialAttributes;
     type: string;
     variant: string;
     direction: string;
@@ -27,10 +29,10 @@ export declare class ScbCard extends LitElement {
     supportingText: string;
     date?: Date;
     commentsText: string;
-    comments: number;
+    comments?: number;
     commentsHref: string;
     likesText: string;
-    likes: number;
+    likes?: number;
     likesHoverContent: string;
     hasLiked: boolean;
     likesInteractive: boolean;
@@ -47,7 +49,13 @@ export declare class ScbCard extends LitElement {
     spacingBottom: undefined;
     spacingLeft: undefined;
     spacingRight: undefined;
+    innerPadding: undefined;
+    paddingTop: undefined;
+    paddingBottom: undefined;
+    paddingLeft: undefined;
+    paddingRight: undefined;
     static styles: import('lit').CSSResult;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     /**
      * Returnerar like-knappen (scb-icon-button) om kortet är av typen 'social'.
      */
@@ -61,6 +69,10 @@ export declare class ScbCard extends LitElement {
     private __navigate;
     private __mediaTemplate;
     private mapSpacingToken;
+    private __syncStringAttribute;
+    private __syncNumberAttribute;
+    private __syncBooleanAttribute;
+    private __syncSocialAttributes;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changed: PropertyValues): void;
     protected firstUpdated(_changed: PropertyValues): Promise<void>;