scb-wc 0.1.77 → 0.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc",
-    "version":  "0.1.77",
+    "version":  "0.1.78",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -460,5 +460,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "957EE1435F8ADBB69A79C901C041796ADEA16F3B4366E3459DEDEFC7F0F7C160"
+    "buildHash":  "F086CA2665651E256C046BB33A18698C9DD9A440DDAFCD908BBB95AE85900050"
 }

package/scb-components/scb-header/scb-header.d.ts

@@ -101,6 +101,9 @@ export declare class ScbHeader extends LitElement {
     private _sameNavItems;
     private _sameUtilityItems;
     private _sameMenuNodes;
+    private _isDrawerCloseNode;
+    private _syncDrawerCloseNode;
+    private _syncDrawerCloseNodes;
     private _harvest;
     private _setCollapsed;
     private _setHideSearch;
@@ -128,6 +131,8 @@ export declare class ScbHeader extends LitElement {
     private _onGlobalFocusRingPointerDown;
     private _onLocalFocusIn;
     private _ensureDrawerReady;
+    private _drawerSlotContains;
+    private _ensureDrawerSlotComponentsReady;
     private _ensureDropdownReady;
     private _onDrawerOpened;
     private _onDrawerClosed;

package/scb-header/scb-header.js

@@ -122,11 +122,16 @@ var u = {
 				href: e.getAttribute("href") ?? void 0,
 				icon: e.getAttribute("icon") ?? void 0
 			}), c = (e) => {
-				e.hasAttribute("role") && e.removeAttribute("role"), e.getAttribute("aria-hidden") !== "true" && e.setAttribute("aria-hidden", "true");
+				e.hasAttribute("role") && e.removeAttribute("role"), e.hasAttribute("hidden") || e.setAttribute("hidden", ""), e.getAttribute("aria-hidden") !== "true" && e.setAttribute("aria-hidden", "true");
 			};
 			for (let e of t) {
 				let t = e.tagName.toLowerCase();
+				if (this._isDrawerCloseNode(e)) {
+					this._syncDrawerCloseNode(e);
+					continue;
+				}
 				if (t === "scb-header-tab") {
+					c(e);
 					let t = e.getAttribute("label") ?? "", r = e.getAttribute("href"), i = r && r.trim() !== "" ? r : void 0;
 					(e.hasAttribute("selected") || e.getAttribute("selected") === "true" || e.getAttribute("active") === "true" || e.getAttribute("aria-current") === "page") && a === -1 && (a = n.length), n.push({
 						kind: "tab",
@@ -171,6 +176,7 @@ var u = {
 					continue;
 				}
 				if (t === "scb-header-menu-group") {
+					c(e);
 					let t = {
 						label: e.getAttribute("label") ?? "",
 						icon: e.getAttribute("icon") ?? void 0,
@@ -179,7 +185,11 @@ var u = {
 					e.querySelectorAll("scb-header-menu-item").forEach((e) => t.children.push(s(e))), i.push(t);
 					continue;
 				}
-				t === "scb-header-menu-item" && i.push(s(e));
+				if (t === "scb-header-menu-item") {
+					c(e), i.push(s(e));
+					continue;
+				}
+				e.hasAttribute("slot") || c(e);
 			}
 			let l = !this._sameNavItems(this._slotNavItems, n), u = !this._sameUtilityItems(this._slotUtils, r), d = !this._sameMenuNodes(this._slotMenu, i);
 			l && (this._slotNavItems = n), u && (this._slotUtils = r), d && (this._slotMenu = i), o && this._ensureDropdownReady(), !this.hasAttribute("active-tab") && a >= 0 && this.activeTab !== a && (this.activeTab = a), (e.scheduleMeasure ?? !0) && queueMicrotask(() => {
@@ -1155,6 +1165,23 @@ var u = {
       border: 0;
     }
 
+    .drawer-close {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: flex-end;
+      padding-block-start: var(--spacing-4, 12px);
+      padding-inline: var(--spacing-4, 12px);
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .drawer-close[hidden] {
+      display: none;
+    }
+
+    .drawer-close ::slotted(*) {
+      flex: 0 0 auto;
+    }
+
     .divider {
       border-bottom: var(--stroke-border, 1px) solid
         var(--md-sys-color-outline-variant, #e0e0e0);
@@ -1265,6 +1292,19 @@ var u = {
 		}
 		return !0;
 	}
+	_isDrawerCloseNode(e) {
+		let t = e.tagName.toLowerCase(), n = e.getAttribute("slot");
+		if (n === "drawer-close") return !0;
+		if (n || t !== "scb-icon-button") return !1;
+		let r = (e.getAttribute("icon") ?? "").trim().toLowerCase(), i = (e.getAttribute("aria-label") ?? "").trim().toLowerCase();
+		return r === "close" || i.includes("stäng") || i.includes("close");
+	}
+	_syncDrawerCloseNode(e) {
+		e.getAttribute("slot") !== "drawer-close" && e.setAttribute("slot", "drawer-close"), e.setAttribute("data-drawer-close", this._drawerId), e.setAttribute("aria-controls", this._drawerId), this._drawerReady ? (e.removeAttribute("hidden"), e.removeAttribute("aria-hidden")) : (e.hasAttribute("hidden") || e.setAttribute("hidden", ""), e.getAttribute("aria-hidden") !== "true" && e.setAttribute("aria-hidden", "true"));
+	}
+	_syncDrawerCloseNodes() {
+		for (let e of Array.from(this.children)) this._isDrawerCloseNode(e) && this._syncDrawerCloseNode(e);
+	}
 	_setCollapsed(e) {
 		this._collapsed !== e && (this._collapsed = e, e ? this.setAttribute("data-collapsed", "") : this.removeAttribute("data-collapsed"));
 	}
@@ -1364,11 +1404,24 @@ var u = {
 		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([
+		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);
+			import("../scb-search/scb-search.js"),
+			this._ensureDrawerSlotComponentsReady()
+		]).then(() => void 0), await this._drawerImportPromise, this._drawerReady = !0, this._syncDrawerCloseNodes());
+	}
+	_drawerSlotContains(e) {
+		return [...this.querySelectorAll("[slot=\"drawer-menu\"], [slot=\"drawer-close\"]")].some((t) => t.matches(e) || !!t.querySelector(e));
+	}
+	async _ensureDrawerSlotComponentsReady() {
+		this.querySelector("[slot=\"drawer-menu\"], [slot=\"drawer-close\"]") && await Promise.all([
+			this._drawerSlotContains("scb-button") ? import("../scb-button/scb-button.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-icon-button") ? import("../scb-icon-button/scb-icon-button.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-skeleton") ? import("../scb-skeleton/scb-skeleton.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-grid") ? import("../scb-grid/scb-grid.js") : Promise.resolve(),
+			this._drawerSlotContains("scb-grid-item") ? import("../scb-grid/scb-grid-item.js") : Promise.resolve()
+		]);
 	}
 	async _ensureDropdownReady() {
 		customElements.get("scb-dropdown") || (this._dropdownImportPromise ??= import("../scb-dropdown/scb-dropdown.js").then(() => void 0), await this._dropdownImportPromise);
@@ -1557,9 +1610,9 @@ var u = {
     `;
 	}
 	render() {
-		let e = this._getNavItems(), t = this._slotUtils.length ? this._slotUtils : this.utilityItems, n = this._slotMenu.length ? this._slotMenu : this.menuData ?? [], a = this.logoText || this.logotypeText, o = this.logoAlt || a || "Gå till startsidan", s = this.querySelector("[slot=\"drawer-menu\"]") !== null;
+		let e = this._getNavItems(), t = this._slotUtils.length ? this._slotUtils : this.utilityItems, n = this._slotMenu.length ? this._slotMenu : this.menuData ?? [], a = this.logoText || this.logotypeText, o = this.logoAlt || a || "Gå till startsidan", s = this.querySelector("[slot=\"drawer-menu\"]") !== null, c = this.querySelector("[slot=\"drawer-close\"]") !== null;
 		this._syncFlags(t.length === 0, !this.showSearch);
-		let c = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : "", l = e.length > 0 || this.reserveTabs || this.layoutPending, u = (this.reserveTabs || this.layoutPending) && (this.layoutPending || e.length === 0), d = this.showDrawer && (!this.deferDrawer || this._drawerReady), f = typeof window < "u" && window.innerWidth >= this.BP_MD, p = this.showDrawer && (f ? this.alwaysShowMenuButton || this._collapsed : !0), m = p && !f, h = p && f, g = (this.searchButtonLabel ?? "").trim() || "Sök", _ = this.showSearch && !this._mobileSearchOpen;
+		let l = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : "", u = e.length > 0 || this.reserveTabs || this.layoutPending, d = (this.reserveTabs || this.layoutPending) && (this.layoutPending || e.length === 0), f = this.showDrawer && (!this.deferDrawer || this._drawerReady), p = typeof window < "u" && window.innerWidth >= this.BP_MD, m = this.showDrawer && (p ? this.alwaysShowMenuButton || this._collapsed : !0), h = m && !p, g = m && p, _ = (this.searchButtonLabel ?? "").trim() || "Sök", v = this.showSearch && !this._mobileSearchOpen;
 		return r`
       <slot
         id="data-slot"
@@ -1604,28 +1657,28 @@ var u = {
                 </nav>
 
                 ${this.showSearch ? r`
-                      <div class="search" style=${c}>
-                        ${this._renderSearchForm(g, c)}
+                      <div class="search" style=${l}>
+                        ${this._renderSearchForm(_, l)}
                       </div>
                     ` : i}
-                ${_ ? r`
+                ${v ? r`
                       <button
                         type="button"
                         class="mobile-search-trigger header-icon-button"
-                        aria-label=${g}
-                        title=${g}
+                        aria-label=${_}
+                        title=${_}
                         @click=${this._onMobileSearchToggle}
                       >
                         <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}
+                ${h ? this._renderMenuButton("", !0) : i}
               </div>
 
               ${this.showSearch && this._mobileSearchOpen ? r`
-                    <div class="mobile-search-panel" style=${c}>
-                      ${this._renderSearchForm(g, c, !1, !0)}
+                    <div class="mobile-search-panel" style=${l}>
+                      ${this._renderSearchForm(_, l, !1, !0)}
                       <button
                         type="button"
                         class="mobile-search-close header-icon-button"
@@ -1643,8 +1696,8 @@ var u = {
           </div>
 
           <div class="header-grid-item">
-            <div class=${l || h ? "tabs-row" : "tabs-row tabs-row--empty"}>
-              ${l ? u ? r`
+            <div class=${u || g ? "tabs-row" : "tabs-row tabs-row--empty"}>
+              ${u ? d ? r`
                       <div class="tabs-inset">
                         <div class="tabs-nav tabs-nav--skeleton" aria-hidden="true">
                           ${this._renderTabSkeletons()}
@@ -1693,14 +1746,14 @@ var u = {
                         </div>
                       ` : i : i}
 
-              ${h ? this._renderMenuButton("menu-trigger--tabs-right") : i}
+              ${g ? this._renderMenuButton("menu-trigger--tabs-right") : i}
             </div>
           </div>
         </div>
         <div class="divider" role="presentation"></div>
       </div>
 
-      ${d ? r`
+      ${f ? r`
             <scb-drawer
               id=${this._drawerId}
               floating
@@ -1713,7 +1766,16 @@ var u = {
               @scb-drawer-closed=${this._onDrawerClosed}
               @scb-menu-select=${this._onMenuSelect}
             >
-            <slot name="drawer-menu"></slot>
+              ${c ? r`
+                    <div class="drawer-close">
+                      <slot
+                        name="drawer-close"
+                        @slotchange=${this._ensureDrawerSlotComponentsReady}
+                      ></slot>
+                    </div>
+                  ` : i}
+
+              <slot name="drawer-menu" @slotchange=${this._ensureDrawerSlotComponentsReady}></slot>
 
               ${s ? i : r`
                     <scb-menu