scb-wc-test 0.1.29 → 0.1.31

package/mvc/components/scb-calendar-card/scb-calendar-card.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{a as p,n as r,i as m,x as c,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(n,o,a){try{customElements.get(n)||s(n,o,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var f=Object.defineProperty,u=Object.getOwnPropertyDescriptor,t=(i,s,n,o)=>{for(var a=o>1?void 0:o?u(s,n):s,l=i.length-1,d;l>=0;l--)(d=i[l])&&(a=(o?d(s,n,a):d(a))||a);return o&&a&&f(s,n,a),a};let e=class extends m{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.title="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.width="",this.maxWidth="",this.minWidth="",this.height="",this.maxHeight="",this.minHeight="",this.sizing="stretch"}async firstUpdated(){e.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(i=>i.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(i=>i.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0),this.__applyInnerSizing()}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",n=this.cardHref?"clickable":"",o=1,a="Jan";return c`
+import{_ as p}from"../../vendor/preload-helper.js";import{a as g,n as r,i as f,x as h,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(n,o,a){try{customElements.get(n)||s(n,o,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,t=(i,s,n,o)=>{for(var a=o>1?void 0:o?v(s,n):s,l=i.length-1,d;l>=0;l--)(d=i[l])&&(a=(o?d(s,n,a):d(a))||a);return o&&a&&u(s,n,a),a};let e=class extends f{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.title="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.width="",this.maxWidth="",this.minWidth="",this.height="",this.maxHeight="",this.minHeight="",this.sizing="stretch"}async firstUpdated(){e.__iconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(i=>i.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(i=>i.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0),this.__applyInnerSizing()}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",n=this.cardHref?"clickable":"",o=1,a="Jan",l=this.mediaWidth&&this.mediaWidth.trim()!==""?this.mediaWidth:"",d=this.mediaHeight&&this.mediaHeight.trim()!==""?this.mediaHeight:"",c=this.mediaAspect&&this.mediaAspect.trim()!==""?this.mediaAspect:"",m=`${l?`inline-size:${l};`:""}${d?`block-size:${d};`:""}${c?`aspect-ratio:${c};`:""}`;return h`
       <div
         class="calendar-card ${s} ${n} ${i}"
         role="${this.cardHref?"link":"group"}"
@@ -9,9 +9,9 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as m,x
         @keydown=${this.cardHref?this._onKeyDown:null}
         style="cursor: ${this.cardHref?"pointer":"default"};"
       >
-        ${this.cardHref?c`<md-ripple></md-ripple>`:""}
-        ${this.showMedia?c`
-              <div class="media" aria-label="Datum: ${o} ${a}">
+        ${this.cardHref?h`<md-ripple></md-ripple>`:""}
+        ${this.showMedia?h`
+              <div class="media" style="${m}" aria-label="Datum: ${o} ${a}">
                 <div class="day">${o}</div>
                 <div class="month">${a}</div>
               </div>
@@ -19,14 +19,14 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as m,x
         <div class="container">
           <div class="header-container">
             <div class="header">${this.title}</div>
-            ${this.cardHref?c`<md-icon>arrow_forward</md-icon>`:""}
+            ${this.cardHref?h`<md-icon>arrow_forward</md-icon>`:""}
           </div>
-          ${this.subtitle?c`<div class="subtitle">${this.subtitle}</div>`:""}
-          ${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
+          ${this.subtitle?h`<div class="subtitle">${this.subtitle}</div>`:""}
+          ${this.supportingText?h`<div class="supporting-text">${this.supportingText}</div>`:""}
         </div>
       </div>
       <md-focus-ring></md-focus-ring>
-    `}__applyInnerSizing(){const i=this.renderRoot.querySelector(".calendar-card");if(!i)return;this.width&&this.width.trim()!==""?(i.style.inlineSize="100%",i.style.maxInlineSize="100%"):(i.style.removeProperty("inline-size"),i.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?i.style.blockSize="100%":i.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?i.style.maxBlockSize="100%":i.style.removeProperty("max-block-size")}_onKeyDown(i){(i.key==="Enter"||i.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),i.preventDefault())}_handleHrefNavigation(){this.cardHref&&(this.cardHrefNav==="tab"?window.open(this.cardHref,"_blank"):this.cardHrefNav==="window"?window.open(this.cardHref,"_blank","noopener,noreferrer,width=800,height=600"):window.open(this.cardHref,"_self"))}updated(i){i.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),i.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),i.has("minWidth")&&(this.minWidth?this.style.minInlineSize=this.minWidth:this.style.removeProperty("min-inline-size")),i.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),i.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),i.has("minHeight")&&(this.minHeight?this.style.minBlockSize=this.minHeight:this.style.removeProperty("min-block-size")),(i.has("width")||i.has("height")||i.has("maxHeight")||i.has("sizing"))&&this.__applyInnerSizing()}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=p`
+    `}__applyInnerSizing(){const i=this.renderRoot.querySelector(".calendar-card");if(!i)return;this.width&&this.width.trim()!==""?(i.style.inlineSize="100%",i.style.maxInlineSize="100%"):(i.style.removeProperty("inline-size"),i.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?i.style.blockSize="100%":i.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?i.style.maxBlockSize="100%":i.style.removeProperty("max-block-size")}_onKeyDown(i){(i.key==="Enter"||i.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),i.preventDefault())}_handleHrefNavigation(){this.cardHref&&(this.cardHrefNav==="tab"?window.open(this.cardHref,"_blank"):this.cardHrefNav==="window"?window.open(this.cardHref,"_blank","noopener,noreferrer,width=800,height=600"):window.open(this.cardHref,"_self"))}updated(i){i.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),i.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),i.has("minWidth")&&(this.minWidth?this.style.minInlineSize=this.minWidth:this.style.removeProperty("min-inline-size")),i.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),i.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),i.has("minHeight")&&(this.minHeight?this.style.minBlockSize=this.minHeight:this.style.removeProperty("min-block-size")),(i.has("width")||i.has("height")||i.has("maxHeight")||i.has("sizing"))&&this.__applyInnerSizing()}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=g`
     :host {
       display: block;
       position: relative;
@@ -121,6 +121,8 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as m,x
 
     .media {
       display: flex;
+      /* Bredd/höjd sätts i första hand av inline-style från mediaWidth/mediaHeight.
+         Dessa fungerar som fallbackvärden. */
       width: var(--spacing-spacing-11, 64px);
       min-width: var(--spacing-spacing-11, 64px);
       max-width: var(--spacing-spacing-11, 64px);
@@ -225,4 +227,4 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as m,x
       text-overflow: clip;
       font-variant-numeric: tabular-nums;
     }
-  `;t([r({type:String,reflect:!0})],e.prototype,"variant",2);t([r({type:String,reflect:!0})],e.prototype,"direction",2);t([r({type:String})],e.prototype,"title",2);t([r({type:String})],e.prototype,"subtitle",2);t([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);t([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);t([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);t([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);t([r({type:String})],e.prototype,"width",2);t([r({type:String,attribute:"max-width"})],e.prototype,"maxWidth",2);t([r({type:String,attribute:"min-width"})],e.prototype,"minWidth",2);t([r({type:String})],e.prototype,"height",2);t([r({type:String,attribute:"max-height"})],e.prototype,"maxHeight",2);t([r({type:String,attribute:"min-height"})],e.prototype,"minHeight",2);t([r({type:String,reflect:!0})],e.prototype,"sizing",2);e=t([g("scb-calendar-card")],e);
+  `;t([r({type:String,reflect:!0})],e.prototype,"variant",2);t([r({type:String,reflect:!0})],e.prototype,"direction",2);t([r({type:String})],e.prototype,"title",2);t([r({type:String})],e.prototype,"subtitle",2);t([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);t([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);t([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);t([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);t([r({type:String,attribute:"media-width"})],e.prototype,"mediaWidth",2);t([r({type:String,attribute:"media-height"})],e.prototype,"mediaHeight",2);t([r({type:String,attribute:"media-aspect"})],e.prototype,"mediaAspect",2);t([r({type:String})],e.prototype,"width",2);t([r({type:String,attribute:"max-width"})],e.prototype,"maxWidth",2);t([r({type:String,attribute:"min-width"})],e.prototype,"minWidth",2);t([r({type:String})],e.prototype,"height",2);t([r({type:String,attribute:"max-height"})],e.prototype,"maxHeight",2);t([r({type:String,attribute:"min-height"})],e.prototype,"minHeight",2);t([r({type:String,reflect:!0})],e.prototype,"sizing",2);e=t([y("scb-calendar-card")],e);

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

@@ -1,4 +1,4 @@
-import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../scb-grid/scb-grid.js";import"../scb-grid/scb-grid-item.js";import"./scb-footer-section.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 t=customElements.define.bind(customElements);customElements.define=function(i,a,r){try{customElements.get(i)||t(i,a,r)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var T=Object.defineProperty,z=Object.getOwnPropertyDescriptor,O=e=>{throw TypeError(e)},b=(e,t,i,a)=>{for(var r=a>1?void 0:a?z(t,i):t,n=e.length-1,o;n>=0;n--)(o=e[n])&&(r=(a?o(t,i,r):o(r))||r);return a&&r&&T(t,i,r),r},w=(e,t,i)=>t.has(e)||O("Cannot "+i),c=(e,t,i)=>(w(e,t,"read from private field"),i?i.call(e):t.get(e)),h=(e,t,i)=>t.has(e)?O("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),d=(e,t,i,a)=>(w(e,t,"write to private field"),t.set(e,i),i),l=(e,t,i)=>(w(e,t,"access private method"),i),m,f,g,u,s,N,C,E,_,k,M,W,S;let p=class extends A{constructor(){super(...arguments),h(this,s),this.maxWidth="1440px",this.deferPaint=!1,this.sections=[],this.description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.",h(this,m,null),h(this,f,""),h(this,g),h(this,u,!1),h(this,k,8)}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-footer-max-width",this.maxWidth),l(this,s,_).call(this,!0),l(this,s,N).call(this)}updated(e){e.has("maxWidth")&&this.style.setProperty("--scb-footer-max-width",this.maxWidth)}disconnectedCallback(){super.disconnectedCallback(),c(this,g)?.disconnect()}render(){const e=c(this,s,E);return v`
+import{a as A,n as x,i as B,x as v,t as H}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../scb-grid/scb-grid.js";import"../scb-grid/scb-grid-item.js";import"./scb-footer-section.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 t=customElements.define.bind(customElements);customElements.define=function(i,a,r){try{customElements.get(i)||t(i,a,r)}catch(c){var n=String(c||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var T=Object.defineProperty,z=Object.getOwnPropertyDescriptor,O=e=>{throw TypeError(e)},b=(e,t,i,a)=>{for(var r=a>1?void 0:a?z(t,i):t,n=e.length-1,c;n>=0;n--)(c=e[n])&&(r=(a?c(t,i,r):c(r))||r);return a&&r&&T(t,i,r),r},C=(e,t,i)=>t.has(e)||O("Cannot "+i),l=(e,t,i)=>(C(e,t,"read from private field"),i?i.call(e):t.get(e)),h=(e,t,i)=>t.has(e)?O("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),d=(e,t,i,a)=>(C(e,t,"write to private field"),t.set(e,i),i),o=(e,t,i)=>(C(e,t,"access private method"),i),f,m,g,u,s,N,w,E,_,k,M,W,S;let p=class extends B{constructor(){super(...arguments),h(this,s),this.maxWidth="1440px",this.deferPaint=!1,this.sections=[],this.description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.",h(this,f,null),h(this,m,""),h(this,g),h(this,u,!1),h(this,k,8)}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-footer-max-width",this.maxWidth),o(this,s,_).call(this,!0),o(this,s,N).call(this)}updated(e){e.has("maxWidth")&&this.style.setProperty("--scb-footer-max-width",this.maxWidth)}disconnectedCallback(){super.disconnectedCallback(),l(this,g)?.disconnect()}render(){const e=l(this,s,E);return v`
       <footer class="outer" role="contentinfo">
         <nav aria-label="Sidfot med länkar">
           <scb-grid
@@ -8,7 +8,7 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
             padding-block="0"
             .maxWidth=${this.maxWidth}
           >
-            ${l(this,s,M).call(this,e)}
+            ${o(this,s,M).call(this,e)}
           </scb-grid>
         </nav>
 
@@ -27,23 +27,23 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
           </div>
         </div>
       </footer>
-    `}};m=new WeakMap;f=new WeakMap;g=new WeakMap;u=new WeakMap;s=new WeakSet;N=function(){c(this,g)?.disconnect(),d(this,g,new MutationObserver(e=>{for(const t of e){if(t.type==="childList"){const i=[...t.addedNodes].some(r=>r.tagName==="SCB-FOOTER-SECTION"||r.tagName==="SCB-LINK"),a=[...t.removedNodes].some(r=>r.tagName==="SCB-FOOTER-SECTION"||r.tagName==="SCB-LINK");if(i||a){l(this,s,C).call(this);return}}if(t.type==="attributes"&&(t.target.tagName==="SCB-FOOTER-SECTION"||t.target.tagName==="SCB-LINK")){l(this,s,C).call(this);return}}})),c(this,g).observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["title","href","target"]})};C=function(){c(this,u)||(d(this,u,!0),queueMicrotask(()=>{d(this,u,!1),l(this,s,_).call(this,!1)}))};E=function(){return c(this,m)??this.sections??[]};_=function(e=!1){const t=Array.from(this.querySelectorAll("scb-footer-section"));if(!t.length){c(this,m)!==null&&(d(this,m,null),d(this,f,""),e||this.requestUpdate());return}const i=t.map(r=>{const n=(r.getAttribute("title")||"").trim(),o=Array.from(r.querySelectorAll("scb-link")).map(y=>{const B=(y.getAttribute("href")||"").trim(),$=y.getAttribute("target"),V={label:(y.textContent||"").trim(),href:B};return $&&(V.target=$),V});return{title:n,links:o}}),a=JSON.stringify(i);a!==c(this,f)&&(d(this,f,a),d(this,m,i),e||this.requestUpdate())};k=new WeakMap;M=function(e){const t=[],a=e.length;if(a>0&&a<4)return t.push(v`
+    `}};f=new WeakMap;m=new WeakMap;g=new WeakMap;u=new WeakMap;s=new WeakSet;N=function(){l(this,g)?.disconnect(),d(this,g,new MutationObserver(e=>{for(const t of e){if(t.type==="childList"){const i=[...t.addedNodes].some(r=>r.tagName==="SCB-FOOTER-SECTION"||r.tagName==="SCB-LINK"),a=[...t.removedNodes].some(r=>r.tagName==="SCB-FOOTER-SECTION"||r.tagName==="SCB-LINK");if(i||a){o(this,s,w).call(this);return}}if(t.type==="attributes"&&(t.target.tagName==="SCB-FOOTER-SECTION"||t.target.tagName==="SCB-LINK")){o(this,s,w).call(this);return}}})),l(this,g).observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["title","href","target"]})};w=function(){l(this,u)||(d(this,u,!0),queueMicrotask(()=>{d(this,u,!1),o(this,s,_).call(this,!1)}))};E=function(){return l(this,f)??this.sections??[]};_=function(e=!1){const t=Array.from(this.querySelectorAll("scb-footer-section"));if(!t.length){l(this,f)!==null&&(d(this,f,null),d(this,m,""),e||this.requestUpdate());return}const i=t.map(r=>{const n=(r.getAttribute("title")||"").trim(),c=Array.from(r.querySelectorAll("scb-link")).map(y=>{const P=(y.getAttribute("href")||"").trim(),$=y.getAttribute("target"),V={label:(y.textContent||"").trim(),href:P};return $&&(V.target=$),V});return{title:n,links:c}}),a=JSON.stringify(i);a!==l(this,m)&&(d(this,m,a),d(this,f,i),e||this.requestUpdate())};k=new WeakMap;M=function(e){const t=[],a=e.length;if(a>0&&a<4)return t.push(v`
         <scb-grid-item
           col-span-compact="4"
           col-span-medium="8"
-          col-span-expanded="${c(this,k)}"
+          col-span-expanded="${l(this,k)}"
         >
           <div class="center-row">
-            ${e.map((r,n)=>l(this,s,S).call(this,r,n,!0))}
+            ${e.map((r,n)=>o(this,s,S).call(this,r,n,!0))}
           </div>
         </scb-grid-item>
-      `),t;for(let r=0;r<a;r++)t.push(l(this,s,W).call(this,e[r],r));return t};W=function(e,t){return v`
+      `),t;for(let r=0;r<a;r++)t.push(o(this,s,W).call(this,e[r],r));return t};W=function(e,t){return v`
       <scb-grid-item
         col-span-compact="4"
         col-span-medium="4"
         col-span-expanded="2"
       >
-        ${l(this,s,S).call(this,e,t,!1)}
+        ${o(this,s,S).call(this,e,t,!1)}
       </scb-grid-item>
     `};S=function(e,t,i){return v`
       <section class="group ${i?"group--centered":""}" aria-labelledby=${`scb-footer-sec-${t}`}>
@@ -56,14 +56,16 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
           `)}
         </ul>
       </section>
-    `};p.styles=P`
+    `};p.styles=A`
     :host {
       display: block;
       color: var(--p-100);
       background: var(--scb-footer-bg, var(--p-20));
+      /* Token för loggans bredd och proportion i footer */
+      --scb-footer-logo-w: 48px;
+      --scb-footer-logo-aspect: 48 / 54;
     }
 
-    /* Yttre behållare */
     .outer {
       display: flex;
       flex-direction: column;
@@ -73,8 +75,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       align-self: stretch;
     }
 
-    /* Skjut upp målning och layout tills foten närmar sig viewport.
-       contain-intrinsic-size förhindrar layout-shift innan målning sker. */
     :host([defer-paint]) .outer {
       content-visibility: auto;
       contain-intrinsic-size: var(--scb-footer-cis, 560px);
@@ -82,7 +82,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
 
     nav { width: 100%; }
 
-    /* Grid */
     scb-grid {
       --scb-grid-padding-inline: var(--spacing-8, 32px);
       --scb-grid-row-gap: var(--spacing-9, 40px);
@@ -90,7 +89,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       --scb-grid-gap: var(--spacing-9, 40px) var(--spacing-9, 40px);
       --scb-grid-max-width: var(--scb-footer-max-width, 1440px);
     }
-    /* ↑ lite mer luft mellan rader när sektioner staplas */
     @media (max-width: 839.98px) {
       scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
     }
@@ -98,7 +96,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
     }
 
-    /* Kolumn (grupp) */
     .group {
       display: flex;
       flex-direction: column;
@@ -108,7 +105,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       align-self: stretch;
     }
 
-    /* Grupp i centrerad rad: innehållsbredd i desktop för visuell centrering */
     @media (min-width: 840px) {
       .group--centered {
         flex: 0 1 auto;
@@ -117,7 +113,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       }
     }
 
-    /* Radbehållare för centrerat läge (desktop) */
     @media (min-width: 840px) {
       .center-row {
         display: flex;
@@ -128,7 +123,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       }
     }
 
-    /* Extra topmarginal för grupper som hamnar på senare/undre rader i compact/medium */
     @media (max-width: 599px) {
       scb-grid-item:nth-child(n+2) .group { margin-top: var(--spacing-7, 24px); }
     }
@@ -136,7 +130,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       scb-grid-item:nth-child(n+3) .group { margin-top: var(--spacing-7, 24px); }
     }
 
-    /* Rubrik (Title/Medium) */
     .title {
       margin: 0;
       color: var(--p-100);
@@ -148,7 +141,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       align-self: stretch;
     }
 
-    /* Länklista */
     ul {
       list-style: none;
       margin: 0;
@@ -158,7 +150,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       gap: var(--spacing-5, 16px);
     }
 
-    /* Länkar i fot */
     scb-link {
       --scb-link-color: var(--p-100);
       --scb-link-visited-color: var(--p-100);
@@ -171,7 +162,6 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
     }
 
-    /* Brand-block */
     .brand {
       display: flex;
       flex-direction: column;
@@ -189,9 +179,15 @@ import{a as P,n as x,i as A,x as v,t as H}from"../../vendor/vendor.js";import"..
       gap: var(--spacing-5, 16px);
       margin-inline: auto;
     }
-    .logo { width: 48px; height: 54px; display: block; }
 
-    /* Slogan/beskrivning: max 312 (mobil), 376 (≥600px). Bryter alltid tjusigt. */
+    /* tokeniserad storlek samt låst proportion för loggan */
+    .logo {
+      display: block;
+      inline-size: var(--scb-footer-logo-w);
+      block-size: calc(var(--scb-footer-logo-w) * (54 / 48));
+      aspect-ratio: var(--scb-footer-logo-aspect);
+    }
+
     .desc {
       margin: 0;
       text-align: center;

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

@@ -152,7 +152,13 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i
     .logo-group { display:inline-flex; align-items:center; gap:var(--spacing-5,16px); text-decoration:none; color:inherit; flex-shrink:0; min-width:0; }
     .logo-group:focus,
     .logo-group:focus-visible { outline: none; }
-    .logo-group svg { width:var(--scb-header-logo-w); height:var(--scb-header-logo-h); display:block; color:var(--md-sys-color-on-surface); }
+    .logo-group svg {
+      width:var(--scb-header-logo-w);
+      height:var(--scb-header-logo-h);
+      display:block;
+      color:var(--md-sys-color-on-surface);
+      aspect-ratio: 48 / 54;
+    }
 
     .logo-text{
       font-family: var(--brand-font, Inter), sans-serif;

package/mvc/scb-wc-test.css

@@ -1 +1,3 @@
-@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);:root{color-scheme:light dark;--p-100:#FFFFFF;--p-99:#FAFDFF;--p-95:#EBF8FF;--p-90:#D6F1FF;--p-80:#B8E7FF;--p-70:#99D1FF;--p-60:#75AFFF;--p-50:#477EFF;--p-40:#1F44FF;--p-30:#1E00BE;--p-20:#0F0865;--p-10:#0B0544;--p-0:#000000;--s-100:#FFFFFF;--s-99:#FFFAFF;--s-95:#FFEBFF;--s-90:#FFDBFF;--s-80:#FFC2FF;--s-70:#FA9EFA;--s-60:#EC75F0;--s-50:#D850E2;--s-40:#B633C1;--s-30:#91219C;--s-20:#6A1471;--s-10:#430449;--s-0:#000000;--t-100:#FFFFFF;--t-99:#FAFFFA;--t-95:#E7FEE9;--t-90:#C1FAC9;--t-80:#91EDAD;--t-70:#50E294;--t-60:#00CC7B;--t-50:#00A865;--t-40:#008A53;--t-30:#007041;--t-20:#004D2D;--t-10:#00331E;--t-0:#000000;--e-100:#FFFFFF;--e-99:#FFFBFA;--e-95:#FFFEEB;--e-90:#FFD7C7;--e-80:#FFB699;--e-70:#FA9269;--e-60:#ED7140;--e-50:#DB490F;--e-40:#BF3600;--e-30:#942500;--e-20:#631900;--e-10:#3D0C00;--e-0:#000000;--w-100:#FFFFFF;--w-99:#FFFCEB;--w-95:#FFF7D1;--w-90:#FEEEA0;--w-80:#FCE369;--w-70:#F3D53F;--w-60:#E6C10A;--w-50:#D1A400;--w-40:#B28C00;--w-30:#8F7200;--w-20:#6B5600;--w-10:#473800;--w-0:#000000;--n-100:#FFFFFF;--n-99:#FAFAFA;--n-95:#F0F0F0;--n-90:#DBDBDB;--n-80:#CCCCCC;--n-70:#B3B3B3;--n-60:#999999;--n-50:#808080;--n-40:#666666;--n-30:#4D4D4D;--n-20:#333333;--n-10:#1A1A1A;--n-0:#000000;--nv-100:#FFFFFF;--nv-99:#FDFCF7;--nv-95:#F9F8EF;--nv-90:#EAE7D7;--nv-80:#D7D4BC;--nv-70:#BEB39D;--nv-60:#A69D8C;--nv-50:#726F65;--nv-40:#504F49;--nv-30:#3B3A35;--nv-20:#2B2A27;--nv-10:#1B1A18;--nv-0:#000000;--brand-font:"Inter", sans-serif;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--scale-01:12px;--scale-02:14px;--scale-03:16px;--scale-04:18px;--scale-05:20px;--scale-06:24px;--scale-07:28px;--scale-08:32px;--scale-09:36px;--scale-10:40px;--scale-11:48px;--scale-12:64px;--scale-13:80px;--spacing-0:0px;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:12px;--spacing-5:16px;--spacing-6:20px;--spacing-7:24px;--spacing-8:32px;--spacing-9:40px;--spacing-10:48px;--spacing-11:64px;--spacing-12:80px;--spacing-13:96px;--spacing-14:120px;--line-height-01:18px;--line-height-02:20px;--line-height-03:24px;--line-height-04:26px;--line-height-05:28px;--line-height-06:32px;--line-height-07:34px;--line-height-08:38px;--line-height-09:42px;--line-height-10:56px;--line-height-11:76px;--tracking-01:0px;--tracking-02:-0.1px;--tracking-03:-0.15px;--tracking-04:-0.3px;--tracking-05:-0.4px;--tracking-06:-0.6px;--tracking-07:-0.7px;--md-sys-typescale-display-large-font:var(--brand-font);--md-sys-typescale-display-large-size:var(--scale-12);--md-sys-typescale-display-large-line-height:var(--line-height-11);--md-sys-typescale-display-large-weight:var(--weight-bold);--md-sys-typescale-display-large-tracking:var(--tracking-07);--md-sys-typescale-display-medium-font:var(--brand-font);--md-sys-typescale-display-medium-size:var(--scale-11);--md-sys-typescale-display-medium-line-height:var(--line-height-10);--md-sys-typescale-display-medium-weight:var(--weight-bold);--md-sys-typescale-display-medium-tracking:var(--tracking-07);--md-sys-typescale-display-small-font:var(--brand-font);--md-sys-typescale-display-small-size:var(--scale-09);--md-sys-typescale-display-small-line-height:var(--line-height-09);--md-sys-typescale-display-small-weight:var(--weight-bold);--md-sys-typescale-display-small-tracking:var(--tracking-06);--md-sys-typescale-headline-large-font:var(--brand-font);--md-sys-typescale-headline-large-size:var(--scale-08);--md-sys-typescale-headline-large-line-height:var(--line-height-08);--md-sys-typescale-headline-large-weight:var(--weight-bold);--md-sys-typescale-headline-large-tracking:var(--tracking-06);--md-sys-typescale-headline-medium-font:var(--brand-font);--md-sys-typescale-headline-medium-size:var(--scale-07);--md-sys-typescale-headline-medium-line-height:var(--line-height-07);--md-sys-typescale-headline-medium-weight:var(--weight-bold);--md-sys-typescale-headline-medium-tracking:var(--tracking-06);--md-sys-typescale-headline-small-font:var(--brand-font);--md-sys-typescale-headline-small-size:var(--scale-06);--md-sys-typescale-headline-small-line-height:var(--line-height-06);--md-sys-typescale-headline-small-weight:var(--weight-bold);--md-sys-typescale-headline-small-tracking:var(--tracking-06);--md-sys-typescale-title-large-font:var(--brand-font);--md-sys-typescale-title-large-size:var(--scale-05);--md-sys-typescale-title-large-line-height:var(--line-height-05);--md-sys-typescale-title-large-weight:var(--weight-semibold);--md-sys-typescale-title-large-tracking:var(--tracking-05);--md-sys-typescale-title-medium-font:var(--brand-font);--md-sys-typescale-title-medium-size:var(--scale-04);--md-sys-typescale-title-medium-line-height:var(--line-height-04);--md-sys-typescale-title-medium-weight:var(--weight-semibold);--md-sys-typescale-title-medium-tracking:var(--tracking-04);--md-sys-typescale-title-small-font:var(--brand-font);--md-sys-typescale-title-small-size:var(--scale-03);--md-sys-typescale-title-small-line-height:var(--line-height-03);--md-sys-typescale-title-small-weight:var(--weight-semibold);--md-sys-typescale-title-small-tracking:var(--tracking-03);--md-sys-typescale-label-large-font:var(--brand-font);--md-sys-typescale-label-large-size:var(--scale-03);--md-sys-typescale-label-large-line-height:var(--line-height-03);--md-sys-typescale-label-large-weight:var(--weight-semibold);--md-sys-typescale-label-large-tracking:var(--tracking-03);--md-sys-typescale-label-medium-font:var(--brand-font);--md-sys-typescale-label-medium-size:var(--scale-02);--md-sys-typescale-label-medium-line-height:var(--line-height-02);--md-sys-typescale-label-medium-weight:var(--weight-semibold);--md-sys-typescale-label-medium-tracking:var(--tracking-02);--md-sys-typescale-label-small-font:var(--brand-font);--md-sys-typescale-label-small-size:var(--scale-01);--md-sys-typescale-label-small-line-height:var(--line-height-01);--md-sys-typescale-label-small-weight:var(--weight-semibold);--md-sys-typescale-label-small-tracking:var(--tracking-01);--md-sys-typescale-body-large-font:var(--brand-font);--md-sys-typescale-body-large-size:var(--scale-04);--md-sys-typescale-body-large-line-height:var(--line-height-04);--md-sys-typescale-body-large-weight:var(--weight-regular);--md-sys-typescale-body-large-tracking:var(--tracking-04);--md-sys-typescale-body-medium-font:var(--brand-font);--md-sys-typescale-body-medium-size:var(--scale-03);--md-sys-typescale-body-medium-line-height:var(--line-height-03);--md-sys-typescale-body-medium-weight:var(--weight-regular);--md-sys-typescale-body-medium-tracking:var(--tracking-03);--md-sys-typescale-body-small-font:var(--brand-font);--md-sys-typescale-body-small-size:var(--scale-02);--md-sys-typescale-body-small-line-height:var(--line-height-02);--md-sys-typescale-body-small-weight:var(--weight-regular);--md-sys-typescale-body-small-tracking:var(--tracking-02);--md-sys-color-primary:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-primary:light-dark(var(--p-100), var(--p-20));--md-sys-color-primary-container:light-dark(var(--p-80), var(--p-30));--md-sys-color-on-primary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-primary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-primary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-primary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-primary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-secondary:light-dark(var(--p-20), var(--p-80));--md-sys-color-on-secondary:light-dark(var(--p-100), var(--p-20));--md-sys-color-secondary-container:light-dark(var(--p-90), var(--p-30));--md-sys-color-on-secondary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-secondary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-secondary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-secondary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-secondary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-tertiary:light-dark(var(--s-40), var(--s-80));--md-sys-color-on-tertiary:light-dark(var(--t-100), var(--s-20));--md-sys-color-tertiary-container:light-dark(var(--s-90), var(--s-10));--md-sys-color-on-tertiary-container:light-dark(var(--s-20), var(--s-100));--md-sys-color-tertiary-fixed:light-dark(var(--s-90), var(--s-90));--md-sys-color-tertiary-fixed-dim:light-dark(var(--s-80), var(--s-80));--md-sys-color-on-tertiary-fixed:light-dark(var(--s-10), var(--s-10));--md-sys-color-on-tertiary-fixed-variant:light-dark(var(--s-30), var(--s-30));--md-sys-color-background:light-dark(var(--p-100), var(--p-0));--md-sys-color-on-background:light-dark(var(--p-20), var(--p-100));--md-sys-color-surface:light-dark(var(--nv-100), var(--nv-20));--md-sys-color-surface-variant:light-dark(var(--nv-99), var(--n-10));--md-sys-color-surface-bright:light-dark(var(--nv-99), var(--nv-20));--md-sys-color-surface-dim:light-dark(var(--nv-95), var(--nv-10));--md-sys-color-surface-container-lowest:light-dark(var(--p-100), var(--nv-0));--md-sys-color-surface-container-low:light-dark(var(--p-99), var(--nv-10));--md-sys-color-surface-container:light-dark(var(--p-95), var(--nv-20));--md-sys-color-surface-container-high:light-dark(var(--p-90), var(--nv-20));--md-sys-color-surface-container-highest:light-dark(var(--p-80), var(--nv-20));--md-sys-color-surface-tint:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-surface:light-dark(var(--p-20), var(--p-100));--md-sys-color-on-surface-variant:light-dark(var(--p-20), var(--p-100));--md-sys-color-inverse-surface:light-dark(var(--p-20), var(--p-90));--md-sys-color-inverse-on-surface:light-dark(var(--p-95), var(--p-20));--md-sys-color-inverse-primary:light-dark(var(--p-80), var(--p-40));--md-sys-color-outline:light-dark(var(--n-50), var(--n-30));--md-sys-color-outline-variant:light-dark(var(--n-80), var(--n-30));--md-sys-color-scrim:light-dark(var(--n-0), var(--n-0));--md-sys-color-shadow:light-dark(var(--n-0), var(--n-0));--md-sys-color-error:light-dark(var(--e-40), var(--e-80));--md-sys-color-on-error:light-dark(var(--e-100), var(--e-20));--md-sys-color-error-container:light-dark(var(--e-90), var(--e-20));--md-sys-color-on-error-container:light-dark(var(--e-30), var(--e-95));--md-sys-color-warning:light-dark(var(--w-40), var(--w-80));--md-sys-color-on-warning:light-dark(var(--w-100), var(--w-20));--md-sys-color-warning-container:light-dark(var(--w-90), var(--w-20));--md-sys-color-on-warning-container:light-dark(var(--w-20), var(--w-95));--md-sys-color-info:light-dark(var(--p-40), var(--p-80));--md-sys-color-on-info:light-dark(var(--p-100), var(--p-20));--md-sys-color-info-container:light-dark(var(--p-90), var(--p-20));--md-sys-color-on-info-container:light-dark(var(--p-30), var(--p-95));--md-sys-color-success:light-dark(var(--t-40), var(--t-80));--md-sys-color-on-success:light-dark(var(--t-100), var(--t-20));--md-sys-color-success-container:light-dark(var(--t-95), var(--t-20));--md-sys-color-on-success-container:light-dark(var(--t-30), var(--t-95));--radius-none:0px;--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-full:1000px;--md-sys-shape-corner-none:var(--radius-none);--md-sys-shape-corner-extra-small:var(--radius-xs);--md-sys-shape-corner-small:var(--radius-s);--md-sys-shape-corner-medium:var(--radius-m);--md-sys-shape-corner-large:var(--radius-l);--md-sys-shape-corner-extra-large:var(--radius-xl);--md-sys-shape-corner-full:var(--radius-full);--stroke-border:1px;--stroke-focus-ring:3px;--md-focus-ring-color:light-dark(var(--p-40), var(--p-80));--md-focus-ring-width:var(--stroke-focus-ring);--md-outlined-button-outline-width:var(--stroke-border);--md-outlined-field-outline-width:var(--stroke-border);--icon-size-small:24px;--icon-size-medium:32px;--icon-size-large:40px;--icon-size-number:0px}:root[data-density="-2"],[data-density="-2"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:2px;--spacing-3:6px;--spacing-4:10px;--spacing-5:14px;--spacing-6:18px;--spacing-7:20px;--spacing-8:28px;--spacing-9:36px;--spacing-10:42px;--spacing-11:56px;--spacing-12:72px;--spacing-13:88px;--spacing-14:112px}:root[data-density="-4"],[data-density="-4"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:0px;--spacing-3:4px;--spacing-4:8px;--spacing-5:12px;--spacing-6:16px;--spacing-7:16px;--spacing-8:24px;--spacing-9:36px;--spacing-10:36px;--spacing-11:50px;--spacing-12:64px;--spacing-13:80px;--spacing-14:104px}label{color:light-dark(var(--p-10),var(--p-100))}fieldset.scb-fieldset{border:0;padding:0;margin:0}fieldset.scb-fieldset+fieldset.scb-fieldset{margin-block-start:var(--spacing-8, 32px)}legend.scb-legend{display:block;margin:0 0 var(--spacing-6, 20px)0;font-family:var(--brand-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--weight-semibold);letter-spacing:var(--md-sys-typescale-title-small-tracking);color:var(--md-sys-color-on-surface)}fieldset.scb-fieldset[disabled]{opacity:.7}
+@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/inter/InterVariable.woff2)format("woff2-variations")}@font-face{font-family:"Material Symbols Outlined";font-style:normal;font-weight:100 700;font-display:block;src:url(./fonts/material-symbols/material-symbols-outlined.woff2)format("woff2-variations")}:root{color-scheme:light dark;--p-100:#FFFFFF;--p-99:#FAFDFF;--p-95:#EBF8FF;--p-90:#D6F1FF;--p-80:#B8E7FF;--p-70:#99D1FF;--p-60:#75AFFF;--p-50:#477EFF;--p-40:#1F44FF;--p-30:#1E00BE;--p-20:#0F0865;--p-10:#0B0544;--p-0:#000000;--s-100:#FFFFFF;--s-99:#FFFAFF;--s-95:#FFEBFF;--s-90:#FFDBFF;--s-80:#FFC2FF;--s-70:#FA9EFA;--s-60:#EC75F0;--s-50:#D850E2;--s-40:#B633C1;--s-30:#91219C;--s-20:#6A1471;--s-10:#430449;--s-0:#000000;--t-100:#FFFFFF;--t-99:#FAFFFA;--t-95:#E7FEE9;--t-90:#C1FAC9;--t-80:#91EDAD;--t-70:#50E294;--t-60:#00CC7B;--t-50:#00A865;--t-40:#008A53;--t-30:#007041;--t-20:#004D2D;--t-10:#00331E;--t-0:#000000;--e-100:#FFFFFF;--e-99:#FFFBFA;--e-95:#FFFEEB;--e-90:#FFD7C7;--e-80:#FFB699;--e-70:#FA9269;--e-60:#ED7140;--e-50:#DB490F;--e-40:#BF3600;--e-30:#942500;--e-20:#631900;--e-10:#3D0C00;--e-0:#000000;--w-100:#FFFFFF;--w-99:#FFFCEB;--w-95:#FFF7D1;--w-90:#FEEEA0;--w-80:#FCE369;--w-70:#F3D53F;--w-60:#E6C10A;--w-50:#D1A400;--w-40:#B28C00;--w-30:#8F7200;--w-20:#6B5600;--w-10:#473800;--w-0:#000000;--n-100:#FFFFFF;--n-99:#FAFAFA;--n-95:#F0F0F0;--n-90:#DBDBDB;--n-80:#CCCCCC;--n-70:#B3B3B3;--n-60:#999999;--n-50:#808080;--n-40:#666666;--n-30:#4D4D4D;--n-20:#333333;--n-10:#1A1A1A;--n-0:#000000;--nv-100:#FFFFFF;--nv-99:#FDFCF7;--nv-95:#F9F8EF;--nv-90:#EAE7D7;--nv-80:#D7D4BC;--nv-70:#BEB39D;--nv-60:#A69D8C;--nv-50:#726F65;--nv-40:#504F49;--nv-30:#3B3A35;--nv-20:#2B2A27;--nv-10:#1B1A18;--nv-0:#000000;--brand-font:"Inter Variable", Inter, system-ui, -apple-system, "Segoe UI",
+                Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
+                "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--weight-regular:400;--weight-semibold:600;--weight-bold:700;--scale-01:12px;--scale-02:14px;--scale-03:16px;--scale-04:18px;--scale-05:20px;--scale-06:24px;--scale-07:28px;--scale-08:32px;--scale-09:36px;--scale-10:40px;--scale-11:48px;--scale-12:64px;--scale-13:80px;--spacing-0:0px;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:12px;--spacing-5:16px;--spacing-6:20px;--spacing-7:24px;--spacing-8:32px;--spacing-9:40px;--spacing-10:48px;--spacing-11:64px;--spacing-12:80px;--spacing-13:96px;--spacing-14:120px;--line-height-01:18px;--line-height-02:20px;--line-height-03:24px;--line-height-04:26px;--line-height-05:28px;--line-height-06:32px;--line-height-07:34px;--line-height-08:38px;--line-height-09:42px;--line-height-10:56px;--line-height-11:76px;--tracking-01:0px;--tracking-02:-0.1px;--tracking-03:-0.15px;--tracking-04:-0.3px;--tracking-05:-0.4px;--tracking-06:-0.6px;--tracking-07:-0.7px;--md-sys-typescale-display-large-font:var(--brand-font);--md-sys-typescale-display-large-size:var(--scale-12);--md-sys-typescale-display-large-line-height:var(--line-height-11);--md-sys-typescale-display-large-weight:var(--weight-bold);--md-sys-typescale-display-large-tracking:var(--tracking-07);--md-sys-typescale-display-medium-font:var(--brand-font);--md-sys-typescale-display-medium-size:var(--scale-11);--md-sys-typescale-display-medium-line-height:var(--line-height-10);--md-sys-typescale-display-medium-weight:var(--weight-bold);--md-sys-typescale-display-medium-tracking:var(--tracking-07);--md-sys-typescale-display-small-font:var(--brand-font);--md-sys-typescale-display-small-size:var(--scale-09);--md-sys-typescale-display-small-line-height:var(--line-height-09);--md-sys-typescale-display-small-weight:var(--weight-bold);--md-sys-typescale-display-small-tracking:var(--tracking-06);--md-sys-typescale-headline-large-font:var(--brand-font);--md-sys-typescale-headline-large-size:var(--scale-08);--md-sys-typescale-headline-large-line-height:var(--line-height-08);--md-sys-typescale-headline-large-weight:var(--weight-bold);--md-sys-typescale-headline-large-tracking:var(--tracking-06);--md-sys-typescale-headline-medium-font:var(--brand-font);--md-sys-typescale-headline-medium-size:var(--scale-07);--md-sys-typescale-headline-medium-line-height:var(--line-height-07);--md-sys-typescale-headline-medium-weight:var(--weight-bold);--md-sys-typescale-headline-medium-tracking:var(--tracking-06);--md-sys-typescale-headline-small-font:var(--brand-font);--md-sys-typescale-headline-small-size:var(--scale-06);--md-sys-typescale-headline-small-line-height:var(--line-height-06);--md-sys-typescale-headline-small-weight:var(--weight-bold);--md-sys-typescale-headline-small-tracking:var(--tracking-06);--md-sys-typescale-title-large-font:var(--brand-font);--md-sys-typescale-title-large-size:var(--scale-05);--md-sys-typescale-title-large-line-height:var(--line-height-05);--md-sys-typescale-title-large-weight:var(--weight-semibold);--md-sys-typescale-title-large-tracking:var(--tracking-05);--md-sys-typescale-title-medium-font:var(--brand-font);--md-sys-typescale-title-medium-size:var(--scale-04);--md-sys-typescale-title-medium-line-height:var(--line-height-04);--md-sys-typescale-title-medium-weight:var(--weight-semibold);--md-sys-typescale-title-medium-tracking:var(--tracking-04);--md-sys-typescale-title-small-font:var(--brand-font);--md-sys-typescale-title-small-size:var(--scale-03);--md-sys-typescale-title-small-line-height:var(--line-height-03);--md-sys-typescale-title-small-weight:var(--weight-semibold);--md-sys-typescale-title-small-tracking:var(--tracking-03);--md-sys-typescale-label-large-font:var(--brand-font);--md-sys-typescale-label-large-size:var(--scale-03);--md-sys-typescale-label-large-line-height:var(--line-height-03);--md-sys-typescale-label-large-weight:var(--weight-semibold);--md-sys-typescale-label-large-tracking:var(--tracking-03);--md-sys-typescale-label-medium-font:var(--brand-font);--md-sys-typescale-label-medium-size:var(--scale-02);--md-sys-typescale-label-medium-line-height:var(--line-height-02);--md-sys-typescale-label-medium-weight:var(--weight-semibold);--md-sys-typescale-label-medium-tracking:var(--tracking-02);--md-sys-typescale-label-small-font:var(--brand-font);--md-sys-typescale-label-small-size:var(--scale-01);--md-sys-typescale-label-small-line-height:var(--line-height-01);--md-sys-typescale-label-small-weight:var(--weight-semibold);--md-sys-typescale-label-small-tracking:var(--tracking-01);--md-sys-typescale-body-large-font:var(--brand-font);--md-sys-typescale-body-large-size:var(--scale-04);--md-sys-typescale-body-large-line-height:var(--line-height-04);--md-sys-typescale-body-large-weight:var(--weight-regular);--md-sys-typescale-body-large-tracking:var(--tracking-04);--md-sys-typescale-body-medium-font:var(--brand-font);--md-sys-typescale-body-medium-size:var(--scale-03);--md-sys-typescale-body-medium-line-height:var(--line-height-03);--md-sys-typescale-body-medium-weight:var(--weight-regular);--md-sys-typescale-body-medium-tracking:var(--tracking-03);--md-sys-typescale-body-small-font:var(--brand-font);--md-sys-typescale-body-small-size:var(--scale-02);--md-sys-typescale-body-small-line-height:var(--line-height-02);--md-sys-typescale-body-small-weight:var(--weight-regular);--md-sys-typescale-body-small-tracking:var(--tracking-02);--md-sys-color-primary:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-primary:light-dark(var(--p-100), var(--p-20));--md-sys-color-primary-container:light-dark(var(--p-80), var(--p-30));--md-sys-color-on-primary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-primary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-primary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-primary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-primary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-secondary:light-dark(var(--p-20), var(--p-80));--md-sys-color-on-secondary:light-dark(var(--p-100), var(--p-20));--md-sys-color-secondary-container:light-dark(var(--p-90), var(--p-30));--md-sys-color-on-secondary-container:light-dark(var(--p-30), var(--p-100));--md-sys-color-secondary-fixed:light-dark(var(--p-90), var(--p-90));--md-sys-color-secondary-fixed-dim:light-dark(var(--p-80), var(--p-80));--md-sys-color-on-secondary-fixed:light-dark(var(--p-20), var(--p-20));--md-sys-color-on-secondary-fixed-variant:light-dark(var(--p-30), var(--p-30));--md-sys-color-tertiary:light-dark(var(--s-40), var(--s-80));--md-sys-color-on-tertiary:light-dark(var(--t-100), var(--s-20));--md-sys-color-tertiary-container:light-dark(var(--s-90), var(--s-10));--md-sys-color-on-tertiary-container:light-dark(var(--s-20), var(--s-100));--md-sys-color-tertiary-fixed:light-dark(var(--s-90), var(--s-90));--md-sys-color-tertiary-fixed-dim:light-dark(var(--s-80), var(--s-80));--md-sys-color-on-tertiary-fixed:light-dark(var(--s-10), var(--s-10));--md-sys-color-on-tertiary-fixed-variant:light-dark(var(--s-30), var(--s-30));--md-sys-color-background:light-dark(var(--p-100), var(--p-0));--md-sys-color-on-background:light-dark(var(--p-20), var(--p-100));--md-sys-color-surface:light-dark(var(--nv-100), var(--nv-20));--md-sys-color-surface-variant:light-dark(var(--nv-99), var(--n-10));--md-sys-color-surface-bright:light-dark(var(--nv-99), var(--nv-20));--md-sys-color-surface-dim:light-dark(var(--nv-95), var(--nv-10));--md-sys-color-surface-container-lowest:light-dark(var(--p-100), var(--nv-0));--md-sys-color-surface-container-low:light-dark(var(--p-99), var(--nv-10));--md-sys-color-surface-container:light-dark(var(--p-95), var(--nv-20));--md-sys-color-surface-container-high:light-dark(var(--p-90), var(--nv-20));--md-sys-color-surface-container-highest:light-dark(var(--p-80), var(--nv-20));--md-sys-color-surface-tint:light-dark(var(--p-40), var(--p-70));--md-sys-color-on-surface:light-dark(var(--p-20), var(--p-100));--md-sys-color-on-surface-variant:light-dark(var(--p-20), var(--p-100));--md-sys-color-inverse-surface:light-dark(var(--p-20), var(--p-90));--md-sys-color-inverse-on-surface:light-dark(var(--p-95), var(--p-20));--md-sys-color-inverse-primary:light-dark(var(--p-80), var(--p-40));--md-sys-color-outline:light-dark(var(--n-50), var(--n-30));--md-sys-color-outline-variant:light-dark(var(--n-80), var(--n-30));--md-sys-color-scrim:light-dark(var(--n-0), var(--n-0));--md-sys-color-shadow:light-dark(var(--n-0), var(--n-0));--md-sys-color-error:light-dark(var(--e-40), var(--e-80));--md-sys-color-on-error:light-dark(var(--e-100), var(--e-20));--md-sys-color-error-container:light-dark(var(--e-90), var(--e-20));--md-sys-color-on-error-container:light-dark(var(--e-30), var(--e-95));--md-sys-color-warning:light-dark(var(--w-40), var(--w-80));--md-sys-color-on-warning:light-dark(var(--w-100), var(--w-20));--md-sys-color-warning-container:light-dark(var(--w-90), var(--w-20));--md-sys-color-on-warning-container:light-dark(var(--w-20), var(--w-95));--md-sys-color-info:light-dark(var(--p-40), var(--p-80));--md-sys-color-on-info:light-dark(var(--p-100), var(--p-20));--md-sys-color-info-container:light-dark(var(--p-90), var(--p-20));--md-sys-color-on-info-container:light-dark(var(--p-30), var(--p-95));--md-sys-color-success:light-dark(var(--t-40), var(--t-80));--md-sys-color-on-success:light-dark(var(--t-100), var(--t-20));--md-sys-color-success-container:light-dark(var(--t-95), var(--t-20));--md-sys-color-on-success-container:light-dark(var(--t-30), var(--t-95));--radius-none:0px;--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-full:1000px;--md-sys-shape-corner-none:var(--radius-none);--md-sys-shape-corner-extra-small:var(--radius-xs);--md-sys-shape-corner-small:var(--radius-s);--md-sys-shape-corner-medium:var(--radius-m);--md-sys-shape-corner-large:var(--radius-l);--md-sys-shape-corner-extra-large:var(--radius-xl);--md-sys-shape-corner-full:var(--radius-full);--stroke-border:1px;--stroke-focus-ring:3px;--md-focus-ring-color:light-dark(var(--p-40), var(--p-80));--md-focus-ring-width:var(--stroke-focus-ring);--md-outlined-button-outline-width:var(--stroke-border);--md-outlined-field-outline-width:var(--stroke-border);--icon-size-small:24px;--icon-size-medium:32px;--icon-size-large:40px;--icon-size-number:0px}:root[data-density="-2"],[data-density="-2"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:2px;--spacing-3:6px;--spacing-4:10px;--spacing-5:14px;--spacing-6:18px;--spacing-7:20px;--spacing-8:28px;--spacing-9:36px;--spacing-10:42px;--spacing-11:56px;--spacing-12:72px;--spacing-13:88px;--spacing-14:112px}:root[data-density="-4"],[data-density="-4"]{--spacing-0:0px;--spacing-1:0px;--spacing-2:0px;--spacing-3:4px;--spacing-4:8px;--spacing-5:12px;--spacing-6:16px;--spacing-7:16px;--spacing-8:24px;--spacing-9:36px;--spacing-10:36px;--spacing-11:50px;--spacing-12:64px;--spacing-13:80px;--spacing-14:104px}label{color:light-dark(var(--p-10),var(--p-100))}fieldset.scb-fieldset{border:0;padding:0;margin:0}fieldset.scb-fieldset+fieldset.scb-fieldset{margin-block-start:var(--spacing-8, 32px)}legend.scb-legend{display:block;margin:0 0 var(--spacing-6, 20px)0;font-family:var(--brand-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--weight-semibold);letter-spacing:var(--md-sys-typescale-title-small-tracking);color:var(--md-sys-color-on-surface)}fieldset.scb-fieldset[disabled]{opacity:.7}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.29",
+    "version":  "0.1.31",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -51,6 +51,10 @@
                                          "import":  "./dist-types/dist-types.js",
                                          "require":  "./dist-types/dist-types.js"
                                      },
+                    "./fonts":  {
+                                    "import":  "./fonts/fonts.js",
+                                    "require":  "./fonts/fonts.js"
+                                },
                     "./mvc":  {
                                   "import":  "./mvc/mvc.js",
                                   "require":  "./mvc/mvc.js"
@@ -273,5 +277,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "44623E3D997AE4EA4B6A3D107EAAC1DF749A4E358B14F8CB39DBE22B45755861"
+    "buildHash":  "360FA4BA0613AB7CA8A0FB426ED3C3F60F52A85E8710F7E7F59FCB29BB996815"
 }

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

@@ -8,6 +8,9 @@ export declare class ScbCalendarCard extends LitElement {
     cardHref: string;
     cardHrefNav: string;
     showMedia: boolean | null;
+    mediaWidth: string;
+    mediaHeight: string;
+    mediaAspect: string;
     width: string;
     maxWidth: string;
     minWidth: string;

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

@@ -1,23 +1,23 @@
-import { css as h, LitElement as c, html as o } from "lit";
-import { property as r, customElement as m } from "lit/decorators.js";
+import { css as m, LitElement as g, html as d } from "lit";
+import { property as r, customElement as f } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (i, s, l, n) => {
-  for (var a = n > 1 ? void 0 : n ? f(s, l) : s, d = i.length - 1, p; d >= 0; d--)
-    (p = i[d]) && (a = (n ? p(s, l, a) : p(a)) || a);
-  return n && a && g(s, l, a), a;
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (i, s, h, n) => {
+  for (var a = n > 1 ? void 0 : n ? v(s, h) : s, o = i.length - 1, l; o >= 0; o--)
+    (l = i[o]) && (a = (n ? l(s, h, a) : l(a)) || a);
+  return n && a && y(s, h, a), a;
 };
-let e = class extends c {
+let e = class extends g {
   constructor() {
-    super(...arguments), this.variant = "default", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "stretch";
+    super(...arguments), this.variant = "default", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "stretch";
   }
   async firstUpdated() {
     e.__iconLoaded || (await import("@material/web/icon/icon.js"), e.__iconLoaded = !0), e.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), e.__rippleLoaded = !0), this.__applyInnerSizing();
   }
   render() {
-    const i = this.variant ? `${this.variant.toLowerCase()}` : "", s = this.direction ? `${this.direction.toLowerCase()}` : "", l = this.cardHref ? "clickable" : "", n = 1, a = "Jan";
-    return o`
+    const i = this.variant ? `${this.variant.toLowerCase()}` : "", s = this.direction ? `${this.direction.toLowerCase()}` : "", h = this.cardHref ? "clickable" : "", n = 1, a = "Jan", o = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", l = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", p = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", c = `${o ? `inline-size:${o};` : ""}${l ? `block-size:${l};` : ""}${p ? `aspect-ratio:${p};` : ""}`;
+    return d`
       <div
-        class="calendar-card ${s} ${l} ${i}"
+        class="calendar-card ${s} ${h} ${i}"
         role="${this.cardHref ? "link" : "group"}"
         aria-label="${this.title || "Kalenderkort"}"
         tabindex="${this.cardHref ? "0" : "-1"}"
@@ -25,9 +25,9 @@ let e = class extends c {
         @keydown=${this.cardHref ? this._onKeyDown : null}
         style="cursor: ${this.cardHref ? "pointer" : "default"};"
       >
-        ${this.cardHref ? o`<md-ripple></md-ripple>` : ""}
-        ${this.showMedia ? o`
-              <div class="media" aria-label="Datum: ${n} ${a}">
+        ${this.cardHref ? d`<md-ripple></md-ripple>` : ""}
+        ${this.showMedia ? d`
+              <div class="media" style="${c}" aria-label="Datum: ${n} ${a}">
                 <div class="day">${n}</div>
                 <div class="month">${a}</div>
               </div>
@@ -35,10 +35,10 @@ let e = class extends c {
         <div class="container">
           <div class="header-container">
             <div class="header">${this.title}</div>
-            ${this.cardHref ? o`<md-icon>arrow_forward</md-icon>` : ""}
+            ${this.cardHref ? d`<md-icon>arrow_forward</md-icon>` : ""}
           </div>
-          ${this.subtitle ? o`<div class="subtitle">${this.subtitle}</div>` : ""}
-          ${this.supportingText ? o`<div class="supporting-text">${this.supportingText}</div>` : ""}
+          ${this.subtitle ? d`<div class="subtitle">${this.subtitle}</div>` : ""}
+          ${this.supportingText ? d`<div class="supporting-text">${this.supportingText}</div>` : ""}
         </div>
       </div>
       <md-focus-ring></md-focus-ring>
@@ -61,7 +61,7 @@ let e = class extends c {
 };
 e.__iconLoaded = !1;
 e.__rippleLoaded = !1;
-e.styles = h`
+e.styles = m`
     :host {
       display: block;
       position: relative;
@@ -156,6 +156,8 @@ e.styles = h`
 
     .media {
       display: flex;
+      /* Bredd/höjd sätts i första hand av inline-style från mediaWidth/mediaHeight.
+         Dessa fungerar som fallbackvärden. */
       width: var(--spacing-spacing-11, 64px);
       min-width: var(--spacing-spacing-11, 64px);
       max-width: var(--spacing-spacing-11, 64px);
@@ -285,6 +287,15 @@ t([
 t([
   r({ type: Boolean, reflect: !0, attribute: "show-media" })
 ], e.prototype, "showMedia", 2);
+t([
+  r({ type: String, attribute: "media-width" })
+], e.prototype, "mediaWidth", 2);
+t([
+  r({ type: String, attribute: "media-height" })
+], e.prototype, "mediaHeight", 2);
+t([
+  r({ type: String, attribute: "media-aspect" })
+], e.prototype, "mediaAspect", 2);
 t([
   r({ type: String })
 ], e.prototype, "width", 2);
@@ -307,7 +318,7 @@ t([
   r({ type: String, reflect: !0 })
 ], e.prototype, "sizing", 2);
 e = t([
-  m("scb-calendar-card")
+  f("scb-calendar-card")
 ], e);
 export {
   e as ScbCalendarCard