scb-wc-test 0.1.11 → 0.1.12

package/mvc/components/scb-accordion/scb-accordion-item.js

@@ -1,5 +1,5 @@
 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 h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(r,i,s){try{customElements.get(r)||a(r,i,s)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(t,a,r,i)=>{for(var s=i>1?void 0:i?b(a,r):a,d=t.length-1,c;d>=0;d--)(c=t[d])&&(s=(i?c(a,r,s):c(s))||s);return i&&s&&m(a,r,s),s};let e=class extends u{constructor(){super(...arguments),this.expanded=!1,this.label="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="https://www.scb.se/img/scb-logo.svg",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=e._uid(),this.toggleAccordion=()=>{const t=this.closest("scb-accordion");t?.hasAttribute("detached")||t.querySelectorAll("scb-accordion-item").forEach(r=>{r!==this&&(r.expanded=!1,r._applyInert(),r._setBottomMaxHeight(r))}),this.expanded=!this.expanded,this._applyInert(),this._setBottomMaxHeight(this)},this._onSlotChange=()=>{this.expanded&&this._setBottomMaxHeight(this)},this._onContentLoad=()=>{this.expanded&&this._setBottomMaxHeight(this)}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${e._uidPrefix}-${++e._uidSeq}`}async firstUpdated(){e._mdIconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e._mdIconLoaded=!0),e._mdRippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e._mdRippleLoaded=!0),this._applyInert(),this._bottomEl()?.addEventListener("load",this._onContentLoad,!0)}disconnectedCallback(){this._bottomEl()?.removeEventListener("load",this._onContentLoad,!0),super.disconnectedCallback()}_setBottomMaxHeight(t){const a=t._bottomEl();a&&(t.expanded?(a.style.maxHeight=`${a.scrollHeight}px`,setTimeout(()=>a.style.maxHeight="unset",160)):(a.style.maxHeight=`${a.scrollHeight}px`,requestAnimationFrame(()=>a.style.maxHeight="0")))}_onKeyDown(t){const a=this.closest("scb-accordion"),i=Array.from(a?.querySelectorAll("scb-accordion-item")||[]).map(c=>c.renderRoot.querySelector(".scb-accordion-top")).filter(c=>!!c),s=t.currentTarget,d=i.indexOf(s);switch(t.key){case"Enter":case" ":t.preventDefault(),this.toggleAccordion();break;case"ArrowDown":t.preventDefault(),d<i.length-1&&i[d+1].focus();break;case"ArrowUp":t.preventDefault(),d>0&&i[d-1].focus();break;case"Home":t.preventDefault(),i.length&&i[0].focus();break;case"End":t.preventDefault(),i.length&&i[i.length-1].focus();break}}_renderLeading(){if(!this.leading)return p;switch(this.leadingVariant){case"icon":return l`<md-icon>${this.leadingIcon}</md-icon>`;case"avatar":return l`
+import{_ as h}from"../../vendor/preload-helper.js";import{a as g,n,i as u,E as p,x as l,t as v}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(o,i,s){try{customElements.get(o)||a(o,i,s)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(t,a,o,i)=>{for(var s=i>1?void 0:i?b(a,o):a,d=t.length-1,c;d>=0;d--)(c=t[d])&&(s=(i?c(a,o,s):c(s))||s);return i&&s&&m(a,o,s),s};let e=class extends u{constructor(){super(...arguments),this.expanded=!1,this.label="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=e._uid(),this.toggleAccordion=()=>{const t=this.closest("scb-accordion");t?.hasAttribute("detached")||t.querySelectorAll("scb-accordion-item").forEach(o=>{o!==this&&(o.expanded=!1,o._applyInert(),o._setBottomMaxHeight(o))}),this.expanded=!this.expanded,this._applyInert(),this._setBottomMaxHeight(this)},this._onSlotChange=()=>{this.expanded&&this._setBottomMaxHeight(this)},this._onContentLoad=()=>{this.expanded&&this._setBottomMaxHeight(this)}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${e._uidPrefix}-${++e._uidSeq}`}async firstUpdated(){e._mdIconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e._mdIconLoaded=!0),e._mdRippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e._mdRippleLoaded=!0),this._applyInert(),this._bottomEl()?.addEventListener("load",this._onContentLoad,!0)}disconnectedCallback(){this._bottomEl()?.removeEventListener("load",this._onContentLoad,!0),super.disconnectedCallback()}_setBottomMaxHeight(t){const a=t._bottomEl();a&&(t.expanded?(a.style.maxHeight=`${a.scrollHeight}px`,setTimeout(()=>a.style.maxHeight="unset",160)):(a.style.maxHeight=`${a.scrollHeight}px`,requestAnimationFrame(()=>a.style.maxHeight="0")))}_onKeyDown(t){const a=this.closest("scb-accordion"),i=Array.from(a?.querySelectorAll("scb-accordion-item")||[]).map(c=>c.renderRoot.querySelector(".scb-accordion-top")).filter(c=>!!c),s=t.currentTarget,d=i.indexOf(s);switch(t.key){case"Enter":case" ":t.preventDefault(),this.toggleAccordion();break;case"ArrowDown":t.preventDefault(),d<i.length-1&&i[d+1].focus();break;case"ArrowUp":t.preventDefault(),d>0&&i[d-1].focus();break;case"Home":t.preventDefault(),i.length&&i[0].focus();break;case"End":t.preventDefault(),i.length&&i[i.length-1].focus();break}}_renderLeading(){if(!this.leading)return p;switch(this.leadingVariant){case"icon":return l`<md-icon>${this.leadingIcon}</md-icon>`;case"avatar":return l`
           <scb-avatar
             label=${this.avatarLabel}
             alt=${this.avatarAlt}
@@ -8,7 +8,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p
             shape="circular"
             variant=${this.avatarVariant}
           ></scb-avatar>
-        `;case"image":return l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`;default:return p}}_bottomEl(){return this.renderRoot.querySelector(".scb-accordion-bottom")}_applyInert(){const t=this._bottomEl();t&&(this.expanded?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}updated(t){t.has("expanded")&&(this._applyInert(),this._setBottomMaxHeight(this))}render(){const t=`bottom-${this._unique}`,a=`header-${this._unique}`,r=!!this.overline,i=!!this.supportingText;return l`
+        `;case"image":return this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:p;default:return p}}_bottomEl(){return this.renderRoot.querySelector(".scb-accordion-bottom")}_applyInert(){const t=this._bottomEl();t&&(this.expanded?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}updated(t){t.has("expanded")&&(this._applyInert(),this._setBottomMaxHeight(this))}render(){const t=`bottom-${this._unique}`,a=`header-${this._unique}`;return l`
       <div part="scb-accordion-item" class="scb-accordion-item">
         <div
           id=${a}
@@ -20,20 +20,17 @@ import{_ as h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p
           @click=${this.toggleAccordion}
           @keydown=${this._onKeyDown}
         >
-          <!-- Ripple för press/hover/focus state-layer -->
           <md-ripple></md-ripple>
 
           ${this.leading?l`<div class="leading">${this._renderLeading()}</div>`:p}
 
           <div class="texts">
-            ${r?l`<div class="overline">${this.overline}</div>`:p}
+            ${this.overline?l`<div class="overline">${this.overline}</div>`:p}
             <div class="label">${this.label}</div>
-            ${i?l`<div class="supporting-text">${this.supportingText}</div>`:p}
+            ${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:p}
           </div>
 
-          <md-icon class="chevron">
-            ${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}
-          </md-icon>
+          <md-icon class="chevron">${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}</md-icon>
         </div>
 
         <div
@@ -73,32 +70,23 @@ import{_ as h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p
         flex-direction: row;
         align-items: center;
         cursor: pointer;
-        /* default density 0: 24px över/under, 16px i sidled */
         padding-block: var(--spacing-7, 24px);
         padding-inline: var(--spacing-5, 16px);
         outline: none;
-        /* för att undvika rundade hörn på hover */
         border-radius: var(--radius-none, 0px);
         gap: var(--spacing-5, 16px);
         color: var(--md-sys-color-on-surface);
-        /* För ripple */
         position: relative;
         overflow: hidden;
         -webkit-tap-highlight-color: transparent;
       }
-      .scb-accordion-top:hover {
-        /* Inga runda hörn på hover */
-        border-radius: var(--scb-accordion-hover-radius);
-      }
-      
+      .scb-accordion-top:hover { border-radius: var(--scb-accordion-hover-radius); }
       .scb-accordion-top:focus-visible {
         outline: var(--_focus-width) solid var(--md-focus-ring-color, var(--p-40));
         outline-offset: var(--spacing-1, 2px);
-        /* Tillåt runda hörn endast vid fokusmarkering  */
         border-radius: var(--_focus-radius);
       }
 
-      /* Om både om hosten har data-density och om en förälder har det. */
       :host([density="-2"]) .scb-accordion-top,
       :host-context([data-density="-2"]) .scb-accordion-top {
         padding-block: var(--spacing-5, 16px);
@@ -125,7 +113,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p
         max-height: 100%;
       }
 
-      .label { 
+      .label {
         font-family: var(--brand-font);
         font-size: var(--md-sys-typescale-title-large-size);
         line-height: var(--md-sys-typescale-title-large-line-height);
@@ -133,9 +121,9 @@ import{_ as h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p
         letter-spacing: var(--md-sys-typescale-title-large-tracking);
         color: var(--md-sys-color-on-surface);
       }
-      .overline { 
+      .overline {
         font-family: var(--brand-font);
-        font-size: var(--md-sys-typescale-label-medium-size); 
+        font-size: var(--md-sys-typescale-label-medium-size);
         line-height: var(--md-sys-typescale-label-medium-line-height);
         font-weight: var(--weight-regular);
         letter-spacing: var(--md-sys-typescale-label-medium-tracking);
@@ -143,52 +131,24 @@ import{_ as h}from"../../vendor/preload-helper.js";import{b as g,n,i as u,E as p
       }
       .supporting-text {
         font-family: var(--brand-font);
-        font-size: var(--md-sys-typescale-body-medium-size);  
+        font-size: var(--md-sys-typescale-body-medium-size);
         line-height: var(--md-sys-typescale-body-medium-line-height);
         font-weight: var(--weight-regular);
         letter-spacing: var(--md-sys-typescale-body-medium-tracking);
         color: var(--md-sys-color-on-surface-variant);
       }
 
-      .leading { 
-        align-self: center; 
-        display: grid; 
-        place-items: center; 
+      .leading { align-self: center; display: grid; place-items: center; }
+      .img {
+        width: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px));
+        height: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px));
+        object-fit: contain;
+        border-radius: var(--radius-s, 8px);
       }
 
-      .avatar { 
-        width: var(--icon-size-small, 24px); 
-        height: var(--icon-size-small, 24px); 
-        display: flex; 
-        object-fit: contain;    
-      }
-      .img { 
-        width: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px)); 
-        height: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px)); 
-        object-fit: contain;      
-        border-radius: var(--radius-s, 8px); 
-      }
-
-      .texts { 
-        display: grid; 
-        gap: var(--spacing-1, 2px); 
-      }
+      .texts { display: grid; gap: var(--spacing-1, 2px); }
+      .chevron { margin-left: auto; padding-top: var(--scb-accordion-chevron-nudge-y, 3px); font-size: var(--icon-size-small, 24px); }
 
-      /* chevron till höger */
-      .chevron { 
-        margin-left: auto; 
-        padding-top: var(--scb-accordion-chevron-nudge-y, 3px); 
-        font-size: var(--icon-size-small, 24px);
-      }
-
-      /* Ripple ska fylla den klickbara ytan och ärver ev. rundning vid fokus */
-      md-ripple {
-        border-radius: inherit;
-        inset: 0;
-        position: absolute;
-        pointer-events: none;
-      }
-      @media (prefers-reduced-motion: reduce) {
-        md-ripple { display: none; } /* endast fokusring visas */
-      }
-    `];o([n({type:Boolean})],e.prototype,"expanded",2);o([n({type:String,reflect:!0})],e.prototype,"label",2);o([n({type:String})],e.prototype,"content",2);o([n({type:String,attribute:"overline"})],e.prototype,"overline",2);o([n({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);o([n({type:Boolean})],e.prototype,"leading",2);o([n({type:String,attribute:"leading-variant",reflect:!0})],e.prototype,"leadingVariant",2);o([n({type:String,attribute:"leading-icon"})],e.prototype,"leadingIcon",2);o([n({type:String,attribute:"img-href-image",reflect:!0})],e.prototype,"imgHrefImage",2);o([n({type:String,attribute:"avatar-label"})],e.prototype,"avatarLabel",2);o([n({type:String,attribute:"avatar-alt"})],e.prototype,"avatarAlt",2);o([n({type:String,attribute:"avatar-variant"})],e.prototype,"avatarVariant",2);o([n({type:String,attribute:"avatar-src"})],e.prototype,"avatarSrc",2);o([n({type:Number,reflect:!0})],e.prototype,"density",2);e=o([v("scb-accordion-item")],e);
+      md-ripple { border-radius: inherit; inset: 0; position: absolute; pointer-events: none; }
+      @media (prefers-reduced-motion: reduce) { md-ripple { display: none; } }
+    `];r([n({type:Boolean})],e.prototype,"expanded",2);r([n({type:String,reflect:!0})],e.prototype,"label",2);r([n({type:String})],e.prototype,"content",2);r([n({type:String,attribute:"overline"})],e.prototype,"overline",2);r([n({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);r([n({type:Boolean})],e.prototype,"leading",2);r([n({type:String,attribute:"leading-variant",reflect:!0})],e.prototype,"leadingVariant",2);r([n({type:String,attribute:"leading-icon"})],e.prototype,"leadingIcon",2);r([n({type:String,attribute:"img-href-image",reflect:!0})],e.prototype,"imgHrefImage",2);r([n({type:String,attribute:"avatar-label"})],e.prototype,"avatarLabel",2);r([n({type:String,attribute:"avatar-alt"})],e.prototype,"avatarAlt",2);r([n({type:String,attribute:"avatar-variant"})],e.prototype,"avatarVariant",2);r([n({type:String,attribute:"avatar-src"})],e.prototype,"avatarSrc",2);r([n({type:Number,reflect:!0})],e.prototype,"density",2);e=r([v("scb-accordion-item")],e);

package/mvc/components/scb-app-bar/scb-app-bar.js

@@ -1,4 +1,4 @@
-import{b as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";import"../../vendor/vendor-material.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(t,l,e){try{customElements.get(t)||a(t,l,e)}catch(s){var o=String(s||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw s}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(n,a,t,l)=>{for(var e=l>1?void 0:l?f(a,t):a,o=n.length-1,s;o>=0;o--)(s=n[o])&&(e=(l?s(a,t,e):s(e))||e);return l&&e&&g(a,t,e),e};let i=class extends c{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}render(){switch(this.type){case"small-flexible":return r`
+import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(t,o,e){try{customElements.get(t)||a(t,o,e)}catch(s){var l=String(s||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw s}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(n,a,t,o)=>{for(var e=o>1?void 0:o?f(a,t):a,l=n.length-1,s;l>=0;l--)(s=n[l])&&(e=(o?s(a,t,e):s(e))||e);return o&&e&&g(a,t,e),e};let i=class extends c{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}render(){switch(this.type){case"small-flexible":return r`
                     <header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
                         <div class="leading">
                             <slot name="leading"></slot>

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

@@ -1,5 +1,5 @@
 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 m}from"../../vendor/preload-helper.js";import{b as _,n as l,r as p,i as u,E as d,x as n,t as g}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(r,s,o){try{customElements.get(r)||i(r,s,o)}catch(h){var c=String(h||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(t,i,r,s)=>{for(var o=s>1?void 0:s?f(i,r):i,c=t.length-1,h;c>=0;c--)(h=t[c])&&(o=(s?h(i,r,o):h(o))||o);return s&&o&&v(i,r,o),o};let e=class extends u{constructor(){super(...arguments),this.src="",this.alt="",this.label="",this.size="medium",this.shape="circular",this.iconName="",this.variant="image",this._imgError=!1,this._hasIconSlot=!1,this._onImgLoad=()=>{this._imgError=!1,this.dispatchEvent(new CustomEvent("image-load",{bubbles:!0,composed:!0}))},this._onImgError=()=>{this._imgError=!0,this.dispatchEvent(new CustomEvent("image-error",{bubbles:!0,composed:!0}))},this._onIconSlotChange=t=>{const i=t.currentTarget;this._hasIconSlot=(i.assignedNodes({flatten:!0})||[]).length>0}}async firstUpdated(){this.variant==="icon"&&await m(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url)}_initials(){const t=(this.label||this.alt||"").trim();if(!t)return"?";const i=t.split(/\s+/).filter(Boolean);if(i.length===1)return i[0].slice(0,1).toUpperCase();const r=i[0].slice(0,1),s=i[i.length-1].slice(0,1);return(r+s).toUpperCase()}_ariaLabel(){const t=(this.label||this.alt||"").trim();return t||null}render(){const t=this._ariaLabel(),i=this.variant==="image"&&!!this.src&&!this._imgError,r=n`${d}
+import{_ as m}from"../../vendor/preload-helper.js";import{a as _,n as l,r as p,i as u,E as d,x as n,t as g}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(r,s,o){try{customElements.get(r)||i(r,s,o)}catch(h){var c=String(h||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(t,i,r,s)=>{for(var o=s>1?void 0:s?f(i,r):i,c=t.length-1,h;c>=0;c--)(h=t[c])&&(o=(s?h(i,r,o):h(o))||o);return s&&o&&v(i,r,o),o};let e=class extends u{constructor(){super(...arguments),this.src="",this.alt="",this.label="",this.size="medium",this.shape="circular",this.iconName="",this.variant="image",this._imgError=!1,this._hasIconSlot=!1,this._onImgLoad=()=>{this._imgError=!1,this.dispatchEvent(new CustomEvent("image-load",{bubbles:!0,composed:!0}))},this._onImgError=()=>{this._imgError=!0,this.dispatchEvent(new CustomEvent("image-error",{bubbles:!0,composed:!0}))},this._onIconSlotChange=t=>{const i=t.currentTarget;this._hasIconSlot=(i.assignedNodes({flatten:!0})||[]).length>0}}async firstUpdated(){this.variant==="icon"&&await m(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url)}_initials(){const t=(this.label||this.alt||"").trim();if(!t)return"?";const i=t.split(/\s+/).filter(Boolean);if(i.length===1)return i[0].slice(0,1).toUpperCase();const r=i[0].slice(0,1),s=i[i.length-1].slice(0,1);return(r+s).toUpperCase()}_ariaLabel(){const t=(this.label||this.alt||"").trim();return t||null}render(){const t=this._ariaLabel(),i=this.variant==="image"&&!!this.src&&!this._imgError,r=n`${d}
         <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
         ${this._hasIconSlot?d:this.iconName?n`<md-icon aria-hidden="true">${this.iconName}</md-icon>`:n`<div class="fallback" part="fallback">${this._initials()}</div>`}
       `,s=i?n`<img class="photo" part="image" src=${this.src} alt=${this.alt}

package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js

@@ -1,4 +1,4 @@
-import{n as l,t as b,i as p,b as d,x as u}from"../../vendor/vendor.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,s,e){try{customElements.get(r)||t(r,s,e)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var f=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(i,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,a=i.length-1,n;a>=0;a--)(n=i[a])&&(e=(s?n(t,r,e):n(e))||e);return s&&e&&f(t,r,e),e};let c=class extends p{constructor(){super(...arguments),this.label="",this.isCurrent=!1,this.href=""}static get styles(){return d`
+import{n as l,t as b,i as p,a as d,x as u}from"../../vendor/vendor.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,s,e){try{customElements.get(r)||t(r,s,e)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var f=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(i,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,a=i.length-1,n;a>=0;a--)(n=i[a])&&(e=(s?n(t,r,e):n(e))||e);return s&&e&&f(t,r,e),e};let c=class extends p{constructor(){super(...arguments),this.label="",this.isCurrent=!1,this.href=""}static get styles(){return d`
     .breadcrumb-separator {
       margin: 0 8px;
       color: var(--md-sys-color-on-surface);

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

@@ -1,4 +1,4 @@
-import{n as d,t as m,i as b,b as p,x as o}from"../../vendor/vendor.js";import"./scb-breadcrumb-item.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,t,a){try{customElements.get(s)||r(s,t,a)}catch(i){var l=String(i||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,c=(e,r,s,t)=>{for(var a=t>1?void 0:t?h(r,s):r,l=e.length-1,i;l>=0;l--)(i=e[l])&&(a=(t?i(r,s,a):i(a))||a);return t&&a&&u(r,s,a),a};let n=class extends b{constructor(){super(...arguments),this.showAll=!1}static get styles(){return p`
+import{n as d,t as m,i as b,a as p,x as o}from"../../vendor/vendor.js";import"./scb-breadcrumb-item.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,t,a){try{customElements.get(s)||r(s,t,a)}catch(i){var l=String(i||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,c=(e,r,s,t)=>{for(var a=t>1?void 0:t?h(r,s):r,l=e.length-1,i;l>=0;l--)(i=e[l])&&(a=(t?i(r,s,a):i(a))||a);return t&&a&&u(r,s,a),a};let n=class extends b{constructor(){super(...arguments),this.showAll=!1}static get styles(){return p`
       .scb-breadcrumb {
         display: flex;
         align-items: center;

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

@@ -1,5 +1,5 @@
 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 h}from"../../vendor/preload-helper.js";import{i as b,b as m,x as u,E as e,n as c,t as f}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(i,n,a){try{customElements.get(i)||r(i,n,a)}catch(d){var o=String(d||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,s=(t,r,i,n)=>{for(var a=n>1?void 0:n?_(r,i):r,o=t.length-1,d;o>=0;o--)(d=t[o])&&(a=(n?d(r,i,a):d(a))||a);return n&&a&&p(r,i,a),a};let l=class extends b{constructor(){super(...arguments),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.href="",this.target="",this.rel="",this.__loadedButtons=new Set,this.__iconLoaded=!1}async __ensureDepsLoaded(){if(!this.__loadedButtons.has(this.variant)){switch(this.variant){case"filled":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.g),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.h),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.j),__vite__mapDeps([0,1]),import.meta.url);break;case"text":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.t),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedButtons.add(this.variant)}this.icon&&!this.__iconLoaded&&(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getInnerButton(){return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button")}__syncAriaToInner(){const t=this.__getInnerButton();if(!t)return;const r=this.getAttribute("aria-controls");r&&t.setAttribute("aria-controls",r);const i=this.getAttribute("aria-expanded");i!==null&&(t.setAttribute("aria-expanded",i),this.removeAttribute("aria-expanded")),this.__ariaObserver?.disconnect(),this.__ariaObserver=new MutationObserver(n=>{const a=this.__getInnerButton();if(a){for(const o of n)if(!(o.type!=="attributes"||!o.attributeName)&&(o.attributeName==="aria-controls"||o.attributeName==="aria-expanded")){const d=this.getAttribute(o.attributeName);d===null?a.removeAttribute(o.attributeName):a.setAttribute(o.attributeName,d),o.attributeName==="aria-expanded"&&this.removeAttribute("aria-expanded")}}}),this.__ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-controls","aria-expanded"]})}firstUpdated(){(this.type==="submit"||this.type==="reset")&&this.addEventListener("click",()=>{if(!this.disabled){const t=this.closest("form");t&&(this.type==="submit"&&t.requestSubmit(),this.type==="reset"&&t.reset())}}),this.__ensureDepsLoaded(),this.__syncAriaToInner()}updated(t){(t.has("variant")||t.has("icon")&&this.icon)&&this.__ensureDepsLoaded(),t.has("variant")&&this.__syncAriaToInner()}disconnectedCallback(){this.__ariaObserver?.disconnect(),super.disconnectedCallback()}static get styles(){return m`
+import{_ as h}from"../../vendor/preload-helper.js";import{i as b,a as m,x as u,E as e,n as c,t as f}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(i,n,a){try{customElements.get(i)||r(i,n,a)}catch(d){var o=String(d||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,s=(t,r,i,n)=>{for(var a=n>1?void 0:n?_(r,i):r,o=t.length-1,d;o>=0;o--)(d=t[o])&&(a=(n?d(r,i,a):d(a))||a);return n&&a&&p(r,i,a),a};let l=class extends b{constructor(){super(...arguments),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.href="",this.target="",this.rel="",this.__loadedButtons=new Set,this.__iconLoaded=!1}async __ensureDepsLoaded(){if(!this.__loadedButtons.has(this.variant)){switch(this.variant){case"filled":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break;case"text":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.t),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedButtons.add(this.variant)}this.icon&&!this.__iconLoaded&&(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getInnerButton(){return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button")}__syncAriaToInner(){const t=this.__getInnerButton();if(!t)return;const r=this.getAttribute("aria-controls");r&&t.setAttribute("aria-controls",r);const i=this.getAttribute("aria-expanded");i!==null&&(t.setAttribute("aria-expanded",i),this.removeAttribute("aria-expanded")),this.__ariaObserver?.disconnect(),this.__ariaObserver=new MutationObserver(n=>{const a=this.__getInnerButton();if(a){for(const o of n)if(!(o.type!=="attributes"||!o.attributeName)&&(o.attributeName==="aria-controls"||o.attributeName==="aria-expanded")){const d=this.getAttribute(o.attributeName);d===null?a.removeAttribute(o.attributeName):a.setAttribute(o.attributeName,d),o.attributeName==="aria-expanded"&&this.removeAttribute("aria-expanded")}}}),this.__ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-controls","aria-expanded"]})}firstUpdated(){(this.type==="submit"||this.type==="reset")&&this.addEventListener("click",()=>{if(!this.disabled){const t=this.closest("form");t&&(this.type==="submit"&&t.requestSubmit(),this.type==="reset"&&t.reset())}}),this.__ensureDepsLoaded(),this.__syncAriaToInner()}updated(t){(t.has("variant")||t.has("icon")&&this.icon)&&this.__ensureDepsLoaded(),t.has("variant")&&this.__syncAriaToInner()}disconnectedCallback(){this.__ariaObserver?.disconnect(),super.disconnectedCallback()}static get styles(){return m`
       /* Gör hosten stretchbar i t.ex. flex/grid */
       :host {
         display: inline-flex;

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

@@ -1,7 +1,7 @@
 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 c}from"../../vendor/preload-helper.js";import{b as h,n as d,i as g,x as p,t as u}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(a,r,i){try{customElements.get(a)||s(a,r,i)}catch(l){var o=String(l||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(t,s,a,r)=>{for(var i=r>1?void 0:r?v(s,a):s,o=t.length-1,l;o>=0;o--)(l=t[o])&&(i=(r?l(s,a,i):l(i))||i);return r&&i&&f(s,a,i),i};let e=class extends g{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.header="",this.subtitle="",this.supportingText="",this.cardHref="",this.showMedia=null}async firstUpdated(){e.__iconLoaded||(await c(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await c(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const t=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",a=this.cardHref?"clickable":"",r=new Date().getDate(),i=new Date().toLocaleString("default",{month:"short"}).replace(".","");return p`
+import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x as c,t as g}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(s,l,i){try{customElements.get(s)||o(s,l,i)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(t,o,s,l)=>{for(var i=l>1?void 0:l?v(o,s):o,n=t.length-1,d;n>=0;n--)(d=t[n])&&(i=(l?d(o,s,i):d(i))||i);return l&&i&&u(o,s,i),i};let e=class extends f{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.header="",this.subtitle="",this.supportingText="",this.cardHref="",this.showMedia=null,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}async firstUpdated(){e.__iconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const t=this.variant?`${this.variant.toLowerCase()}`:"",o=this.direction?`${this.direction.toLowerCase()}`:"",s=this.cardHref?"clickable":"",l=new Date().getDate(),i=new Date().toLocaleString("default",{month:"short"}).replace(".","");return c`
     <div
-      class="calendar-card ${s} ${a} ${t}"
+      class="calendar-card ${o} ${s} ${t}"
       role="${this.cardHref?"link":"group"}"
       aria-label="${this.header||"Kalenderkort"}"
       tabindex="${this.cardHref?"0":"-1"}"
@@ -9,132 +9,171 @@ import{_ as c}from"../../vendor/preload-helper.js";import{b as h,n as d,i as g,x
       @keydown="${this.cardHref?this._onKeyDown:null}"
       style="cursor: ${this.cardHref?"pointer":"default"};"
     >
-      ${this.cardHref?p`<md-ripple></md-ripple>`:""}
-      ${this.showMedia?p`
-        <div class="media" aria-label="Datum: ${r} ${i}">
-          <div class="day">${r}</div>
+      ${this.cardHref?c`<md-ripple></md-ripple>`:""}
+      ${this.showMedia?c`
+        <div class="media" aria-label="Datum: ${l} ${i}">
+          <div class="day">${l}</div>
           <div class="month">${i}</div>
         </div>`:""}
       <div class="container">
         <div class="header-container">
           <div class="header">${this.header}</div>
-          ${this.cardHref?p`<md-icon>arrow_forward</md-icon>`:""}
+          ${this.cardHref?c`<md-icon>arrow_forward</md-icon>`:""}
         </div>
-        ${this.subtitle?p`<div class="subtitle">${this.subtitle}</div>`:""}
-        ${this.supportingText?p`<div class="supporting-text">${this.supportingText}</div>`:""}
+        ${this.subtitle?c`<div class="subtitle">${this.subtitle}</div>`:""}
+        ${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
       </div>
     </div>
   `}_onKeyDown(t){(t.key==="Enter"||t.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),t.preventDefault())}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=h`
-  /* Grundläggande stilar för kortet */
-    :host {     
-        .calendar-card {
-            position: relative;
-            display: flex;
-            color: var(--md-sys-color-on-surface, #0F0865);
-            font-family: var(--brand, Inter);
-            font-style: normal;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: var(--spacing-spacing-3, 8px);
-            align-self: stretch;
-            cursor: pointer;
-
-            &.vertical {
-                max-width: 360px;
-            }
-
-            &.horizontal {
-                flex-direction: row;
-                max-width: 576px;
-                gap: var(--spacing-spacing-6, 20px);
-            }
-
-            &.outlined {
-                border-radius: var(--radius-large, 16px);
-                border: 1px solid var(--md-sys-color-outline-variant, #CCC);
-                background: var(--md-sys-color-surface, #FFF);
-                padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
-            }
-
-            &.filled {
-                border-radius: var(--radius-large, 16px);
-                background: var(--md-sys-color-surface-dim, #F9F8EF);
-                padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
-                .media {
-                    background: var(--md-sys-color-surface, #FFF);
-                }
-            }           
-        }
-    }
-
-    /* Media-del */
-    .media {
-        display: flex;
-        width: var(--spacing-spacing-11, 64px);
-        min-width: var(--spacing-spacing-11, 64px);
-        max-width: var(--spacing-spacing-11, 64px);
-        height: var(--spacing-spacing-11, 64px);
-        padding: var(--spacing-spacing-0, 0) 0;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--spacing-spacing-2, 4px);
-        border-radius: var(--radius-small, 8px);
-        background: var(--md-sys-color-surface-dim, #F9F8EF);
-
-        .day {
-            font-size: var(--scale-07, 28px);
-            font-weight: var(--weight-bold, 700);
-            line-height: 100%;
-            letter-spacing: -0.6px;
-        }
-
-        .month {
-            font-size: var(--scale-02, 14px);
-            font-weight: var(--weight-regular, 400);
-            line-height: 100%; 
-        }
-    }
-
-     md-ripple {
-        border-radius: var(--radius-l, 16px);
-    }
-
-    /* Textstilar */
-    .header-container {
-        width: 100%;
-        flex: 0 0 auto;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding-top: var(--spacing-pacing-1, 2px);
-        color:inherit;
-        text-decoration: none;
-    }
-
-    .header {
-        font-size: var(--md-sys-typescale-headline-small-size, 24px);
-        font-weight: var(--weight-bold, 700);
-        line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
-        letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
-        flex: 1 1 0;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .subtitle {
-        font-size: var(--md-sys-typescale-title-medium-size, 18px);
-        font-weight: var(--weight-semibold, 600);
-        line-height: var(--md-sys-typescale-title-medium-line-height, 26px); 
-        letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
-    }
-    
-    .supporting-text {
-        font-size: var(--md-sys-typescale-body-large-size, 18px);
-        font-weight: var(--weight-regular, 400);
-        line-height: var(--md-sys-typescale-body-large-line-height, 26px); 
-        letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
-    }
-  `;n([d({type:String,reflect:!0})],e.prototype,"variant",2);n([d({type:String,reflect:!0})],e.prototype,"direction",2);n([d({type:String})],e.prototype,"header",2);n([d({type:String})],e.prototype,"subtitle",2);n([d({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);n([d({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);n([d({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);e=n([u("scb-calendar-card")],e);
+  :host { display:block; }
+
+  :host([stretch]) { block-size: 100%; }
+  :host([stretch]) .calendar-card { block-size: 100%; }
+
+  :host([full-height]) { block-size: 100%; }
+  :host([full-height]) .calendar-card { block-size: 100%; }
+
+  :host([full-width]) { max-width: none; width: 100%; }
+  :host([full-width]) .calendar-card.horizontal,
+  :host([full-width]) .calendar-card.vertical {
+    max-width: none;
+    width: 100%;
+  }
+
+  .calendar-card {
+    box-sizing: border-box;
+    overflow: hidden;
+
+    position: relative;
+    display: flex;
+    color: var(--md-sys-color-on-surface, #0F0865);
+    font-family: var(--brand, Inter);
+    font-style: normal;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-spacing-3, 8px);
+    align-self: stretch;
+    cursor: pointer;
+    transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
+  }
+
+  .calendar-card.vertical {
+    max-width: var(--scb-calendar-card-max-w, 360px);
+  }
+
+  .calendar-card.horizontal {
+    flex-direction: row;
+    max-width: none;
+    width: 100%;
+    gap: var(--spacing-spacing-6, 20px);
+    min-block-size: 112px;
+  }
+
+  .calendar-card.outlined {
+    border-radius: var(--radius-large, 16px);
+    border: 1px solid var(--md-sys-color-outline-variant, #CCC);
+    background: var(--md-sys-color-surface, #FFF);
+    padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
+  }
+
+  .calendar-card.filled {
+    border-radius: var(--radius-large, 16px);
+    background: var(--md-sys-color-surface-dim, #F9F8EF);
+    padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
+  }
+
+  .calendar-card.filled .media {
+    background: var(--md-sys-color-surface, #FFF);
+  }
+
+  md-ripple { border-radius: var(--radius-l, 16px); }
+
+  .media {
+    display: flex;
+    width: var(--spacing-spacing-11, 64px);
+    min-width: var(--spacing-spacing-11, 64px);
+    max-width: var(--spacing-spacing-11, 64px);
+    height: var(--spacing-spacing-11, 64px);
+    padding: var(--spacing-spacing-0, 0) 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-spacing-2, 4px);
+    border-radius: var(--radius-small, 8px);
+    background: var(--md-sys-color-surface-dim, #F9F8EF);
+  }
+  .calendar-card.horizontal .media { align-self: center; }
+
+  .media .day {
+    font-size: var(--scale-07, 28px);
+    font-weight: var(--weight-bold, 700);
+    line-height: 100%;
+    letter-spacing: -0.6px;
+  }
+
+  .media .month {
+    font-size: var(--scale-02, 14px);
+    font-weight: var(--weight-regular, 400);
+    line-height: 100%;
+  }
+
+  .container {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-spacing-2, 4px);
+    width: 100%;
+  }
+
+  .header-container {
+    width: 100%;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-top: var(--spacing-pacing-1, 2px);
+    color:inherit;
+    text-decoration: none;
+    min-block-size: 32px;
+  }
+
+  .header {
+    font-size: var(--md-sys-typescale-headline-small-size, 24px);
+    font-weight: var(--weight-bold, 700);
+    line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
+    letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .header-container md-icon {
+    inline-size: 20px;
+    block-size: 20px;
+    flex: 0 0 auto;
+  }
+
+  .subtitle {
+    font-size: var(--md-sys-typescale-title-medium-size, 18px);
+    font-weight: var(--weight-semibold, 600);
+    line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+    letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .supporting-text {
+    font-size: var(--md-sys-typescale-body-large-size, 18px);
+    font-weight: var(--weight-regular, 400);
+    line-height: var(--md-sys-typescale-body-large-line-height, 26px);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  `;a([r({type:String,reflect:!0})],e.prototype,"variant",2);a([r({type:String,reflect:!0})],e.prototype,"direction",2);a([r({type:String})],e.prototype,"header",2);a([r({type:String})],e.prototype,"subtitle",2);a([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);a([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);a([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);a([r({type:Boolean,reflect:!0,attribute:"full-height"})],e.prototype,"fullHeight",2);a([r({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",2);a([r({type:Boolean,reflect:!0})],e.prototype,"stretch",2);e=a([g("scb-calendar-card")],e);