scb-wc 0.1.3 → 0.1.4

package/scb-header/scb-header.js

@@ -0,0 +1,1358 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/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";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+//#region src/scb-test-components/scb-header/scb-header.ts
+var c, l = 0;
+(() => {
+	if (typeof window > "u" || typeof document > "u" || !("customElements" in window) || document.head.querySelector("style[data-scb-header-pre-upgrade]")) return;
+	let e = document.createElement("style");
+	e.setAttribute("data-scb-header-pre-upgrade", ""), e.textContent = "\n    scb-header:not(:defined) {\n      display: block;\n      margin-block-start: var(--scb-header-spacing-block-start, 0);\n      margin-block-end: var(--scb-header-spacing-block-end, 0);\n      background: var(--scb-header-background, transparent);\n      color: var(--md-sys-color-on-surface, #1b1b1f);\n\n      --scb-header-pre-logo-w: var(--icon-size-extra-extra-large, 48px);\n      --scb-header-pre-logo-h: var(\n        --scb-header-pre-logo-img-h,\n        calc(var(--scb-header-pre-logo-w) * 1.125)\n      );\n\n      --scb-header-pre-top-row: calc(\n        (var(--spacing-7, 24px) * 2) +\n          max(\n            var(--scb-header-pre-logo-h),\n            var(--scb-header-pre-control-size, 48px)\n          ) +\n          var(--spacing-2, 4px)\n      );\n      --scb-header-pre-divider: var(--stroke-border, 1px);\n      --scb-header-pre-tabs-row: var(--spacing-10, 40px);\n      --scb-header-pre-block-size: calc(\n        var(--scb-header-pre-top-row) + var(--scb-header-pre-divider)\n      );\n\n      min-block-size: var(--scb-header-pre-block-size);\n      visibility: hidden;\n    }\n\n    scb-header:not(:defined) > * {\n      display: none;\n    }\n\n    @media (min-width: 840px) {\n      scb-header:not(:defined)[data-pre-has-tabs] {\n        --scb-header-pre-block-size: calc(\n          var(--scb-header-pre-top-row) +\n            var(--scb-header-pre-tabs-row) +\n            var(--scb-header-pre-divider)\n        );\n      }\n    }\n  ", document.head.appendChild(e);
+	let t = (e) => {
+		let t = String(e ?? "").trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}, n = (e) => {
+		let t = String(e ?? "").trim();
+		if (!t) return !1;
+		try {
+			let e = JSON.parse(t);
+			return Array.isArray(e) && e.length > 0;
+		} catch {
+			return !1;
+		}
+	}, r = (e) => {
+		for (let t of Array.from(e.children)) {
+			let e = t.tagName.toLowerCase();
+			if (e === "scb-header-tab" || e === "scb-dropdown") return !0;
+		}
+		return !1;
+	}, i = (e) => {
+		r(e) || n(e.getAttribute("tabs")) ? e.setAttribute("data-pre-has-tabs", "") : e.removeAttribute("data-pre-has-tabs");
+		let i = t(e.getAttribute("spacing")), a = t(e.getAttribute("spacing-top")) ?? i, o = t(e.getAttribute("spacing-bottom")) ?? i;
+		a ? e.style.setProperty("--scb-header-spacing-block-start", a) : e.style.removeProperty("--scb-header-spacing-block-start"), o ? e.style.setProperty("--scb-header-spacing-block-end", o) : e.style.removeProperty("--scb-header-spacing-block-end");
+		let s = (e.getAttribute("logo-width") ?? "").trim();
+		s ? e.style.setProperty("--scb-header-pre-logo-w", s) : e.style.removeProperty("--scb-header-pre-logo-w");
+		let c = (e.getAttribute("logo-height") ?? "").trim();
+		c ? e.style.setProperty("--scb-header-pre-logo-img-h", c) : e.style.removeProperty("--scb-header-pre-logo-img-h");
+		let l = (e.getAttribute("search-height") ?? "").trim();
+		l ? e.style.setProperty("--scb-header-pre-control-size", l) : e.style.removeProperty("--scb-header-pre-control-size");
+	};
+	document.querySelectorAll("scb-header").forEach(i);
+	let a = new MutationObserver((e) => {
+		for (let t of e) {
+			if (t.type === "attributes") {
+				let e = t.target;
+				e instanceof HTMLElement && e.tagName.toLowerCase() === "scb-header" && i(e);
+				continue;
+			}
+			if (t.type === "childList") {
+				let e = [...Array.from(t.addedNodes), ...Array.from(t.removedNodes)];
+				for (let t of e) {
+					if (!(t instanceof HTMLElement)) continue;
+					if (t.tagName.toLowerCase() === "scb-header") {
+						i(t);
+						continue;
+					}
+					let e = t.closest?.("scb-header");
+					e && i(e);
+				}
+			}
+		}
+	});
+	a.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(() => {
+		a.disconnect();
+	});
+})();
+var u = {
+	fromAttribute: (e) => e == null ? !0 : !/^(false|0|off|no)$/i.test(e),
+	toAttribute: (e) => String(!!e)
+}, d = {
+	fromAttribute: (e) => e == null ? !1 : !/^(false|0|off|no)$/i.test(e),
+	toAttribute: (e) => String(!!e)
+}, f = {
+	fromAttribute: (e) => e === "small" || e === "large" ? e : "medium",
+	toAttribute: (e) => {
+		let t = String(e ?? "");
+		return t === "small" || t === "large" ? t : null;
+	}
+}, p = class extends t {
+	static {
+		c = this;
+	}
+	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 = (e) => {
+			let t = e.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
+			}));
+			let n = t?.item, r = typeof t?.href == "string" ? t.href : typeof t?.itemHref == "string" ? t.itemHref : typeof t?.item_href == "string" ? t.item_href : "", i = n ? n.getAttribute("item-href") ?? n.getAttribute("href") ?? "" : "";
+			String(r || i || "").trim() && this._closeDrawerNow();
+		}, this._collapsed = !1, this._unlockAtWidth = 0, this._hideLogoText = !1, this._logoTextUnlockAt = 0, this._slotWatchers = [], this._harvestPending = !1, this._harvest = () => {
+			let e = Array.from(this.children), t = [], n = [], r = [], i = -1, a = (e) => ({
+				label: e.getAttribute("label") ?? "",
+				href: e.getAttribute("href") ?? void 0,
+				icon: e.getAttribute("icon") ?? void 0
+			});
+			for (let o of e) {
+				let e = o.tagName.toLowerCase();
+				if (e === "scb-header-tab") {
+					let e = o.getAttribute("label") ?? "", n = o.getAttribute("href"), r = n && n.trim() !== "" ? n : void 0;
+					(o.hasAttribute("selected") || o.getAttribute("selected") === "true" || o.getAttribute("active") === "true" || o.getAttribute("aria-current") === "page") && i === -1 && (i = t.length), t.push({
+						kind: "tab",
+						label: e,
+						href: r
+					});
+					continue;
+				}
+				if (e === "scb-badge") {
+					let e = o.querySelector("scb-dropdown");
+					if (e) {
+						let n = e.getAttribute("label") ?? "";
+						(e.hasAttribute("selected") || e.getAttribute("selected") === "true" || e.getAttribute("active") === "true" || e.getAttribute("aria-current") === "page") && i === -1 && (i = t.length);
+						let r = `scb-header-tab-${t.length}`;
+						o.getAttribute("slot") !== r && o.setAttribute("slot", r), e.hasAttribute("slot") && e.removeAttribute("slot"), e.hasAttribute("as-tab") || e.setAttribute("as-tab", ""), t.push({
+							kind: "dropdown",
+							slotName: r,
+							label: n
+						});
+						continue;
+					}
+				}
+				if (e === "scb-dropdown") {
+					let e = o.getAttribute("label") ?? "";
+					(o.hasAttribute("selected") || o.getAttribute("selected") === "true" || o.getAttribute("active") === "true" || o.getAttribute("aria-current") === "page") && i === -1 && (i = t.length);
+					let n = `scb-header-tab-${t.length}`;
+					o.getAttribute("slot") !== n && o.setAttribute("slot", n), o.hasAttribute("as-tab") || o.setAttribute("as-tab", ""), t.push({
+						kind: "dropdown",
+						slotName: n,
+						label: e
+					});
+					continue;
+				}
+				if (e === "scb-header-utility") {
+					n.push({
+						label: o.getAttribute("label") ?? "",
+						href: o.getAttribute("href") ?? "#",
+						target: o.getAttribute("target") ?? void 0
+					});
+					continue;
+				}
+				if (e === "scb-header-menu-group") {
+					let e = {
+						label: o.getAttribute("label") ?? "",
+						icon: o.getAttribute("icon") ?? void 0,
+						children: []
+					};
+					o.querySelectorAll("scb-header-menu-item").forEach((t) => e.children.push(a(t))), r.push(e);
+					continue;
+				}
+				e === "scb-header-menu-item" && r.push(a(o));
+			}
+			this._slotNavItems = t, this._slotUtils = n, this._slotMenu = r, !this.hasAttribute("active-tab") && i >= 0 && (this.activeTab = i), queueMicrotask(() => {
+				this.updateComplete.then(() => {
+					this._scheduleMeasure();
+				});
+			});
+		}, this._measure = () => {
+			let e = this._top, t = this._logoGroup;
+			if (!e || !t) return;
+			let n = window.innerWidth, r = e.clientWidth, i = this._overflows(this._util), a = this._tabsOverflows(), o = n < this.BP_MD || i || a;
+			this._collapsed ? !o && r >= this._unlockAtWidth && this._setCollapsed(!1) : o && (this._unlockAtWidth = r + this._HYST, this._setCollapsed(!0));
+			let s = !1;
+			if (this.showSearch && n >= this.BP_SM && n < this.BP_MD && this._searchWrap) {
+				let i = getComputedStyle(this._searchWrap), a = Math.max(this._num(i.minWidth, this._tokenPx("--scb-header-search-min", 320)), this._tokenPx("--scb-header-search-min", 320)), o = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), c = this.showDrawer && (n < this.BP_MD || this._collapsed) ? this._menuBtn?.getBoundingClientRect().width || this._tokenPx("--icon-size-extra-extra-large", 48) : 0;
+				s = t.getBoundingClientRect().width + o + a + o + c + 8 > r + .5;
+			}
+			this._setHideSearch(s);
+			let c = !1;
+			if (this.showDrawer && (n < this.BP_MD || this._collapsed) && !this._visible(this._util) && !this._visible(this._searchWrap)) {
+				let t = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), n = this._menuBtn?.getBoundingClientRect().width || this._tokenPx("--icon-size-extra-extra-large", 48), i = (this._logoGroup?.getBoundingClientRect().width || 0) + t + n;
+				this._hideLogoText ? c = !(r >= this._logoTextUnlockAt) : i > r + .5 && (c = !0, this._logoTextUnlockAt = r + this._HYST);
+			} else c = !1, this._logoTextUnlockAt = 0;
+			this._setHideLogoText(c);
+		}, 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 = (e) => {
+			this.showDrawer && (this.dispatchEvent(new CustomEvent("menu-click", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("menuclick", {
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this._onSearchClick = (e) => {
+			let t = this._searchEl;
+			if (t?.submit && typeof t.submit == "function") {
+				t.submit();
+				return;
+			}
+			let n = t?.value ?? "";
+			this.searchText = n, this.dispatchEvent(new CustomEvent("search-click", {
+				detail: { value: n },
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("searchclick", {
+				detail: { value: n },
+				bubbles: !0,
+				composed: !0
+			})), t?.focus?.();
+		}, this._onTabClick = (e) => {
+			let t = e.currentTarget;
+			if (!t) return;
+			let n = t.tagName.toLowerCase() === "a";
+			if (n && (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+			let r = t.getAttribute("data-index"), i = r == null ? 0 : Number(r), a = this._getNavItems()[i];
+			if (a?.kind === "dropdown") return;
+			this.activeTab = i;
+			let o = a?.kind === "tab" ? a.href ?? "" : "", s = new CustomEvent("tab-change", {
+				detail: {
+					index: i,
+					href: o
+				},
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			}), c = new CustomEvent("tabchange", {
+				detail: {
+					index: i,
+					href: o
+				},
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			});
+			!(this.dispatchEvent(s) && this.dispatchEvent(c)) && n && e.preventDefault();
+		}, this._onDropdownTabActivate = (e) => {
+			let t = e.detail?.dataIndex, n = typeof t == "number" ? t : typeof t == "string" ? Number(t) : this._readTabIndexFromEvent(e);
+			if (n == null || !Number.isFinite(n)) return;
+			let r = this._getNavItems();
+			n < 0 || n >= r.length || r[n]?.kind === "dropdown" && (this.activeTab = n, this.dispatchEvent(new CustomEvent("tab-change", {
+				detail: {
+					index: n,
+					href: ""
+				},
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			})), this.dispatchEvent(new CustomEvent("tabchange", {
+				detail: {
+					index: n,
+					href: ""
+				},
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			})));
+		}, this._onTabsKeydown = (e) => {
+			let t = e.key;
+			if (t !== "ArrowLeft" && t !== "ArrowRight" && t !== "Home" && t !== "End") return;
+			let n = this._getNavItems();
+			if (!n.length) return;
+			let r = this._readTabIndexFromEvent(e);
+			if (r == null) return;
+			let i = Math.max(0, Math.min(n.length - 1, r));
+			t === "ArrowRight" ? i = (i + 1) % n.length : t === "ArrowLeft" ? i = (i - 1 + n.length) % n.length : t === "Home" ? i = 0 : t === "End" && (i = n.length - 1), e.preventDefault(), this._focusTabAtIndex(i);
+		}, this._onSearchInput = (e) => {
+			this.searchText = e.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 = (e) => {
+			this.searchText = e.detail?.value ?? "", this.dispatchEvent(new CustomEvent("search-change", {
+				detail: {
+					value: this.searchText,
+					active: e.detail?.active
+				},
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("searchchange", {
+				detail: {
+					value: this.searchText,
+					active: e.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
+			}));
+		};
+		let e = ++l;
+		this._drawerId = `scb-header-drawer-${e}`, this._searchId = `scb-header-search-${e}`;
+	}
+	static {
+		this._JSON_ARRAY = {
+			fromAttribute: (e) => {
+				if (e == null || e === "") return [];
+				try {
+					let t = JSON.parse(e);
+					return Array.isArray(t) ? t : [];
+				} catch {
+					return [];
+				}
+			},
+			toAttribute: (e) => e == null ? null : JSON.stringify(e)
+		};
+	}
+	static {
+		this.BP_SM_DEFAULT = 600;
+	}
+	static {
+		this.BP_MD_DEFAULT = 840;
+	}
+	get _HYST() {
+		return this._tokenPx("--spacing-11", 64);
+	}
+	get BP_SM() {
+		return this._tokenPx("--bp-sm", c.BP_SM_DEFAULT);
+	}
+	get BP_MD() {
+		return this._tokenPx("--bp-md", c.BP_MD_DEFAULT);
+	}
+	_scheduleHarvest() {
+		this._harvestPending || (this._harvestPending = !0, queueMicrotask(() => {
+			this._harvestPending = !1, this._harvest();
+		}));
+	}
+	static {
+		this.styles = n`
+    :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;
+    }
+  `;
+	}
+	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((e) => e.disconnect()), this._slotWatchers = [];
+		let e = [
+			"label",
+			"href",
+			"icon",
+			"target",
+			"selected",
+			"aria-current",
+			"active"
+		], t = (t) => {
+			let n = new MutationObserver((e) => {
+				this._scheduleHarvest();
+			});
+			this._slotWatchers.push(n), n.observe(t, {
+				attributes: !0,
+				attributeFilter: e
+			});
+		}, n = () => {
+			this._slotWatchers.forEach((e) => e.disconnect()), this._slotWatchers = [];
+			let e = Array.from(this.children);
+			for (let r of e) {
+				let e = r.tagName.toLowerCase();
+				if ((e === "scb-header-tab" || e === "scb-dropdown" || e === "scb-header-utility" || e === "scb-header-menu-item" || e === "scb-header-menu-group" || e === "scb-badge") && t(r), e === "scb-badge") {
+					let e = r, i = new MutationObserver((e) => {
+						n(), this._scheduleHarvest();
+					});
+					this._slotWatchers.push(i), i.observe(e, { childList: !0 });
+					let a = e.querySelector("scb-dropdown");
+					a && t(a);
+					continue;
+				}
+				if (e === "scb-header-menu-group") {
+					let e = r, i = new MutationObserver((e) => {
+						n(), this._scheduleHarvest();
+					});
+					this._slotWatchers.push(i), i.observe(e, {
+						childList: !0,
+						subtree: !0
+					}), e.querySelectorAll("scb-header-menu-item").forEach((e) => t(e));
+				}
+			}
+		}, r = new MutationObserver((e) => {
+			let t = !1;
+			for (let n of e) if (n.type === "childList") {
+				t = !0;
+				break;
+			}
+			t && n(), this._scheduleHarvest();
+		});
+		this._slotMo = r, r.observe(this, { childList: !0 }), n();
+	}
+	_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) {
+		let n = Number.parseFloat(String(e ?? "").trim());
+		return Number.isFinite(n) ? n : t;
+	}
+	_tokenPx(e, t) {
+		let n = getComputedStyle(this);
+		return this._num(n.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;
+	}
+	_tabsOverflows() {
+		let e = this._tabsNav;
+		if (!e || !this._visible(e)) return !1;
+		let t = Array.from(e.querySelectorAll(".tab-wrap"));
+		if (t.length === 0) return !1;
+		let n = e.getBoundingClientRect(), r = n.left;
+		for (let e of t) {
+			let t = e.getBoundingClientRect();
+			t.width <= 0 || t.right > r && (r = t.right);
+		}
+		return r - n.left > n.width + 1;
+	}
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			this._harvest(), this._attachSlotObservers(), this._syncDropdownTabs();
+		});
+		let 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;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	_applySpacing() {
+		let e = this._mapSpacingToken(this.spacing), t = this._mapSpacingToken(this.spacingTop) ?? e, n = this._mapSpacingToken(this.spacingBottom) ?? e;
+		t ? this.style.setProperty("--scb-header-spacing-block-start", t) : this.style.removeProperty("--scb-header-spacing-block-start"), n ? this.style.setProperty("--scb-header-spacing-block-end", n) : this.style.removeProperty("--scb-header-spacing-block-end");
+	}
+	_applyLogoSizing() {
+		let e = (this.logoWidth ?? "").trim(), t = (this.logoHeight ?? "").trim(), n = (this.logoAspectRatio ?? "").trim();
+		e ? this.style.setProperty("--scb-header-logo-img-w", e) : this.style.removeProperty("--scb-header-logo-img-w"), t ? this.style.setProperty("--scb-header-logo-img-h", t) : e ? this.style.setProperty("--scb-header-logo-img-h", "auto") : this.style.removeProperty("--scb-header-logo-img-h"), n ? this.style.setProperty("--scb-header-logo-img-aspect-ratio", n) : this.style.removeProperty("--scb-header-logo-img-aspect-ratio");
+	}
+	_closeDrawerNow() {
+		let e = this.renderRoot.querySelector(`#${this._drawerId}`);
+		e && (e.open = !1);
+	}
+	_syncMenuBtnAria() {
+		let 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) {
+		let t = this.querySelector(`[slot="${e}"]`);
+		return t ? t.tagName.toLowerCase() === "scb-dropdown" ? t : t.querySelector("scb-dropdown") : null;
+	}
+	_syncDropdownTabs() {
+		this._getNavItems().forEach((e, t) => {
+			if (e.kind !== "dropdown") return;
+			let n = this._getDropdownForSlot(e.slotName);
+			if (!n) return;
+			let r = String(t);
+			n.getAttribute("data-index") !== r && n.setAttribute("data-index", r), n.hasAttribute("as-tab") || n.setAttribute("as-tab", "");
+			let i = this.size, a = n;
+			a?.size !== i && (a.size = i), t === this.activeTab ? n.getAttribute("aria-current") !== "page" && n.setAttribute("aria-current", "page") : n.hasAttribute("aria-current") && n.removeAttribute("aria-current");
+		});
+	}
+	_readTabIndexFromEvent(e) {
+		let t = e.composedPath ? e.composedPath() : [];
+		for (let e of t) {
+			if (!(e instanceof HTMLElement)) continue;
+			let t = e.getAttribute("data-index");
+			if (t == null) continue;
+			let n = Number(t);
+			if (Number.isFinite(n)) return n;
+		}
+		return null;
+	}
+	_focusTabAtIndex(e) {
+		let t = this._getNavItems()[e];
+		if (t) {
+			if (t.kind === "dropdown") {
+				this._getDropdownForSlot(t.slotName)?.focus?.();
+				return;
+			}
+			this.renderRoot.querySelector(`.tab-link[data-index="${e}"]`)?.focus?.();
+		}
+	}
+	_renderMenuNodes(e) {
+		return !e || e.length === 0 ? r`` : r`${e.map((e) => this._renderMenuNode(e))}`;
+	}
+	_renderMenuNode(e) {
+		let t = Array.isArray(e.children) && e.children.length > 0, n = (e.href ?? "").trim(), a = (e.icon ?? "").trim();
+		return r`
+      <scb-menu-item
+        label=${e.label}
+        ?selected=${!1}
+        leading-icon=${a || i}
+        item-href=${n || i}
+      >
+        ${t ? r`
+              <scb-sub-menu label=${e.label}>
+                ${e.children.map((e) => this._renderMenuNode(e))}
+              </scb-sub-menu>
+            ` : i}
+      </scb-menu-item>
+    `;
+	}
+	_syncFlags(e, t) {
+		this.toggleAttribute("data-no-utility", e), this.toggleAttribute("data-no-search", t);
+	}
+	render() {
+		let e = this._getNavItems(), t = this._slotUtils.length ? this._slotUtils : this.utilityItems, n = this._slotMenu.length ? this._slotMenu : this.menuData ?? [], a = this.querySelector("[slot=\"drawer-menu\"]") !== null;
+		this._syncFlags(t.length === 0, !this.showSearch);
+		let o = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : i, s = e.length > 0 || this.reserveTabs;
+		return r`
+      <slot
+        id="data-slot"
+        @slotchange=${() => {
+			this._harvest(), this._attachSlotObservers();
+		}}
+        hidden
+      ></slot>
+
+      <div
+        class="header-landmark"
+        role=${this.banner ? "banner" : i}
+        aria-label=${this.banner && this.bannerLabel ? this.bannerLabel : i}
+      >
+        <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">
+                  ${t.map((e) => r`
+                      <scb-link
+                        .href=${e.href}
+                        .target=${e.target ?? void 0}
+                        >${e.label}</scb-link
+                      >
+                    `)}
+                </nav>
+
+                ${this.showSearch ? r`
+                      <div class="search" style=${o}>
+                        <scb-search
+                          id=${this._searchId}
+                          .size=${this.size}
+                          style=${o}
+                          .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>
+                    ` : i}
+                ${this.showDrawer ? r`
+                      <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>
+                    ` : i}
+              </div>
+
+            </div>
+          </scb-grid-item>
+
+          <scb-grid-item
+            col-span-compact="4"
+            col-span-medium="8"
+            col-span-expanded="12"
+          >
+            ${s ? e.length ? r`
+                    <div class="tabs-inset">
+                      <nav
+                        class="tabs-nav"
+                        aria-label="Huvudnavigering"
+                        @keydown=${this._onTabsKeydown}
+                        @scb-dropdown-tab-activate=${this._onDropdownTabActivate}
+                      >
+                        ${e.map((e, t) => e.kind === "dropdown" ? r`
+                                <div class="tab-wrap">
+                                  <slot name=${e.slotName}></slot>
+                                </div>
+                              ` : e.href ? r`
+                                <div class="tab-wrap">
+                                  <a
+                                    class="tab-link"
+                                    href=${e.href}
+                                    data-index=${t}
+                                    aria-current=${t === this.activeTab ? "page" : i}
+                                    @click=${this._onTabClick}
+                                  >
+                                    ${e.label}
+                                  </a>
+                                  <md-focus-ring></md-focus-ring>
+                                </div>
+                              ` : r`
+                                <div class="tab-wrap">
+                                  <button
+                                    type="button"
+                                    class="tab-link"
+                                    data-index=${t}
+                                    aria-current=${t === this.activeTab ? "page" : i}
+                                    @click=${this._onTabClick}
+                                  >
+                                    ${e.label}
+                                  </button>
+                                  <md-focus-ring></md-focus-ring>
+                                </div>
+                              `)}
+                      </nav>
+                    </div>
+                  ` : r`
+                    <div class="tabs-inset">
+                      <div class="tabs-nav tabs-nav--skeleton" aria-hidden="true">
+                        ${this._renderTabSkeletons()}
+                      </div>
+                    </div>
+                  ` : i}
+            <div class="divider" role="presentation"></div>
+          </scb-grid-item>
+        </scb-grid>
+      </div>
+
+      ${this.showDrawer ? r`
+            <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 ? i : r`
+                    <scb-menu
+              .label=${this.menuLabel ?? ""}
+              .subLabel=${this.menuSubLabel ?? ""}
+              >
+              <scb-search
+                  .size=${this.size}
+                  .supportingText=${this.menuSearchPlaceholder ?? ""}
+              ></scb-search>
+
+              ${this.menuSectionLabel ? r`
+                    <scb-menu-section
+                      .label=${this.menuSectionLabel}
+                    ></scb-menu-section>
+                  ` : i}
+
+              ${this._renderMenuNodes(n)}
+
+              ${this.includeUtilityInMenu && (t?.length ?? 0) > 0 ? r`
+                    <scb-menu-section label=''></scb-menu-section>
+                    ${t.map((e) => r`
+                        <scb-menu-item
+                          label=${e.label}
+                          item-href=${e.href}
+                        ></scb-menu-item>
+                      `)}
+                  ` : i}
+            </scb-menu>
+                  `}
+            </scb-drawer>
+          ` : i}
+    `;
+	}
+	_renderTabSkeletons() {
+		let e = [
+			"96px",
+			"72px",
+			"88px",
+			"64px"
+		], t = (this.reserveTabsWidths ?? "").split(/[\s,]+/).map((e) => e.trim()).filter(Boolean).map((e) => /^\d+(?:\.\d+)?$/.test(e) ? `${e}px` : e), n = t.length > 0 ? t : e, i = Number(this.reserveTabsCount), a = Number.isFinite(i) && i > 0 ? Math.floor(i) : t.length > 0 ? t.length : e.length;
+		return r`${Array.from({ length: a }, (e, t) => n[t % n.length]).map((e) => r`<scb-skeleton variant="rounded" width=${e} height="16px"></scb-skeleton>`)}`;
+	}
+	_renderLogo() {
+		let e = (this.logoSrc ?? "").trim();
+		return e ? r`<img class="logo" src=${e} alt="" aria-hidden="true" />` : r`
+      <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>
+    `;
+	}
+};
+e([o({
+	type: String,
+	attribute: "max-width"
+})], p.prototype, "maxWidth", void 0), e([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], p.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], p.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	reflect: !0,
+	converter: f
+})], p.prototype, "size", void 0), e([o({
+	type: String,
+	attribute: "logo-text"
+})], p.prototype, "logoText", void 0), e([o({
+	type: String,
+	attribute: "logo-href"
+})], p.prototype, "logoHref", void 0), e([o({
+	type: String,
+	attribute: "logo-src"
+})], p.prototype, "logoSrc", void 0), e([o({
+	type: String,
+	attribute: "logo-width"
+})], p.prototype, "logoWidth", void 0), e([o({
+	type: String,
+	attribute: "logo-height"
+})], p.prototype, "logoHeight", void 0), e([o({
+	type: String,
+	attribute: "logo-aspect-ratio"
+})], p.prototype, "logoAspectRatio", void 0), e([o({
+	attribute: "logo-invert-dm",
+	reflect: !0,
+	converter: u
+})], p.prototype, "logoInvertDm", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "banner", void 0), e([o({
+	type: String,
+	attribute: "banner-label"
+})], p.prototype, "bannerLabel", void 0), e([o({
+	attribute: "tabs",
+	converter: p._JSON_ARRAY
+})], p.prototype, "tabs", void 0), e([o({
+	type: Number,
+	attribute: "active-tab"
+})], p.prototype, "activeTab", void 0), e([o({
+	attribute: "reserve-tabs",
+	reflect: !0,
+	converter: d
+})], p.prototype, "reserveTabs", void 0), e([o({
+	type: Number,
+	attribute: "reserve-tabs-count"
+})], p.prototype, "reserveTabsCount", void 0), e([o({
+	type: String,
+	attribute: "reserve-tabs-widths"
+})], p.prototype, "reserveTabsWidths", void 0), e([o({
+	attribute: "utility-items",
+	converter: p._JSON_ARRAY
+})], p.prototype, "utilityItems", void 0), e([o({
+	type: String,
+	attribute: "search-placeholder"
+})], p.prototype, "searchPlaceholder", void 0), e([o({
+	type: String,
+	attribute: "menu-label"
+})], p.prototype, "menuLabel", void 0), e([o({
+	type: String,
+	attribute: "menu-sub-label"
+})], p.prototype, "menuSubLabel", void 0), e([o({
+	type: String,
+	attribute: "menu-section-label"
+})], p.prototype, "menuSectionLabel", void 0), e([o({
+	type: String,
+	attribute: "menu-search-placeholder"
+})], p.prototype, "menuSearchPlaceholder", void 0), e([o({
+	attribute: "menu-data",
+	converter: p._JSON_ARRAY
+})], p.prototype, "menuData", void 0), e([o({
+	attribute: "show-drawer",
+	reflect: !0,
+	converter: u
+})], p.prototype, "showDrawer", void 0), e([o({
+	attribute: "show-search",
+	reflect: !0,
+	converter: u
+})], p.prototype, "showSearch", void 0), e([o({
+	attribute: "include-utility-in-menu",
+	reflect: !0,
+	converter: u
+})], p.prototype, "includeUtilityInMenu", void 0), e([o({
+	attribute: "drawer-overlay",
+	reflect: !0,
+	converter: u
+})], p.prototype, "drawerOverlay", void 0), e([o({
+	type: String,
+	attribute: "search-max"
+})], p.prototype, "searchMax", void 0), e([o({
+	type: String,
+	attribute: "search-min"
+})], p.prototype, "searchMin", void 0), e([o({
+	type: String,
+	attribute: "search-height"
+})], p.prototype, "searchHeight", void 0), e([o({
+	type: String,
+	attribute: "search-text",
+	reflect: !0
+})], p.prototype, "searchText", void 0), e([s()], p.prototype, "_drawerId", void 0), e([s()], p.prototype, "_menuExpanded", void 0), e([s()], p.prototype, "_searchId", void 0), e([s()], p.prototype, "_slotNavItems", void 0), e([s()], p.prototype, "_slotUtils", void 0), e([s()], p.prototype, "_slotMenu", void 0), e([s()], p.prototype, "_collapsed", void 0), e([s()], p.prototype, "_hideLogoText", void 0), p = c = e([a("scb-header")], p);
+//#endregion
+export { p as ScbHeader };