scb-wc 0.1.75 → 0.1.76

package/scb-header/scb-header.js

@@ -1,13 +1,6 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
-import "../scb-button/scb-button.js";
-import "../scb-icon-button/scb-icon-button.js";
-import "../scb-search/scb-search.js";
-import "../scb-grid/scb-grid-item.js";
-import "../scb-grid/scb-grid.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-components/scb-header/scb-header.ts
 var c, l = 0;
 (() => {
@@ -212,6 +205,13 @@ var u = {
 				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._onGlobalFocusRingKeydown = (e) => {
+			e.key === "Tab" && (this.toggleAttribute("data-keyboard-focus", !0), this._ensureFocusRingReady());
+		}, this._onGlobalFocusRingPointerDown = () => {
+			this.removeAttribute("data-keyboard-focus");
+		}, this._onLocalFocusIn = (e) => {
+			let t = e.composedPath()[0];
+			t instanceof HTMLElement && t.matches(":focus-visible") && this._ensureFocusRingReady();
 		}, this._onDrawerOpened = () => {
 			this._menuExpanded = !0, this._syncMenuBtnAria(), this.dispatchEvent(new CustomEvent("drawer-open", {
 				bubbles: !0,
@@ -236,26 +236,10 @@ var u = {
 				bubbles: !0,
 				composed: !0
 			})), !this._drawerReady && (e.stopPropagation(), await this._ensureDrawerReady(), await this.updateComplete, this._openDrawerNow()));
-		}, 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._onMobileSearchToggle = () => {
 			let e = !this._mobileSearchOpen;
 			this._setMobileSearchOpen(e), e && this.updateComplete.then(() => {
-				this.renderRoot.querySelector(".mobile-search-panel scb-search")?.focus?.();
+				this.renderRoot.querySelector(".mobile-search-panel .header-search-input")?.focus?.();
 			});
 		}, this._onTabClick = (e) => {
 			let t = e.currentTarget;
@@ -313,40 +297,13 @@ var u = {
 			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._onNativeSearchInput = (e) => {
+			let t = e.currentTarget;
+			this._emitSearchInput(t?.value ?? "");
+		}, this._onNativeSearchSubmit = (e) => {
+			e.preventDefault();
+			let t = e.currentTarget?.querySelector(".header-search-input");
+			this._emitSearchChange(t?.value ?? "");
 		}, this._onSearchClear = () => {
 			this.searchText = "", this.dispatchEvent(new CustomEvent("search-text-change", {
 				detail: { value: "" },
@@ -357,6 +314,11 @@ var u = {
 				bubbles: !0,
 				composed: !0
 			}));
+		}, this._onNativeSearchClear = (e) => {
+			e.preventDefault(), this._onSearchClear(), this.updateComplete.then(() => {
+				let t = (e.currentTarget?.closest("form"))?.querySelector(".header-search-input");
+				t && (t.value = ""), t?.focus();
+			});
 		};
 		let e = ++l;
 		this._drawerId = `scb-header-drawer-${e}`, this._searchId = `scb-header-search-${e}`;
@@ -410,6 +372,12 @@ var u = {
       color: var(--md-sys-color-on-surface, #1b1b1f);
       --scb-header-search-max: 380px;
       --scb-header-search-min: 250px;
+      --scb-header-search-padding-x: var(--spacing-4, 12px);
+      --scb-header-search-padding-y: var(--spacing-4, 12px);
+      --scb-header-search-leading-size: var(--scale-10, 40px);
+      --scb-header-search-icon-size: var(--icon-size-medium, 24px);
+      --scb-header-search-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-header-search-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
 
       --scb-header-logo-w: var(--icon-size-extra-extra-large, 48px);
       --scb-header-logo-h: calc(var(--scb-header-logo-w) * 1.125);
@@ -474,6 +442,13 @@ var u = {
         --md-sys-typescale-label-small-line-height,
         1.25rem
       );
+
+      --scb-header-search-padding-x: var(--spacing-3, 8px);
+      --scb-header-search-padding-y: var(--spacing-3, 8px);
+      --scb-header-search-leading-size: var(--scale-09, 36px);
+      --scb-header-search-icon-size: var(--icon-size-small, 20px);
+      --scb-header-search-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-header-search-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
     }
 
     :host([size='large']) {
@@ -503,18 +478,33 @@ var u = {
         --md-sys-typescale-title-medium-line-height,
         1.625rem
       );
+
+      --scb-header-search-padding-x: var(--spacing-5, 16px);
+      --scb-header-search-padding-y: var(--spacing-5, 16px);
+      --scb-header-search-leading-size: var(--scale-11, 48px);
+      --scb-header-search-icon-size: var(--icon-size-medium, 24px);
+      --scb-header-search-font-size: var(--md-sys-typescale-body-large-size, 18px);
+      --scb-header-search-line-height: var(--md-sys-typescale-body-large-line-height, 26px);
     }
 
-    .header-landmark > scb-grid {
+    .header-grid {
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: var(--scb-header-max-width, 1440px);
+      margin-inline: auto;
       padding-inline: 20px;
     }
 
     @media (min-width: 840px) {
-      .header-landmark > scb-grid {
+      .header-grid {
         padding-inline: 32px;
       }
     }
 
+    .header-grid-item {
+      min-inline-size: 0;
+    }
+
     .top-row {
       display: flex;
       align-items: center;
@@ -533,6 +523,7 @@ var u = {
       );
       margin-top: var(--spacing-2, 4px);
     }
+
     .logo-wrap md-focus-ring {
       position: absolute;
       inset: var(--spacing-neg-2, -4px);
@@ -540,6 +531,7 @@ var u = {
       display: none;
       border-radius: inherit;
     }
+
     .logo-group:focus-visible + md-focus-ring {
       display: block;
     }
@@ -557,6 +549,7 @@ var u = {
     .logo-group:focus-visible {
       outline: none;
     }
+
     .logo-group svg {
       width: var(--scb-header-logo-slot-w);
       height: var(--scb-header-logo-slot-h);
@@ -668,16 +661,123 @@ var u = {
       max-width: var(--scb-header-search-max);
       min-width: var(--scb-header-search-min);
     }
-    scb-search {
-      width: 100%;
+
+    .header-search {
+      display: flex;
+      align-items: stretch;
+      flex: 1 1 auto;
+      min-width: 0;
+      gap: var(--spacing-3, 8px);
     }
-    .search scb-search {
+
+    .header-search-field {
+      position: relative;
       flex: 1 1 auto;
-      width: auto;
+      min-width: 0;
     }
-    .search scb-button {
+
+    .header-search-input {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-block-size: var(
+        --scb-search-height,
+        calc(
+          var(--scb-header-search-line-height) +
+            var(--scb-header-search-padding-y) +
+            var(--scb-header-search-padding-y)
+        )
+      );
+      padding-block: var(--scb-header-search-padding-y);
+      padding-inline-start: calc(
+        var(--scb-header-search-padding-x) +
+          var(--scb-header-search-leading-size) +
+          var(--spacing-2, 4px)
+      );
+      padding-inline-end: calc(
+        var(--scb-header-search-padding-x) +
+          var(--scb-header-search-leading-size) +
+          var(--spacing-2, 4px)
+      );
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline, #808080);
+      border-radius: var(--radius-full, 1000px);
+      background: transparent;
+      color: var(--md-sys-color-on-surface, #1b1b1f);
+      font-family: var(--md-sys-typescale-body-large-font, var(--brand-font, Inter), sans-serif);
+      font-size: var(--scb-header-search-font-size);
+      line-height: var(--scb-header-search-line-height);
+      letter-spacing: 0;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .header-search-input::placeholder {
+      color: var(--md-sys-color-on-surface-variant, #1b1b1f);
+      opacity: 1;
+    }
+
+    .header-search-input:hover {
+      outline: var(--stroke-border, 1px) solid var(--md-sys-color-outline, #808080);
+      outline-offset: 0;
+    }
+
+    .header-search-input:focus {
+      outline: none;
+    }
+
+    .header-search-input::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
+
+    .header-search-icon,
+    .header-search-clear {
+      position: absolute;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--scb-header-search-leading-size);
+      block-size: var(--scb-header-search-leading-size);
+      color: var(--md-sys-color-on-surface-variant, #1b1b1f);
+    }
+
+    .header-search-icon {
+      inset-inline-start: var(--scb-header-search-padding-x);
+      pointer-events: none;
+    }
+
+    .header-search-clear {
+      inset-inline-end: var(--scb-header-search-padding-x);
+      border: 0;
+      border-radius: var(--radius-full, 1000px);
+      padding: 0;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    .header-search-clear[hidden] {
+      display: none;
+    }
+
+    .header-search-field md-focus-ring.input-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--radius-full, 1000px);
+      z-index: 4;
+    }
+
+    :host([data-keyboard-focus]) .header-search-input:focus ~ md-focus-ring.input-ring {
+      display: block;
+    }
+
+    .search-submit {
       flex: 0 0 auto;
     }
+
     @media (min-width: 600px) {
       .search {
         display: flex;
@@ -687,7 +787,6 @@ var u = {
     .mobile-search-trigger {
       display: inline-flex;
       color: var(--md-sys-color-on-surface, #1b1b1f);
-      --md-sys-color-primary: var(--md-sys-color-on-surface, #1b1b1f);
     }
 
     @media (min-width: 600px) {
@@ -707,7 +806,7 @@ var u = {
       background: var(--scb-header-background, transparent);
     }
 
-    .mobile-search-panel scb-search {
+    .mobile-search-panel .header-search {
       flex: 1 1 auto;
       min-width: 0;
     }
@@ -784,8 +883,17 @@ var u = {
       align-items: center;
     }
 
-    .tabs-nav--skeleton scb-skeleton {
+    .tab-skeleton {
       flex: 0 0 auto;
+      display: inline-block;
+      block-size: 16px;
+      border-radius: var(--radius-full, 1000px);
+      background: linear-gradient(
+        90deg,
+        var(--md-sys-color-surface-container-low, #f5f5f5),
+        var(--md-sys-color-surface-container, #ebf8ff),
+        var(--md-sys-color-surface-container-low, #f5f5f5)
+      );
     }
 
     .tab-wrap {
@@ -795,15 +903,14 @@ var u = {
 
      }
 
-     .tab-wrap md-focus-ring {
+    .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;
@@ -855,10 +962,199 @@ var u = {
       background-color: var(--md-sys-color-primary);
     }
 
+    .tab-link:focus-visible {
+      outline: none;
+    }
+
     .tab-link:focus-visible + md-focus-ring {
       display: block;
     }
 
+    .utility-link,
+    .header-text-button,
+    .header-icon-button,
+    .search-submit {
+      border: 0;
+      font: inherit;
+      letter-spacing: 0;
+      -webkit-tap-highlight-color: transparent;
+      position: relative;
+    }
+
+    .utility-link,
+    .header-text-button,
+    .search-submit {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-block-size: calc(
+        var(--md-sys-typescale-label-small-line-height, 20px) +
+          ((var(--spacing-4, 12px) - var(--spacing-1, 2px)) * 2)
+      );
+      padding-block: calc(var(--spacing-4, 12px) - var(--spacing-1, 2px));
+      padding-inline: var(--spacing-5, 16px);
+      border-radius: var(--radius-full, 1000px);
+      color: var(--md-sys-color-primary, var(--p-40, #1f44ff));
+      font-family: var(--md-sys-typescale-label-small-font, var(--brand-font, Inter), sans-serif);
+      font-size: var(--md-sys-typescale-label-small-size, 14px);
+      line-height: var(--md-sys-typescale-label-small-line-height, 20px);
+      font-weight: var(--md-sys-typescale-label-small-weight, 600);
+      text-decoration: none;
+      background: transparent;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .utility-link:hover,
+    .header-text-button:hover {
+      background: color-mix(in srgb, var(--md-sys-color-primary, #1f44ff) 8%, transparent);
+    }
+
+    .search-submit {
+      min-block-size: var(--scb-search-height, var(--scale-11, 48px));
+      min-inline-size: var(--scale-12, 64px);
+      color: var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be));
+      background: var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff));
+    }
+
+    .search-submit:hover {
+      background: color-mix(
+        in srgb,
+        var(--md-sys-color-secondary-container, #d6f1ff) 92%,
+        var(--md-sys-color-on-secondary-container, #1e00be)
+      );
+    }
+
+    .header-icon-button {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: calc(var(--icon-size-medium, 24px) + (var(--spacing-3, 12px) * 2));
+      block-size: calc(var(--icon-size-medium, 24px) + (var(--spacing-3, 12px) * 2));
+      padding: 0;
+      border-radius: var(--radius-full, 1000px);
+      color: var(--md-sys-color-on-surface, #1b1b1f);
+      background: transparent;
+      cursor: pointer;
+    }
+
+    .mobile-search-trigger,
+    .mobile-search-close {
+      color: var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be));
+      background: var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff));
+    }
+
+    @media (min-width: 600px) {
+      .mobile-search-trigger.header-icon-button {
+        display: none;
+      }
+    }
+
+    .header-icon-button:hover,
+    .header-search-clear:hover {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+
+    .mobile-search-trigger:hover,
+    .mobile-search-close:hover {
+      background: color-mix(
+        in srgb,
+        var(--md-sys-color-secondary-container, #d6f1ff) 92%,
+        var(--md-sys-color-on-secondary-container, #1e00be)
+      );
+    }
+
+    .utility-link:focus,
+    .utility-link:focus-visible,
+    .header-text-button:focus,
+    .header-text-button:focus-visible,
+    .header-icon-button:focus,
+    .header-icon-button:focus-visible,
+    .search-submit:focus,
+    .search-submit:focus-visible,
+    .header-search-clear:focus,
+    .header-search-clear:focus-visible {
+      outline: none;
+    }
+
+    .utility-link:focus-visible,
+    .header-text-button:focus-visible,
+    .header-icon-button:focus-visible,
+    .search-submit:focus-visible,
+    .header-search-clear:focus-visible {
+      outline: none;
+    }
+
+    .utility-link md-focus-ring,
+    .header-text-button md-focus-ring,
+    .header-icon-button md-focus-ring,
+    .search-submit md-focus-ring,
+    .header-search-clear md-focus-ring {
+      position: absolute;
+      inset: var(--spacing-neg-2, -4px);
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+
+    .utility-link:focus-visible md-focus-ring,
+    .header-text-button:focus-visible md-focus-ring,
+    .header-icon-button:focus-visible md-focus-ring,
+    .search-submit:focus-visible md-focus-ring,
+    .header-search-clear:focus-visible md-focus-ring {
+      display: block;
+    }
+
+    .header-text-button {
+      gap: var(--spacing-3, 8px);
+    }
+
+    .header-text-button .header-symbol {
+      inline-size: var(--icon-size-small, 20px);
+      font-size: var(--icon-size-small, 20px);
+      line-height: var(--icon-size-small, 20px);
+    }
+
+    .header-symbol {
+      display: inline-block;
+      inline-size: 1em;
+      overflow: hidden;
+      font-family: 'Material Symbols Outlined';
+      font-size: var(--icon-size-medium, 24px);
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      text-transform: none;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga' 1;
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .header-search-icon.header-symbol {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--scb-header-search-leading-size);
+      font-size: var(--scb-header-search-icon-size);
+    }
+
+    .sr-only {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
     .divider {
       border-bottom: var(--stroke-border, 1px) solid
         var(--md-sys-color-outline-variant, #e0e0e0);
@@ -886,9 +1182,6 @@ var u = {
 	get _menuBtn() {
 		return this.renderRoot.querySelector(".menu-trigger");
 	}
-	get _searchEl() {
-		return this.renderRoot.querySelector(`#${this._searchId}`);
-	}
 	get _tabsNav() {
 		return this.renderRoot.querySelector(".tabs-nav");
 	}
@@ -1011,7 +1304,7 @@ var u = {
 		return r - n.left > n.width + 1;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._initialUpgradeComplete || this.setAttribute("data-upgrading", ""), this._harvest({ scheduleMeasure: !1 }), this._attachSlotObservers();
+		super.connectedCallback(), window.addEventListener("keydown", this._onGlobalFocusRingKeydown, !0), window.addEventListener("pointerdown", this._onGlobalFocusRingPointerDown, !0), this._initialUpgradeComplete || this.setAttribute("data-upgrading", ""), this._harvest({ scheduleMeasure: !1 }), this._attachSlotObservers();
 	}
 	_finishInitialUpgrade() {
 		this._initialUpgradeComplete || (this._initialUpgradeComplete = !0, requestAnimationFrame(() => {
@@ -1019,7 +1312,7 @@ var u = {
 		}));
 	}
 	firstUpdated() {
-		this._syncLandmarkAttributes(), this.showDrawer && !this.deferDrawer && this._ensureDrawerReady(), this.updateComplete.then(() => {
+		this._syncLandmarkAttributes(), this.renderRoot.addEventListener("focusin", this._onLocalFocusIn), this.showDrawer && !this.deferDrawer && this._ensureDrawerReady(), this.updateComplete.then(() => {
 			this._harvest({ scheduleMeasure: !1 }), this._attachSlotObservers(), this._syncDropdownTabs(), this._finishInitialUpgrade();
 		});
 		let e = this._top;
@@ -1033,7 +1326,7 @@ var u = {
 		});
 	}
 	disconnectedCallback() {
-		this._ro?.disconnect(), this._slotMo?.disconnect(), this._slotWatchers.forEach((e) => e.disconnect()), this._slotWatchers = [], window.removeEventListener("resize", this._onWindowResize), super.disconnectedCallback();
+		this._ro?.disconnect(), this._slotMo?.disconnect(), this._slotWatchers.forEach((e) => e.disconnect()), this._slotWatchers = [], this.renderRoot.removeEventListener("focusin", this._onLocalFocusIn), window.removeEventListener("keydown", this._onGlobalFocusRingKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalFocusRingPointerDown, !0), window.removeEventListener("resize", this._onWindowResize), super.disconnectedCallback();
 	}
 	_mapSpacingToken(e) {
 		if (!e) return;
@@ -1067,8 +1360,15 @@ var u = {
 		let e = this.renderRoot.querySelector(`#${this._drawerId}`);
 		e && (e.open = !0);
 	}
+	_ensureFocusRingReady() {
+		customElements.get("md-focus-ring") || (this._focusRingImportPromise ??= import("@material/web/focus/md-focus-ring.js").then(() => void 0), this._focusRingImportPromise);
+	}
 	async _ensureDrawerReady() {
-		this._drawerReady ||= (this._drawerImportPromise ??= Promise.all([import("../scb-drawer/scb-drawer.js"), import("../scb-menu/scb-menu.js")]).then(() => void 0), await this._drawerImportPromise, !0);
+		this._drawerReady ||= (this._drawerImportPromise ??= Promise.all([
+			import("../scb-drawer/scb-drawer.js"),
+			import("../scb-menu/scb-menu.js"),
+			import("../scb-search/scb-search.js")
+		]).then(() => void 0), await this._drawerImportPromise, !0);
 	}
 	async _ensureDropdownReady() {
 		customElements.get("scb-dropdown") || (this._dropdownImportPromise ??= import("../scb-dropdown/scb-dropdown.js").then(() => void 0), await this._dropdownImportPromise);
@@ -1146,34 +1446,114 @@ var u = {
 	_syncFlags(e, t) {
 		this.toggleAttribute("data-no-utility", e), this.toggleAttribute("data-no-search", t);
 	}
+	_emitSearchInput(e) {
+		this.searchText = e, 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
+		}));
+	}
+	_emitSearchChange(e, t) {
+		this.searchText = e, this.dispatchEvent(new CustomEvent("search-change", {
+			detail: {
+				value: this.searchText,
+				active: t
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("searchchange", {
+			detail: {
+				value: this.searchText,
+				active: t
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
 	_renderMenuButton(e = "", t = !1) {
 		let n = e ? `menu-trigger ${e}` : "menu-trigger", i = (this.menuButtonLabel ?? "").trim() || "Meny", a = this._menuExpanded ? "true" : "false";
 		return t ? r`
-        <scb-icon-button
-          class=${n}
-          icon="menu"
-          .size=${this.size}
+        <button
+          type="button"
+          class=${`${n} header-icon-button`}
           aria-label=${i}
           aria-controls=${this._drawerId}
           aria-haspopup="dialog"
           aria-expanded=${a}
           title="Öppna meny"
           @click=${this._onMenuClick}
-        ></scb-icon-button>
+        >
+          <span class="header-symbol" aria-hidden="true">menu</span>
+          <md-focus-ring aria-hidden="true"></md-focus-ring>
+        </button>
       ` : r`
-      <scb-button
-        class=${n}
-        variant="text"
-        label=${i}
-        icon="menu"
-        trailing-icon
-        .size=${this.size}
+      <button
+        type="button"
+        class=${`${n} header-text-button`}
         aria-controls=${this._drawerId}
         aria-haspopup="dialog"
         aria-expanded=${a}
         title="Öppna meny"
         @click=${this._onMenuClick}
-      ></scb-button>
+      >
+        <span>${i}</span>
+        <span class="header-symbol" aria-hidden="true">menu</span>
+        <md-focus-ring aria-hidden="true"></md-focus-ring>
+      </button>
+    `;
+	}
+	_renderSearchForm(e, t, n = !0, a = !1) {
+		let o = this.searchPlaceholder ?? "", s = o.trim() || e, c = (this.searchText ?? "").length > 0;
+		return r`
+      <form
+        class=${a ? "header-search header-search--mobile" : "header-search"}
+        style=${t}
+        role="search"
+        @submit=${this._onNativeSearchSubmit}
+      >
+        <label class="header-search-field">
+          <span class="header-search-icon header-symbol" aria-hidden="true">search</span>
+          <span class="sr-only">${s}</span>
+          <input
+            id=${a ? i : this._searchId}
+            class="header-search-input"
+            type="search"
+            .value=${this.searchText}
+            placeholder=${o || i}
+            aria-label=${s}
+            @input=${this._onNativeSearchInput}
+          />
+          <md-focus-ring class="input-ring" aria-hidden="true"></md-focus-ring>
+          <button
+            type="button"
+            class="header-search-clear"
+            aria-label="Rensa sökfält"
+            ?hidden=${!c}
+            @click=${this._onNativeSearchClear}
+          >
+            <span class="header-symbol" aria-hidden="true">close</span>
+            <md-focus-ring aria-hidden="true"></md-focus-ring>
+          </button>
+        </label>
+        ${n ? r`
+              <button type="submit" class="search-submit">
+                ${e}
+                <md-focus-ring aria-hidden="true"></md-focus-ring>
+              </button>
+            ` : i}
+      </form>
     `;
 	}
 	render() {
@@ -1190,18 +1570,11 @@ var u = {
       ></slot>
 
       <div class="header-landmark">
-        <scb-grid
-          cols-compact="4"
-          cols-medium="8"
-          cols-expanded="12"
-          max-width=${this.maxWidth}
-          gap="0"
+        <div
+          class="header-grid"
+          style=${`--scb-header-max-width:${this.maxWidth || "1440px"}`}
         >
-          <scb-grid-item
-            col-span-compact="4"
-            col-span-medium="8"
-            col-span-expanded="12"
-          >
+          <div class="header-grid-item">
             <div class="top-row">
               <div class="logo-wrap">
                 <a
@@ -1212,81 +1585,64 @@ var u = {
                   ${this._renderLogo()}
                   <span class="logo-text">${a}</span>
                 </a>
-                <md-focus-ring></md-focus-ring>
+                <md-focus-ring aria-hidden="true"></md-focus-ring>
               </div>
 
               <div class="actions">
                 <nav class="utility" aria-label="Funktionslänkar">
                   ${t.map((e) => r`
-                      <scb-button
-                        variant="text"
-                        .href=${e.href}
-                        .target=${e.target ?? ""}
-                        label=${e.label}
-                      ></scb-button>
+                      <a
+                        class="utility-link"
+                        href=${e.href}
+                        target=${e.target || i}
+                        rel=${e.target === "_blank" ? "noopener noreferrer" : i}
+                      >
+                        ${e.label}
+                        <md-focus-ring aria-hidden="true"></md-focus-ring>
+                      </a>
                     `)}
                 </nav>
 
                 ${this.showSearch ? r`
                       <div class="search" style=${c}>
-                        <scb-search
-                          id=${this._searchId}
-                          .size=${this.size}
-                          style=${c}
-                          .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=${g}
-                          .size=${this.size}
-                          @click=${this._onSearchClick}
-                        ></scb-button>
+                        ${this._renderSearchForm(g, c)}
                       </div>
                     ` : i}
                 ${_ ? r`
-                      <scb-icon-button
-                        class="mobile-search-trigger"
-                        variant="filled-tonal"
-                        icon="search"
-                        .size=${this.size}
+                      <button
+                        type="button"
+                        class="mobile-search-trigger header-icon-button"
+                        aria-label=${g}
+                        title=${g}
                         @click=${this._onMobileSearchToggle}
-                      ></scb-icon-button>
+                      >
+                        <span class="header-symbol" aria-hidden="true">search</span>
+                        <md-focus-ring aria-hidden="true"></md-focus-ring>
+                      </button>
                     ` : i}
                 ${m ? this._renderMenuButton("", !0) : i}
               </div>
 
               ${this.showSearch && this._mobileSearchOpen ? r`
                     <div class="mobile-search-panel" style=${c}>
-                      <scb-search
-                        .size=${this.size}
-                        style=${c}
-                        .value=${this.searchText}
-                        .supportingText=${this.searchPlaceholder ?? ""}
-                        @scb-search-input=${this._onSearchInput}
-                        @scb-search-submit=${this._onSearchSubmit}
-                        @scb-search-clear=${this._onSearchClear}
-                      ></scb-search>
-                      <scb-icon-button
-                        variant="filled-tonal"
-                        icon="close"
-                        .size=${this.size}
+                      ${this._renderSearchForm(g, c, !1, !0)}
+                      <button
+                        type="button"
+                        class="mobile-search-close header-icon-button"
+                        aria-label="Stäng sök"
+                        title="Stäng sök"
                         @click=${this._onMobileSearchToggle}
-                      ></scb-icon-button>
+                      >
+                        <span class="header-symbol" aria-hidden="true">close</span>
+                        <md-focus-ring aria-hidden="true"></md-focus-ring>
+                      </button>
                     </div>
                   ` : i}
 
             </div>
-          </scb-grid-item>
+          </div>
 
-          <scb-grid-item
-            col-span-compact="4"
-            col-span-medium="8"
-            col-span-expanded="12"
-          >
+          <div class="header-grid-item">
             <div class=${l || h ? "tabs-row" : "tabs-row tabs-row--empty"}>
               ${l ? u ? r`
                       <div class="tabs-inset">
@@ -1317,7 +1673,7 @@ var u = {
                                         >
                                           ${e.label}
                                         </a>
-                                        <md-focus-ring></md-focus-ring>
+                                        <md-focus-ring aria-hidden="true"></md-focus-ring>
                                       </div>
                                     ` : r`
                                       <div class="tab-wrap">
@@ -1330,7 +1686,7 @@ var u = {
                                         >
                                           ${e.label}
                                         </button>
-                                        <md-focus-ring></md-focus-ring>
+                                        <md-focus-ring aria-hidden="true"></md-focus-ring>
                                       </div>
                                     `)}
                           </nav>
@@ -1339,8 +1695,8 @@ var u = {
 
               ${h ? this._renderMenuButton("menu-trigger--tabs-right") : i}
             </div>
-          </scb-grid-item>
-        </scb-grid>
+          </div>
+        </div>
         <div class="divider" role="presentation"></div>
       </div>
 
@@ -1399,7 +1755,7 @@ var u = {
 			"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>`)}`;
+		return r`${Array.from({ length: a }, (e, t) => n[t % n.length]).map((e) => r`<span class="tab-skeleton" style=${`inline-size:${e}`}></span>`)}`;
 	}
 	_renderLogo() {
 		let e = (this.logoSrc ?? "").trim();