scb-wc-test 0.1.1

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

@@ -0,0 +1,53 @@
+import{b as l,n as c,i as p,x as v,t as h}from"../../vendor/vendor.js";var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(d,i,n,e)=>{for(var t=e>1?void 0:e?m(i,n):i,s=d.length-1,a;s>=0;s--)(a=d[s])&&(t=(e?a(i,n,t):a(t))||t);return e&&t&&b(i,n,t),t};let r=class extends p{constructor(){super(...arguments),this.variant="thin",this.direction="horizontal",this.inset="both"}render(){return v`
+      <div class="scb-divider"
+        variant=${this.variant}
+        direction=${this.direction}
+      ></div>
+    `}};r.styles=[l`
+      :host {
+        content: '';
+        display: block;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        width: 100%;
+      }
+
+      :host([variant="bold"]) {
+        border-top: 1px solid var(--md-sys-color-outline);
+      }
+      :host([direction="vertical"]) {
+        border-top: none;
+        border-left: 1px solid var(--md-sys-color-outline-variant);
+        height: calc(100% - 20px);
+        margin: 10px;
+        width: 2px;
+      }
+
+      :host([variant="bold"][direction="vertical"]) {
+        border-left: 1px solid var(--md-sys-color-outline);
+      }
+
+
+      // // // :host([inset="both"]:not([direction="vertical"])) {
+      // // //   margin: 0 32px;
+      // // // }
+
+      // // // :host([inset="start"]:not([direction="vertical"])) {
+      // // //   margin-left: 32px;
+      // // // }
+
+      // // // :host([inset="end"]:not([direction="vertical"])) {
+      // // //   margin-right: 32px;
+      // // // }
+
+      // // // :host([inset="both"][direction="vertical"]) {
+      // // //   margin: 32px 0;
+      // // // }
+
+      // // // :host([inset="start"][direction="vertical"]) {
+      // // //   margin-top: 32px;
+      // // // }
+
+      // // // :host([inset="end"][direction="vertical"]) {
+      // // //   margin-bottom: 32px;
+      // // // }
+    `];o([c({type:String,reflect:!0})],r.prototype,"variant",2);o([c({type:String,reflect:!0})],r.prototype,"direction",2);o([c({type:String,reflect:!0})],r.prototype,"inset",2);r=o([h("scb-divider")],r);

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

@@ -0,0 +1,114 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../scb-icon-button/scb-icon-button.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
+import{_ as p}from"../../vendor/preload-helper.js";import{b,n as l,r as h,i as u,x as r,t as _}from"../../vendor/vendor.js";var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(e,t,o,a)=>{for(var n=a>1?void 0:a?f(t,o):t,d=e.length-1,c;d>=0;d--)(c=e[d])&&(n=(a?c(t,o,n):c(n))||n);return a&&n&&m(t,o,n),n};let s=class extends u{constructor(){super(...arguments),this.label="",this.selected=!1,this.leadingIcon="",this.itemHref="",this.hasSlotContent=!1,this.expanded=!1,this.__submenuId=`sub-${Math.random().toString(36).slice(2)}`,this._toggleExpand=e=>{e&&e.stopPropagation(),this.hasSlotContent&&(this.expanded=!this.expanded)},this._onButtonClick=e=>{e.stopPropagation(),this._dispatchSelect(),this._toggleExpand()},this._onLinkClick=()=>{this._dispatchSelect()},this._onKeyDown=e=>{const t=Array.from(this.parentElement?.querySelectorAll("scb-drawer-item")||[]),o=t.indexOf(this);switch(e.key){case"ArrowDown":{e.preventDefault(),(t[o+1]||t[0]).shadowRoot?.querySelector(".scb-drawer-label-text")?.focus();break}case"ArrowUp":{e.preventDefault(),(t[o-1]||t[t.length-1]).shadowRoot?.querySelector(".scb-drawer-label-text")?.focus();break}case"Home":{e.preventDefault(),t[0].shadowRoot?.querySelector(".scb-drawer-label-text")?.focus();break}case"End":{e.preventDefault(),t[t.length-1].shadowRoot?.querySelector(".scb-drawer-label-text")?.focus();break}}}}async __ensureDepsLoaded(){s.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),s.__rippleLoaded=!0),this.leadingIcon&&!s.__iconLoaded&&(await p(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),s.__iconLoaded=!0),this.hasSlotContent&&!s.__iconButtonLoaded&&(await p(()=>import("../scb-icon-button/scb-icon-button.js"),__vite__mapDeps([2,3,1]),import.meta.url),s.__iconButtonLoaded=!0)}_onSlotChange(e){const o=e.target.assignedElements({flatten:!0});this.hasSlotContent=o.length>0&&o.every(a=>a.tagName==="SCB-SUB-DRAWER")}_dispatchSelect(){this.dispatchEvent(new CustomEvent("scb-drawer-select",{bubbles:!0,composed:!0,detail:{item:this}}))}async firstUpdated(){const e=this.renderRoot.querySelector("slot");if(e){const t=e.assignedElements({flatten:!0});this.hasSlotContent=t.length>0&&t.every(o=>o.tagName==="SCB-SUB-DRAWER")}await this.__ensureDepsLoaded()}updated(e){e.has("leadingIcon")&&this.leadingIcon&&this.__ensureDepsLoaded(),e.has("hasSlotContent")&&this.hasSlotContent&&this.__ensureDepsLoaded()}render(){const e=!!this.leadingIcon,t=!!this.itemHref,o=this.hasSlotContent;return r`
+      <div class="scb-drawer-item">
+        <div class="scb-drawer-item-label" ?selected=${this.selected}>
+          ${t?r`
+                <a
+                  class="scb-drawer-label-text"
+                  aria-label="${this.label}"
+                  href="${this.itemHref}"
+                  aria-current=${this.selected?"page":void 0}
+                  @click=${this._onLinkClick}
+                  @keydown=${this._onKeyDown}
+                >
+                  <span class="scb-drawer-click ${e?"has-icon":""}">
+                    <md-ripple></md-ripple>
+                    ${e?r`<md-icon>${this.leadingIcon}</md-icon>`:""}
+                    ${this.label}
+                  </span>
+                </a>
+              `:r`
+                <button
+                  type="button"
+                  class="scb-drawer-label-text"
+                  @click=${this._onButtonClick}
+                  @keydown=${this._onKeyDown}
+                  ${o?"aria-expanded="+String(this.expanded):""}
+                  ${o?"aria-controls="+this.__submenuId:""}
+                >
+                  <span class="scb-drawer-click ${e?"has-icon":""}">
+                    <md-ripple></md-ripple>
+                    ${e?r`<md-icon>${this.leadingIcon}</md-icon>`:""}
+                    ${this.label}
+                  </span>
+                </button>
+              `}
+
+          ${o?r`
+                <!-- Separat ikonknapp: presentational + ej tabbbar, ingen ARIA-state -->
+                <scb-icon-button
+                  icon="${this.expanded?"expand_less":"expand_more"}"
+                  role="presentation"
+                  tabindex="-1"
+                  @click=${a=>{a.stopPropagation(),this._toggleExpand(a)}}
+                ></scb-icon-button>
+              `:""}
+        </div>
+
+        <div id="${this.__submenuId}" class="submenu ${this.expanded?"expanded":""}">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      </div>
+    `}};s.__rippleLoaded=!1;s.__iconLoaded=!1;s.__iconButtonLoaded=!1;s.styles=b`
+    .scb-drawer-item-label {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .scb-drawer-label-text {
+      width: 100%;
+      display: block;
+      background: transparent;
+      border: 0;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+      appearance: none;
+      -webkit-appearance: none;
+      box-sizing: border-box;
+    }
+
+    .scb-drawer-label-text:focus-visible {
+      outline: 2px solid var(--md-focus-ring-color, var(--p-40));
+      outline-offset: 2px;
+      border-radius: 28px;
+      box-shadow: none;
+    }
+
+    .scb-drawer-click {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 20px;
+      border-radius: 28px;
+      position: relative;
+      overflow: hidden;
+      color: var(--md-sys-color-on-surface);
+    }
+    .scb-drawer-click.has-icon { padding: 14px 12px; }
+
+    .scb-drawer-item-label[selected] .scb-drawer-click,
+    :host([selected]) .scb-drawer-click {
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+      font-weight: 600;
+    }
+
+    scb-icon-button {
+      margin-left: auto;
+      flex: 0 0 auto;
+    }
+    .submenu {
+      display: none;
+      padding-left: 16px;
+    }
+    .submenu.expanded {
+      display: block;
+      padding-left: 16px;
+    }
+  `;i([l({type:String})],s.prototype,"label",2);i([l({type:Boolean,reflect:!0})],s.prototype,"selected",2);i([l({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);i([l({type:String,attribute:"item-href"})],s.prototype,"itemHref",2);i([h()],s.prototype,"hasSlotContent",2);i([h()],s.prototype,"expanded",2);s=i([_("scb-drawer-item")],s);

package/mvc/components/scb-drawer/scb-drawer-section.js

@@ -0,0 +1,19 @@
+import{b,n,i as p,x as o,t as v}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";var w=Object.defineProperty,f=Object.getOwnPropertyDescriptor,d=(l,e,t,s)=>{for(var r=s>1?void 0:s?f(e,t):e,c=l.length-1,a;c>=0;c--)(a=l[c])&&(r=(s?a(e,t,r):a(r))||r);return s&&r&&w(e,t,r),r};let i=class extends p{constructor(){super(...arguments),this.label=""}render(){return o`
+        
+        <scb-divider></scb-divider>
+        ${this.label?o`
+        <div class="scb-drawer-section">
+            <div class="scb-drawer-label">${this.label}</div>
+        </div>`:""}
+    `}};i.styles=b`
+    .scb-drawer-section {
+      display: block;
+      width: 100%;
+      padding: 14px 12px; 
+      color: var(--md-sys-color-on-surface);
+      font-weight: 600;
+    }
+    scb-divider {
+      margin: 4px 12px;
+    }
+  `;d([n({type:String})],i.prototype,"label",2);i=d([v("scb-drawer-section")],i);

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

@@ -0,0 +1,79 @@
+import{b as u,n as i,i as p,E as d,x as f,t as _}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";import"./scb-drawer-item.js";import"./scb-drawer-section.js";import"./scb-sub-drawer.js";import"../../vendor/preload-helper.js";var h=Object.defineProperty,v=Object.getOwnPropertyDescriptor,s=(t,o,r,a)=>{for(var l=a>1?void 0:a?v(o,r):o,n=t.length-1,c;n>=0;n--)(c=t[n])&&(l=(a?c(o,r,l):c(l))||l);return a&&l&&h(o,r,l),l};let e=class extends p{constructor(){super(...arguments),this.label="",this.subLabel="",this.floating=!1,this.left=!0,this.right=!1,this.open=!1,this.overlay=!1,this.lockScroll=!1,this.closeOnOverlay=!0,this.modal=!1,this.__lastTriggerEl=null,this._onGlobalSelect=t=>{const o=t;this.querySelectorAll("scb-drawer-item").forEach(a=>a.selected=!1),this.contains(o.detail.item)&&(o.detail.item.selected=!0)},this.__onDocumentClick=t=>{const o=this.__getActionFromEvent(t);if(o){o==="open"&&this.__setOpen(!0),o==="close"&&this.__setOpen(!1),o==="toggle"&&this.__setOpen(!this.open),t.stopPropagation();return}this.floating&&this.open&&!this.overlay&&(t.composedPath().includes(this)||this.__setOpen(!1))},this.__onDocumentKeydown=t=>{if(this.open){if(t.key==="Escape"){this.__setOpen(!1);return}if(this.overlay&&t.key==="Tab"){const o=this.__getFocusable();if(o.length===0)return;const r=o[0],a=o[o.length-1],l=this.renderRoot,n=l.activeElement||document.activeElement;t.shiftKey?(n===r||!l.contains(n))&&(t.preventDefault(),a.focus()):(n===a||!l.contains(n))&&(t.preventDefault(),r.focus())}}}}static __ensureOverlayStyles(){if(typeof document>"u"||document.getElementById("scb-drawer-overlay-styles"))return;const t=document.createElement("style");t.id="scb-drawer-overlay-styles",t.textContent=`
+      .scb-drawer-global-overlay {
+        position: fixed;
+        inset: 0;
+        background: var(--scb-drawer-overlay-color, rgba(0,0,0,0.32));
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 200ms ease;
+        z-index: var(--scb-drawer-overlay-z, 999);
+      }
+      .scb-drawer-global-overlay.is-visible {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    `,document.head.appendChild(t)}static __ensureOverlay(){if(typeof document>"u"||e.__overlayEl)return;e.__ensureOverlayStyles();const t=document.createElement("div");t.className="scb-drawer-global-overlay",t.addEventListener("mousedown",()=>{const o=e.__overlayStack[e.__overlayStack.length-1];o&&o.closeOnOverlay&&o.__setOpen(!1)}),document.body.appendChild(t),e.__overlayEl=t}static __showOverlay(t){e.__ensureOverlay(),e.__overlayEl&&(e.__overlayStack.includes(t)||e.__overlayStack.push(t),e.__overlayEl.classList.add("is-visible"))}static __hideOverlay(t){const o=e.__overlayStack.indexOf(t);o>=0&&e.__overlayStack.splice(o,1),e.__overlayStack.length===0&&e.__overlayEl&&e.__overlayEl.classList.remove("is-visible")}static __lockScrollEnable(){typeof document>"u"||(e.__lockedCount===0&&(e.__prevDocOverflow=document.documentElement.style.overflow||"",e.__prevBodyOverflow=document.body.style.overflow||"",document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden"),e.__lockedCount++)}static __lockScrollDisable(){typeof document>"u"||(e.__lockedCount=Math.max(0,e.__lockedCount-1),e.__lockedCount===0&&(document.documentElement.style.overflow=e.__prevDocOverflow??"",document.body.style.overflow=e.__prevBodyOverflow??""))}render(){const t=this.modal&&this.overlay&&this.floating;return f`
+      <nav
+        aria-label="${this.label}"
+        role=${t?"dialog":d}
+        aria-modal=${t?"true":d}
+      >
+        ${this.label?f`
+          <div class="scb-drawer-label-wrapper">
+            <div class="scb-drawer-label">${this.label}</div>
+            <div class="scb-drawer-sublabel">${this.subLabel}</div>
+          </div>
+          <scb-divider></scb-divider>
+        `:d}
+        <slot></slot>
+      </nav>
+    `}connectedCallback(){super.connectedCallback(),window.addEventListener("scb-drawer-select",this._onGlobalSelect),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0)}disconnectedCallback(){window.removeEventListener("scb-drawer-select",this._onGlobalSelect),document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.overlay&&(e.__hideOverlay(this),this.lockScroll&&e.__lockScrollDisable()),super.disconnectedCallback()}__getActionFromEvent(t){if(!this.id)return null;const o=t.composedPath();for(const r of o)if(r instanceof Element){if(r.getAttribute("data-drawer-open")===this.id)return this.__lastTriggerEl=r,"open";if(r.getAttribute("data-drawer-close")===this.id)return this.__lastTriggerEl=r,"close";if(r.getAttribute("data-drawer-toggle")===this.id)return this.__lastTriggerEl=r,"toggle";if(r.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=r,"toggle"}return null}__getFocusable(){const t=this.renderRoot;return Array.from(t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(o=>!o.hasAttribute("disabled")&&o.tabIndex>=0)}__setOpen(t){this.open=t}updated(t){if(t.has("open")){const o=t.get("open");this.__applyOpenSideEffects(o,this.open)}t.has("right")&&this.right&&this.left&&(this.left=!1),t.has("left")&&this.left&&this.right&&(this.right=!1)}__applyOpenSideEffects(t,o){this.floating&&this.overlay&&(o?(e.__showOverlay(this),this.lockScroll&&e.__lockScrollEnable()):(e.__hideOverlay(this),this.lockScroll&&e.__lockScrollDisable())),this.__updateTriggersExpanded(),o&&!t?(this.updateComplete.then(()=>{this.__getFocusable()[0]?.focus?.()}),this.dispatchEvent(new CustomEvent("scb-drawer-opened",{bubbles:!0,composed:!0}))):!o&&t&&(this.__lastTriggerEl?.focus?.(),this.dispatchEvent(new CustomEvent("scb-drawer-closed",{bubbles:!0,composed:!0})))}__updateTriggersExpanded(){if(!this.id)return;document.querySelectorAll(`[aria-controls="${this.id}"], [data-drawer-open="${this.id}"], [data-drawer-close="${this.id}"], [data-drawer-toggle="${this.id}"]`).forEach(o=>{o.hasAttribute("aria-controls")&&o.setAttribute("aria-expanded",String(this.open))})}};e.__overlayEl=null;e.__overlayStack=[];e.__lockedCount=0;e.__prevDocOverflow=null;e.__prevBodyOverflow=null;e.styles=u`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      padding: 12px;
+      background: var(--md-sys-color-surface-container-low);
+    }
+
+    /* Floating drawer */
+    :host([floating]) {
+      position: fixed;
+      top: 0;
+      height: 100vh;
+      width: clamp(280px, 70vw, 360px);
+      background: var(--md-sys-color-surface-container-low);
+      box-shadow: 2px 0 12px rgba(0,0,0,0.15);
+      z-index: var(--scb-drawer-z, 1000);
+      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    /* Vänsterläge (default) */
+    :host([floating][left]) { left: 0; transform: translateX(-100%); }
+    :host([floating][left][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    /* Högerläge */
+    :host([floating][right]) {
+      right: 0;
+      transform: translateX(100%);
+      box-shadow: -2px 0 12px rgba(0,0,0,0.15);
+    }
+    :host([floating][right][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .scb-drawer-label { font-size: 16px; font-weight: 600; line-height: 24px; }
+    .scb-drawer-sublabel { font-size: 14px; line-height: 20px; }
+    .scb-drawer-label-wrapper { padding: 12px; color: inherit; }
+    scb-divider { margin: 4px 12px; }
+  `;s([i({type:String})],e.prototype,"label",2);s([i({type:String,attribute:"sub-label"})],e.prototype,"subLabel",2);s([i({type:Boolean,reflect:!0})],e.prototype,"floating",2);s([i({type:Boolean,reflect:!0})],e.prototype,"left",2);s([i({type:Boolean,reflect:!0})],e.prototype,"right",2);s([i({type:Boolean,reflect:!0})],e.prototype,"open",2);s([i({type:Boolean,reflect:!0})],e.prototype,"overlay",2);s([i({type:Boolean,reflect:!0,attribute:"lock-scroll"})],e.prototype,"lockScroll",2);s([i({type:Boolean,reflect:!0,attribute:"close-on-overlay"})],e.prototype,"closeOnOverlay",2);s([i({type:Boolean,reflect:!0})],e.prototype,"modal",2);e=s([_("scb-drawer")],e);

package/mvc/components/scb-drawer/scb-sub-drawer.js

@@ -0,0 +1,10 @@
+import{b as i,n as b,i as d,x as p,t as u}from"../../vendor/vendor.js";var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(l,e,r,s)=>{for(var t=s>1?void 0:s?w(e,r):e,c=l.length-1,n;c>=0;c--)(n=l[c])&&(t=(s?n(e,r,t):n(t))||t);return s&&t&&v(e,r,t),t};let a=class extends d{constructor(){super(...arguments),this.label="",this._onGlobalSelect=l=>{const e=l;this.querySelectorAll("scb-drawer-item").forEach(s=>s.selected=!1),this.contains(e.detail.item)&&(e.detail.item.selected=!0)}}connectedCallback(){super.connectedCallback(),window.addEventListener("scb-drawer-select",this._onGlobalSelect)}disconnectedCallback(){window.removeEventListener("scb-drawer-select",this._onGlobalSelect),super.disconnectedCallback()}render(){return p`
+      <nav aria-label="${this.label}">
+        <slot></slot>
+      </nav>
+    `}};a.styles=i`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;o([b({type:String})],a.prototype,"label",2);a=o([u("scb-sub-drawer")],a);

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

@@ -0,0 +1,44 @@
+import{b as d,n as c,i as g,x as a,t as h}from"../../vendor/vendor.js";var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(l,e,s,n)=>{for(var t=n>1?void 0:n?y(e,s):e,o=l.length-1,p;o>=0;o--)(p=l[o])&&(t=(n?p(e,s,t):p(t))||t);return n&&t&&u(e,s,t),t};let i=class extends g{constructor(){super(...arguments),this.label="",this.subLabel="",this.supportingText=""}render(){return a`
+        ${this.label?a`
+        <div class="label">
+            ${this.label}
+        </div>`:""}
+        ${this.subLabel?a`<div class="sub-label">${this.subLabel}</div>`:""}
+        ${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
+        <slot @slotchange=${this.requestUpdate}></slot>
+        ${this._hasSlotContent()?a`<div class="content links"><slot></slot></div>`:""}
+        `}_hasSlotContent(){const l=this.shadowRoot&&this.shadowRoot.querySelector("slot");if(!l)return!1;const e=l.assignedNodes({flatten:!0});return e.length>0&&e.some(s=>s.nodeType===Node.TEXT_NODE?s.textContent?.trim():!0)}};i.styles=d`
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-3);
+            width: 100%;
+        }
+        .label{
+            letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: var(--md-sys-typescale-headline-small-size);
+            font-weight: var(--weight-bold);
+            line-height: var(--md-sys-typescale-headline-small-line-height);
+            letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+        }
+        .sub-label {
+            font-size: var(--md-sys-typescale-title-medium-size);
+            font-weight: var(--weight-semibold);
+            line-height: var(--md-sys-typescale-title-medium-line-height);
+            letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+        }
+        .supporting-text {
+            font-size: var(--md-sys-typescale-body-large-size);
+            line-height: var(--md-sys-typescale-body-large-line-height);
+            letter-spacing: var(--md-sys-typescale-body-large-tracking);
+        }
+        .content.links ::slotted(*) {
+        margin-top: var(--spacing-3);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+    }
+    `;r([c({type:String})],i.prototype,"label",2);r([c({type:String,attribute:"sub-label"})],i.prototype,"subLabel",2);r([c({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);i=r([h("scb-fact-card-content")],i);

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

@@ -0,0 +1,66 @@
+import{b as l,n as s,i as u,x as d,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-icon-button/scb-icon-button.js";import"./scb-fact-card-content.js";import"../../vendor/preload-helper.js";var h=Object.defineProperty,v=Object.getOwnPropertyDescriptor,r=(i,a,c,e)=>{for(var o=e>1?void 0:e?v(a,c):a,n=i.length-1,p;n>=0;n--)(p=i[n])&&(o=(e?p(a,c,o):p(o))||o);return e&&o&&h(a,c,o),o};let t=class extends u{constructor(){super(...arguments),this.variant="filled",this.label="",this.subLabel="",this.supportingText="",this.icon="",this.showCloseButton=!0}render(){const i=this.variant==="outlined"?"outlined":"filled";return d`
+    ${this.icon?d`<div class="icon-wrapper ${i}"><md-icon>${this.icon}</md-icon></div>`:""}
+    <div class="scb-fact-card ${i} ${this.icon?"no-topleft-radius":""} ${this.showCloseButton?"has-close":""}">
+        ${this.showCloseButton?d`<scb-icon-button variant="standard" icon="close"></scb-icon-button>`:""}
+        <div class="content">
+            <slot></slot>
+        </div>
+    </div>
+    `}};t.styles=l`
+    :host{ --scb-card-min-w:  580px; }
+    :host {
+        max-width: var(--scb-card-min-w);
+        width: 100%;
+        display: block;
+        position: relative;
+    }
+    .scb-fact-card {
+        color: var(--md-sys-color-on-surface);
+        max-width: var(--scb-card-min-w);
+        position: relative;
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface-dim);
+        padding: var(--spacing-7);
+    }
+    .scb-fact-card.has-close {
+        padding-right: 80px;
+    }
+    .scb-fact-card.no-topleft-radius {
+        border-top-left-radius: 0 ;
+        margin-top: 40px;
+    }
+    .scb-fact-card.outlined {
+        border: 1px solid var(--md-sys-color-outline);
+        background: var(--md-sys-color-surface);
+    }
+    .icon-wrapper {
+        top: -40px;
+        position: absolute;
+        z-index: 1;
+        padding: 16px 24px;
+        padding-bottom: 0;
+        width: fit-content;
+        border-radius: 1000px 1000px 0 0 / 1000px 1000px 0 0; /* halvmåne upptill */
+        background: var(--md-sys-color-surface-dim);
+        line-height: 0;
+    }
+    .icon-wrapper.outlined {
+        border: 1px solid var(--md-sys-color-outline);
+        border-bottom: none;
+        background: var(--md-sys-color-surface);
+    }
+    scb-icon-button {
+        position: absolute;
+        right: 12px;
+        top: 12px;
+    }
+    .scb-fact-card.clickable {
+        cursor: pointer;
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-8);
+        width: 100%;
+    }
+  `;r([s({type:String})],t.prototype,"variant",2);r([s({type:String})],t.prototype,"label",2);r([s({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);r([s({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);r([s({type:String})],t.prototype,"icon",2);r([s({type:Boolean,attribute:"show-close-button"})],t.prototype,"showCloseButton",2);t=r([b("scb-fact-card")],t);

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

@@ -0,0 +1,3 @@
+import{b as c,n as f,i as u,x as a,t as v}from"../../vendor/vendor.js";var _=Object.defineProperty,b=Object.getOwnPropertyDescriptor,p=(i,t,o,r)=>{for(var e=r>1?void 0:r?b(t,o):t,n=i.length-1,l;n>=0;n--)(l=i[n])&&(e=(r?l(t,o,e):l(e))||e);return r&&e&&_(t,o,e),e};let s=class extends u{constructor(){super(...arguments),this.title=""}render(){return a`<slot></slot>`}};s.styles=c`
+    :host { display: none; }
+  `;p([f({type:String,reflect:!0})],s.prototype,"title",2);s=p([v("scb-footer-section")],s);

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

@@ -0,0 +1,205 @@
+import{b as E,n as y,i as H,x as v,t as L}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";var T=Object.defineProperty,P=Object.getOwnPropertyDescriptor,O=t=>{throw TypeError(t)},x=(t,e,i,a)=>{for(var r=a>1?void 0:a?P(e,i):e,c=t.length-1,m;c>=0;c--)(m=t[c])&&(r=(a?m(e,i,r):m(r))||r);return a&&r&&T(e,i,r),r},w=(t,e,i)=>e.has(t)||O("Cannot "+i),l=(t,e,i)=>(w(t,e,"read from private field"),i?i.call(t):e.get(t)),d=(t,e,i)=>e.has(t)?O("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),o=(t,e,i,a)=>(w(t,e,"write to private field"),e.set(t,i),i),n=(t,e,i)=>(w(t,e,"access private method"),i),p,f,h,u,s,M,C,N,k,_,W,B,S;let g=class extends H{constructor(){super(...arguments),d(this,s),this.maxWidth="1440px",this.sections=[],this.description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.",d(this,p,null),d(this,f,""),d(this,h),d(this,u,!1),d(this,_,8)}connectedCallback(){super.connectedCallback(),n(this,s,k).call(this,!0),n(this,s,M).call(this)}disconnectedCallback(){super.disconnectedCallback(),l(this,h)?.disconnect()}render(){const t=l(this,s,N);return v`
+      <footer class="outer" role="contentinfo" style=${`--scb-footer-max-width:${this.maxWidth}`}>
+        <nav aria-label="Sidfot med länkar">
+          <scb-grid
+            .colsCompact=${4}
+            .colsMedium=${8}
+            .colsExpanded=${8}
+            padding-block="0"
+            .maxWidth=${this.maxWidth}
+          >
+            ${n(this,s,W).call(this,t)}
+          </scb-grid>
+        </nav>
+
+        <div class="brand">
+          <div class="brand-inner">
+            <svg class="logo" viewBox="0 0 48 54" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+              <g clip-path="url(#clip0_4974_83818)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M25.6527 6.07812C25.6527 5.15909 24.9076 4.41482 23.9877 4.41482C23.0677 4.41482 22.3226 5.15909 22.3226 6.07812V48.0391C22.3226 48.9601 23.0677 49.7061 23.9877 49.7061C24.9076 49.7061 25.6527 48.9601 25.6527 48.0391V32.9153C25.6527 32.8056 25.744 32.7163 25.8527 32.7163H31.3245C31.4342 32.7163 31.5245 32.8056 31.5245 32.9153V48.1711C31.5245 51.3899 28.1496 54 23.9877 54C19.8241 54 16.4501 51.3899 16.4501 48.1711V5.82708C16.4501 2.6103 19.8241 0 23.9877 0C28.1496 0 31.5245 2.6103 31.5245 5.82708V20.8893C31.5245 21.0009 31.4342 21.0883 31.3245 21.0883H25.8527C25.744 21.0883 25.6527 21.0009 25.6527 20.8893V6.07812Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.198901 10.8446C-0.152687 13.293 -0.0290117 17.3078 0.49751 19.5627C1.07611 22.0203 4.41288 26.9878 5.91609 29.2948C7.42127 31.5999 9.42869 34.0073 9.39892 37.2185V44.9097C9.39892 45.8287 8.65375 46.5748 7.73382 46.5748C6.81659 46.5748 6.0715 45.8287 6.0715 44.9097V33.1217C6.0715 33.012 5.9803 32.9208 5.86868 32.9208H0.39893C0.287311 32.9208 0.198901 33.012 0.198901 33.1217V45.2613C0.198901 48.4798 3.57282 51.0901 7.73382 51.0901C11.8975 51.0901 15.2714 48.4798 15.2714 45.2613V37.2185C15.2463 31.7023 13.7412 30.8985 11.7877 27.5906C10.3886 25.2148 6.94682 20.3143 6.37003 17.8566C5.8417 15.6018 5.86491 12.9916 6.0715 10.6194C6.0715 9.70039 6.81659 8.95432 7.73382 8.95432C8.65375 8.95432 9.39892 9.70039 9.39892 10.6194V21.1032C9.39892 21.2129 9.48913 21.3022 9.60166 21.3022H15.0706C15.183 21.3022 15.2714 21.2129 15.2714 21.1032V10.8446C15.2714 7.62408 11.8975 5.01575 7.73382 5.01575C3.57282 5.01575 0.198901 7.62408 0.198901 10.8446Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.8911 5.46411H41.2883C44.7561 5.46411 47.5674 8.27534 47.5674 11.7414V20.547C47.5674 23.0158 45.9488 25.0995 43.7161 25.8139V25.933C45.9488 26.6456 47.5674 28.7312 47.5674 31.2018V44.6438C47.5674 47.6988 45.0873 50.1768 42.0344 50.1768L32.8911 50.1823C32.7786 50.1823 32.6892 50.0911 32.6892 49.9832V5.66324C32.6892 5.55539 32.7786 5.46411 32.8911 5.46411ZM38.7636 9.83067C38.6502 9.83067 38.5608 9.92179 38.5608 10.0316V23.9255C38.5608 24.039 38.6502 24.1284 38.7636 24.1284H39.5898C40.6948 24.1284 41.5916 23.2297 41.5916 22.1246V11.8343C41.5916 10.7293 40.6948 9.83067 39.5898 9.83067H38.7636ZM38.7636 28.5432C38.6502 28.5432 38.5608 28.6325 38.5608 28.7423V45.7971C38.5608 45.9088 38.6502 46 38.7636 46H39.7514C40.8584 46 41.7534 45.1014 41.7534 43.9962V30.5469C41.7534 29.4381 40.8584 28.5432 39.7514 28.5432H38.7636Z" fill="white"/>
+              </g>
+              <defs><clipPath id="clip0_4974_83818"><rect width="48" height="54" fill="white"/></clipPath></defs>
+            </svg>
+
+            <p class="desc">${this.description}</p>
+          </div>
+        </div>
+      </footer>
+    `}};p=new WeakMap;f=new WeakMap;h=new WeakMap;u=new WeakMap;s=new WeakSet;M=function(){l(this,h)?.disconnect(),o(this,h,new MutationObserver(t=>{for(const e of t){if(e.type==="childList"){const i=[...e.addedNodes].some(r=>r.tagName==="SCB-FOOTER-SECTION"||r.tagName==="SCB-LINK"),a=[...e.removedNodes].some(r=>r.tagName==="SCB-FOOTER-SECTION"||r.tagName==="SCB-LINK");if(i||a){n(this,s,C).call(this);return}}if(e.type==="attributes"&&(e.target.tagName==="SCB-FOOTER-SECTION"||e.target.tagName==="SCB-LINK")){n(this,s,C).call(this);return}}})),l(this,h).observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["title","href","target"]})};C=function(){l(this,u)||(o(this,u,!0),queueMicrotask(()=>{o(this,u,!1),n(this,s,k).call(this,!1)}))};N=function(){return l(this,p)??this.sections??[]};k=function(t=!1){const e=Array.from(this.querySelectorAll("scb-footer-section"));if(!e.length){l(this,p)!==null&&(o(this,p,null),o(this,f,""),t||this.requestUpdate());return}const i=e.map(r=>{const c=(r.getAttribute("title")||"").trim(),m=Array.from(r.querySelectorAll("scb-link")).map(b=>{const A=(b.getAttribute("href")||"").trim(),$=b.getAttribute("target"),V={label:(b.textContent||"").trim(),href:A};return $&&(V.target=$),V});return{title:c,links:m}}),a=JSON.stringify(i);a!==l(this,f)&&(o(this,f,a),o(this,p,i),t||this.requestUpdate())};_=new WeakMap;W=function(t){const e=[],a=t.length;if(a>0&&a<4)return e.push(v`
+        <scb-grid-item
+          col-span-compact="4"
+          col-span-medium="8"
+          col-span-expanded="${l(this,_)}"
+        >
+          <div class="center-row">
+            ${t.map((r,c)=>n(this,s,S).call(this,r,c,!0))}
+          </div>
+        </scb-grid-item>
+      `),e;for(let r=0;r<a;r++)e.push(n(this,s,B).call(this,t[r],r));return e};B=function(t,e){return v`
+      <scb-grid-item
+        col-span-compact="4"
+        col-span-medium="4"
+        col-span-expanded="2"
+      >
+        ${n(this,s,S).call(this,t,e,!1)}
+      </scb-grid-item>
+    `};S=function(t,e,i){return v`
+      <section class="group ${i?"group--centered":""}" aria-labelledby=${`scb-footer-sec-${e}`}>
+        <h3 id=${`scb-footer-sec-${e}`} class="title">${t.title}</h3>
+        <ul>
+          ${t.links.map(a=>v`
+            <li>
+              <scb-link .href=${a.href} .target=${a.target??void 0}>${a.label}</scb-link>
+            </li>
+          `)}
+        </ul>
+      </section>
+    `};g.styles=E`
+    :host {
+      display: block;
+      color: var(--p-100);
+      background: var(--scb-footer-bg, var(--p-20));
+    }
+
+    /* Yttre behållare */
+    .outer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--spacing-10, 48px) 0 var(--spacing-5, 16px);
+      gap: var(--spacing-4, 12px);
+      align-self: stretch;
+    }
+
+    nav { width: 100%; }
+
+    /* Grid */
+    scb-grid {
+      --scb-grid-padding-inline: var(--spacing-8, 32px);
+      --scb-grid-row-gap: var(--spacing-9, 40px);
+      --scb-grid-column-gap: var(--spacing-9, 40px);
+      --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); }
+    }
+    @media (min-width: 840px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+
+    /* Kolumn (grupp) */
+    .group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-7, 24px);
+      min-width: 248px;
+      flex: 1 0 0;
+      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;
+        min-width: 248px;
+        max-width: 420px;
+      }
+    }
+
+    /* Radbehållare för centrerat läge (desktop) */
+    @media (min-width: 840px) {
+      .center-row {
+        display: flex;
+        align-items: start;
+        justify-content: center;
+        gap: var(--spacing-9, 40px);
+        width: 100%;
+      }
+    }
+
+    /* 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); }
+    }
+    @media (min-width: 600px) and (max-width: 839px) {
+      scb-grid-item:nth-child(n+3) .group { margin-top: var(--spacing-7, 24px); }
+    }
+
+    /* Rubrik (Title/Medium) */
+    .title {
+      margin: 0;
+      color: var(--p-100);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      line-height: var(--md-sys-typescale-title-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+      font-weight: var(--weight-semibold);
+      align-self: stretch;
+    }
+
+    /* Länklista */
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-5, 16px);
+    }
+
+    /* Länkar i fot */
+    scb-link {
+      --scb-link-color: var(--p-100);
+      --scb-link-visited-color: var(--p-100);
+    }
+    scb-link::part(anchor) {
+      font-family: var(--brand-font);
+      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, -0.15px);
+    }
+
+    /* Brand-block */
+    .brand {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-self: stretch;
+      padding: var(--spacing-9, 40px) var(--spacing-8, 32px);
+      gap: var(--spacing-5, 16px);
+    }
+    .brand-inner {
+      width: 100%;
+      max-width: var(--scb-footer-max-width, 1440px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      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. */
+    .desc {
+      margin: 0;
+      text-align: center;
+      opacity: .9;
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-small-size);
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+      color: var(--p-100);
+      width: min(100%, 312px);
+      overflow-wrap: anywhere;
+    }
+    @media (min-width: 600px) { .desc { width: min(100%, 376px); } }
+
+    .spacer { display: none; }
+    @media (min-width: 840px) { .spacer { display: block; } }
+  `;x([y({type:String,attribute:"max-width",reflect:!0,converter:{fromAttribute:t=>{if(t==null)return"1440px";const e=t.trim();return e===""?"1440px":/^\d+$/.test(e)?`${e}px`:e}}})],g.prototype,"maxWidth",2);x([y({type:Array})],g.prototype,"sections",2);x([y({type:String})],g.prototype,"description",2);g=x([L("scb-footer")],g);

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

@@ -0,0 +1,9 @@
+import{b as f,n as o,i as m,x as b,t as g}from"../../vendor/vendor.js";var v=Object.defineProperty,S=Object.getOwnPropertyDescriptor,y=e=>{throw TypeError(e)},a=(e,t,i,c)=>{for(var l=c>1?void 0:c?S(t,i):t,h=e.length-1,u;h>=0;h--)(u=e[h])&&(l=(c?u(t,i,l):u(l))||l);return c&&l&&v(t,i,l),l},_=(e,t,i)=>t.has(e)||y("Cannot "+i),x=(e,t,i)=>t.has(e)?y("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),p=(e,t,i)=>(_(e,t,"access private method"),i),r,d,n;let s=class extends m{constructor(){super(...arguments),x(this,r),this.fit=!1}firstUpdated(){p(this,r,d).call(this)}updated(){p(this,r,d).call(this)}render(){return b`<slot></slot>`}};r=new WeakSet;d=function(){p(this,r,n).call(this,"--col-span",this.hasAttribute("col-span")?String(this.colSpan):null),p(this,r,n).call(this,"--col-span-compact",this.hasAttribute("col-span-compact")?String(this.colSpanCompact):null),p(this,r,n).call(this,"--col-span-medium",this.hasAttribute("col-span-medium")?String(this.colSpanMedium):null),p(this,r,n).call(this,"--col-span-expanded",this.hasAttribute("col-span-expanded")?String(this.colSpanExpanded):null),this.align?this.style.setProperty("--scb-grid-item-align",this.align):this.style.removeProperty("--scb-grid-item-align"),this.justify?this.style.setProperty("--scb-grid-item-justify",this.justify):this.style.removeProperty("--scb-grid-item-justify")};n=function(e,t){t===null||t===""?this.style.removeProperty(e):this.style.setProperty(e,t)};s.styles=f`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      align-self:  var(--scb-grid-item-align, auto);
+      justify-self: var(--scb-grid-item-justify, auto);
+    }
+    :host([fit]) { width: fit-content; max-width: 100%; }
+  `;a([o({type:Number,attribute:"col-span",reflect:!0})],s.prototype,"colSpan",2);a([o({type:Number,attribute:"col-span-compact",reflect:!0})],s.prototype,"colSpanCompact",2);a([o({type:Number,attribute:"col-span-medium",reflect:!0})],s.prototype,"colSpanMedium",2);a([o({type:Number,attribute:"col-span-expanded",reflect:!0})],s.prototype,"colSpanExpanded",2);a([o({type:String,reflect:!0})],s.prototype,"align",2);a([o({type:String,reflect:!0})],s.prototype,"justify",2);a([o({type:Boolean,reflect:!0})],s.prototype,"fit",2);s=a([g("scb-grid-item")],s);