scb-wc 0.1.78 → 0.1.80

package/scb-cookies-consent/scb-cookies-consent.js

@@ -1,19 +1,27 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
-import "../scb-button/scb-button.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 //#region src/scb-components/scb-cookies-consent/scb-cookies-consent.ts
-var o = { fromAttribute(e) {
+var o;
+function s() {
+	return !!document.querySelector("script[src*=\"/scb-button/scb-button.js\"],script[src$=\"scb-button.js\"]");
+}
+var c = { fromAttribute(e) {
 	if (e === null) return !1;
 	let t = e.trim().toLowerCase();
 	return t !== "false" && t !== "0" && t !== "no";
-} }, s = class extends t {
+} }, l = class extends t {
 	constructor(...e) {
 		super(...e), this.open = !0, this.autoRemove = !0, this.title = "", this.supportingText = "", this.ariaLabel = "Cookie-inställningar", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._updateButtonWidth = () => {
 			let e = window.innerWidth <= 480, t = this.shadowRoot.querySelector("slot[name=\"buttons\"]");
 			t && t.assignedElements().forEach((t) => {
 				e ? t.setAttribute("full-width", "") : t.removeAttribute("full-width");
 			});
+		}, this.__onButtonHydrationInteraction = (e) => {
+			let t = e.target;
+			t instanceof Element && t.closest("scb-button[slot=\"buttons\"]") && this.__ensureSlottedButtonsReady(!0);
+		}, this.__onButtonsSlotChange = () => {
+			this.__ensureSlottedButtonsReady(), this._updateButtonWidth();
 		};
 	}
 	static {
@@ -25,8 +33,6 @@ var o = { fromAttribute(e) {
       flex-direction: column;
       bottom: var(--scb-cookies-consent-bottom, 32px);
       left: var(--scb-cookies-consent-left, 32px);
-      background: #fff;
-      color: #222;
       box-shadow: 0 8px 10px -6px #0000001a, 0 20px 25px -5px #0000001a;
       color: var(--md-sys-color-on-surface, #0f0865);
       background: var(--md-sys-color-surface, #fff);
@@ -58,6 +64,9 @@ var o = { fromAttribute(e) {
       margin: 0;
       hyphens: auto;
   }
+  .supporting-text {
+      margin: 0;
+  }
   .button-container {
       display: flex;
       flex-direction: column;
@@ -65,12 +74,6 @@ var o = { fromAttribute(e) {
       justify-content: flex-start;
   }
 
-  ::slotted{
-    md-filled-button {
-      width: 100%;
-    }
-  }
-
   @media only screen and (min-width: 481px) {
     :host {
       width: var(--scb-cookies-consent-width-medium, auto);
@@ -86,6 +89,15 @@ var o = { fromAttribute(e) {
 }
 `;
 	}
+	__ensureSlottedButtonsReady(e = !1) {
+		if (!(!this.querySelector("scb-button[slot=\"buttons\"]") || customElements.get("scb-button"))) {
+			if (s()) {
+				customElements.whenDefined("scb-button").then(() => this.requestUpdate());
+				return;
+			}
+			e && (o ??= import("../scb-button/scb-button.js"), o.then(() => this.requestUpdate()));
+		}
+	}
 	mapSpacingToken(e) {
 		if (!e) return;
 		let t = String(e).trim();
@@ -96,13 +108,13 @@ var o = { fromAttribute(e) {
 		t ? this.style.setProperty("--scb-cookies-consent-spacing-block-start", t) : this.style.removeProperty("--scb-cookies-consent-spacing-block-start"), n ? this.style.setProperty("--scb-cookies-consent-spacing-block-end", n) : this.style.removeProperty("--scb-cookies-consent-spacing-block-end"), r ? this.style.setProperty("--scb-cookies-consent-spacing-inline-start", r) : this.style.removeProperty("--scb-cookies-consent-spacing-inline-start"), i ? this.style.setProperty("--scb-cookies-consent-spacing-inline-end", i) : this.style.removeProperty("--scb-cookies-consent-spacing-inline-end");
 	}
 	firstUpdated(e) {
-		this._updateButtonWidth(), window.addEventListener("resize", this._updateButtonWidth), this.addEventListener("click", (e) => {
+		this.__ensureSlottedButtonsReady(), this._updateButtonWidth(), window.addEventListener("resize", this._updateButtonWidth), this.addEventListener("pointerover", this.__onButtonHydrationInteraction, { capture: !0 }), this.addEventListener("focusin", this.__onButtonHydrationInteraction, { capture: !0 }), this.addEventListener("pointerdown", this.__onButtonHydrationInteraction, { capture: !0 }), this.addEventListener("keydown", this.__onButtonHydrationInteraction, { capture: !0 }), this.addEventListener("click", (e) => {
 			let t = e.target;
 			t.slot === "buttons" && (t.id === "accept-btn" ? this.closeAndRemove("cookies-accept") : t.id === "decline-btn" ? this.closeAndRemove("cookies-decline") : t.id === "handle-btn" && this.closeAndRemove("cookies-handle"));
 		}), this.applySpacing();
 	}
 	updated(e) {
-		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing(), e.has("open") && (this.open && this._updateButtonWidth(), e.get("open") !== void 0 && this.dispatchEvent(new CustomEvent("openchange", {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing(), e.has("open") && e.get("open") !== void 0 && (this.open && this._updateButtonWidth(), this.dispatchEvent(new CustomEvent("openchange", {
 			bubbles: !0,
 			composed: !0,
 			detail: { open: this.open }
@@ -112,7 +124,7 @@ var o = { fromAttribute(e) {
 		super.connectedCallback(), this.id ||= "cookie-consent";
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), window.removeEventListener("resize", this._updateButtonWidth);
+		super.disconnectedCallback(), window.removeEventListener("resize", this._updateButtonWidth), this.removeEventListener("pointerover", this.__onButtonHydrationInteraction, { capture: !0 }), this.removeEventListener("focusin", this.__onButtonHydrationInteraction, { capture: !0 }), this.removeEventListener("pointerdown", this.__onButtonHydrationInteraction, { capture: !0 }), this.removeEventListener("keydown", this.__onButtonHydrationInteraction, { capture: !0 });
 	}
 	closeAndRemove(e) {
 		let t = {
@@ -126,12 +138,12 @@ var o = { fromAttribute(e) {
 	render() {
 		return this.open ? r`
       <div role="dialog" class="cookies-consent" aria-modal="true" aria-label=${this.ariaLabel}>
-        <h2>${this.title}</h2>
-        <div>
-            ${this.supportingText}
+        <h2><slot name="title">${this.title}</slot></h2>
+        <div class="supporting-text">
+          <slot name="supporting-text">${this.supportingText}</slot>
         </div>
          <div class="button-container">
-            <slot name="buttons"></slot>
+            <slot name="buttons" @slotchange=${this.__onButtonsSlotChange}></slot>
         </div> 
       </div>
     ` : null;
@@ -140,42 +152,42 @@ var o = { fromAttribute(e) {
 e([a({
 	type: Boolean,
 	reflect: !0,
-	converter: o
-})], s.prototype, "open", void 0), e([a({
+	converter: c
+})], l.prototype, "open", void 0), e([a({
 	type: Boolean,
 	attribute: "auto-remove",
 	reflect: !0,
-	converter: o
-})], s.prototype, "autoRemove", void 0), e([a({
+	converter: c
+})], l.prototype, "autoRemove", void 0), e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "title", void 0), e([a({
+})], l.prototype, "title", void 0), e([a({
 	type: String,
 	attribute: "supporting-text",
 	reflect: !0
-})], s.prototype, "supportingText", void 0), e([a({
+})], l.prototype, "supportingText", void 0), e([a({
 	type: String,
 	attribute: "aria-label",
 	reflect: !0
-})], s.prototype, "ariaLabel", void 0), e([a({
+})], l.prototype, "ariaLabel", void 0), e([a({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([a({
+})], l.prototype, "spacing", void 0), e([a({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], s.prototype, "spacingTop", void 0), e([a({
+})], l.prototype, "spacingTop", void 0), e([a({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], s.prototype, "spacingBottom", void 0), e([a({
+})], l.prototype, "spacingBottom", void 0), e([a({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], s.prototype, "spacingLeft", void 0), e([a({
+})], l.prototype, "spacingLeft", void 0), e([a({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], s.prototype, "spacingRight", void 0), s = e([i("scb-cookies-consent")], s);
+})], l.prototype, "spacingRight", void 0), l = e([i("scb-cookies-consent")], l);
 //#endregion
-export { s as ScbCookiesConsent };
+export { l as ScbCookiesConsent };

package/scb-datepicker/scb-datepicker.js

@@ -1,14 +1,14 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { addLazyFocusRingListeners as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } 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-divider/scb-divider.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a, state as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-datepicker/scb-datepicker.ts
-var s = class extends t {
+var c = class extends n {
 	constructor(...e) {
 		super(...e), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "date", this.lang = "sv", this.selectedValue = "", this.open = !0, this._selectedHour = 0, this._selectedMinute = 0, this._viewportMargin = 8, this._popupOffset = 4, this._onWindowReposition = () => {
 			this._positionPopupWithinViewport();
@@ -53,6 +53,9 @@ var s = class extends t {
 		let e = this.getRootNode(), t = e instanceof ShadowRoot ? e.host : null;
 		return t instanceof HTMLElement && t.closest("scb-dialog") ? !0 : !!this.closest("scb-dialog");
 	}
+	connectedCallback() {
+		super.connectedCallback(), this._removeLazyFocusRingListeners = e(this, this.renderRoot);
+	}
 	_positionPopupWithinViewport() {
 		if (!this.open) return;
 		let e = this.renderRoot.querySelector(".datepicker-popup");
@@ -69,7 +72,7 @@ var s = class extends t {
 		this.style.setProperty("--scb-datepicker-position", "absolute"), this.style.setProperty("--scb-datepicker-computed-width", `${a}px`), this.style.setProperty("--scb-datepicker-left", "0"), this.style.setProperty("--scb-datepicker-transform", `translateX(${s}px)`), u ? (this.style.setProperty("--scb-datepicker-top", "auto"), this.style.setProperty("--scb-datepicker-bottom", `calc(100% + ${this._popupOffset}px)`), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(0, l - this._popupOffset)}px`)) : (this.style.setProperty("--scb-datepicker-top", `calc(100% + ${this._popupOffset}px)`), this.style.setProperty("--scb-datepicker-bottom", "auto"), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(0, c - this._popupOffset)}px`));
 	}
 	static {
-		this.styles = [n`
+		this.styles = [r`
     :host {
         --scb-datepicker-width: 380px;
       --scb-datepicker-z-index: 1100;
@@ -260,12 +263,12 @@ var s = class extends t {
 		this.open && requestAnimationFrame(() => this._positionPopupWithinViewport());
 	}
 	disconnectedCallback() {
-		window.removeEventListener("mousedown", this._outsideClickHandler), window.removeEventListener("resize", this._onWindowReposition), window.removeEventListener("scroll", this._onWindowReposition, !0), super.disconnectedCallback();
+		this._removeLazyFocusRingListeners?.(), this._removeLazyFocusRingListeners = void 0, window.removeEventListener("mousedown", this._outsideClickHandler), window.removeEventListener("resize", this._onWindowReposition), window.removeEventListener("scroll", this._onWindowReposition, !0), super.disconnectedCallback();
 	}
 	render() {
-		if (!this.open) return r``;
-		let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), n = /* @__PURE__ */ new Date(), i = this._getMonthDays(e, t), a = Array.from({ length: 101 }, (e, t) => n.getFullYear() - 50 + t), o = this.variant === "datetime-local" && !this._showMonthDropdown && !this._showYearDropdown;
-		return r`
+		if (!this.open) return i``;
+		let e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), n = /* @__PURE__ */ new Date(), r = this._getMonthDays(e, t), a = Array.from({ length: 101 }, (e, t) => n.getFullYear() - 50 + t), o = this.variant === "datetime-local" && !this._showMonthDropdown && !this._showYearDropdown;
+		return i`
       <div class="datepicker-popup popup">
         <div class="header">
             <div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
@@ -307,11 +310,11 @@ var s = class extends t {
                 <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
             </div>
         </div>
-        ${this._showMonthDropdown || this._showYearDropdown ? r`<scb-divider></scb-divider>` : ""}
+        ${this._showMonthDropdown || this._showYearDropdown ? i`<scb-divider></scb-divider>` : ""}
         <div class="datepicker-content" style="position:relative;">
-          ${this._showMonthDropdown ? r`
+          ${this._showMonthDropdown ? i`
             <div class="dropdown-list">
-              ${this._monthNames.map((e, n) => r`
+              ${this._monthNames.map((e, n) => i`
                 <div
                     @keydown=${(e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onMonthChangeCustom(n));
@@ -321,16 +324,16 @@ var s = class extends t {
                   @click=${() => this._onMonthChangeCustom(n)}
                   id=${n === t ? "selected-month" : ""}
                 >
-                ${n === t ? r`<md-icon>check</md-icon>` : ""}
+                ${n === t ? i`<md-icon>check</md-icon>` : ""}
                   ${e}
                   <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
                 </div>
               `)}
             </div>
           ` : ""}
-          ${this._showYearDropdown ? r`
+          ${this._showYearDropdown ? i`
             <div class="dropdown-list">
-              ${a.map((t) => r`
+              ${a.map((t) => i`
                 <div
                 @keydown=${(e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onYearChangeCustom(t));
@@ -340,14 +343,14 @@ var s = class extends t {
                   @click=${() => this._onYearChangeCustom(t)}
                   id=${t === e ? "selected-year" : ""}
                 >
-                ${t === e ? r`<md-icon>check</md-icon>` : ""}
+                ${t === e ? i`<md-icon>check</md-icon>` : ""}
                   ${t}
                   <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
                 </div>
               `)}
             </div>
           ` : ""}
-          ${!this._showMonthDropdown && !this._showYearDropdown ? r`
+          ${!this._showMonthDropdown && !this._showYearDropdown ? i`
             <div class="datepicker-calendar">
             <table>
               <thead>
@@ -356,9 +359,9 @@ var s = class extends t {
                 </tr>
               </thead>
               <tbody>
-                ${i.map((e) => r`
+                ${r.map((e) => i`
                   <tr>
-                    ${e.map((e) => e ? r`
+                    ${e.map((e) => e ? i`
                       <td>
                         <div
                         @keydown=${(t) => {
@@ -370,7 +373,7 @@ var s = class extends t {
                           @click=${() => this._selectDate(e)}
                         >${e.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
                       </td>
-                    ` : r`<td></td>`)}
+                    ` : i`<td></td>`)}
                   </tr>
                 `)}
               </tbody>
@@ -378,7 +381,7 @@ var s = class extends t {
             </div>
           ` : ""}
         </div>
-        ${o ? r`
+        ${o ? i`
             <div style="padding: 0 24px;">
             <label style="display:flex;align-items:center;gap:8px;">
                 <span>${this.lang == "sv" ? "Tid:" : "Time:"}</span>
@@ -387,7 +390,7 @@ var s = class extends t {
             </div>
         ` : ""}
         <div class="datepicker-footer">
-        ${!this._showMonthDropdown && !this._showYearDropdown ? r`
+        ${!this._showMonthDropdown && !this._showYearDropdown ? i`
             <scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
         ` : ""}
         </div>
@@ -465,6 +468,5 @@ var s = class extends t {
 		}
 	}
 };
-e([o()], s.prototype, "_currentDate", void 0), e([o()], s.prototype, "_selectedDate", void 0), e([o()], s.prototype, "_showMonthDropdown", void 0), e([o()], s.prototype, "_showYearDropdown", void 0), e([a({ type: String })], s.prototype, "variant", void 0), e([a({ type: String })], s.prototype, "lang", void 0), e([a({ type: String })], s.prototype, "selectedValue", void 0), e([a({ type: Boolean })], s.prototype, "open", void 0), e([o()], s.prototype, "_selectedHour", void 0), e([o()], s.prototype, "_selectedMinute", void 0), s = e([i("scb-datepicker")], s);
+t([s()], c.prototype, "_currentDate", void 0), t([s()], c.prototype, "_selectedDate", void 0), t([s()], c.prototype, "_showMonthDropdown", void 0), t([s()], c.prototype, "_showYearDropdown", void 0), t([o({ type: String })], c.prototype, "variant", void 0), t([o({ type: String })], c.prototype, "lang", void 0), t([o({ type: String })], c.prototype, "selectedValue", void 0), t([o({ type: Boolean })], c.prototype, "open", void 0), t([s()], c.prototype, "_selectedHour", void 0), t([s()], c.prototype, "_selectedMinute", void 0), c = t([a("scb-datepicker")], c);
 //#endregion
-export { s as ScbDatepicker };

package/scb-dialog/scb-dialog.js

@@ -1,11 +1,11 @@
 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-chip/scb-chip.js";
 import "../scb-textfield/scb-textfield.js";
 import "../scb-checkbox/scb-checkbox.js";
 import "../scb-radio-button/scb-radio-button.js";
 import "../scb-switch/scb-switch.js";
+import "../scb-chip/scb-chip.js";
 import { LitElement as t, css as n, html as r, nothing as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/icon/icon.js";

package/scb-dropdown/scb-dropdown.js

@@ -1,10 +1,10 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import "../scb-chevron/scb-chevron.js";
 import "../scb-button/scb-button.js";
 import "../scb-options-menu/scb-options-menu.js";
-import { LitElement as t, css as n, html as r, nothing as i } from "lit";
-import { customElement as a, property as o, query as s } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s, query as c } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 (() => {
 	if (typeof window > "u" || typeof document > "u" || !("customElements" in window) || document.head.querySelector("style[data-scb-dropdown-pre-upgrade]")) return;
@@ -54,7 +54,7 @@ import "@material/web/icon/icon.js";
 		r.disconnect();
 	});
 })();
-var c = class extends t {
+var l = class extends n {
 	constructor(...e) {
 		super(...e), this.label = "Dropdown", this.variant = "filled", this.size = "medium", this.open = !1, this.disabled = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.menuGap = "3", this.width = null, this.minWidth = null, this.maxWidth = null, this.dataIndex = null, this.ariaCurrent = null, this._slottedMenuEl = null, this._openSettledTimer = null, this._menuCloseTimer = null, this._panelResizeObserver = null, this._panelHeightSyncRaf = null, this._onDocumentClickBound = (e) => {
 			if (!this.open) return;
@@ -77,7 +77,7 @@ var c = class extends t {
 		};
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: inline-block;
       position: relative;
@@ -508,9 +508,9 @@ var c = class extends t {
 		return a && i.style.setProperty("--scb-chevron-size", a), r.replaceWith(i), i;
 	}
 	render() {
-		let e = !!this._slottedMenuEl, t = this.hasAttribute("as-tab"), n = this.dataIndex, a = this.ariaCurrent === "page" ? "page" : i;
-		return r`
-      ${t ? r`
+		let t = !!this._slottedMenuEl, n = this.hasAttribute("as-tab"), r = this.dataIndex, o = this.ariaCurrent === "page" ? "page" : a;
+		return i`
+      ${n ? i`
           <div class="tab-wrap">
             <button
               type="button"
@@ -519,16 +519,17 @@ var c = class extends t {
               ?disabled=${this.disabled}
               aria-haspopup="menu"
               aria-expanded=${String(this.open)}
-              data-index=${n ?? i}
-              aria-current=${a}
+              data-index=${r ?? a}
+              aria-current=${o}
               @click=${this._onTriggerClick}
+              @focusin=${e}
             >
               ${this.label}
               <scb-chevron class="chevron" .open=${this.open}></scb-chevron>
             </button>
             <md-focus-ring></md-focus-ring>
           </div>
-        ` : r`
+        ` : i`
           <scb-button
             data-scb-dropdown-trigger
             label=${this.label}
@@ -542,7 +543,7 @@ var c = class extends t {
         `}
 
       <div
-        class="panel ${e ? "has-menu" : ""}"
+        class="panel ${t ? "has-menu" : ""}"
         ?inert=${!this.open}
         aria-hidden=${this.open ? "false" : "true"}
       >
@@ -555,49 +556,49 @@ var c = class extends t {
     `;
 	}
 };
-e([o({ type: String })], c.prototype, "label", void 0), e([o({ type: String })], c.prototype, "variant", void 0), e([o({
+t([s({ type: String })], l.prototype, "label", void 0), t([s({ type: String })], l.prototype, "variant", void 0), t([s({
 	type: String,
 	reflect: !0
-})], c.prototype, "size", void 0), e([o({
+})], l.prototype, "size", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "open", void 0), e([o({
+})], l.prototype, "open", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "disabled", void 0), e([o({
+})], l.prototype, "disabled", void 0), t([s({
 	type: String,
 	reflect: !0
-})], c.prototype, "spacing", void 0), e([o({
+})], l.prototype, "spacing", void 0), t([s({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], c.prototype, "spacingTop", void 0), e([o({
+})], l.prototype, "spacingTop", void 0), t([s({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], c.prototype, "spacingBottom", void 0), e([o({
+})], l.prototype, "spacingBottom", void 0), t([s({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], c.prototype, "spacingLeft", void 0), e([o({
+})], l.prototype, "spacingLeft", void 0), t([s({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], c.prototype, "spacingRight", void 0), e([o({
+})], l.prototype, "spacingRight", void 0), t([s({
 	type: String,
 	attribute: "menu-gap"
-})], c.prototype, "menuGap", void 0), e([o({ type: String })], c.prototype, "width", void 0), e([o({
+})], l.prototype, "menuGap", void 0), t([s({ type: String })], l.prototype, "width", void 0), t([s({
 	type: String,
 	attribute: "min-width"
-})], c.prototype, "minWidth", void 0), e([o({
+})], l.prototype, "minWidth", void 0), t([s({
 	type: String,
 	attribute: "max-width"
-})], c.prototype, "maxWidth", void 0), e([o({
+})], l.prototype, "maxWidth", void 0), t([s({
 	type: String,
 	attribute: "data-index"
-})], c.prototype, "dataIndex", void 0), e([o({
+})], l.prototype, "dataIndex", void 0), t([s({
 	type: String,
 	attribute: "aria-current"
-})], c.prototype, "ariaCurrent", void 0), e([s("[data-scb-dropdown-trigger]")], c.prototype, "_triggerEl", void 0), e([s("slot")], c.prototype, "_slotEl", void 0), e([s(".panel-surface")], c.prototype, "_panelSurfaceEl", void 0), e([s(".panel-inner")], c.prototype, "_panelInnerEl", void 0), c = e([a("scb-dropdown")], c);
+})], l.prototype, "ariaCurrent", void 0), t([c("[data-scb-dropdown-trigger]")], l.prototype, "_triggerEl", void 0), t([c("slot")], l.prototype, "_slotEl", void 0), t([c(".panel-surface")], l.prototype, "_panelSurfaceEl", void 0), t([c(".panel-inner")], l.prototype, "_panelInnerEl", void 0), l = t([o("scb-dropdown")], l);
 //#endregion
-export { c as ScbDropdown };
+export { l as ScbDropdown };

package/scb-header/scb-header-drawer.internal.js

@@ -0,0 +1,78 @@
+import { html as e, nothing as t } from "lit";
+//#region src/scb-components/scb-header/scb-header-drawer.internal.ts
+var n = (t) => !t || t.length === 0 ? e`` : e`${t.map(r)}`, r = (n) => {
+	let i = Array.isArray(n.children) && n.children.length > 0, a = (n.href ?? "").trim(), o = (n.icon ?? "").trim(), s = i ? e`
+        <scb-sub-menu label=${n.label}>
+          ${n.children.map(r)}
+        </scb-sub-menu>
+      ` : t;
+	return o && a ? e`
+      <scb-menu-item label=${n.label} ?selected=${!1} leading-icon=${o} item-href=${a}>
+        ${s}
+      </scb-menu-item>
+    ` : o ? e`
+      <scb-menu-item label=${n.label} ?selected=${!1} leading-icon=${o}>
+        ${s}
+      </scb-menu-item>
+    ` : a ? e`
+      <scb-menu-item label=${n.label} ?selected=${!1} item-href=${a}>
+        ${s}
+      </scb-menu-item>
+    ` : e`<scb-menu-item label=${n.label} ?selected=${!1}>${s}</scb-menu-item>`;
+}, i = (r) => e`
+  <scb-drawer
+    id=${r.drawerId}
+    floating
+    right
+    ?overlay=${r.drawerOverlay}
+    ?lock-scroll=${r.drawerOverlay}
+    ?modal=${r.drawerOverlay}
+    style="--scb-drawer-padding: 0px;"
+    @scb-drawer-opened=${r.onDrawerOpened}
+    @scb-drawer-closed=${r.onDrawerClosed}
+    @scb-menu-select=${r.onMenuSelect}
+  >
+    ${r.hasDrawerCloseSlot ? e`
+          <div class="drawer-close">
+            <slot
+              name="drawer-close"
+              @slotchange=${r.onDrawerSlotChange}
+            ></slot>
+          </div>
+        ` : t}
+
+    <slot name="drawer-menu" @slotchange=${r.onDrawerSlotChange}></slot>
+
+    ${r.hasDrawerMenuSlot ? t : e`
+          <scb-menu
+            .label=${r.menuLabel ?? ""}
+            .subLabel=${r.menuSubLabel ?? ""}
+          >
+            <scb-search
+              .size=${r.size}
+              .supportingText=${r.menuSearchPlaceholder ?? ""}
+            ></scb-search>
+
+            ${r.menuSectionLabel ? e`
+                  <scb-menu-section
+                    .label=${r.menuSectionLabel}
+                  ></scb-menu-section>
+                ` : t}
+
+            ${n(r.menu)}
+
+            ${r.includeUtilityInMenu && (r.utils?.length ?? 0) > 0 ? e`
+                  <scb-menu-section label=''></scb-menu-section>
+                  ${r.utils.map((t) => e`
+                      <scb-menu-item
+                        label=${t.label}
+                        item-href=${t.href}
+                      ></scb-menu-item>
+                    `)}
+                ` : t}
+          </scb-menu>
+        `}
+  </scb-drawer>
+`;
+//#endregion
+export { i as renderHeaderDrawer };