scb-wc-test 0.1.46 → 0.1.47

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

@@ -213,6 +213,10 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as x,n as l,r as u,i
       min-width: var(--scb-header-search-min);
     }
 
+      .header-landmark {
+    background: var(--md-sys-color-background, #fff);
+  }
+
     .tabs-inset{ display:inline-block; width:fit-content; max-width:100%; }
     @media (max-width:839.98px){ .tabs-inset{ display:none; } }
     scb-tabs, scb-tabs::part(divider){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scb-wc-test",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/scb-header/scb-header.js

@@ -6,16 +6,16 @@ import "../scb-grid/scb-grid.js";
 import "../scb-link/scb-link.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-button/scb-button.js";
-var $ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (e, t, r, a) => {
-  for (var o = a > 1 ? void 0 : a ? A(t, r) : t, c = e.length - 1, n; c >= 0; c--)
-    (n = e[c]) && (o = (a ? n(t, r, o) : n(o)) || o);
-  return a && o && $(t, r, o), o;
+var $ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (e, t, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? A(t, s) : t, c = e.length - 1, n; c >= 0; c--)
+    (n = e[c]) && (o = (a ? n(t, s, o) : n(o)) || o);
+  return a && o && $(t, s, o), o;
 };
 const w = {
   fromAttribute: (e) => e == null ? !0 : !/^(false|0|off|no)$/i.test(e),
   toAttribute: (e) => String(!!e)
 };
-let s = class extends T {
+let r = class extends T {
   constructor() {
     super(...arguments), this.maxWidth = "1440px", this.logoText = "", this.logoHref = "/", this.banner = !1, this.tabs = [], this.activeTab = 0, this.utilityItems = [], this.showDrawer = !0, this.showSearch = !0, this.includeUtilityInDrawer = !1, this._drawerId = "main-drawer", this._drawerMounted = !1, this._drawerExpanded = !1, this._searchId = "header-search", this._slotTabs = [], this._slotUtils = [], this._slotMenu = [], this._measureScheduled = !1, this._scheduleMeasure = () => {
       this._measureScheduled || (this._measureScheduled = !0, requestAnimationFrame(() => {
@@ -32,7 +32,7 @@ let s = class extends T {
     }, this._collapsed = !1, this._unlockAtWidth = 0, this._hideLogoText = !1, this._logoTextUnlockAt = 0, this._harvestPending = !1, this.__drawerLoaded = !1, this.__tabsLoaded = !1, this.__searchLoaded = !1, this._harvest = () => {
       const e = this._slotEl;
       if (!e) return;
-      const t = e.assignedElements({ flatten: !0 }), r = [], a = [], o = [], c = (n) => ({
+      const t = e.assignedElements({ flatten: !0 }), s = [], a = [], o = [], c = (n) => ({
         label: n.getAttribute("label") ?? "",
         href: n.getAttribute("href") ?? void 0,
         icon: n.getAttribute("icon") ?? void 0
@@ -40,7 +40,7 @@ let s = class extends T {
       for (const n of t) {
         const d = n.tagName.toLowerCase();
         if (d === "scb-header-tab") {
-          r.push({ label: n.getAttribute("label") ?? "", href: n.getAttribute("href") ?? "#" });
+          s.push({ label: n.getAttribute("label") ?? "", href: n.getAttribute("href") ?? "#" });
           continue;
         }
         if (d === "scb-header-utility") {
@@ -62,7 +62,7 @@ let s = class extends T {
         }
         d === "scb-header-drawer-item" && o.push(c(n));
       }
-      this._slotTabs = r, this._slotUtils = a, this._slotMenu = o, queueMicrotask(() => {
+      this._slotTabs = s, this._slotUtils = a, this._slotMenu = o, queueMicrotask(() => {
         this.updateComplete.then(() => {
           this._applyActiveToTabs(), this._scheduleMeasure();
         });
@@ -71,26 +71,26 @@ let s = class extends T {
       var m, v, f;
       const e = this._top, t = this._logoGroup;
       if (!e || !t) return;
-      const r = window.innerWidth, a = e.clientWidth, o = this._overflows(this._util), c = this._overflows(this._tabsEl), n = r < this.BP_MD || o || c;
+      const s = window.innerWidth, a = e.clientWidth, o = this._overflows(this._util), c = this._overflows(this._tabsEl), n = s < this.BP_MD || o || c;
       this._collapsed ? !n && a >= this._unlockAtWidth && this._setCollapsed(!1) : n && (this._unlockAtWidth = a + this._HYST, this._setCollapsed(!0));
       let d = !1;
-      if (this.showSearch && r >= this.BP_SM && r < this.BP_MD && this._searchWrap) {
+      if (this.showSearch && s >= this.BP_SM && s < this.BP_MD && this._searchWrap) {
         const g = getComputedStyle(this._searchWrap), y = Math.max(
           this._num(g.minWidth, this._tokenPx("--scb-header-search-min", 320)),
           this._tokenPx("--scb-header-search-min", 320)
-        ), _ = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), S = this.showDrawer && (r < this.BP_MD || this._collapsed) ? ((m = this._menuBtn) == null ? void 0 : m.getBoundingClientRect().width) || this._tokenPx("--icon-size-large", 48) : 0;
+        ), _ = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), S = this.showDrawer && (s < this.BP_MD || this._collapsed) ? ((m = this._menuBtn) == null ? void 0 : m.getBoundingClientRect().width) || this._tokenPx("--icon-size-large", 48) : 0;
         d = t.getBoundingClientRect().width + _ + y + _ + S + 8 > a + 0.5;
       }
       this._setHideSearch(d);
       let b = !1;
-      if (this.showDrawer && (r < this.BP_MD || this._collapsed) && !this._visible(this._util) && !this._visible(this._searchWrap)) {
+      if (this.showDrawer && (s < this.BP_MD || this._collapsed) && !this._visible(this._util) && !this._visible(this._searchWrap)) {
         const g = this._num(getComputedStyle(e).gap, this._tokenPx("--spacing-7", 24)), y = ((v = this._menuBtn) == null ? void 0 : v.getBoundingClientRect().width) || this._tokenPx("--icon-size-large", 48), _ = (((f = this._logoGroup) == null ? void 0 : f.getBoundingClientRect().width) || 0) + g + y;
         this._hideLogoText ? b = !(a >= this._logoTextUnlockAt) : _ > a + 0.5 && (b = !0, this._logoTextUnlockAt = a + this._HYST);
       } else
         b = !1, this._logoTextUnlockAt = 0;
       this._setHideLogoText(b);
     }, this._onMenuClick = async (e) => {
-      e.preventDefault(), e.stopPropagation(), this.showDrawer && (this.dispatchEvent(new CustomEvent("menu-click", { bubbles: !0, composed: !0 })), await this._ensureDrawerMounted(), await s._nextFrame(), await s._nextFrame(), this._openDrawerNow());
+      e.preventDefault(), e.stopPropagation(), this.showDrawer && (this.dispatchEvent(new CustomEvent("menu-click", { bubbles: !0, composed: !0 })), await this._ensureDrawerMounted(), await r._nextFrame(), await r._nextFrame(), this._openDrawerNow());
     }, this._onSearchClick = (e) => {
       var a;
       const t = this._searchEl;
@@ -98,19 +98,19 @@ let s = class extends T {
         t.submit();
         return;
       }
-      const r = (t == null ? void 0 : t.value) ?? void 0;
+      const s = (t == null ? void 0 : t.value) ?? void 0;
       this.dispatchEvent(new CustomEvent("search-click", {
-        detail: { value: r },
+        detail: { value: s },
         bubbles: !0,
         composed: !0
       })), (a = t == null ? void 0 : t.focus) == null || a.call(t);
     }, this._onTabsChange = (e) => {
       var c, n, d;
-      const t = e, r = ((c = t == null ? void 0 : t.detail) == null ? void 0 : c.activeTabIndex) ?? ((n = e.target) == null ? void 0 : n.activeTabIndex) ?? 0;
-      this.activeTab = r;
-      const o = ((d = (this._slotTabs.length ? this._slotTabs : this.tabs)[r]) == null ? void 0 : d.href) ?? "";
+      const t = e, s = ((c = t == null ? void 0 : t.detail) == null ? void 0 : c.activeTabIndex) ?? ((n = e.target) == null ? void 0 : n.activeTabIndex) ?? 0;
+      this.activeTab = s;
+      const o = ((d = (this._slotTabs.length ? this._slotTabs : this.tabs)[s]) == null ? void 0 : d.href) ?? "";
       this.dispatchEvent(new CustomEvent("tab-change", {
-        detail: { index: r, href: o },
+        detail: { index: s, href: o },
         bubbles: !0,
         composed: !0
       }));
@@ -120,10 +120,10 @@ let s = class extends T {
     return this._tokenPx("--spacing-11", 64);
   }
   get BP_SM() {
-    return this._tokenPx("--bp-sm", s.BP_SM_DEFAULT);
+    return this._tokenPx("--bp-sm", r.BP_SM_DEFAULT);
   }
   get BP_MD() {
-    return this._tokenPx("--bp-md", s.BP_MD_DEFAULT);
+    return this._tokenPx("--bp-md", r.BP_MD_DEFAULT);
   }
   _scheduleHarvest() {
     this._harvestPending || (this._harvestPending = !0, queueMicrotask(() => {
@@ -179,7 +179,7 @@ let s = class extends T {
   _attachSlotObservers() {
     var t;
     (t = this._slotMo) == null || t.disconnect();
-    const e = new MutationObserver((r) => {
+    const e = new MutationObserver((s) => {
       this._scheduleHarvest();
     });
     this._slotMo = e, e.observe(this, {
@@ -199,12 +199,12 @@ let s = class extends T {
     this._hideLogoText !== e && (this._hideLogoText = e, e ? this.setAttribute("data-hide-logo-text", "") : this.removeAttribute("data-hide-logo-text"));
   }
   _num(e, t) {
-    const r = Number.parseFloat(String(e ?? "").trim());
-    return Number.isFinite(r) ? r : t;
+    const s = Number.parseFloat(String(e ?? "").trim());
+    return Number.isFinite(s) ? s : t;
   }
   _tokenPx(e, t) {
-    const r = getComputedStyle(this);
-    return this._num(r.getPropertyValue(e), t);
+    const s = getComputedStyle(this);
+    return this._num(s.getPropertyValue(e), t);
   }
   _visible(e) {
     return e ? getComputedStyle(e).display !== "none" : !1;
@@ -218,8 +218,8 @@ let s = class extends T {
     });
     const e = this._top;
     e && (this._ro = new ResizeObserver(() => this._scheduleMeasure()), this._ro.observe(e)), window.addEventListener("resize", this._onWindowResize, { passive: !0 });
-    const t = this._menuBtn, r = () => this._ensureDrawerMounted();
-    t == null || t.addEventListener("pointerenter", r, { once: !0 }), t == null || t.addEventListener("focusin", r, { once: !0 }), t == null || t.addEventListener("touchstart", r, { once: !0, passive: !0 });
+    const t = this._menuBtn, s = () => this._ensureDrawerMounted();
+    t == null || t.addEventListener("pointerenter", s, { once: !0 }), t == null || t.addEventListener("focusin", s, { once: !0 }), t == null || t.addEventListener("touchstart", s, { once: !0, passive: !0 });
     const a = (o) => "requestIdleCallback" in window ? window.requestIdleCallback(o, { timeout: 1500 }) : setTimeout(o, 600);
     this.showDrawer && a(() => {
       this.__ensureDrawer();
@@ -242,9 +242,9 @@ let s = class extends T {
     this._drawerMounted || (await this.__ensureDrawer(), this._drawerMounted = !0, await this.updateComplete);
   }
   _openDrawerNow() {
-    var t, r;
+    var t, s;
     const e = this.renderRoot.querySelector(`#${this._drawerId}`);
-    e && (e.open = !0, e.setAttribute("open", ""), (t = e.show) == null || t.call(e), (r = e.openDrawer) == null || r.call(e), this._drawerExpanded = !0, this._syncMenuBtnAria(), this.dispatchEvent(new CustomEvent("drawer-open", { bubbles: !0, composed: !0 })));
+    e && (e.open = !0, e.setAttribute("open", ""), (t = e.show) == null || t.call(e), (s = e.openDrawer) == null || s.call(e), this._drawerExpanded = !0, this._syncMenuBtnAria(), this.dispatchEvent(new CustomEvent("drawer-open", { bubbles: !0, composed: !0 })));
   }
   _closeDrawerNow() {
     const e = this.renderRoot.querySelector(`#${this._drawerId}`);
@@ -257,13 +257,13 @@ let s = class extends T {
   _applyActiveToTabs() {
     const e = this._tabsEl;
     if (!e) return;
-    e.activeTabIndex = this.activeTab, e.querySelectorAll("scb-secondary-tab").forEach((r, a) => {
-      r.selected = a === this.activeTab;
+    e.activeTabIndex = this.activeTab, e.querySelectorAll("scb-secondary-tab").forEach((s, a) => {
+      s.selected = a === this.activeTab;
     });
   }
   _renderDrawerNodes(e) {
     return !e || e.length === 0 ? h`` : h`${e.map((t) => {
-      const r = Array.isArray(t.children) && t.children.length > 0;
+      const s = Array.isArray(t.children) && t.children.length > 0;
       return h`
         <scb-drawer-item
           label=${t.label}
@@ -271,7 +271,7 @@ let s = class extends T {
           leading-icon=${t.icon ?? ""}
           item-href=${t.href ?? ""}
         >
-          ${r ? h`
+          ${s ? h`
             <scb-sub-drawer label=${t.label}>
               ${t.children.map((a) => h`
                 <scb-drawer-item
@@ -290,7 +290,7 @@ let s = class extends T {
     this.toggleAttribute("data-no-utility", e), this.toggleAttribute("data-no-search", t);
   }
   render() {
-    const e = this._slotTabs.length ? this._slotTabs : this.tabs, t = this._slotUtils.length ? this._slotUtils : this.utilityItems, r = this._slotMenu.length ? this._slotMenu : this.menuData ?? [];
+    const e = this._slotTabs.length ? this._slotTabs : this.tabs, t = this._slotUtils.length ? this._slotUtils : this.utilityItems, s = this._slotMenu.length ? this._slotMenu : this.menuData ?? [];
     this._syncFlags(t.length === 0, !this.showSearch);
     const a = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : u;
     return h`
@@ -377,7 +377,7 @@ let s = class extends T {
 
           ${this.drawerSectionLabel ? h`<scb-drawer-section .label=${this.drawerSectionLabel}></scb-drawer-section>` : u}
 
-          ${this._renderDrawerNodes(r)}
+          ${this._renderDrawerNodes(s)}
 
           ${this.includeUtilityInDrawer && ((t == null ? void 0 : t.length) ?? 0) > 0 ? h`
             <scb-drawer-section label=''></scb-drawer-section>
@@ -403,7 +403,7 @@ let s = class extends T {
     `;
   }
 };
-s._JSON_ARRAY = {
+r._JSON_ARRAY = {
   fromAttribute: (e) => {
     if (e == null || e === "") return [];
     try {
@@ -415,9 +415,9 @@ s._JSON_ARRAY = {
   },
   toAttribute: (e) => e == null ? null : JSON.stringify(e)
 };
-s.BP_SM_DEFAULT = 600;
-s.BP_MD_DEFAULT = 840;
-s.styles = C`
+r.BP_SM_DEFAULT = 600;
+r.BP_MD_DEFAULT = 840;
+r.styles = C`
     :host {
       display:block;
       background:var(--md-sys-color-background,#fff)!important;
@@ -510,6 +510,10 @@ s.styles = C`
       min-width: var(--scb-header-search-min);
     }
 
+      .header-landmark {
+    background: var(--md-sys-color-background, #fff);
+  }
+
     .tabs-inset{ display:inline-block; width:fit-content; max-width:100%; }
     @media (max-width:839.98px){ .tabs-inset{ display:none; } }
     scb-tabs, scb-tabs::part(divider){
@@ -562,97 +566,97 @@ s.styles = C`
       display: none;
     }
   `;
-s._nextFrame = () => new Promise((e) => requestAnimationFrame(() => e()));
+r._nextFrame = () => new Promise((e) => requestAnimationFrame(() => e()));
 i([
   l({ type: String, attribute: "max-width" })
-], s.prototype, "maxWidth", 2);
+], r.prototype, "maxWidth", 2);
 i([
   l({ type: String, attribute: "logo-text" })
-], s.prototype, "logoText", 2);
+], r.prototype, "logoText", 2);
 i([
   l({ type: String, attribute: "logo-href" })
-], s.prototype, "logoHref", 2);
+], r.prototype, "logoHref", 2);
 i([
   l({ type: Boolean, reflect: !0 })
-], s.prototype, "banner", 2);
+], r.prototype, "banner", 2);
 i([
   l({ type: String, attribute: "banner-label" })
-], s.prototype, "bannerLabel", 2);
+], r.prototype, "bannerLabel", 2);
 i([
-  l({ attribute: "tabs", converter: s._JSON_ARRAY })
-], s.prototype, "tabs", 2);
+  l({ attribute: "tabs", converter: r._JSON_ARRAY })
+], r.prototype, "tabs", 2);
 i([
   l({ type: Number, attribute: "active-tab" })
-], s.prototype, "activeTab", 2);
+], r.prototype, "activeTab", 2);
 i([
-  l({ attribute: "utility-items", converter: s._JSON_ARRAY })
-], s.prototype, "utilityItems", 2);
+  l({ attribute: "utility-items", converter: r._JSON_ARRAY })
+], r.prototype, "utilityItems", 2);
 i([
   l({ type: String, attribute: "search-placeholder" })
-], s.prototype, "searchPlaceholder", 2);
+], r.prototype, "searchPlaceholder", 2);
 i([
   l({ type: String, attribute: "drawer-label" })
-], s.prototype, "drawerLabel", 2);
+], r.prototype, "drawerLabel", 2);
 i([
   l({ type: String, attribute: "drawer-sub-label" })
-], s.prototype, "drawerSubLabel", 2);
+], r.prototype, "drawerSubLabel", 2);
 i([
   l({ type: String, attribute: "drawer-section-label" })
-], s.prototype, "drawerSectionLabel", 2);
+], r.prototype, "drawerSectionLabel", 2);
 i([
   l({ type: String, attribute: "drawer-search-placeholder" })
-], s.prototype, "drawerSearchPlaceholder", 2);
+], r.prototype, "drawerSearchPlaceholder", 2);
 i([
-  l({ attribute: "menu-data", converter: s._JSON_ARRAY })
-], s.prototype, "menuData", 2);
+  l({ attribute: "menu-data", converter: r._JSON_ARRAY })
+], r.prototype, "menuData", 2);
 i([
   l({ attribute: "show-drawer", reflect: !0, converter: w })
-], s.prototype, "showDrawer", 2);
+], r.prototype, "showDrawer", 2);
 i([
   l({ attribute: "show-search", reflect: !0, converter: w })
-], s.prototype, "showSearch", 2);
+], r.prototype, "showSearch", 2);
 i([
   l({ attribute: "include-utility-in-drawer", reflect: !0, converter: w })
-], s.prototype, "includeUtilityInDrawer", 2);
+], r.prototype, "includeUtilityInDrawer", 2);
 i([
   l({ type: String, attribute: "search-max" })
-], s.prototype, "searchMax", 2);
+], r.prototype, "searchMax", 2);
 i([
   l({ type: String, attribute: "search-min" })
-], s.prototype, "searchMin", 2);
+], r.prototype, "searchMin", 2);
 i([
   l({ type: String, attribute: "search-height" })
-], s.prototype, "searchHeight", 2);
+], r.prototype, "searchHeight", 2);
 i([
   p()
-], s.prototype, "_drawerId", 2);
+], r.prototype, "_drawerId", 2);
 i([
   p()
-], s.prototype, "_drawerMounted", 2);
+], r.prototype, "_drawerMounted", 2);
 i([
   p()
-], s.prototype, "_drawerExpanded", 2);
+], r.prototype, "_drawerExpanded", 2);
 i([
   p()
-], s.prototype, "_searchId", 2);
+], r.prototype, "_searchId", 2);
 i([
   p()
-], s.prototype, "_slotTabs", 2);
+], r.prototype, "_slotTabs", 2);
 i([
   p()
-], s.prototype, "_slotUtils", 2);
+], r.prototype, "_slotUtils", 2);
 i([
   p()
-], s.prototype, "_slotMenu", 2);
+], r.prototype, "_slotMenu", 2);
 i([
   p()
-], s.prototype, "_collapsed", 2);
+], r.prototype, "_collapsed", 2);
 i([
   p()
-], s.prototype, "_hideLogoText", 2);
-s = i([
+], r.prototype, "_hideLogoText", 2);
+r = i([
   M("scb-header")
-], s);
+], r);
 export {
-  s as ScbHeader
+  r as ScbHeader
 };

package/scb-wc-test.bundle.js

@@ -4960,6 +4960,10 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
       min-width: var(--scb-header-search-min);
     }
 
+      .header-landmark {
+    background: var(--md-sys-color-background, #fff);
+  }
+
     .tabs-inset{ display:inline-block; width:fit-content; max-width:100%; }
     @media (max-width:839.98px){ .tabs-inset{ display:none; } }
     scb-tabs, scb-tabs::part(divider){