scb-wc 0.1.11 → 0.1.13

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

@@ -1 +1,681 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-search/scb-search.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-drawer/scb-drawer.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-dropdown/scb-dropdown.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-grid/scb-grid-item.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-grid/scb-grid.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-menu/scb-menu.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-skeleton/scb-skeleton.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-header/scb-header.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(t,n,d){try{customElements.get(t)||o(t,n,d)}catch(r){var i=String(r||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();
+import"../../vendor/vendor-material.js";import{_ as A,b as k,g as C,h as d,m as f,v as g,y as m}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as c}from"../../vendor/decorate.js";import"../scb-button/scb-button.js";import"../scb-search/scb-search.js";import"../scb-link/scb-link.js";import"../scb-drawer/scb-drawer.js";import"../scb-dropdown/scb-dropdown.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.js";import"../scb-menu/scb-menu.js";import"../scb-skeleton/scb-skeleton.js";(function(){try{var b=typeof globalThis<"u"?globalThis:window;if(!b.__scb_ce_guard_installed__){b.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,t,a){try{customElements.get(s)||e(s,t,a)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var _,x,T=0,$=()=>{if(typeof window>"u"||typeof document>"u"||!("customElements"in window)||document.head.querySelector("style[data-scb-header-pre-upgrade]"))return;const b=document.createElement("style");b.setAttribute("data-scb-header-pre-upgrade",""),b.textContent=`
+    scb-header:not(:defined) {
+      display: block;
+      margin-block-start: var(--scb-header-spacing-block-start, 0);
+      margin-block-end: var(--scb-header-spacing-block-end, 0);
+      background: var(--scb-header-background, transparent);
+      color: var(--md-sys-color-on-surface, #1b1b1f);
+
+      --scb-header-pre-logo-w: var(--icon-size-extra-extra-large, 48px);
+      --scb-header-pre-logo-h: var(
+        --scb-header-pre-logo-img-h,
+        calc(var(--scb-header-pre-logo-w) * 1.125)
+      );
+
+      --scb-header-pre-top-row: calc(
+        (var(--spacing-7, 24px) * 2) +
+          max(
+            var(--scb-header-pre-logo-h),
+            var(--scb-header-pre-control-size, 48px)
+          ) +
+          var(--spacing-2, 4px)
+      );
+      --scb-header-pre-divider: var(--stroke-border, 1px);
+      --scb-header-pre-tabs-row: var(--spacing-10, 40px);
+      --scb-header-pre-block-size: calc(
+        var(--scb-header-pre-top-row) + var(--scb-header-pre-divider)
+      );
+
+      min-block-size: var(--scb-header-pre-block-size);
+      visibility: hidden;
+    }
+
+    scb-header:not(:defined) > * {
+      display: none;
+    }
+
+    @media (min-width: 840px) {
+      scb-header:not(:defined)[data-pre-has-tabs] {
+        --scb-header-pre-block-size: calc(
+          var(--scb-header-pre-top-row) +
+            var(--scb-header-pre-tabs-row) +
+            var(--scb-header-pre-divider)
+        );
+      }
+    }
+  `,document.head.appendChild(b);const e=i=>{const r=String(i??"").trim();if(r)return/^\d+$/.test(r)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(r,10)))})`:r},s=i=>{const r=String(i??"").trim();if(!r)return!1;try{const u=JSON.parse(r);return Array.isArray(u)&&u.length>0}catch{return!1}},t=i=>{for(const r of Array.from(i.children)){const u=r.tagName.toLowerCase();if(u==="scb-header-tab"||u==="scb-dropdown")return!0}return!1},a=i=>{t(i)||s(i.getAttribute("tabs"))?i.setAttribute("data-pre-has-tabs",""):i.removeAttribute("data-pre-has-tabs");const r=e(i.getAttribute("spacing")),u=e(i.getAttribute("spacing-top"))??r,h=e(i.getAttribute("spacing-bottom"))??r;u?i.style.setProperty("--scb-header-spacing-block-start",u):i.style.removeProperty("--scb-header-spacing-block-start"),h?i.style.setProperty("--scb-header-spacing-block-end",h):i.style.removeProperty("--scb-header-spacing-block-end");const p=(i.getAttribute("logo-width")??"").trim();p?i.style.setProperty("--scb-header-pre-logo-w",p):i.style.removeProperty("--scb-header-pre-logo-w");const v=(i.getAttribute("logo-height")??"").trim();v?i.style.setProperty("--scb-header-pre-logo-img-h",v):i.style.removeProperty("--scb-header-pre-logo-img-h");const y=(i.getAttribute("search-height")??"").trim();y?i.style.setProperty("--scb-header-pre-control-size",y):i.style.removeProperty("--scb-header-pre-control-size")};document.querySelectorAll("scb-header").forEach(a);const o=new MutationObserver(i=>{for(const r of i){if(r.type==="attributes"){const u=r.target;u instanceof HTMLElement&&u.tagName.toLowerCase()==="scb-header"&&a(u);continue}if(r.type==="childList"){const u=[...Array.from(r.addedNodes),...Array.from(r.removedNodes)];for(const h of u){if(!(h instanceof HTMLElement))continue;if(h.tagName.toLowerCase()==="scb-header"){a(h);continue}const p=h.closest?.("scb-header");p&&a(p)}}}});o.observe(document.documentElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["tabs","spacing","spacing-top","spacing-bottom","logo-width","logo-height","logo-aspect-ratio","search-height"]}),customElements.whenDefined("scb-header").then(()=>{o.disconnect()})};$();var w={fromAttribute:b=>b==null?!0:!/^(false|0|off|no)$/i.test(b),toAttribute:b=>String(!!b)},E={fromAttribute:b=>b==null?!1:!/^(false|0|off|no)$/i.test(b),toAttribute:b=>String(!!b)},M={fromAttribute:b=>b==="small"||b==="large"?b:"medium",toAttribute:b=>{const e=String(b??"");return e==="small"||e==="large"?e:null}},l=(_=class extends A{constructor(){super(),this.maxWidth="1440px",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.size="medium",this.logoText="",this.logoHref="/",this.logoSrc="",this.logoWidth="",this.logoHeight="",this.logoAspectRatio="",this.logoInvertDm=!1,this.banner=!1,this.tabs=[],this.activeTab=null,this.reserveTabs=!1,this.utilityItems=[],this.showDrawer=!0,this.showSearch=!0,this.includeUtilityInMenu=!1,this.drawerOverlay=!0,this.searchText="",this._drawerId="main-drawer",this._menuExpanded=!1,this._searchId="header-search",this._slotNavItems=[],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._onMenuSelect=s=>{const t=s.detail;this.dispatchEvent(new CustomEvent("scb-menu-select",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("scbmenuselect",{detail:t,bubbles:!0,composed:!0}));const a=t?.item,n=typeof t?.href=="string"?t.href:typeof t?.itemHref=="string"?t.itemHref:typeof t?.item_href=="string"?t.item_href:"",o=a?a.getAttribute("item-href")??a.getAttribute("href")??"":"";String(n||o||"").trim()&&this._closeDrawerNow()},this._collapsed=!1,this._unlockAtWidth=0,this._hideLogoText=!1,this._logoTextUnlockAt=0,this._slotWatchers=[],this._harvestPending=!1,this._harvest=()=>{const s=Array.from(this.children),t=[],a=[],n=[];let o=-1;const i=r=>({label:r.getAttribute("label")??"",href:r.getAttribute("href")??void 0,icon:r.getAttribute("icon")??void 0});for(const r of s){const u=r.tagName.toLowerCase();if(u==="scb-header-tab"){const h=r.getAttribute("label")??"",p=r.getAttribute("href"),v=p&&p.trim()!==""?p:void 0;(r.hasAttribute("selected")||r.getAttribute("selected")==="true"||r.getAttribute("active")==="true"||r.getAttribute("aria-current")==="page")&&o===-1&&(o=t.length),t.push({kind:"tab",label:h,href:v});continue}if(u==="scb-badge"){const h=r.querySelector("scb-dropdown");if(h){const p=h.getAttribute("label")??"";(h.hasAttribute("selected")||h.getAttribute("selected")==="true"||h.getAttribute("active")==="true"||h.getAttribute("aria-current")==="page")&&o===-1&&(o=t.length);const v=`scb-header-tab-${t.length}`;r.getAttribute("slot")!==v&&r.setAttribute("slot",v),h.hasAttribute("slot")&&h.removeAttribute("slot"),h.hasAttribute("as-tab")||h.setAttribute("as-tab",""),t.push({kind:"dropdown",slotName:v,label:p});continue}}if(u==="scb-dropdown"){const h=r.getAttribute("label")??"";(r.hasAttribute("selected")||r.getAttribute("selected")==="true"||r.getAttribute("active")==="true"||r.getAttribute("aria-current")==="page")&&o===-1&&(o=t.length);const p=`scb-header-tab-${t.length}`;r.getAttribute("slot")!==p&&r.setAttribute("slot",p),r.hasAttribute("as-tab")||r.setAttribute("as-tab",""),t.push({kind:"dropdown",slotName:p,label:h});continue}if(u==="scb-header-utility"){a.push({label:r.getAttribute("label")??"",href:r.getAttribute("href")??"#",target:r.getAttribute("target")??void 0});continue}if(u==="scb-header-menu-group"){const h={label:r.getAttribute("label")??"",icon:r.getAttribute("icon")??void 0,children:[]};r.querySelectorAll("scb-header-menu-item").forEach(p=>h.children.push(i(p))),n.push(h);continue}u==="scb-header-menu-item"&&n.push(i(r))}this._slotNavItems=t,this._slotUtils=a,this._slotMenu=n,!this.hasAttribute("active-tab")&&o>=0&&(this.activeTab=o),queueMicrotask(()=>{this.updateComplete.then(()=>{this._scheduleMeasure()})})},this._measure=()=>{const s=this._top,t=this._logoGroup;if(!s||!t)return;const a=window.innerWidth,n=s.clientWidth,o=this._overflows(this._util),i=this._tabsOverflows(),r=a<this.BP_MD||o||i;this._collapsed?!r&&n>=this._unlockAtWidth&&this._setCollapsed(!1):r&&(this._unlockAtWidth=n+this._HYST,this._setCollapsed(!0));let u=!1;if(this.showSearch&&a>=this.BP_SM&&a<this.BP_MD&&this._searchWrap){const p=getComputedStyle(this._searchWrap),v=Math.max(this._num(p.minWidth,this._tokenPx("--scb-header-search-min",320)),this._tokenPx("--scb-header-search-min",320)),y=this._num(getComputedStyle(s).gap,this._tokenPx("--spacing-7",24)),S=this.showDrawer&&(a<this.BP_MD||this._collapsed)?this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-extra-extra-large",48):0;u=t.getBoundingClientRect().width+y+v+y+S+8>n+.5}this._setHideSearch(u);let h=!1;if(this.showDrawer&&(a<this.BP_MD||this._collapsed)&&!this._visible(this._util)&&!this._visible(this._searchWrap)){const p=this._num(getComputedStyle(s).gap,this._tokenPx("--spacing-7",24)),v=this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-extra-extra-large",48),y=(this._logoGroup?.getBoundingClientRect().width||0)+p+v;this._hideLogoText?h=!(n>=this._logoTextUnlockAt):y>n+.5&&(h=!0,this._logoTextUnlockAt=n+this._HYST)}else h=!1,this._logoTextUnlockAt=0;this._setHideLogoText(h)},this._onDrawerOpened=()=>{this._menuExpanded=!0,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("draweropen",{bubbles:!0,composed:!0}))},this._onDrawerClosed=()=>{this._menuExpanded=!1,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("drawerclose",{bubbles:!0,composed:!0}))},this._onMenuClick=s=>{this.showDrawer&&(this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("menuclick",{bubbles:!0,composed:!0})))},this._onSearchClick=s=>{const t=this._searchEl;if(t?.submit&&typeof t.submit=="function"){t.submit();return}const a=t?.value??"";this.searchText=a,this.dispatchEvent(new CustomEvent("search-click",{detail:{value:a},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("searchclick",{detail:{value:a},bubbles:!0,composed:!0})),t?.focus?.()},this._onTabClick=s=>{const t=s.currentTarget;if(!t)return;const a=t.tagName.toLowerCase()==="a";if(a&&(s.defaultPrevented||s.button!==0||s.metaKey||s.ctrlKey||s.shiftKey||s.altKey))return;const n=t.getAttribute("data-index"),o=n!=null?Number(n):0,i=this._getNavItems()[o];if(i?.kind==="dropdown")return;this.activeTab=o;const r=i?.kind==="tab"?i.href??"":"",u=new CustomEvent("tab-change",{detail:{index:o,href:r},bubbles:!0,composed:!0,cancelable:!0}),h=new CustomEvent("tabchange",{detail:{index:o,href:r},bubbles:!0,composed:!0,cancelable:!0});!(this.dispatchEvent(u)&&this.dispatchEvent(h))&&a&&s.preventDefault()},this._onDropdownTabActivate=s=>{const t=s.detail?.dataIndex,a=typeof t=="number"?t:typeof t=="string"?Number(t):this._readTabIndexFromEvent(s);if(a==null||!Number.isFinite(a))return;const n=this._getNavItems();a<0||a>=n.length||n[a]?.kind==="dropdown"&&(this.activeTab=a,this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:a,href:""},bubbles:!0,composed:!0,cancelable:!0})),this.dispatchEvent(new CustomEvent("tabchange",{detail:{index:a,href:""},bubbles:!0,composed:!0,cancelable:!0})))},this._onTabsKeydown=s=>{const t=s.key;if(t!=="ArrowLeft"&&t!=="ArrowRight"&&t!=="Home"&&t!=="End")return;const a=this._getNavItems();if(!a.length)return;const n=this._readTabIndexFromEvent(s);if(n==null)return;let o=Math.max(0,Math.min(a.length-1,n));t==="ArrowRight"?o=(o+1)%a.length:t==="ArrowLeft"?o=(o-1+a.length)%a.length:t==="Home"?o=0:t==="End"&&(o=a.length-1),s.preventDefault(),this._focusTabAtIndex(o)},this._onSearchInput=s=>{this.searchText=s.detail?.value??"",this.dispatchEvent(new CustomEvent("search-input",{detail:{value:this.searchText},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("searchinput",{detail:{value:this.searchText},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("search-text-change",{detail:{value:this.searchText},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("searchtextchange",{detail:{value:this.searchText},bubbles:!0,composed:!0}))},this._onSearchSubmit=s=>{this.searchText=s.detail?.value??"",this.dispatchEvent(new CustomEvent("search-change",{detail:{value:this.searchText,active:s.detail?.active},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("searchchange",{detail:{value:this.searchText,active:s.detail?.active},bubbles:!0,composed:!0}))},this._onSearchClear=()=>{this.searchText="",this.dispatchEvent(new CustomEvent("search-text-change",{detail:{value:""},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("searchtextchange",{detail:{value:""},bubbles:!0,composed:!0}))};const e=++T;this._drawerId=`scb-header-drawer-${e}`,this._searchId=`scb-header-search-${e}`}get _HYST(){return this._tokenPx("--spacing-11",64)}get BP_SM(){return this._tokenPx("--bp-sm",x.BP_SM_DEFAULT)}get BP_MD(){return this._tokenPx("--bp-md",x.BP_MD_DEFAULT)}_scheduleHarvest(){this._harvestPending||(this._harvestPending=!0,queueMicrotask(()=>{this._harvestPending=!1,this._harvest()}))}get _top(){return this.renderRoot.querySelector(".top-row")}get _util(){return this.renderRoot.querySelector(".utility")}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}`)}get _tabsNav(){return this.renderRoot.querySelector(".tabs-nav")}_attachSlotObservers(){this._slotMo?.disconnect(),this._slotWatchers.forEach(n=>n.disconnect()),this._slotWatchers=[];const e=["label","href","icon","target","selected","aria-current","active"],s=n=>{const o=new MutationObserver(i=>{this._scheduleHarvest()});this._slotWatchers.push(o),o.observe(n,{attributes:!0,attributeFilter:e})},t=()=>{this._slotWatchers.forEach(o=>o.disconnect()),this._slotWatchers=[];const n=Array.from(this.children);for(const o of n){const i=o.tagName.toLowerCase();if((i==="scb-header-tab"||i==="scb-dropdown"||i==="scb-header-utility"||i==="scb-header-menu-item"||i==="scb-header-menu-group"||i==="scb-badge")&&s(o),i==="scb-badge"){const r=o,u=new MutationObserver(p=>{t(),this._scheduleHarvest()});this._slotWatchers.push(u),u.observe(r,{childList:!0});const h=r.querySelector("scb-dropdown");h&&s(h);continue}if(i==="scb-header-menu-group"){const r=o,u=new MutationObserver(h=>{t(),this._scheduleHarvest()});this._slotWatchers.push(u),u.observe(r,{childList:!0,subtree:!0}),r.querySelectorAll("scb-header-menu-item").forEach(h=>s(h))}}},a=new MutationObserver(n=>{let o=!1;for(const i of n)if(i.type==="childList"){o=!0;break}o&&t(),this._scheduleHarvest()});this._slotMo=a,a.observe(this,{childList:!0}),t()}_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,s){const t=Number.parseFloat(String(e??"").trim());return Number.isFinite(t)?t:s}_tokenPx(e,s){const t=getComputedStyle(this);return this._num(t.getPropertyValue(e),s)}_visible(e){return e?getComputedStyle(e).display!=="none":!1}_overflows(e){return!e||!this._visible(e)?!1:e.scrollWidth>e.clientWidth+1}_tabsOverflows(){const e=this._tabsNav;if(!e||!this._visible(e))return!1;const s=Array.from(e.querySelectorAll(".tab-wrap"));if(s.length===0)return!1;const t=e.getBoundingClientRect();let a=t.left;for(const n of s){const o=n.getBoundingClientRect();o.width<=0||o.right>a&&(a=o.right)}return a-t.left>t.width+1}firstUpdated(){this.updateComplete.then(()=>{this._harvest(),this._attachSlotObservers(),this._syncDropdownTabs()});const e=this._top;e&&(this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(e)),window.addEventListener("resize",this._onWindowResize,{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("logoWidth")||e.has("logoHeight")||e.has("logoAspectRatio"))&&this._applyLogoSizing(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&this._applySpacing(),(e.has("utilityItems")||e.has("tabs")||e.has("logoText")||e.has("logoSrc")||e.has("logoWidth")||e.has("logoHeight")||e.has("logoAspectRatio")||e.has("activeTab")||e.has("_slotNavItems")||e.has("_slotUtils")||e.has("_slotMenu")||e.has("showDrawer")||e.has("showSearch")||e.has("searchMax")||e.has("searchMin")||e.has("size"))&&this.updateComplete.then(()=>{this._scheduleMeasure()}),(e.has("activeTab")||e.has("_slotNavItems")||e.has("tabs")||e.has("size"))&&this.updateComplete.then(()=>{this._syncDropdownTabs()})}disconnectedCallback(){this._ro?.disconnect(),this._slotMo?.disconnect(),this._slotWatchers.forEach(e=>e.disconnect()),this._slotWatchers=[],window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}_mapSpacingToken(e){if(!e)return;const s=String(e).trim();if(s)return/^\d+$/.test(s)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(s,10)))})`:s}_applySpacing(){const e=this._mapSpacingToken(this.spacing),s=this._mapSpacingToken(this.spacingTop)??e,t=this._mapSpacingToken(this.spacingBottom)??e;s?this.style.setProperty("--scb-header-spacing-block-start",s):this.style.removeProperty("--scb-header-spacing-block-start"),t?this.style.setProperty("--scb-header-spacing-block-end",t):this.style.removeProperty("--scb-header-spacing-block-end")}_applyLogoSizing(){const e=(this.logoWidth??"").trim(),s=(this.logoHeight??"").trim(),t=(this.logoAspectRatio??"").trim();e?this.style.setProperty("--scb-header-logo-img-w",e):this.style.removeProperty("--scb-header-logo-img-w"),s?this.style.setProperty("--scb-header-logo-img-h",s):e?this.style.setProperty("--scb-header-logo-img-h","auto"):this.style.removeProperty("--scb-header-logo-img-h"),t?this.style.setProperty("--scb-header-logo-img-aspect-ratio",t):this.style.removeProperty("--scb-header-logo-img-aspect-ratio")}_closeDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!1)}_syncMenuBtnAria(){const e=this.renderRoot.querySelector(".menu-trigger");e&&e.setAttribute("aria-expanded",String(this._menuExpanded))}_getNavItems(){return this._slotNavItems.length?this._slotNavItems:(this.tabs??[]).map(e=>({kind:"tab",...e}))}_getDropdownForSlot(e){const s=this.querySelector(`[slot="${e}"]`);return s?s.tagName.toLowerCase()==="scb-dropdown"?s:s.querySelector("scb-dropdown"):null}_syncDropdownTabs(){this._getNavItems().forEach((e,s)=>{if(e.kind!=="dropdown")return;const t=this._getDropdownForSlot(e.slotName);if(!t)return;const a=String(s);t.getAttribute("data-index")!==a&&t.setAttribute("data-index",a),t.hasAttribute("as-tab")||t.setAttribute("as-tab","");const n=this.size,o=t;o?.size!==n&&(o.size=n),s===this.activeTab?t.getAttribute("aria-current")!=="page"&&t.setAttribute("aria-current","page"):t.hasAttribute("aria-current")&&t.removeAttribute("aria-current")})}_readTabIndexFromEvent(e){const s=e.composedPath?e.composedPath():[];for(const t of s){if(!(t instanceof HTMLElement))continue;const a=t.getAttribute("data-index");if(a==null)continue;const n=Number(a);if(Number.isFinite(n))return n}return null}_focusTabAtIndex(e){const s=this._getNavItems()[e];if(s){if(s.kind==="dropdown"){this._getDropdownForSlot(s.slotName)?.focus?.();return}this.renderRoot.querySelector(`.tab-link[data-index="${e}"]`)?.focus?.()}}_renderMenuNodes(e){return!e||e.length===0?m``:m`${e.map(s=>this._renderMenuNode(s))}`}_renderMenuNode(e){const s=Array.isArray(e.children)&&e.children.length>0,t=(e.href??"").trim(),a=(e.icon??"").trim();return m`
+      <scb-menu-item
+        label=${e.label}
+        ?selected=${!1}
+        leading-icon=${a||g}
+        item-href=${t||g}
+      >
+        ${s?m`
+              <scb-sub-menu label=${e.label}>
+                ${e.children.map(n=>this._renderMenuNode(n))}
+              </scb-sub-menu>
+            `:g}
+      </scb-menu-item>
+    `}_syncFlags(e,s){this.toggleAttribute("data-no-utility",e),this.toggleAttribute("data-no-search",s)}render(){const e=this._getNavItems(),s=this._slotUtils.length?this._slotUtils:this.utilityItems,t=this._slotMenu.length?this._slotMenu:this.menuData??[],a=this.querySelector('[slot="drawer-menu"]')!==null;this._syncFlags(s.length===0,!this.showSearch);const n=this.searchHeight&&this.searchHeight.trim()?`--scb-search-height:${this.searchHeight.trim()}`:g,o=e.length>0||this.reserveTabs;return m`
+      <slot
+        id="data-slot"
+        @slotchange=${()=>{this._harvest(),this._attachSlotObservers()}}
+        hidden
+      ></slot>
+
+      <div
+        class="header-landmark"
+        role=${this.banner?"banner":g}
+        aria-label=${this.banner&&this.bannerLabel?this.bannerLabel:g}
+      >
+        <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">
+              <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">
+                  ${s.map(i=>m`
+                      <scb-link
+                        .href=${i.href}
+                        .target=${i.target??void 0}
+                        >${i.label}</scb-link
+                      >
+                    `)}
+                </nav>
+
+                ${this.showSearch?m`
+                      <div class="search" style=${n}>
+                        <scb-search
+                          id=${this._searchId}
+                          .size=${this.size}
+                          style=${n}
+                          .value=${this.searchText}
+                          .supportingText=${this.searchPlaceholder??""}
+                          @scb-search-input=${this._onSearchInput}
+                          @scb-search-submit=${this._onSearchSubmit}
+                          @scb-search-clear=${this._onSearchClear}
+                        ></scb-search>
+                        <scb-button
+                          variant="filled-tonal"
+                          label="Sök"
+                          .size=${this.size}
+                          @click=${this._onSearchClick}
+                        ></scb-button>
+                      </div>
+                    `:g}
+                ${this.showDrawer?m`
+                      <scb-button
+                        class="menu-trigger"
+                        variant="text"
+                        label="Meny"
+                        icon="menu"
+                        trailing-icon
+                        .size=${this.size}
+                        aria-controls=${this._drawerId}
+                        aria-haspopup="dialog"
+                        aria-expanded=${String(this._menuExpanded)}
+                        title="Öppna meny"
+                        @click=${this._onMenuClick}
+                      ></scb-button>
+                    `:g}
+              </div>
+
+            </div>
+          </scb-grid-item>
+
+          <scb-grid-item
+            col-span-compact="4"
+            col-span-medium="8"
+            col-span-expanded="12"
+          >
+            ${o?e.length?m`
+                    <div class="tabs-inset">
+                      <nav
+                        class="tabs-nav"
+                        aria-label="Huvudnavigering"
+                        @keydown=${this._onTabsKeydown}
+                        @scb-dropdown-tab-activate=${this._onDropdownTabActivate}
+                      >
+                        ${e.map((i,r)=>i.kind==="dropdown"?m`
+                                <div class="tab-wrap">
+                                  <slot name=${i.slotName}></slot>
+                                </div>
+                              `:i.href?m`
+                                <div class="tab-wrap">
+                                  <a
+                                    class="tab-link"
+                                    href=${i.href}
+                                    data-index=${r}
+                                    aria-current=${r===this.activeTab?"page":g}
+                                    @click=${this._onTabClick}
+                                  >
+                                    ${i.label}
+                                  </a>
+                                  <md-focus-ring></md-focus-ring>
+                                </div>
+                              `:m`
+                                <div class="tab-wrap">
+                                  <button
+                                    type="button"
+                                    class="tab-link"
+                                    data-index=${r}
+                                    aria-current=${r===this.activeTab?"page":g}
+                                    @click=${this._onTabClick}
+                                  >
+                                    ${i.label}
+                                  </button>
+                                  <md-focus-ring></md-focus-ring>
+                                </div>
+                              `)}
+                      </nav>
+                    </div>
+                  `:m`
+                    <div class="tabs-inset">
+                      <div class="tabs-nav tabs-nav--skeleton" aria-hidden="true">
+                        ${this._renderTabSkeletons()}
+                      </div>
+                    </div>
+                  `:g}
+            <div class="divider" role="presentation"></div>
+          </scb-grid-item>
+        </scb-grid>
+      </div>
+
+      ${this.showDrawer?m`
+            <scb-drawer
+              id=${this._drawerId}
+              floating
+              right
+              ?overlay=${this.drawerOverlay}
+              ?lock-scroll=${this.drawerOverlay}
+              ?modal=${this.drawerOverlay}
+              style="--scb-drawer-padding: 0px;"
+              @scb-drawer-opened=${this._onDrawerOpened}
+              @scb-drawer-closed=${this._onDrawerClosed}
+              @scb-menu-select=${this._onMenuSelect}
+            >
+            <slot name="drawer-menu"></slot>
+
+              ${a?g:m`
+                    <scb-menu
+              .label=${this.menuLabel??""}
+              .subLabel=${this.menuSubLabel??""}
+              >
+              <scb-search
+                  .size=${this.size}
+                  .supportingText=${this.menuSearchPlaceholder??""}
+              ></scb-search>
+
+              ${this.menuSectionLabel?m`
+                    <scb-menu-section
+                      .label=${this.menuSectionLabel}
+                    ></scb-menu-section>
+                  `:g}
+
+              ${this._renderMenuNodes(t)}
+
+              ${this.includeUtilityInMenu&&(s?.length??0)>0?m`
+                    <scb-menu-section label=''></scb-menu-section>
+                    ${s.map(i=>m`
+                        <scb-menu-item
+                          label=${i.label}
+                          item-href=${i.href}
+                        ></scb-menu-item>
+                      `)}
+                  `:g}
+            </scb-menu>
+                  `}
+            </scb-drawer>
+          `:g}
+    `}_renderTabSkeletons(){const e=["96px","72px","88px","64px"],s=(this.reserveTabsWidths??"").split(/[\s,]+/).map(o=>o.trim()).filter(Boolean).map(o=>/^\d+(?:\.\d+)?$/.test(o)?`${o}px`:o),t=s.length>0?s:e,a=Number(this.reserveTabsCount),n=Number.isFinite(a)&&a>0?Math.floor(a):s.length>0?s.length:e.length;return m`${Array.from({length:n},(o,i)=>t[i%t.length]).map(o=>m`<scb-skeleton variant="rounded" width=${o} height="16px"></scb-skeleton>`)}`}_renderLogo(){const e=(this.logoSrc??"").trim();return e?m`<img class="logo" src=${e} alt="" aria-hidden="true" />`:m`
+      <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>
+    `}},x=_,_._JSON_ARRAY={fromAttribute:b=>{if(b==null||b==="")return[];try{const e=JSON.parse(b);return Array.isArray(e)?e:[]}catch{return[]}},toAttribute:b=>b==null?null:JSON.stringify(b)},_.BP_SM_DEFAULT=600,_.BP_MD_DEFAULT=840,_.styles=k`
+    :host {
+      display: block;
+      margin-block-start: var(--scb-header-spacing-block-start, 0);
+      margin-block-end: var(--scb-header-spacing-block-end, 0);
+      background: var(--scb-header-background, transparent);
+      color: var(--md-sys-color-on-surface, #1b1b1f);
+      --scb-header-search-max: 380px;
+      --scb-header-search-min: 250px;
+
+      --scb-header-logo-w: var(--icon-size-extra-extra-large, 48px);
+      --scb-header-logo-h: calc(var(--scb-header-logo-w) * 1.125);
+
+
+      --scb-header-logo-slot-w: var(--scb-header-logo-img-w, auto);
+      --scb-header-logo-slot-h: var(--scb-header-logo-img-h, var(--scb-header-logo-h));
+      --scb-header-logo-slot-aspect-ratio: var(--scb-header-logo-img-aspect-ratio, 48 / 54);
+
+      --scb-header-logo-text-font-size: var(
+        --md-sys-typescale-body-medium-size,
+        1rem
+      );
+      --scb-header-logo-text-line-height: var(
+        --md-sys-typescale-body-medium-line-height,
+        1.5rem
+      );
+
+      --scb-header-utility-font-size: var(
+        --md-sys-typescale-body-medium-size,
+        1rem
+      );
+      --scb-header-utility-line-height: var(
+        --md-sys-typescale-body-medium-line-height,
+        1.5rem
+      );
+
+      --scb-header-tab-font-size: var(
+        --md-sys-typescale-title-small-size,
+        1rem
+      );
+      --scb-header-tab-line-height: var(
+        --md-sys-typescale-title-small-line-height,
+        1.5rem
+      );
+    }
+
+    :host([size='small']) {
+      --scb-header-logo-text-font-size: var(
+        --md-sys-typescale-body-small-size,
+        0.875rem
+      );
+      --scb-header-logo-text-line-height: var(
+        --md-sys-typescale-body-small-line-height,
+        1.25rem
+      );
+
+      --scb-header-utility-font-size: var(
+        --md-sys-typescale-body-small-size,
+        0.875rem
+      );
+      --scb-header-utility-line-height: var(
+        --md-sys-typescale-body-small-line-height,
+        1.25rem
+      );
+
+      --scb-header-tab-font-size: var(
+        --md-sys-typescale-label-small-size,
+        0.875rem
+      );
+      --scb-header-tab-line-height: var(
+        --md-sys-typescale-label-small-line-height,
+        1.25rem
+      );
+    }
+
+    :host([size='large']) {
+      --scb-header-logo-text-font-size: var(
+        --md-sys-typescale-body-large-size,
+        1.125rem
+      );
+      --scb-header-logo-text-line-height: var(
+        --md-sys-typescale-body-large-line-height,
+        1.625rem
+      );
+
+      --scb-header-utility-font-size: var(
+        --md-sys-typescale-body-large-size,
+        1.125rem
+      );
+      --scb-header-utility-line-height: var(
+        --md-sys-typescale-body-large-line-height,
+        1.625rem
+      );
+
+      --scb-header-tab-font-size: var(
+        --md-sys-typescale-title-medium-size,
+        1.125rem
+      );
+      --scb-header-tab-line-height: var(
+        --md-sys-typescale-title-medium-line-height,
+        1.625rem
+      );
+    }
+
+    .top-row {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-7, 24px);
+      padding-block: var(--spacing-5, 16px);
+      min-width: 0;
+    }
+
+    .logo-wrap {
+      display: inline-block;
+      position: relative;
+      border-radius: var(
+        --scb-header-logo-focus-ring-radius,
+        var(--md-sys-shape-corner-small, 4px)
+      );
+      margin-top: var(--spacing-2, 4px);
+    }
+    .logo-wrap md-focus-ring {
+      position: absolute;
+      inset: var(--spacing-neg-2, -4px);
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+    .logo-group:focus-visible + 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-slot-w);
+      height: var(--scb-header-logo-slot-h);
+      aspect-ratio: var(--scb-header-logo-slot-aspect-ratio);
+      display: block;
+      color: var(--md-sys-color-on-surface);
+    }
+
+
+    .logo-group img {
+      width: var(--scb-header-logo-slot-w);
+      height: var(--scb-header-logo-slot-h);
+      aspect-ratio: var(--scb-header-logo-slot-aspect-ratio);
+      display: block;
+      object-fit: contain;
+    }
+
+    :host([logo-invert-dm][theme='dark']) .logo-group img,
+    :host([logo-invert-dm]):host-context([theme='dark']) .logo-group img {
+      filter: brightness(0) invert(1);
+    }
+    .logo-text {
+      font-family: var(--brand-font, Inter), sans-serif;
+      font-size: var(
+        --scb-header-logo-text-font-size,
+        var(--md-sys-typescale-body-medium-size, 1rem)
+      );
+      line-height: var(
+        --scb-header-logo-text-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 {
+      font-family: var(--md-sys-typescale-body-medium-font, var(--brand-font)),
+        sans-serif;
+      font-size: var(
+        --scb-header-utility-font-size,
+        var(--md-sys-typescale-body-medium-size)
+      );
+      line-height: var(
+        --scb-header-utility-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);
+      --scb-link-color: var(--md-sys-color-primary);
+      --scb-link-white-space: nowrap;
+    }
+
+
+    @media (min-width: 840px) {
+      .utility {
+        display: flex;
+      }
+    }
+    :host([data-collapsed]) .utility {
+      display: none !important;
+    }
+
+    .menu-trigger {
+      display: none;
+      align-self: stretch;
+      color: var(--md-sys-color-on-surface, #1b1b1f);
+      --md-sys-color-primary: var(--md-sys-color-on-surface, #1b1b1f);
+    }
+    @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);
+    }
+    scb-search {
+      width: 100%;
+    }
+    .search scb-search {
+      flex: 1 1 auto;
+      width: auto;
+    }
+    .search scb-button {
+      flex: 0 0 auto;
+    }
+    @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;
+      }
+    }
+
+    .tabs-nav {
+      display: inline-flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: var(--spacing-6, 18px);
+      min-height: calc(var(--spacing-10, 40px));
+      position: relative;
+    }
+
+    .tabs-nav--skeleton {
+      align-items: center;
+    }
+
+    .tabs-nav--skeleton scb-skeleton {
+      flex: 0 0 auto;
+    }
+
+    .tab-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: stretch;
+
+     }
+
+     .tab-wrap md-focus-ring {
+      position: absolute;
+      inset-block: var(--spacing-1, 2px);
+      inset-inline: var(--spacing-neg-2, -4px);
+      pointer-events: none;
+      display: none;
+      border-radius: 5px;
+     }
+
+
+    .tab-link {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding-block: var(--spacing-4, 12px);
+      padding: 0;
+      border: none;
+      background: none;
+      text-decoration: none;
+      cursor: pointer;
+      font-family: var(
+        --md-sys-typescale-title-small-font,
+        var(--brand-font, Inter)
+      );
+      font-size: var(
+        --scb-header-tab-font-size,
+        var(--md-sys-typescale-title-small-size, 1rem)
+      );
+      line-height: var(
+        --scb-header-tab-line-height,
+        var(--md-sys-typescale-title-small-line-height, 1.5rem)
+      );
+      font-weight: var(--md-sys-typescale-title-small-weight, 500);
+      letter-spacing: var(--md-sys-typescale-title-small-tracking, 0);
+      color: var(--md-sys-color-on-surface);
+      white-space: nowrap;
+      border-radius: 0;
+      outline: none;
+    }
+
+    .tab-link[aria-current='page'] {
+      color: var(--md-sys-color-primary);
+    }
+
+    .tab-link::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 3px;
+      border-radius: 999px 999px 0 0;
+      background-color: transparent;
+    }
+
+    .tab-link[aria-current='page']::after {
+      background-color: var(--md-sys-color-primary);
+    }
+
+    .tab-link:focus-visible + md-focus-ring {
+      display: block;
+    }
+
+    .divider {
+      border-bottom: var(--stroke-border, 1px) solid
+        var(--md-sys-color-outline-variant, #e0e0e0);
+      position: relative;
+      z-index: 0;
+    }
+
+    :host([data-hide-logo-text]) .logo-text {
+      display: none;
+    }
+  `,_);c([d({type:String,attribute:"max-width"})],l.prototype,"maxWidth",void 0);c([d({type:String,reflect:!0})],l.prototype,"spacing",void 0);c([d({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",void 0);c([d({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",void 0);c([d({type:String,reflect:!0,converter:M})],l.prototype,"size",void 0);c([d({type:String,attribute:"logo-text"})],l.prototype,"logoText",void 0);c([d({type:String,attribute:"logo-href"})],l.prototype,"logoHref",void 0);c([d({type:String,attribute:"logo-src"})],l.prototype,"logoSrc",void 0);c([d({type:String,attribute:"logo-width"})],l.prototype,"logoWidth",void 0);c([d({type:String,attribute:"logo-height"})],l.prototype,"logoHeight",void 0);c([d({type:String,attribute:"logo-aspect-ratio"})],l.prototype,"logoAspectRatio",void 0);c([d({attribute:"logo-invert-dm",reflect:!0,converter:w})],l.prototype,"logoInvertDm",void 0);c([d({type:Boolean,reflect:!0})],l.prototype,"banner",void 0);c([d({type:String,attribute:"banner-label"})],l.prototype,"bannerLabel",void 0);c([d({attribute:"tabs",converter:l._JSON_ARRAY})],l.prototype,"tabs",void 0);c([d({type:Number,attribute:"active-tab"})],l.prototype,"activeTab",void 0);c([d({attribute:"reserve-tabs",reflect:!0,converter:E})],l.prototype,"reserveTabs",void 0);c([d({type:Number,attribute:"reserve-tabs-count"})],l.prototype,"reserveTabsCount",void 0);c([d({type:String,attribute:"reserve-tabs-widths"})],l.prototype,"reserveTabsWidths",void 0);c([d({attribute:"utility-items",converter:l._JSON_ARRAY})],l.prototype,"utilityItems",void 0);c([d({type:String,attribute:"search-placeholder"})],l.prototype,"searchPlaceholder",void 0);c([d({type:String,attribute:"menu-label"})],l.prototype,"menuLabel",void 0);c([d({type:String,attribute:"menu-sub-label"})],l.prototype,"menuSubLabel",void 0);c([d({type:String,attribute:"menu-section-label"})],l.prototype,"menuSectionLabel",void 0);c([d({type:String,attribute:"menu-search-placeholder"})],l.prototype,"menuSearchPlaceholder",void 0);c([d({attribute:"menu-data",converter:l._JSON_ARRAY})],l.prototype,"menuData",void 0);c([d({attribute:"show-drawer",reflect:!0,converter:w})],l.prototype,"showDrawer",void 0);c([d({attribute:"show-search",reflect:!0,converter:w})],l.prototype,"showSearch",void 0);c([d({attribute:"include-utility-in-menu",reflect:!0,converter:w})],l.prototype,"includeUtilityInMenu",void 0);c([d({attribute:"drawer-overlay",reflect:!0,converter:w})],l.prototype,"drawerOverlay",void 0);c([d({type:String,attribute:"search-max"})],l.prototype,"searchMax",void 0);c([d({type:String,attribute:"search-min"})],l.prototype,"searchMin",void 0);c([d({type:String,attribute:"search-height"})],l.prototype,"searchHeight",void 0);c([d({type:String,attribute:"search-text",reflect:!0})],l.prototype,"searchText",void 0);c([f()],l.prototype,"_drawerId",void 0);c([f()],l.prototype,"_menuExpanded",void 0);c([f()],l.prototype,"_searchId",void 0);c([f()],l.prototype,"_slotNavItems",void 0);c([f()],l.prototype,"_slotUtils",void 0);c([f()],l.prototype,"_slotMenu",void 0);c([f()],l.prototype,"_collapsed",void 0);c([f()],l.prototype,"_hideLogoText",void 0);l=x=c([C("scb-header")],l);