scb-wc-test 0.1.12 → 0.1.14

package/all.js

@@ -40,6 +40,7 @@ import './mvc/components/scb-menu/scb-menu-item.js';
 import './mvc/components/scb-menu/scb-menu.js';
 import './mvc/components/scb-menu/scb-sub-menu.js';
 import './mvc/components/scb-notification/scb-notification.js';
+import './mvc/components/scb-notification-card/scb-notification-card.js';
 import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
 import './mvc/components/scb-radio-button/scb-radio-button.js';
 import './mvc/components/scb-radio-button/scb-radio-group.js';
@@ -97,6 +98,7 @@ import './scb-menu/scb-menu-item.js';
 import './scb-menu/scb-menu.js';
 import './scb-menu/scb-sub-menu.js';
 import './scb-notification/scb-notification.js';
+import './scb-notification-card/scb-notification-card.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';

package/index.d.ts

@@ -37,6 +37,7 @@ export * from './scb-menu/scb-menu-item';
 export * from './scb-menu/scb-menu';
 export * from './scb-menu/scb-sub-menu';
 export * from './scb-notification/scb-notification';
+export * from './scb-notification-card/scb-notification-card';
 export * from './scb-progress-indicator/scb-progress-indicator';
 export * from './scb-radio-button/scb-radio-button';
 export * from './scb-radio-button/scb-radio-group';

package/index.js

@@ -15,8 +15,8 @@ import { ScbDivider as H } from "./scb-divider/scb-divider.js";
 import { ScbDrawerItem as A } from "./scb-drawer/scb-drawer-item.js";
 import { ScbDrawerSection as L } from "./scb-drawer/scb-drawer-section.js";
 import { ScbDrawer as P } from "./scb-drawer/scb-drawer.js";
-import { ScbSubDrawer as R } from "./scb-drawer/scb-sub-drawer.js";
-import { ScbFactCardContent as N } from "./scb-fact-card/scb-fact-card-content.js";
+import { ScbSubDrawer as N } from "./scb-drawer/scb-sub-drawer.js";
+import { ScbFactCardContent as K } from "./scb-fact-card/scb-fact-card-content.js";
 import { ScbFactCard as j } from "./scb-fact-card/scb-fact-card.js";
 import { ScbFooterSection as z } from "./scb-footer/scb-footer-section.js";
 import { ScbFooter as J } from "./scb-footer/scb-footer.js";
@@ -37,20 +37,21 @@ import { ScbMenuItem as Br } from "./scb-menu/scb-menu-item.js";
 import { ScbMenu as Tr } from "./scb-menu/scb-menu.js";
 import { ScbSubMenu as wr } from "./scb-menu/scb-sub-menu.js";
 import { ScbNotification as Fr } from "./scb-notification/scb-notification.js";
-import { ScbProgressIndicator as kr } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbRadioButton as Hr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as Ar } from "./scb-radio-button/scb-radio-group.js";
-import { ScbSearch as Lr } from "./scb-search/scb-search.js";
-import { ScbSnackbar as Pr } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as Rr } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as Nr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as jr } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as zr } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as Jr } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as Qr } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as Wr } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as Yr } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as _r } from "./scb-tooltip/scb-tooltip.js";
+import { ScbNotificationCard as kr } from "./scb-notification-card/scb-notification-card.js";
+import { ScbProgressIndicator as Hr } from "./scb-progress-indicator/scb-progress-indicator.js";
+import { ScbRadioButton as Ar } from "./scb-radio-button/scb-radio-button.js";
+import { ScbRadioGroup as Lr } from "./scb-radio-button/scb-radio-group.js";
+import { ScbSearch as Pr } from "./scb-search/scb-search.js";
+import { ScbSnackbar as Nr } from "./scb-snackbar/scb-snackbar.js";
+import { ScbStatusPill as Kr } from "./scb-status-pill/scb-status-pill.js";
+import { ScbSwitch as jr } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as zr } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as Jr } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as Qr } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField2 as Wr } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as Yr } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as _r } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as ro } from "./scb-tooltip/scb-tooltip.js";
 export {
   i as SCBBreadcrumb,
   f as SCBBreadcrumbItem,
@@ -70,7 +71,7 @@ export {
   A as ScbDrawerItem,
   L as ScbDrawerSection,
   j as ScbFactCard,
-  N as ScbFactCardContent,
+  K as ScbFactCardContent,
   J as ScbFooter,
   z as ScbFooterSection,
   W as ScbGrid,
@@ -88,21 +89,22 @@ export {
   Tr as ScbMenu,
   Br as ScbMenuItem,
   Fr as ScbNotification,
-  jr as ScbPrimaryTab,
-  kr as ScbProgressIndicator,
-  Hr as ScbRadioButton,
-  Ar as ScbRadioGroup,
-  Lr as ScbSearch,
-  zr as ScbSecondaryTab,
-  Pr as ScbSnackbar,
+  kr as ScbNotificationCard,
+  zr as ScbPrimaryTab,
+  Hr as ScbProgressIndicator,
+  Ar as ScbRadioButton,
+  Lr as ScbRadioGroup,
+  Pr as ScbSearch,
+  Jr as ScbSecondaryTab,
+  Nr as ScbSnackbar,
   Y as ScbStack,
-  Rr as ScbStatusPill,
-  R as ScbSubDrawer,
+  Kr as ScbStatusPill,
+  N as ScbSubDrawer,
   wr as ScbSubMenu,
-  Nr as ScbSwitch,
-  Jr as ScbTabs,
-  Qr as ScbTextField2,
-  Yr as ScbToc,
-  Wr as ScbTocItem,
-  _r as ScbTooltip
+  jr as ScbSwitch,
+  Qr as ScbTabs,
+  Wr as ScbTextField2,
+  _r as ScbToc,
+  Yr as ScbTocItem,
+  ro as ScbTooltip
 };

package/mvc/components/all.js

@@ -36,6 +36,7 @@ import './scb-list/scb-list-item.js';
 import './scb-menu/scb-menu.js';
 import './scb-menu/scb-menu-item.js';
 import './scb-menu/scb-sub-menu.js';
+import './scb-notification-card/scb-notification-card.js';
 import './scb-notification/scb-notification.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';

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

@@ -1,31 +1,36 @@
 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 p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x as c,t as g}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(s,l,i){try{customElements.get(s)||o(s,l,i)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(t,o,s,l)=>{for(var i=l>1?void 0:l?v(o,s):o,n=t.length-1,d;n>=0;n--)(d=t[n])&&(i=(l?d(o,s,i):d(i))||i);return l&&i&&u(o,s,i),i};let e=class extends f{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.header="",this.subtitle="",this.supportingText="",this.cardHref="",this.showMedia=null,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}async firstUpdated(){e.__iconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const t=this.variant?`${this.variant.toLowerCase()}`:"",o=this.direction?`${this.direction.toLowerCase()}`:"",s=this.cardHref?"clickable":"",l=new Date().getDate(),i=new Date().toLocaleString("default",{month:"short"}).replace(".","");return c`
+import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x as c,t as g}from"../../vendor/vendor.js";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 o=customElements.define.bind(customElements);customElements.define=function(s,n,t){try{customElements.get(s)||o(s,n,t)}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,a=(i,o,s,n)=>{for(var t=n>1?void 0:n?v(o,s):o,l=i.length-1,d;l>=0;l--)(d=i[l])&&(t=(n?d(o,s,t):d(t))||t);return n&&t&&u(o,s,t),t};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.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}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)}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",o=this.direction?`${this.direction.toLowerCase()}`:"",s=this.cardHref?"clickable":"",n=1,t="Jan";return c`
     <div
-      class="calendar-card ${o} ${s} ${t}"
+      class="calendar-card ${o} ${s} ${i}"
       role="${this.cardHref?"link":"group"}"
-      aria-label="${this.header||"Kalenderkort"}"
+      aria-label="${this.title||"Kalenderkort"}"
       tabindex="${this.cardHref?"0":"-1"}"
-      @click="${this.cardHref?()=>window.open(this.cardHref,"_self"):null}"
+      @click="${this.cardHref?this._handleHrefNavigation:null}"
       @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: ${l} ${i}">
-          <div class="day">${l}</div>
-          <div class="month">${i}</div>
+        <div class="media" aria-label="Datum: ${n} ${t}">
+          <div class="day">${n}</div>
+          <div class="month">${t}</div>
         </div>`:""}
       <div class="container">
         <div class="header-container">
-          <div class="header">${this.header}</div>
+          <div class="header">${this.title}</div>
           ${this.cardHref?c`<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>`:""}
       </div>
     </div>
-  `}_onKeyDown(t){(t.key==="Enter"||t.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),t.preventDefault())}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=h`
-  :host { display:block; }
+    <md-focus-ring></md-focus-ring>
+  `}_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"))}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=h`
+  :host {
+    display: block;
+    position: relative;
+    padding: var(--scb-calendar-card-focus-ring-gap, 4px);
+  }
 
   :host([stretch]) { block-size: 100%; }
   :host([stretch]) .calendar-card { block-size: 100%; }
@@ -40,6 +45,17 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
     width: 100%;
   }
 
+  md-focus-ring {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    display: none;
+    border-radius: var(--scb-calendar-card-focus-ring-radius, var(--radius-large, 16px));
+  }
+  :host(:focus-within) md-focus-ring {
+    display: block;
+  }
+
   .calendar-card {
     box-sizing: border-box;
     overflow: hidden;
@@ -57,6 +73,9 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
     transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
   }
 
+  .calendar-card:focus,
+  .calendar-card:focus-visible { outline: none; }
+
   .calendar-card.vertical {
     max-width: var(--scb-calendar-card-max-w, 360px);
   }
@@ -176,4 +195,4 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
-  `;a([r({type:String,reflect:!0})],e.prototype,"variant",2);a([r({type:String,reflect:!0})],e.prototype,"direction",2);a([r({type:String})],e.prototype,"header",2);a([r({type:String})],e.prototype,"subtitle",2);a([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);a([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);a([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);a([r({type:Boolean,reflect:!0,attribute:"full-height"})],e.prototype,"fullHeight",2);a([r({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",2);a([r({type:Boolean,reflect:!0})],e.prototype,"stretch",2);e=a([g("scb-calendar-card")],e);
+  `;a([r({type:String,reflect:!0})],e.prototype,"variant",2);a([r({type:String,reflect:!0})],e.prototype,"direction",2);a([r({type:String})],e.prototype,"title",2);a([r({type:String})],e.prototype,"subtitle",2);a([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);a([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);a([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);a([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);a([r({type:Boolean,reflect:!0,attribute:"full-height"})],e.prototype,"fullHeight",2);a([r({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",2);a([r({type:Boolean,reflect:!0})],e.prototype,"stretch",2);e=a([g("scb-calendar-card")],e);

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

@@ -1,47 +1,49 @@
-import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(l,c,d){try{customElements.get(l)||r(l,c,d)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,r,l,c)=>{for(var d=c>1?void 0:c?b(r,l):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(d=(c?o(r,l,d):o(d))||d);return c&&d&&m(r,l,d),d};let e=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",l=this.cardHref?"clickable":"",c=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return t`
-          <div class="scb-card ${a} ${r} ${l}">
-            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+import{a as p,n as t,i as h,x as i,t as m}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(c,d,l){try{customElements.get(c)||r(c,d,l)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var v=Object.defineProperty,b=Object.getOwnPropertyDescriptor,e=(a,r,c,d)=>{for(var l=d>1?void 0:d?b(r,c):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(l=(d?o(r,c,l):o(l))||l);return d&&l&&v(r,c,l),l};let s=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",c=this.cardHref?"clickable":"",d=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return i`
+          <div class="scb-card ${a} ${r} ${c}">
+            ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+            ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
             <div class="full-content">
               <div class="top-content">
-                ${this.label?t`
+                ${this.label?i`
                   <div class="header">
-                    ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                    ${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
                   </div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${this.date?t`<div class="date">${this.date}</div>`:""}
+                ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?i`<div class="date">${this.date}</div>`:""}
               </div>
             </div>
           </div>
-        `;case"list":return t`
-          <div class="scb-card ${a} vertical ${l}">
-            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+          <md-focus-ring></md-focus-ring>
+        `;case"list":return i`
+          <div class="scb-card ${a} vertical ${c}">
+            ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
             <div class="full-content">
               <div class="top-content">
-                ${this.label?t`<div class="header">${this.label}</div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${this.date?t`<div class="date">${this.date}</div>`:""}
+                ${this.label?i`<div class="header">${this.label}</div>`:""}
+                ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?i`<div class="date">${this.date}</div>`:""}
               </div>
               <div class="content list">
                 <slot></slot>
               </div>
             </div>
           </div>
-        `;case"social":return t`
-          <div class="scb-card ${a} ${r} ${l}">
-            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+          <md-focus-ring></md-focus-ring>
+        `;case"social":return i`
+          <div class="scb-card ${a} ${r} ${c}">
+            ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+            ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
             <div class="full-content">
               <div class="top-content">
-                ${this.label?t`
+                ${this.label?i`
                   <div class="header">
-                    ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                    ${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
                   </div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${this.date?t`<div class="date">${this.date}</div>`:""}
+                ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?i`<div class="date">${this.date}</div>`:""}
               </div>
               <div class="content">
                 <div class="social-metrics">
@@ -51,61 +53,67 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
               </div>
             </div>
           </div>
-        `;case"link":return t`
-          <div class="scb-card ${a} ${r} ${l}">
-            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+          <md-focus-ring></md-focus-ring>
+        `;case"link":return i`
+          <div class="scb-card ${a} ${r} ${c}">
+            ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
             <div class="full-content">
               <div class="top-content">
-                ${this.label?t`<div class="header">${this.label}</div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${this.date?t`<div class="date">${this.date}</div>`:""}
+                ${this.label?i`<div class="header">${this.label}</div>`:""}
+                ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?i`<div class="date">${this.date}</div>`:""}
               </div>
               <div class="content links">
                 <slot></slot>
               </div>
             </div>
           </div>
-        `;case"action":return t`
-          <div class="scb-card ${a} ${r} ${l}">
-            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+          <md-focus-ring></md-focus-ring>
+        `;case"action":return i`
+          <div class="scb-card ${a} ${r} ${c}">
+            ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
             <div class="full-content">
               <div class="top-content">
-                ${this.label?t`<div class="header">${this.label}</div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${this.date?t`<div class="date">${this.date}</div>`:""}
+                ${this.label?i`<div class="header">${this.label}</div>`:""}
+                ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?i`<div class="date">${this.date}</div>`:""}
               </div>
               <div class="content actions">
                 <slot></slot>
               </div>
             </div>
           </div>
-        `;default:return t`
-          <div class="scb-card ${a} ${r} ${l}">
-            ${this.cardHref?t`<md-ripple></md-ripple>`:""}
-            ${this.mediaHref?t`<img src="${this.mediaHref}" class="${c}" alt="" ?hidden=${!this.mediaHref} />`:""}
+          <md-focus-ring></md-focus-ring>
+        `;default:return i`
+          <div class="scb-card ${a} ${r} ${c}">
+            ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+            ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
             <div class="full-content">
               <div class="top-content">
-                ${this.label?t`
+                ${this.label?i`
                   <div class="header">
-                    ${this.cardHref?t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                    ${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
                   </div>`:""}
-                ${this.subLabel?t`<div class="sub-label">${this.subLabel}</div>`:""}
-                ${this.supportingText?t`<div class="supporting-text">${this.supportingText}</div>`:""}
-                ${this.date?t`<div class="date">${this.date}</div>`:""}
+                ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                ${this.date?i`<div class="date">${this.date}</div>`:""}
               </div>
             </div>
           </div>
-        `}}firstUpdated(){if(this.cardHref){const a=this.renderRoot.querySelector(".scb-card");a&&a.addEventListener("click",r=>{r.target.closest("a")||(window.location.href=this.cardHref)})}}};e.styles=p`
+          <md-focus-ring></md-focus-ring>
+        `}}firstUpdated(){if(this.cardHref){const a=this.renderRoot.querySelector(".scb-card");a&&a.addEventListener("click",r=>{r.target.closest("a")||(window.location.href=this.cardHref)})}}};s.styles=p`
     :host {
       --scb-card-max-w: 360px;
       display: block;
       box-sizing: border-box;
-      inline-size: 100%; 
-      min-inline-size: 0;  
+      position: relative;
+      inline-size: 100%;
+      min-inline-size: 0;
       max-inline-size: var(--scb-card-max-w);
       height: auto;
+      padding: var(--scb-card-focus-ring-gap, 4px);
     }
     :host([type="standard"]) { --scb-card-max-w: var(--scb-card-standard-max-w, 360px); }
     :host([type="list"])     { --scb-card-max-w: var(--scb-card-list-max-w, 360px); }
@@ -115,13 +123,24 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
 
     :host([full-width])  { max-inline-size: none; }
     :host([stretch]),
-    :host([full-height]) { block-size: 100%; } 
+    :host([full-height]) { block-size: 100%; }
 
     :host([stretch]) .scb-card,
     :host([full-height]) .scb-card {
       block-size: 100%;
     }
 
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
+    }
+    :host(:focus-within) md-focus-ring {
+      display: block;
+    }
+
     .scb-card {
       color: var(--md-sys-color-on-surface);
       display: flex;
@@ -135,6 +154,12 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
       overflow: hidden;
     }
 
+    /* Stänger av UA-outline, md-focus-ring används som fokusindikator */
+    .scb-card:focus,
+    .scb-card:focus-visible { outline: none; }
+    .scb-card a:focus,
+    .scb-card a:focus-visible { outline: none; }
+
     .scb-card.outlined { border: 1px solid var(--md-sys-color-outline-variant); }
     .scb-card.filled   { background: var(--md-sys-color-surface-dim); }
     .scb-card.vertical { flex-direction: column; }
@@ -152,7 +177,7 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
       display: flex;
       flex-direction: column;
       gap: var(--spacing-3);
-      min-inline-size: 0; 
+      min-inline-size: 0;
     }
 
     .header {
@@ -189,7 +214,7 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
       inline-size: 100%;
       max-inline-size: 100%;
       height: auto;
-      object-fit: cover; 
+      object-fit: cover;
     }
     .scb-card img.avatar {
       border-radius: var(--md-sys-shape-corner-full);
@@ -259,4 +284,4 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
     .scb-card.filled .content.list ::slotted(scb-list) {
       --scb-list-bg: var(--md-sys-color-surface-dim);
     }
-  `;i([s({type:String})],e.prototype,"type",2);i([s({type:String})],e.prototype,"variant",2);i([s({type:String})],e.prototype,"direction",2);i([s({type:String,attribute:"media-type"})],e.prototype,"mediaType",2);i([s({type:String,attribute:"media-href"})],e.prototype,"mediaHref",2);i([s({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);i([s({type:String})],e.prototype,"label",2);i([s({type:String,attribute:"sub-label"})],e.prototype,"subLabel",2);i([s({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);i([s({type:Date,reflect:!0})],e.prototype,"date",2);i([s({type:String,attribute:"social-comments-text"})],e.prototype,"commentsText",2);i([s({type:Number,attribute:"social-comments",reflect:!0})],e.prototype,"comments",2);i([s({type:String,attribute:"social-likes-text"})],e.prototype,"likesText",2);i([s({type:Number,attribute:"social-likes",reflect:!0})],e.prototype,"likes",2);i([s({type:Boolean,reflect:!0,attribute:"full-height"})],e.prototype,"fullHeight",2);i([s({type:Boolean,reflect:!0,attribute:"full-width"})],e.prototype,"fullWidth",2);i([s({type:Boolean,reflect:!0})],e.prototype,"stretch",2);e=i([v("scb-card")],e);
+  `;e([t({type:String})],s.prototype,"type",2);e([t({type:String})],s.prototype,"variant",2);e([t({type:String})],s.prototype,"direction",2);e([t({type:String,attribute:"media-type"})],s.prototype,"mediaType",2);e([t({type:String,attribute:"media-href"})],s.prototype,"mediaHref",2);e([t({type:String,attribute:"card-href"})],s.prototype,"cardHref",2);e([t({type:String})],s.prototype,"label",2);e([t({type:String,attribute:"sub-label"})],s.prototype,"subLabel",2);e([t({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);e([t({type:Date,reflect:!0})],s.prototype,"date",2);e([t({type:String,attribute:"social-comments-text"})],s.prototype,"commentsText",2);e([t({type:Number,attribute:"social-comments",reflect:!0})],s.prototype,"comments",2);e([t({type:String,attribute:"social-likes-text"})],s.prototype,"likesText",2);e([t({type:Number,attribute:"social-likes",reflect:!0})],s.prototype,"likes",2);e([t({type:Boolean,reflect:!0,attribute:"full-height"})],s.prototype,"fullHeight",2);e([t({type:Boolean,reflect:!0,attribute:"full-width"})],s.prototype,"fullWidth",2);e([t({type:Boolean,reflect:!0})],s.prototype,"stretch",2);s=e([m("scb-card")],s);

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

@@ -1,4 +1,4 @@
-import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}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"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.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";import"../scb-tooltip/scb-tooltip.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(s,i,o){try{customElements.get(s)||t(s,i,o)}catch(n){var h=String(n||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var C=Object.defineProperty,M=Object.getOwnPropertyDescriptor,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?M(t,s):t,h=e.length-1,n;h>=0;h--)(n=e[h])&&(o=(i?n(t,s,o):n(o))||o);return i&&o&&C(t,s,o),o};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._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._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=[],i=[],o=[],h=n=>({label:n.getAttribute("label")??"",href:n.getAttribute("href")??void 0,icon:n.getAttribute("icon")??void 0});for(const n of t){const u=n.tagName.toLowerCase();if(u==="scb-header-tab"){s.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#"});continue}if(u==="scb-header-utility"){i.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#",target:n.getAttribute("target")??void 0});continue}if(u==="scb-header-drawer-group"){const b={label:n.getAttribute("label")??"",icon:n.getAttribute("icon")??void 0,children:[]};n.querySelectorAll("scb-header-drawer-item").forEach(m=>b.children.push(h(m))),o.push(b);continue}u==="scb-header-drawer-item"&&o.push(h(n))}this._slotTabs=s,this._slotUtils=i,this._slotMenu=o,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,i=e.clientWidth,o=this._overflows(this._util),h=this._overflows(this._tabsEl),n=s<this.BP_MD||o||h;this._collapsed?!n&&i>=this._unlockAtWidth&&this._setCollapsed(!1):n&&(this._unlockAtWidth=i+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)),w=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+w+8>i+.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=!(i>=this._logoTextUnlockAt):g>i+.5&&(b=!0,this._logoTextUnlockAt=i+this._HYST)}else b=!1,this._logoTextUnlockAt=0;this._setHideLogoText(b)},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 o=(this._slotTabs.length?this._slotTabs:this.tabs)[s]?.href??"";this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:s,href:o},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.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("searchHeight")&&(this.searchHeight&&this.searchHeight.trim()?this.style.setProperty("--scb-search-height",this.searchHeight.trim()):this.style.removeProperty("--scb-search-height")),(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,i)=>{s.selected=i===this.activeTab})}_renderDrawerNodes(e){return!e||e.length===0?c``:c`${e.map(t=>{const s=Array.isArray(t.children)&&t.children.length>0;return c`
+import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor.js";import"../../vendor/vendor-material.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"../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";import"../scb-tooltip/scb-tooltip.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(s,i,o){try{customElements.get(s)||t(s,i,o)}catch(n){var h=String(n||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var C=Object.defineProperty,M=Object.getOwnPropertyDescriptor,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?M(t,s):t,h=e.length-1,n;h>=0;h--)(n=e[h])&&(o=(i?n(t,s,o):n(o))||o);return i&&o&&C(t,s,o),o};const _={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._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._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=[],i=[],o=[],h=n=>({label:n.getAttribute("label")??"",href:n.getAttribute("href")??void 0,icon:n.getAttribute("icon")??void 0});for(const n of t){const u=n.tagName.toLowerCase();if(u==="scb-header-tab"){s.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#"});continue}if(u==="scb-header-utility"){i.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#",target:n.getAttribute("target")??void 0});continue}if(u==="scb-header-drawer-group"){const b={label:n.getAttribute("label")??"",icon:n.getAttribute("icon")??void 0,children:[]};n.querySelectorAll("scb-header-drawer-item").forEach(m=>b.children.push(h(m))),o.push(b);continue}u==="scb-header-drawer-item"&&o.push(h(n))}this._slotTabs=s,this._slotUtils=i,this._slotMenu=o,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,i=e.clientWidth,o=this._overflows(this._util),h=this._overflows(this._tabsEl),n=s<this.BP_MD||o||h;this._collapsed?!n&&i>=this._unlockAtWidth&&this._setCollapsed(!1):n&&(this._unlockAtWidth=i+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),y=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)),w=this.showDrawer&&(s<this.BP_MD||this._collapsed)?this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48):0;u=t.getBoundingClientRect().width+g+y+g+w+8>i+.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)),y=this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48),g=(this._logoGroup?.getBoundingClientRect().width||0)+m+y;this._hideLogoText?b=!(i>=this._logoTextUnlockAt):g>i+.5&&(b=!0,this._logoTextUnlockAt=i+this._HYST)}else b=!1,this._logoTextUnlockAt=0;this._setHideLogoText(b)},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 o=(this._slotTabs.length?this._slotTabs:this.tabs)[s]?.href??"";this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:s,href:o},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-wrap")||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.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("searchHeight")&&(this.searchHeight&&this.searchHeight.trim()?this.style.setProperty("--scb-search-height",this.searchHeight.trim()):this.style.removeProperty("--scb-search-height")),(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,i)=>{s.selected=i===this.activeTab})}_renderDrawerNodes(e){return!e||e.length===0?c``:c`${e.map(t=>{const s=Array.isArray(t.children)&&t.children.length>0;return c`
         <scb-drawer-item
           label=${t.label}
           ?selected=${!1}
@@ -28,9 +28,12 @@ import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor
         <scb-grid cols-compact="4" cols-medium="8" cols-expanded="12" 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="logo-wrap">
+                <a class="logo-group" href=${this.logoHref} aria-label="Gå till startsidan">
+                  ${this._renderLogo()} <span class="logo-text">${this.logoText}</span>
+                </a>
+                <md-focus-ring></md-focus-ring>
+              </div>
 
               <div class="actions">
                 <nav class="utility" aria-label="Funktionslänkar">
@@ -129,8 +132,27 @@ import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor
     }
 
     .top-row { display:flex; align-items:center; gap:var(--spacing-7,24px); padding-block:var(--spacing-7,24px); min-width:0; }
+
+    .logo-wrap {
+      display:inline-block;
+      position:relative;
+      padding: var(--scb-header-logo-focus-ring-gap, 4px);
+      border-radius: var(--scb-header-logo-focus-ring-radius, var(--md-sys-shape-corner-small, 4px));
+    }
+    .logo-wrap md-focus-ring {
+      position:absolute;
+      inset:0;
+      pointer-events:none;
+      display:none;
+      border-radius: inherit;
+    }
+    .logo-wrap:focus-within md-focus-ring { display:block; }
+
     .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-text{
       font-family: var(--brand-font, Inter), sans-serif;
       font-size: var(--md-sys-typescale-body-medium-size, 1rem);
@@ -241,4 +263,4 @@ import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor
     :host([data-hide-logo-text]) .logo-text {
       display: none;
     }
-  `;r._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));a([l({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);a([l({type:String,attribute:"logo-text"})],r.prototype,"logoText",2);a([l({type:String,attribute:"logo-href"})],r.prototype,"logoHref",2);a([l({type:Boolean,reflect:!0})],r.prototype,"banner",2);a([l({type:String,attribute:"banner-label"})],r.prototype,"bannerLabel",2);a([l({attribute:"tabs",converter:r._JSON_ARRAY})],r.prototype,"tabs",2);a([l({type:Number,attribute:"active-tab"})],r.prototype,"activeTab",2);a([l({attribute:"utility-items",converter:r._JSON_ARRAY})],r.prototype,"utilityItems",2);a([l({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2);a([l({type:String,attribute:"drawer-label"})],r.prototype,"drawerLabel",2);a([l({type:String,attribute:"drawer-sub-label"})],r.prototype,"drawerSubLabel",2);a([l({type:String,attribute:"drawer-section-label"})],r.prototype,"drawerSectionLabel",2);a([l({type:String,attribute:"drawer-search-placeholder"})],r.prototype,"drawerSearchPlaceholder",2);a([l({attribute:"menu-data",converter:r._JSON_ARRAY})],r.prototype,"menuData",2);a([l({attribute:"show-drawer",reflect:!0,converter:y})],r.prototype,"showDrawer",2);a([l({attribute:"show-search",reflect:!0,converter:y})],r.prototype,"showSearch",2);a([l({attribute:"include-utility-in-drawer",reflect:!0,converter:y})],r.prototype,"includeUtilityInDrawer",2);a([l({type:String,attribute:"search-max"})],r.prototype,"searchMax",2);a([l({type:String,attribute:"search-min"})],r.prototype,"searchMin",2);a([l({type:String,attribute:"search-height"})],r.prototype,"searchHeight",2);a([p()],r.prototype,"_drawerId",2);a([p()],r.prototype,"_drawerMounted",2);a([p()],r.prototype,"_drawerExpanded",2);a([p()],r.prototype,"_searchId",2);a([p()],r.prototype,"_slotTabs",2);a([p()],r.prototype,"_slotUtils",2);a([p()],r.prototype,"_slotMenu",2);a([p()],r.prototype,"_collapsed",2);a([p()],r.prototype,"_hideLogoText",2);r=a([S("scb-header")],r);
+  `;r._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));a([l({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);a([l({type:String,attribute:"logo-text"})],r.prototype,"logoText",2);a([l({type:String,attribute:"logo-href"})],r.prototype,"logoHref",2);a([l({type:Boolean,reflect:!0})],r.prototype,"banner",2);a([l({type:String,attribute:"banner-label"})],r.prototype,"bannerLabel",2);a([l({attribute:"tabs",converter:r._JSON_ARRAY})],r.prototype,"tabs",2);a([l({type:Number,attribute:"active-tab"})],r.prototype,"activeTab",2);a([l({attribute:"utility-items",converter:r._JSON_ARRAY})],r.prototype,"utilityItems",2);a([l({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2);a([l({type:String,attribute:"drawer-label"})],r.prototype,"drawerLabel",2);a([l({type:String,attribute:"drawer-sub-label"})],r.prototype,"drawerSubLabel",2);a([l({type:String,attribute:"drawer-section-label"})],r.prototype,"drawerSectionLabel",2);a([l({type:String,attribute:"drawer-search-placeholder"})],r.prototype,"drawerSearchPlaceholder",2);a([l({attribute:"menu-data",converter:r._JSON_ARRAY})],r.prototype,"menuData",2);a([l({attribute:"show-drawer",reflect:!0,converter:_})],r.prototype,"showDrawer",2);a([l({attribute:"show-search",reflect:!0,converter:_})],r.prototype,"showSearch",2);a([l({attribute:"include-utility-in-drawer",reflect:!0,converter:_})],r.prototype,"includeUtilityInDrawer",2);a([l({type:String,attribute:"search-max"})],r.prototype,"searchMax",2);a([l({type:String,attribute:"search-min"})],r.prototype,"searchMin",2);a([l({type:String,attribute:"search-height"})],r.prototype,"searchHeight",2);a([p()],r.prototype,"_drawerId",2);a([p()],r.prototype,"_drawerMounted",2);a([p()],r.prototype,"_drawerExpanded",2);a([p()],r.prototype,"_searchId",2);a([p()],r.prototype,"_slotTabs",2);a([p()],r.prototype,"_slotUtils",2);a([p()],r.prototype,"_slotMenu",2);a([p()],r.prototype,"_collapsed",2);a([p()],r.prototype,"_hideLogoText",2);r=a([S("scb-header")],r);