scb-wc-test 0.1.1

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

@@ -0,0 +1,81 @@
+import{b as h,n as a,i as v,x as b,t as y}from"../../vendor/vendor.js";var x=Object.defineProperty,f=Object.getOwnPropertyDescriptor,u=i=>{throw TypeError(i)},s=(i,t,e,n)=>{for(var c=n>1?void 0:n?f(t,e):t,l=i.length-1,m;l>=0;l--)(m=i[l])&&(c=(n?m(t,e,c):m(c))||c);return n&&c&&x(t,e,c),c},w=(i,t,e)=>t.has(i)||u("Cannot "+e),_=(i,t,e)=>t.has(i)?u("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(i):t.set(i,e),o=(i,t,e)=>(w(i,t,"access private method"),e),d,g,p;let r=class extends v{constructor(){super(...arguments),_(this,d),this.colsCompact=4,this.colsMedium=8,this.colsExpanded=12,this.gap="",this.rowGap="",this.columnGap="",this.alignItems="stretch",this.justifyItems="stretch",this.paddingInline="",this.paddingBlock="",this.maxWidth=""}firstUpdated(){o(this,d,g).call(this)}updated(){o(this,d,g).call(this)}render(){return b`<div class="grid"><slot></slot></div>`}};d=new WeakSet;g=function(){this.style.setProperty("--scb-grid-cols-compact",String(this.colsCompact)),this.style.setProperty("--scb-grid-cols-medium",String(this.colsMedium)),this.style.setProperty("--scb-grid-cols-expanded",String(this.colsExpanded));const i="var(--spacing-7, 24px)",t=this.rowGap||this.gap||i,e=this.columnGap||this.gap||i;this.style.setProperty("--scb-grid-row-gap",t),this.style.setProperty("--scb-grid-column-gap",e),this.style.setProperty("--scb-grid-gap",`${t} ${e}`),this.style.setProperty("--scb-grid-align-items",this.alignItems),this.style.setProperty("--scb-grid-justify-items",this.justifyItems),o(this,d,p).call(this,"--scb-grid-max-width",this.maxWidth),o(this,d,p).call(this,"--scb-grid-padding-inline",this.paddingInline),o(this,d,p).call(this,"--scb-grid-padding-block",this.paddingBlock)};p=function(i,t){t?this.style.setProperty(i,t):this.style.removeProperty(i)};r.styles=h`
+  :host {
+    box-sizing: border-box;
+    display: block;
+    max-width: var(--scb-grid-max-width, 1440px);
+    margin-inline: auto;
+    padding-inline: var(--scb-grid-padding-inline, 0);
+    padding-block:  var(--scb-grid-padding-block, 0);
+
+    container-type: inline-size;
+  }
+
+  .grid {
+    display: grid;
+    width: 100%;
+    gap: var(--scb-grid-gap, var(--spacing-7, 24px));
+    grid-auto-flow: row dense;
+    grid-auto-rows: var(--scb-grid-auto-rows, auto);
+    align-items:   var(--scb-grid-align-items, stretch);
+    justify-items: var(--scb-grid-justify-items, stretch);
+
+    /* Compact baseline */
+    grid-template-columns: repeat(var(--scb-grid-cols-compact, 4), minmax(0, 1fr));
+  }
+
+  .grid > slot { display: contents; }
+
+  .grid ::slotted(*) {
+    grid-column: span var(--col-span-compact, var(--col-span, var(--scb-grid-cols-compact, 4)));
+    grid-column: span min(
+      max(1, var(--col-span-compact, var(--col-span, var(--scb-grid-cols-compact, 4)))) ,
+      var(--scb-grid-cols-compact, 4)
+    );
+  }
+
+   @supports not (container-type: inline-size) {
+    @media (min-width: 600px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        grid-column: span var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)));
+        grid-column: span min(
+          max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
+          var(--scb-grid-cols-medium, 8)
+        );
+      }
+    }
+    @media (min-width: 840px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        grid-column: span var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)));
+        grid-column: span min(
+          max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
+          var(--scb-grid-cols-expanded, 12)
+        );
+      }
+    }
+  }
+
+  @supports (container-type: inline-size) {
+    @container (min-width: 600px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        grid-column: span var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)));
+        grid-column: span min(
+          max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
+          var(--scb-grid-cols-medium, 8)
+        );
+      }
+    }
+    @container (min-width: 840px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        grid-column: span var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)));
+        grid-column: span min(
+          max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
+          var(--scb-grid-cols-expanded, 12)
+        );
+      }
+    }
+  }
+`;s([a({type:Number,attribute:"cols-compact",reflect:!0})],r.prototype,"colsCompact",2);s([a({type:Number,attribute:"cols-medium",reflect:!0})],r.prototype,"colsMedium",2);s([a({type:Number,attribute:"cols-expanded",reflect:!0})],r.prototype,"colsExpanded",2);s([a({type:String,reflect:!0})],r.prototype,"gap",2);s([a({type:String,attribute:"row-gap",reflect:!0})],r.prototype,"rowGap",2);s([a({type:String,attribute:"column-gap",reflect:!0})],r.prototype,"columnGap",2);s([a({type:String,attribute:"align-items",reflect:!0})],r.prototype,"alignItems",2);s([a({type:String,attribute:"justify-items",reflect:!0})],r.prototype,"justifyItems",2);s([a({type:String,attribute:"padding-inline",reflect:!0})],r.prototype,"paddingInline",2);s([a({type:String,attribute:"padding-block",reflect:!0})],r.prototype,"paddingBlock",2);s([a({type:String,attribute:"max-width",reflect:!0})],r.prototype,"maxWidth",2);r=s([y("scb-grid")],r);

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

@@ -0,0 +1,16 @@
+import{b as d,n as c,i as u,x as v,t as b}from"../../vendor/vendor.js";var g=Object.defineProperty,w=Object.getOwnPropertyDescriptor,f=e=>{throw TypeError(e)},i=(e,t,s,n)=>{for(var a=n>1?void 0:n?w(t,s):t,o=e.length-1,l;o>=0;o--)(l=e[o])&&(a=(n?l(t,s,a):l(a))||a);return n&&a&&g(t,s,a),a},x=(e,t,s)=>t.has(e)||f("Cannot "+s),_=(e,t,s)=>t.has(e)?f("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),y=(e,t,s)=>(x(e,t,"access private method"),s),p,h;let r=class extends u{constructor(){super(...arguments),_(this,p),this.direction="column",this.gap="",this.align="stretch",this.justify="start",this.wrap=!1,this.inline=!1}firstUpdated(){y(this,p,h).call(this)}updated(){y(this,p,h).call(this)}render(){return v`<slot></slot>`}};p=new WeakSet;h=function(){this.style.setProperty("--scb-stack-direction",this.direction),this.style.setProperty("--scb-stack-gap",this.gap||"var(--spacing-5, 16px)");const e={start:"flex-start",center:"center",end:"flex-end",stretch:"stretch",baseline:"baseline"},t={start:"flex-start",center:"center",end:"flex-end",between:"space-between",around:"space-around",evenly:"space-evenly"};this.style.setProperty("--scb-stack-align",e[this.align]??"stretch"),this.style.setProperty("--scb-stack-justify",t[this.justify]??"flex-start"),this.style.setProperty("--scb-stack-wrap",this.wrap?"wrap":"nowrap")};r.styles=d`
+    :host {
+      box-sizing: border-box;
+      display: var(--scb-stack-display, flex);
+      flex-direction: var(--scb-stack-direction, column);
+      gap: var(--scb-stack-gap, var(--spacing-5, 16px));
+      align-items: var(--scb-stack-align, stretch);
+      justify-content: var(--scb-stack-justify, flex-start);
+      flex-wrap: var(--scb-stack-wrap, nowrap);
+      width: auto;
+      max-width: 100%;
+    }
+    :host([inline]) {
+      --scb-stack-display: inline-flex;
+    }
+  `;i([c({type:String,reflect:!0})],r.prototype,"direction",2);i([c({type:String,reflect:!0})],r.prototype,"gap",2);i([c({type:String,reflect:!0})],r.prototype,"align",2);i([c({type:String,reflect:!0})],r.prototype,"justify",2);i([c({type:Boolean,reflect:!0})],r.prototype,"wrap",2);i([c({type:Boolean,reflect:!0})],r.prototype,"inline",2);r=i([b("scb-stack")],r);

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

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

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

@@ -0,0 +1 @@
+import{b as c,n as i,i as f,x as y,t as b}from"../../vendor/vendor.js";var h=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(l,t,p,s)=>{for(var e=s>1?void 0:s?m(t,p):t,n=l.length-1,a;n>=0;n--)(a=l[n])&&(e=(s?a(t,p,e):a(e))||e);return s&&e&&h(t,p,e),e};let r=class extends f{constructor(){super(...arguments),this.label="",this.href="#"}render(){return y`<slot></slot>`}};r.styles=c`:host{display:none !important}`;o([i({type:String})],r.prototype,"label",2);o([i({type:String})],r.prototype,"href",2);o([i({type:String})],r.prototype,"icon",2);r=o([b("scb-header-drawer-item")],r);

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

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

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

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

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

@@ -0,0 +1,240 @@
+import{b as f,n,r as c,i as x,x as d,E as h,t as C}from"../../vendor/vendor.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.js";import"../scb-link/scb-link.js";import"../scb-search/scb-search.js";import"../scb-tabs/scb-tabs.js";import"../scb-tabs/scb-secondary-tab.js";import"../scb-drawer/scb-drawer.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";import"../../vendor/vendor-material.js";import"../scb-tabs/scb-primary-tab.js";import"../scb-divider/scb-divider.js";import"../scb-drawer/scb-drawer-item.js";import"../scb-drawer/scb-drawer-section.js";import"../scb-drawer/scb-sub-drawer.js";var S=Object.defineProperty,M=Object.getOwnPropertyDescriptor,i=(e,t,s,a)=>{for(var l=a>1?void 0:a?M(t,s):t,p=e.length-1,o;p>=0;p--)(o=e[p])&&(l=(a?o(t,s,l):o(l))||l);return a&&l&&S(t,s,l),l};const y={fromAttribute:e=>e==null?!0:!/^(false|0|off|no)$/i.test(e),toAttribute:e=>String(!!e)};let r=class extends x{constructor(){super(...arguments),this.maxWidth="1440px",this.logoText="Statistikmyndigheten",this.logoHref="/",this.banner=!1,this.tabs=[],this.activeTab=0,this.utilityItems=[],this.showDrawer=!0,this.showSearch=!0,this.includeUtilityInDrawer=!1,this._drawerId="main-drawer",this._paddingInline="32px",this._drawerMounted=!1,this._drawerExpanded=!1,this._searchId="header-search",this._slotTabs=[],this._slotUtils=[],this._slotMenu=[],this._measureScheduled=!1,this._scheduleMeasure=()=>{this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))},this._onWindowResize=()=>{this._updatePadding(),this._scheduleMeasure()},this._onDrawerSelect=e=>{this.dispatchEvent(new CustomEvent("drawer-select",{detail:e.detail,bubbles:!0,composed:!0})),this._closeDrawerNow()},this._collapsed=!1,this._unlockAtWidth=0,this._hideLogoText=!1,this._logoTextUnlockAt=0,this._harvestPending=!1,this._harvest=()=>{const e=this._slotEl;if(!e)return;const t=e.assignedElements({flatten:!0}),s=[],a=[],l=[],p=o=>({label:o.getAttribute("label")??"",href:o.getAttribute("href")??void 0,icon:o.getAttribute("icon")??void 0});for(const o of t){const u=o.tagName.toLowerCase();if(u==="scb-header-tab"){s.push({label:o.getAttribute("label")??"",href:o.getAttribute("href")??"#"});continue}if(u==="scb-header-utility"){a.push({label:o.getAttribute("label")??"",href:o.getAttribute("href")??"#",target:o.getAttribute("target")??void 0});continue}if(u==="scb-header-drawer-group"){const b={label:o.getAttribute("label")??"",icon:o.getAttribute("icon")??void 0,children:[]};o.querySelectorAll("scb-header-drawer-item").forEach(m=>b.children.push(p(m))),l.push(b);continue}u==="scb-header-drawer-item"&&l.push(p(o))}this._slotTabs=s,this._slotUtils=a,this._slotMenu=l,queueMicrotask(()=>{this.updateComplete.then(()=>{this._applyActiveToTabs(),this._scheduleMeasure()})})},this._measure=()=>{const e=this._top,t=this._logoGroup;if(!e||!t)return;const s=window.innerWidth,a=e.clientWidth,l=this._overflows(this._util),p=this._overflows(this._tabsEl),o=s<this.BP_MD||l||p;this._collapsed?!o&&a>=this._unlockAtWidth&&this._setCollapsed(!1):o&&(this._unlockAtWidth=a+this._HYST,this._setCollapsed(!0));let u=!1;if(this.showSearch&&s>=this.BP_SM&&s<this.BP_MD&&this._searchWrap){const m=getComputedStyle(this._searchWrap),_=Math.max(this._num(m.minWidth,this._tokenPx("--scb-header-search-min",320)),this._tokenPx("--scb-header-search-min",320)),g=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),v=this.showDrawer&&(s<this.BP_MD||this._collapsed)?this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48):0;u=t.getBoundingClientRect().width+g+_+g+v+8>a+.5}this._setHideSearch(u);let b=!1;if(this.showDrawer&&(s<this.BP_MD||this._collapsed)&&!this._visible(this._util)&&!this._visible(this._searchWrap)){const m=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),_=this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48),g=(this._logoGroup?.getBoundingClientRect().width||0)+m+_;this._hideLogoText?b=!(a>=this._logoTextUnlockAt):g>a+.5&&(b=!0,this._logoTextUnlockAt=a+this._HYST)}else b=!1,this._logoTextUnlockAt=0;this._setHideLogoText(b)},this._updatePadding=()=>{const e=window.innerWidth||0;e<=360?this._paddingInline="16px":e<this.BP_SM?this._paddingInline="24px":this._paddingInline="32px"},this._onMenuClick=async e=>{e.preventDefault(),e.stopPropagation(),this.showDrawer&&(this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0})),await this._ensureDrawerMounted(),await r._nextFrame(),await r._nextFrame(),this._openDrawerNow())},this._onSearchClick=e=>{const t=this._searchEl;if(t?.submit&&typeof t.submit=="function"){t.submit();return}const s=t?.value??void 0;this.dispatchEvent(new CustomEvent("search-click",{detail:{value:s},bubbles:!0,composed:!0})),t?.focus?.()},this._onTabsChange=e=>{const s=e?.detail?.activeTabIndex??e.target?.activeTabIndex??0;this.activeTab=s;const l=(this._slotTabs.length?this._slotTabs:this.tabs)[s]?.href??"";this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:s,href:l},bubbles:!0,composed:!0}))}}get _HYST(){return this._tokenPx("--spacing-11",64)}get BP_SM(){return this._tokenPx("--bp-sm",r.BP_SM_DEFAULT)}get BP_MD(){return this._tokenPx("--bp-md",r.BP_MD_DEFAULT)}_scheduleHarvest(){this._harvestPending||(this._harvestPending=!0,queueMicrotask(()=>{this._harvestPending=!1,this._harvest()}))}get _slotEl(){return this.shadowRoot?.querySelector("slot#data-slot")??null}get _top(){return this.renderRoot.querySelector(".top-row")}get _util(){return this.renderRoot.querySelector(".utility")}get _tabsEl(){return this.renderRoot.querySelector("scb-tabs")}get _logoGroup(){return this.renderRoot.querySelector(".logo-group")}get _searchWrap(){return this.renderRoot.querySelector(".search")}get _menuBtn(){return this.renderRoot.querySelector(".menu-trigger")}get _searchEl(){return this.renderRoot.querySelector(`#${this._searchId}`)}_attachSlotObservers(){this._slotMo?.disconnect();const e=new MutationObserver(t=>{this._scheduleHarvest()});this._slotMo=e,e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["label","href","icon","target"]})}_setCollapsed(e){this._collapsed!==e&&(this._collapsed=e,e?this.setAttribute("data-collapsed",""):this.removeAttribute("data-collapsed"))}_setHideSearch(e){e?this.setAttribute("data-hide-search",""):this.removeAttribute("data-hide-search")}_setHideLogoText(e){this._hideLogoText!==e&&(this._hideLogoText=e,e?this.setAttribute("data-hide-logo-text",""):this.removeAttribute("data-hide-logo-text"))}_num(e,t){const s=Number.parseFloat(String(e??"").trim());return Number.isFinite(s)?s:t}_tokenPx(e,t){const s=getComputedStyle(this);return this._num(s.getPropertyValue(e),t)}_visible(e){return e?getComputedStyle(e).display!=="none":!1}_overflows(e){return!e||!this._visible(e)?!1:e.scrollWidth>e.clientWidth+1}firstUpdated(){this._updatePadding(),this.updateComplete.then(()=>{this._harvest(),this._attachSlotObservers()});const e=this._top;e&&(this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(e)),window.addEventListener("resize",this._onWindowResize,{passive:!0});const t=this._menuBtn,s=()=>this._ensureDrawerMounted();t?.addEventListener("pointerenter",s,{once:!0}),t?.addEventListener("focusin",s,{once:!0}),t?.addEventListener("touchstart",s,{once:!0,passive:!0})}updated(e){e.has("searchMax")&&this.style.setProperty("--scb-header-search-max",this.searchMax??"480px"),e.has("searchMin")&&this.style.setProperty("--scb-header-search-min",this.searchMin??"320px"),(e.has("utilityItems")||e.has("tabs")||e.has("logoText")||e.has("activeTab")||e.has("_slotTabs")||e.has("_slotUtils")||e.has("_slotMenu")||e.has("showDrawer")||e.has("showSearch")||e.has("searchMax")||e.has("searchMin"))&&this.updateComplete.then(()=>{this._scheduleMeasure(),this._applyActiveToTabs()})}disconnectedCallback(){this._ro?.disconnect(),this._slotMo?.disconnect(),window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}async _ensureDrawerMounted(){this._drawerMounted||(this._drawerMounted=!0,await this.updateComplete)}_openDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!0,e.setAttribute("open",""),e.show?.(),e.openDrawer?.(),this._drawerExpanded=!0,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-open",{bubbles:!0,composed:!0})))}_closeDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!1),this._drawerExpanded=!1,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-close",{bubbles:!0,composed:!0}))}_syncMenuBtnAria(){const e=this.renderRoot.querySelector(".menu-trigger");e&&e.setAttribute("aria-expanded",String(this._drawerExpanded))}_applyActiveToTabs(){const e=this._tabsEl;if(!e)return;e.activeTabIndex=this.activeTab,e.querySelectorAll("scb-secondary-tab").forEach((s,a)=>{s.selected=a===this.activeTab})}_renderDrawerNodes(e){return!e||e.length===0?d``:d`${e.map(t=>{const s=Array.isArray(t.children)&&t.children.length>0;return d`
+        <scb-drawer-item
+          label=${t.label}
+          ?selected=${!1}
+          leading-icon=${t.icon??""}
+          item-href=${t.href??""}
+        >
+          ${s?d`
+            <scb-sub-drawer label=${t.label}>
+              ${t.children.map(a=>d`
+                <scb-drawer-item
+                  label=${a.label}
+                  item-href=${a.href??""}
+                  leading-icon=${a.icon??""}
+                ></scb-drawer-item>
+              `)}
+            </scb-sub-drawer>
+          `:h}
+        </scb-drawer-item>
+      `})}`}_syncFlags(e,t){this.toggleAttribute("data-no-utility",e),this.toggleAttribute("data-no-search",t)}render(){const e=this._slotTabs.length?this._slotTabs:this.tabs,t=this._slotUtils.length?this._slotUtils:this.utilityItems,s=this._slotMenu.length?this._slotMenu:this.menuData??[];return this._syncFlags(t.length===0,!this.showSearch),d`
+      <!-- Slot för wrapper-barn (osynliga; fungerar som datakällor) -->
+      <slot id="data-slot" @slotchange=${()=>{this._harvest(),this._attachSlotObservers()}} hidden></slot>
+
+      <!-- Banner-landmark är opt-in och omsluter hela headerblocket -->
+      <div
+        class="header-landmark"
+        role=${this.banner?"banner":h}
+        aria-label=${this.banner&&this.bannerLabel?this.bannerLabel:h}
+      >
+        <scb-grid cols-compact="4" cols-medium="8" cols-expanded="12" padding-inline=${this._paddingInline} max-width=${this.maxWidth} gap="0">
+          <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+            <div class="top-row">
+              <a class="logo-group" href=${this.logoHref} aria-label="Gå till startsidan">
+                ${this._renderLogo()} <span class="logo-text">${this.logoText}</span>
+              </a>
+
+              <div class="actions">
+                <nav class="utility" aria-label="Funktionslänkar">
+                  ${t.map(a=>d`<scb-link .href=${a.href} .target=${a.target??void 0}>${a.label}</scb-link>`)}
+                </nav>
+
+                ${this.showSearch?d`
+                  <div class="search">
+                    <scb-search
+                      id=${this._searchId}
+                      size="compact"
+                      .supportingText=${this.searchPlaceholder??""}
+                    ></scb-search>
+                    <scb-button
+                      variant="filled-tonal"
+                      label="Sök"
+                      @click=${this._onSearchClick}
+                    ></scb-button>
+                  </div>
+                `:h}
+              </div>
+
+              ${this.showDrawer?d`
+                <scb-icon-button
+                  class="menu-trigger"
+                  aria-label="Meny"
+                  icon="menu"
+                  variant="outlined"
+                  aria-controls=${this._drawerMounted?this._drawerId:h}
+                  aria-haspopup="dialog"
+                  aria-expanded=${String(this._drawerExpanded)}
+                  data-drawer-toggle=${this._drawerId}
+                  title="Öppna meny"
+                  @click=${this._onMenuClick}
+                ></scb-icon-button>
+              `:h}
+            </div>
+          </scb-grid-item>
+
+          <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+            <div class="tabs-inset">
+              <scb-tabs aria-label="Huvudnavigering" .activeTabIndex=${this.activeTab} @change=${this._onTabsChange}>
+                ${e.map((a,l)=>d`<scb-secondary-tab ?selected=${l===this.activeTab}>${a.label}</scb-secondary-tab>`)}
+              </scb-tabs>
+            </div>
+            <div class="divider" role="presentation"></div>
+          </scb-grid-item>
+        </scb-grid>
+      </div>
+
+      ${this.showDrawer&&this._drawerMounted?d`
+        <scb-drawer
+          id=${this._drawerId}
+          .label=${this.drawerLabel??""}
+          .subLabel=${this.drawerSubLabel??""}
+          floating right overlay lock-scroll modal
+          @scb-drawer-select=${this._onDrawerSelect}
+        >
+          <div style="padding: var(--spacing-4, 12px);">
+            <scb-search size="compact" .supportingText=${this.drawerSearchPlaceholder??""}></scb-search>
+          </div>
+
+          ${this.drawerSectionLabel?d`<scb-drawer-section .label=${this.drawerSectionLabel}></scb-drawer-section>`:h}
+
+          ${this._renderDrawerNodes(s)}
+
+          ${this.includeUtilityInDrawer&&(t?.length??0)>0?d`
+            <scb-drawer-section label=''></scb-drawer-section>
+            ${t.map(a=>d`<scb-drawer-item label=${a.label} item-href=${a.href}></scb-drawer-item>`)}
+          `:h}
+        </scb-drawer>
+      `:h}
+    `}_renderLogo(){return d`
+      <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_scb_header)">
+          <path fill="currentColor" 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" />
+          <path fill="currentColor" 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" />
+          <path fill="currentColor" 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" />
+        </g>
+        <defs><clipPath id="clip0_scb_header"><rect width="48" height="54" fill="white" /></clipPath></defs>
+      </svg>
+    `}};r._JSON_ARRAY={fromAttribute:e=>{if(e==null||e==="")return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}},toAttribute:e=>e==null?null:JSON.stringify(e)};r.BP_SM_DEFAULT=600;r.BP_MD_DEFAULT=840;r.styles=f`
+    :host {
+      display:block;
+      background:var(--md-sys-color-surface,#fff);
+      color:var(--md-sys-color-on-surface,#1b1b1f);
+      --scb-header-search-max: 380px;
+      --scb-header-search-min: 250px;
+
+      /* Overridebara logo-mått (knutna till tokens) */
+      --scb-header-logo-w: var(--icon-size-large, 40px);
+      --scb-header-logo-h: calc(var(--scb-header-logo-w) * 1.125);
+    }
+
+    .top-row { display:flex; align-items:center; gap:var(--spacing-7,24px); padding-block:var(--spacing-7,24px); min-width:0; }
+    .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 svg { width:var(--scb-header-logo-w); height:var(--scb-header-logo-h); display:block; color:var(--md-sys-color-on-surface); }
+    .logo-text{
+      font-family: var(--brand-font, Inter), sans-serif;
+      font-size: var(--md-sys-typescale-body-medium-size, 1rem);
+      line-height: var(--md-sys-typescale-body-medium-line-height, 1.5rem);
+      font-weight: var(--weight-regular, 400);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.009375rem);
+      color: var(--md-sys-color-on-surface, var(--p-20));
+      white-space: nowrap;
+    }
+    @media (max-width:360px){ .logo-text{ margin-right: calc(var(--spacing-9, 40px) * -1); } }
+
+    .actions{ display:flex; align-items:center; gap:var(--spacing-7,24px); margin-left:auto; width:100%; justify-content:flex-end; min-width:0; }
+
+    .utility{ display:none; flex-wrap:nowrap; align-items:center; gap:var(--spacing-5,16px); min-width:0; }
+    .utility scb-link::part(anchor){
+      /* typografi och färg helt via tokens */
+      font-family: var(--md-sys-typescale-body-medium-font, var(--brand-font)), sans-serif;
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      color: var(--md-sys-color-primary);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      text-decoration-thickness: 2px;
+      white-space: nowrap;
+    }
+    @media (min-width:840px){ .utility{ display:flex; } }
+    :host([data-collapsed]) .utility{ display:none !important; }
+
+    .menu-trigger{ display:none; }
+    @media (max-width:839.98px){ .menu-trigger{ display:inline-flex; } }
+    :host([data-collapsed]) .menu-trigger{ display:inline-flex; }
+
+    .search{
+      display:none;
+      align-items:stretch;
+      gap: var(--spacing-3, 8px);
+      flex: 0 1 var(--scb-header-search-max);
+      max-width: var(--scb-header-search-max);
+      min-width: var(--scb-header-search-min);
+    }
+    
+    .search scb-search{ flex:1 1 auto; width:auto; }
+    .search scb-button{
+      flex:0 0 auto;
+      --scb-button-block-size: var(--scb-search-height);
+    }
+
+    scb-search{ width:100%; }
+    @media (min-width:600px){ .search{ display:flex; } }
+    @media (min-width:600px) and (max-width:839.98px){ :host([data-hide-search]) .search{ display:none !important; } }
+
+    :host([data-no-utility]) .actions{ gap:var(--spacing-5,16px); }
+    :host([data-no-utility]) .search{
+      flex: 1 1 var(--scb-header-search-max);
+      max-width: var(--scb-header-search-max);
+      min-width: var(--scb-header-search-min);
+    }
+
+    .tabs-inset{ display:inline-block; width:fit-content; max-width:100%; }
+    @media (max-width:839.98px){ .tabs-inset{ display:none; } }
+    scb-tabs, scb-tabs::part(divider){
+      --md-tabs-divider-color:transparent; --md-primary-tab-divider-color:transparent; --md-secondary-tab-divider-color:transparent;
+      border-bottom:0; box-shadow:none;
+    }
+    scb-tabs::part(divider){ display:none; height:0; }
+    scb-tabs{ margin-bottom:0; }
+    .divider{ border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant,#e0e0e0); }
+
+    scb-tabs{
+      --md-secondary-tab-active-indicator-color:var(--md-sys-color-primary);
+      --md-secondary-tab-active-indicator-height:3px;
+      --md-secondary-tab-label-text-color:var(--md-sys-color-on-surface);
+      --md-secondary-tab-active-label-text-color:var(--md-sys-color-primary);
+      --md-secondary-tab-text-color:var(--md-sys-color-on-surface);
+      --md-secondary-tab-active-text-color:var(--md-sys-color-primary);
+      --md-secondary-tab-hover-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-pressed-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-focus-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-active-hover-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-active-pressed-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-active-focus-label-text-color: var(--md-sys-color-primary);
+      --md-secondary-tab-state-layer-color: transparent;
+      --md-secondary-tab-active-state-layer-color: transparent;
+    }
+
+@media (prefers-color-scheme: dark) {
+  .tabs-inset scb-tabs {
+    --nv-20: transparent;
+    --md-primary-tab-container-color: transparent;
+    --md-secondary-tab-container-color: transparent;
+    background-color: transparent !important;
+  }
+  .tabs-inset scb-tabs::part(container),
+  .tabs-inset scb-tabs::part(base),
+  .tabs-inset scb-tabs::part(tabbar) {
+    background: transparent !important;
+  }
+}
+
+:host([data-hide-logo-text]) .logo-text {
+  display: none;
+}
+  `;r._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));i([n({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);i([n({type:String,attribute:"logo-text"})],r.prototype,"logoText",2);i([n({type:String,attribute:"logo-href"})],r.prototype,"logoHref",2);i([n({type:Boolean,reflect:!0})],r.prototype,"banner",2);i([n({type:String,attribute:"banner-label"})],r.prototype,"bannerLabel",2);i([n({attribute:"tabs",converter:r._JSON_ARRAY})],r.prototype,"tabs",2);i([n({type:Number,attribute:"active-tab"})],r.prototype,"activeTab",2);i([n({attribute:"utility-items",converter:r._JSON_ARRAY})],r.prototype,"utilityItems",2);i([n({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2);i([n({type:String,attribute:"drawer-label"})],r.prototype,"drawerLabel",2);i([n({type:String,attribute:"drawer-sub-label"})],r.prototype,"drawerSubLabel",2);i([n({type:String,attribute:"drawer-section-label"})],r.prototype,"drawerSectionLabel",2);i([n({type:String,attribute:"drawer-search-placeholder"})],r.prototype,"drawerSearchPlaceholder",2);i([n({attribute:"menu-data",converter:r._JSON_ARRAY})],r.prototype,"menuData",2);i([n({attribute:"show-drawer",reflect:!0,converter:y})],r.prototype,"showDrawer",2);i([n({attribute:"show-search",reflect:!0,converter:y})],r.prototype,"showSearch",2);i([n({attribute:"include-utility-in-drawer",reflect:!0,converter:y})],r.prototype,"includeUtilityInDrawer",2);i([n({type:String,attribute:"search-max"})],r.prototype,"searchMax",2);i([n({type:String,attribute:"search-min"})],r.prototype,"searchMin",2);i([c()],r.prototype,"_drawerId",2);i([c()],r.prototype,"_paddingInline",2);i([c()],r.prototype,"_drawerMounted",2);i([c()],r.prototype,"_drawerExpanded",2);i([c()],r.prototype,"_searchId",2);i([c()],r.prototype,"_slotTabs",2);i([c()],r.prototype,"_slotUtils",2);i([c()],r.prototype,"_slotMenu",2);i([c()],r.prototype,"_collapsed",2);i([c()],r.prototype,"_hideLogoText",2);r=i([C("scb-header")],r);

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

@@ -0,0 +1,95 @@
+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 d}from"../../vendor/preload-helper.js";import{b as h,n as s,i as b,x as i,t as m}from"../../vendor/vendor.js";var _=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(t,o,l,n)=>{for(var e=n>1?void 0:n?p(o,l):o,c=t.length-1,u;c>=0;c--)(u=t[c])&&(e=(n?u(o,l,e):u(e))||e);return n&&e&&_(o,l,e),e};let r=class extends b{constructor(){super(...arguments),this.ariaLabel="",this.variant="standard",this.icon="home",this.toggle=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.error=!1,this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__onChange=()=>{const t=this.__lastBtn;this.dispatchEvent(new CustomEvent("change",{detail:{selected:!!t?.selected},bubbles:!0,composed:!0}))}}__attachChangeListener(){const t=this.shadowRoot?.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button");t&&t!==this.__lastBtn&&(this.__lastBtn?.removeEventListener?.("change",this.__onChange),t.addEventListener("change",this.__onChange),this.__lastBtn=t)}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener()}updated(t){super.updated(t),t.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),t.has("variant")||t.has("icon")||t.has("toggle")?this.__ensureDepsLoaded().then(()=>queueMicrotask(()=>this.__attachChangeListener())):queueMicrotask(()=>this.__attachChangeListener())}disconnectedCallback(){super.disconnectedCallback(),this.__lastBtn?.removeEventListener?.("change",this.__onChange),this.__lastBtn=null}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await d(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await d(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await d(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break;default:await d(()=>import("../../vendor/vendor-material.js").then(t=>t.d),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await d(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}render(){const t=this.ariaLabel.trim()||this.icon,o=this.error?"error":void 0,l=i`
+      <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
+      <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
+    `,n=i`<md-icon aria-hidden="true">${this.icon}</md-icon>`;if(this.toggle){const e=this.selected||!1;switch(this.variant){case"filled":return i`
+            <md-filled-icon-button
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${e}"
+            >${l}</md-filled-icon-button>
+          `;case"outlined":return i`
+            <md-outlined-icon-button
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${e}"
+            >${l}</md-outlined-icon-button>
+          `;case"filled-tonal":return i`
+            <md-filled-tonal-icon-button
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${e}"
+            >${l}</md-filled-tonal-icon-button>
+          `;default:return i`
+            <md-icon-button
+              role="button"
+              toggle
+              variant=${o}
+              ?disabled=${this.disabled}
+              aria-label=${t}
+              aria-pressed="${e}"
+            >${l}</md-icon-button>
+          `}}switch(this.variant){case"filled":return i`
+          <md-filled-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${n}</md-filled-icon-button>
+        `;case"outlined":return i`
+          <md-outlined-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${n}</md-outlined-icon-button>
+        `;case"filled-tonal":return i`
+          <md-filled-tonal-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${n}</md-filled-tonal-icon-button>
+        `;default:return i`
+          <md-icon-button
+            variant=${o}
+            ?disabled=${this.disabled}
+            aria-label=${t}
+          >${n}</md-icon-button>
+        `}}};r.styles=h`
+    /*Error-styling på alla underliggande knappar*/
+    :host([error]) md-filled-icon-button[variant='error'],
+    :host([error]) md-outlined-icon-button[variant='error'],
+    :host([error]) md-filled-tonal-icon-button[variant='error'],
+    :host([error]) md-icon-button[variant='error'] {
+      --md-sys-color-primary: var(--md-sys-color-error);
+      --md-sys-color-on-primary: var(--md-sys-color-on-error);
+    }
+    :host([error]) md-outlined-icon-button[variant='error'] md-icon,
+    :host([error]) md-icon-button[variant='error'] md-icon {
+      color: var(--md-sys-color-error) !important;
+    }
+    :host([error]) md-outlined-icon-button[variant='error'] {
+      --_outline-color: var(--md-sys-color-error);
+      --md-outlined-icon-button-pressed-outline-color: var(--md-sys-color-error);
+    }
+    :host([error]) md-outlined-icon-button[variant='error']:hover {
+      --md-outlined-icon-button-outline-width: 2px;
+    }
+    :host([error]) md-filled-tonal-icon-button[variant='error'] {
+      --md-filled-tonal-icon-button-container-color: var(--md-sys-color-error-container);
+      --md-filled-tonal-icon-button-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-hover-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-focus-label-text-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-hover-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-pressed-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-focus-icon-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
+      --md-filled-tonal-icon-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
+    }
+  `;a([s({type:String,reflect:!0,attribute:"aria-label"})],r.prototype,"ariaLabel",2);a([s({type:String})],r.prototype,"variant",2);a([s({type:String})],r.prototype,"icon",2);a([s({type:Boolean,reflect:!0})],r.prototype,"toggle",2);a([s({type:String})],r.prototype,"toggleofficon",2);a([s({type:String})],r.prototype,"toggleonicon",2);a([s({type:Boolean,reflect:!0})],r.prototype,"disabled",2);a([s({type:Boolean,reflect:!0})],r.prototype,"error",2);r=a([m("scb-icon-button")],r);export{r as ScbIconButton};

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

@@ -0,0 +1,69 @@
+import{b as p,n,i as g,x as i,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(r,s,l,t)=>{for(var a=t>1?void 0:t?u(s,l):s,d=r.length-1,o;d>=0;d--)(o=r[d])&&(a=(t?o(s,l,a):o(a))||a);return t&&a&&h(s,l,a),a};let e=class extends g{constructor(){super(...arguments),this.keyfigure=0,this.subLabel="",this.supportingText="",this.cardHref="",this.icon="",this.size="standard"}render(){const r=this.cardHref?"clickable":"",l=(t=>typeof t=="number"?t.toLocaleString("sv-SE").replace(/\u00A0/g," "):t)(this.keyfigure);return i`
+        <div class="scb-keyfigure-card ${r} ${this.size}">
+                ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+                ${this.icon?i`<md-icon>${this.icon}</md-icon>`:""}
+                ${this.keyfigure?i`
+                    <div class="keyfigure">
+                    ${l}
+                    ${this.cardHref?i`<md-icon>arrow_forward</md-icon>`:l}
+                    </div>`:""}
+                ${this.subLabel?i`
+                    <div class="sub-label">
+                        ${this.cardHref?i`<a href="${this.subLabel}" tabindex="0">${this.subLabel}</a>`:this.subLabel}
+                    </div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+        </div>
+        `}firstUpdated(){if(this.cardHref){const r=this.renderRoot.querySelector(".scb-keyfigure-card");r&&r.addEventListener("click",s=>{s.target.closest("a")||(window.location.href=this.cardHref)})}}};e.styles=p`
+    :host{ --scb-card-min-w:  360px; }
+    :host {
+        max-width: var(--scb-card-min-w);
+        width: fit-content;;
+        display: block;
+    }
+    .scb-keyfigure-card {
+        color: var(--md-sys-color-on-surface);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+        width: fit-content;
+        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) var(--spacing-6);
+    }
+    .keyfigure{
+        letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+        gap: var(--spacing-3);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: var(--md-sys-typescale-headline-large-size);
+        font-weight: var(--weight-bold);
+        line-height: var(--md-sys-typescale-headline-large-line-height);
+        letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+    }
+    .sub-label a {
+        color: inherit;
+        text-decoration: none;
+    }
+    .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);
+    }
+    .scb-keyfigure-card.clickable {
+        cursor: pointer;
+    }
+    .scb-keyfigure-card.large .keyfigure {
+        font-size: var(--md-sys-typescale-display-medium-size);
+        line-height: var(--md-sys-typescale-display-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+    }
+  `;c([n({type:Number})],e.prototype,"keyfigure",2);c([n({type:String,attribute:"sub-label"})],e.prototype,"subLabel",2);c([n({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);c([n({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);c([n({type:String})],e.prototype,"icon",2);c([n({type:String})],e.prototype,"size",2);e=c([y("scb-keyfigure-card")],e);

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

@@ -0,0 +1,31 @@
+import{b as f,n,i as v,g as i,x as u,t as y}from"../../vendor/vendor.js";var _=Object.defineProperty,b=Object.getOwnPropertyDescriptor,h=e=>{throw TypeError(e)},s=(e,t,r,l)=>{for(var a=l>1?void 0:l?b(t,r):t,d=e.length-1,c;d>=0;d--)(c=e[d])&&(a=(l?c(t,r,a):c(a))||a);return l&&a&&_(t,r,a),a},x=(e,t,r)=>t.has(e)||h("Cannot "+r),g=(e,t,r)=>(x(e,t,"read from private field"),r?r.call(e):t.get(e)),k=(e,t,r)=>t.has(e)?h("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),p;let o=class extends v{constructor(){super(...arguments),this.href="",this.disabled=!1,k(this,p,e=>{this.disabled&&(e.preventDefault(),e.stopPropagation())})}render(){const e=this.target==="_blank"&&!this.rel?"noopener noreferrer":this.rel;return u`
+      <a
+        part="anchor"
+        href=${i(this.disabled?void 0:this.href||void 0)}
+        target=${i(this.target)}
+        rel=${i(e)}
+        download=${i(this.download)}
+        aria-disabled=${this.disabled?"true":"false"}
+        aria-label=${i(this.ariaLabel??void 0)}
+        @click=${g(this,p)}
+      ><slot></slot></a>
+    `}};p=new WeakMap;o.styles=f`
+    :host { display:inline }
+    a {
+      text-decoration: underline;
+      text-underline-offset: .22em;
+      text-decoration-thickness: 1px;
+      color: var(--scb-link-color, var(--md-sys-color-primary));
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+      transition: text-decoration-thickness .12s ease;
+    }
+    a:hover { text-decoration-thickness: 2px; }
+    a:focus-visible {
+      outline: 2px solid var(--scb-link-focus, var(--md-sys-color-primary));
+      outline-offset: 3px;
+    }
+    a:visited { color: var(--scb-link-visited-color, var(--md-sys-color-on-surface)); }
+    :host([disabled]) a { pointer-events: none; opacity:.64; text-decoration:none; cursor: default; }
+  `;s([n({type:String,reflect:!0})],o.prototype,"href",2);s([n({type:String,reflect:!0})],o.prototype,"target",2);s([n({type:String,reflect:!0})],o.prototype,"rel",2);s([n({type:String,reflect:!0})],o.prototype,"download",2);s([n({type:Boolean,reflect:!0})],o.prototype,"disabled",2);o=s([y("scb-link")],o);