scb-wc 0.1.2 → 0.1.4

package/scb-dropdown/scb-dropdown.js

@@ -0,0 +1,598 @@
+import { __decorate as e } 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 "@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;
+	let e = document.createElement("style");
+	e.setAttribute("data-scb-dropdown-pre-upgrade", ""), e.textContent = "\n    scb-dropdown:not(:defined) {\n      display: inline-block;\n      position: relative;\n      overflow: visible;\n\n      margin-block-start: var(--scb-dropdown-spacing-block-start, 0);\n      margin-block-end: var(--scb-dropdown-spacing-block-end, 0);\n      margin-inline-start: var(--scb-dropdown-spacing-inline-start, 0);\n      margin-inline-end: var(--scb-dropdown-spacing-inline-end, 0);\n\n      min-block-size: var(--scb-dropdown-pre-control-size, 48px);\n      visibility: hidden;\n    }\n\n    scb-dropdown[as-tab]:not(:defined) {\n      display: inline-flex;\n      align-items: stretch;\n      min-block-size: var(--scb-dropdown-pre-tab-size, var(--scb-dropdown-pre-control-size, 48px));\n    }\n\n    scb-dropdown:not(:defined) > * {\n      display: none;\n    }\n  ", document.head.appendChild(e);
+	let t = (e) => {
+		let t = String(e ?? "").trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}, n = (e) => {
+		let n = t(e.getAttribute("spacing")), r = t(e.getAttribute("spacing-top")) ?? n, i = t(e.getAttribute("spacing-bottom")) ?? n, a = t(e.getAttribute("spacing-left")), o = t(e.getAttribute("spacing-right"));
+		r ? e.style.setProperty("--scb-dropdown-spacing-block-start", r) : e.style.removeProperty("--scb-dropdown-spacing-block-start"), i ? e.style.setProperty("--scb-dropdown-spacing-block-end", i) : e.style.removeProperty("--scb-dropdown-spacing-block-end"), a ? e.style.setProperty("--scb-dropdown-spacing-inline-start", a) : e.style.removeProperty("--scb-dropdown-spacing-inline-start"), o ? e.style.setProperty("--scb-dropdown-spacing-inline-end", o) : e.style.removeProperty("--scb-dropdown-spacing-inline-end");
+	};
+	document.querySelectorAll("scb-dropdown").forEach(n);
+	let r = new MutationObserver((e) => {
+		for (let t of e) {
+			if (t.type === "attributes") {
+				let e = t.target;
+				e instanceof HTMLElement && e.tagName.toLowerCase() === "scb-dropdown" && n(e);
+				continue;
+			}
+			if (t.type === "childList") {
+				let e = [...Array.from(t.addedNodes), ...Array.from(t.removedNodes)];
+				for (let t of e) if (t instanceof HTMLElement) {
+					if (t.tagName.toLowerCase() === "scb-dropdown") {
+						n(t);
+						continue;
+					}
+					t.querySelectorAll?.("scb-dropdown").forEach((e) => {
+						e instanceof HTMLElement && n(e);
+					});
+				}
+			}
+		}
+	});
+	r.observe(document.documentElement, {
+		subtree: !0,
+		childList: !0,
+		attributes: !0,
+		attributeFilter: [
+			"spacing",
+			"spacing-top",
+			"spacing-bottom",
+			"spacing-left",
+			"spacing-right"
+		]
+	}), customElements.whenDefined("scb-dropdown").then(() => {
+		r.disconnect();
+	});
+})();
+var c = class extends t {
+	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;
+			let t = e.composedPath(), n = t.find((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "scb-dropdown");
+			if (n && n !== this) {
+				this.open = !1;
+				return;
+			}
+			t.includes(this) || (this.open = !1);
+		}, this._onDocumentKeydownBound = (e) => {
+			this.open && e.key === "Escape" && (this.open = !1);
+		}, this._onSlottedMenuOpen = () => {
+			this.open ||= !0;
+		}, this._onSlottedMenuClose = () => {
+			this.open &&= !1;
+		}, this._onSlotChange = () => {
+			this._syncSlottedMenu(), this._applyPanelSizing(), this._applyInertByOpen(), this.requestUpdate();
+		}, this._onTriggerClick = (e) => {
+			this.hasAttribute("as-tab") || e.stopPropagation(), !this.disabled && (this.open = !this.open);
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      position: relative;
+      overflow: visible;
+
+      margin-block-start: var(--scb-dropdown-spacing-block-start, 0);
+      margin-block-end: var(--scb-dropdown-spacing-block-end, 0);
+      margin-inline-start: var(--scb-dropdown-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-dropdown-spacing-inline-end, 0);
+
+      --scb-dropdown-transition-duration: var(--motion-duration-short, 150ms);
+      --scb-dropdown-transition-easing: var(
+        --motion-easing-emphasized-accelerate,
+        var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+      );
+    }
+
+    :host([open]) {
+      --scb-dropdown-transition-easing: var(
+        --motion-easing-emphasized-decelerate,
+        var(--motion-easing-standard, cubic-bezier(.69,.16,.2,.98))
+      );
+    }
+
+    .panel {
+      position: absolute;   
+      inset-inline-start: 0;
+      inset-block-start: calc(100% + var(--scb-dropdown-panel-gap, var(--spacing-3, 8px)));
+      z-index: var(--scb-dropdown-z-index, 1000);
+      pointer-events: none;
+    }
+
+    :host([open]) .panel {
+      pointer-events: auto;
+    }
+
+    .panel-surface {
+      width: 100%;
+      max-width: var(--scb-dropdown-panel-max-width, 600px);
+      background: var(--md-sys-color-surface-container-lowest);
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      padding: var(--spacing-4, 12px);   
+      opacity: 0;
+      max-height: var(--scb-dropdown-panel-current-max-height, 0px);
+      transition:
+        max-height var(--scb-dropdown-transition-duration) var(--scb-dropdown-transition-easing),
+        opacity var(--scb-dropdown-transition-duration) var(--scb-dropdown-transition-easing);
+      overflow: hidden;
+    }
+
+    :host([as-tab]) {
+      display: inline-flex;
+      align-items: stretch;
+
+      --scb-dropdown-tab-font-family: var(
+        --md-sys-typescale-title-small-font,
+        var(--brand-font, Inter)
+      );
+      --scb-dropdown-tab-font-size: var(--md-sys-typescale-title-small-size, 1rem);
+      --scb-dropdown-tab-line-height: var(
+        --md-sys-typescale-title-small-line-height,
+        1.5rem
+      );
+      --scb-dropdown-tab-font-weight: var(--md-sys-typescale-title-small-weight, 500);
+      --scb-dropdown-tab-letter-spacing: var(
+        --md-sys-typescale-title-small-tracking,
+        0
+      );
+      --scb-dropdown-tab-icon-size: var(--icon-size-small, 20px);
+    }
+
+    :host([as-tab][size='small']) {
+      --scb-dropdown-tab-font-family: var(
+        --md-sys-typescale-label-small-font,
+        var(--brand-font, Inter)
+      );
+      --scb-dropdown-tab-font-size: var(--md-sys-typescale-label-small-size, 0.875rem);
+      --scb-dropdown-tab-line-height: var(
+        --md-sys-typescale-label-small-line-height,
+        1.25rem
+      );
+      --scb-dropdown-tab-font-weight: var(--md-sys-typescale-label-small-weight, 500);
+      --scb-dropdown-tab-letter-spacing: var(
+        --md-sys-typescale-label-small-tracking,
+        0
+      );
+      --scb-dropdown-tab-icon-size: var(--icon-size-small, 20px);
+    }
+
+    :host([as-tab][size='large']) {
+      --scb-dropdown-tab-font-family: var(
+        --md-sys-typescale-title-medium-font,
+        var(--brand-font, Inter)
+      );
+      --scb-dropdown-tab-font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);
+      --scb-dropdown-tab-line-height: var(
+        --md-sys-typescale-title-medium-line-height,
+        1.625rem
+      );
+      --scb-dropdown-tab-font-weight: var(--md-sys-typescale-title-medium-weight, 500);
+      --scb-dropdown-tab-letter-spacing: var(
+        --md-sys-typescale-title-medium-tracking,
+        0
+      );
+      --scb-dropdown-tab-icon-size: var(--icon-size-medium, 24px);
+    }
+
+    :host([as-tab]) .tab-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: stretch;
+    }
+
+    :host([as-tab]) .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;
+    }
+
+    :host([as-tab]) .tab-link {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding-block: var(--spacing-4, 12px);
+      padding: 0;
+      border: none;
+      background: none;
+      text-decoration: none;
+      cursor: pointer;
+      font-family: var(--scb-dropdown-tab-font-family);
+      font-size: var(--scb-dropdown-tab-font-size);
+      line-height: var(--scb-dropdown-tab-line-height);
+      font-weight: var(--scb-dropdown-tab-font-weight);
+      letter-spacing: var(--scb-dropdown-tab-letter-spacing);
+      color: var(--md-sys-color-on-surface);
+      white-space: nowrap;
+      border-radius: 0;
+      outline: none;
+      gap: var(--spacing-3, 8px);
+    }
+
+    :host([as-tab]) .tab-link[aria-current='page'] {
+      color: var(--md-sys-color-primary);
+    }
+
+    :host([as-tab]) .tab-link::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 3px;
+      border-radius: 999px 999px 0 0;
+      background-color: transparent;
+    }
+
+    :host([as-tab]) .tab-link[aria-current='page']::after {
+      background-color: var(--md-sys-color-primary);
+    }
+
+    :host([as-tab]) .tab-link:focus-visible + md-focus-ring {
+      display: block;
+    }
+
+    :host([as-tab]) scb-chevron.chevron {
+      width: var(
+        --scb-dropdown-tab-icon-size,
+        var(--icon-size-small, 20px)
+      );
+      height: var(
+        --scb-dropdown-tab-icon-size,
+        var(--icon-size-small, 20px)
+      );
+    }
+
+
+    :host([open]) .panel-surface {
+      opacity: 1;
+    }
+
+    .panel-inner {
+      overflow: hidden;
+    }
+
+    :host([open][data-open-settled]) .panel-surface {
+      overflow: visible;
+    }
+
+    :host([open][data-open-settled]) .panel-inner {
+      overflow: visible;
+    }
+
+    .panel.has-menu .panel-surface {
+      background: transparent;
+      box-shadow: none;
+      padding: 0;
+      max-height: none;
+      opacity: 1;
+      transition: none;
+      overflow: visible;
+    }
+
+    .panel.has-menu .panel-inner {
+      overflow: visible;
+    }
+
+    ::slotted(scb-options-menu) {
+      position: static !important;
+      transform: none !important;
+      width: fit-content;
+    }
+
+    ::slotted(scb-menu) {
+      padding: 0;
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    ::slotted(scb-checkbox) {
+      display: block;
+      padding-right: var(--spacing-4, 12px);   
+    }
+
+    ::slotted(scb-radio-button) {
+      display: block;
+      padding-right: var(--spacing-4, 12px);   
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .panel-surface {
+        transition: none;
+      }
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._onDocumentClickBound, !0), document.addEventListener("keydown", this._onDocumentKeydownBound);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this._onDocumentClickBound, !0), document.removeEventListener("keydown", this._onDocumentKeydownBound), this._detachSlottedMenuListeners(), this._panelResizeObserver &&= (this._panelResizeObserver.disconnect(), null), this._panelHeightSyncRaf !== null && (window.cancelAnimationFrame(this._panelHeightSyncRaf), this._panelHeightSyncRaf = null), this._openSettledTimer !== null && (window.clearTimeout(this._openSettledTimer), this._openSettledTimer = null), this._menuCloseTimer !== null && (window.clearTimeout(this._menuCloseTimer), this._menuCloseTimer = null), super.disconnectedCallback();
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this._syncSlottedMenu(), this._applyPanelVars(), this._applyPanelSizing(), this._applyChevronState(), this._applyInertByOpen(), this._setupPanelResizeObserver(), this._syncPanelMaxHeightByOpen(), this._syncOverflowVisibilityByOpen();
+	}
+	updated(e) {
+		super.updated(e), e.has("menuGap") && this._applyPanelVars(), (e.has("width") || e.has("minWidth") || e.has("maxWidth")) && this._applyPanelSizing(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this._applySpacing(), e.has("open") && (this.open || this._closeAllSubMenus(), this._syncSlottedMenuOpen(), this._applyChevronState(), this._applyInertByOpen(), this._syncPanelMaxHeightByOpen(), this._syncOverflowVisibilityByOpen(), this.dispatchEvent(new CustomEvent("openchange", {
+			bubbles: !0,
+			composed: !0,
+			detail: { open: this.open }
+		})));
+	}
+	_applyPanelVars() {
+		if (this.menuGap == null || String(this.menuGap).trim() === "") {
+			this.style.removeProperty("--scb-dropdown-panel-gap");
+			return;
+		}
+		this.style.setProperty("--scb-dropdown-panel-gap", this._mapSpacingToken(this.menuGap));
+	}
+	_applyPanelSizing() {
+		let e = this.renderRoot.querySelector(".panel-surface");
+		e && (this.width && String(this.width).trim() !== "" ? e.style.inlineSize = this.width : e.style.removeProperty("inline-size"), this.minWidth && String(this.minWidth).trim() !== "" ? e.style.minInlineSize = this.minWidth : e.style.removeProperty("min-inline-size"), this.maxWidth && String(this.maxWidth).trim() !== "" ? e.style.maxInlineSize = this.maxWidth : e.style.removeProperty("max-inline-size")), this._slottedMenuEl && (this.width && String(this.width).trim() !== "" ? this._slottedMenuEl.style.inlineSize = this.width : this._slottedMenuEl.style.removeProperty("inline-size"), this.minWidth && String(this.minWidth).trim() !== "" ? this._slottedMenuEl.style.minInlineSize = this.minWidth : this._slottedMenuEl.style.removeProperty("min-inline-size"), this.maxWidth && String(this.maxWidth).trim() !== "" ? this._slottedMenuEl.style.maxInlineSize = this.maxWidth : this._slottedMenuEl.style.removeProperty("max-inline-size")), this._schedulePanelHeightSync();
+	}
+	_setupPanelResizeObserver() {
+		if (this._panelResizeObserver || typeof ResizeObserver > "u") return;
+		let e = this._panelInnerEl;
+		e && (this._panelResizeObserver = new ResizeObserver(() => {
+			this._schedulePanelHeightSync();
+		}), this._panelResizeObserver.observe(e));
+	}
+	_schedulePanelHeightSync() {
+		this._panelHeightSyncRaf === null && (this._panelHeightSyncRaf = window.requestAnimationFrame(() => {
+			this._panelHeightSyncRaf = null, this._syncPanelMaxHeightByOpen();
+		}));
+	}
+	_syncPanelMaxHeightByOpen() {
+		let e = this._panelSurfaceEl;
+		if (!e) return;
+		if (this._slottedMenuEl) {
+			e.style.removeProperty("--scb-dropdown-panel-current-max-height");
+			return;
+		}
+		if (!this.open) {
+			e.style.setProperty("--scb-dropdown-panel-current-max-height", "0px");
+			return;
+		}
+		let t = this._panelInnerEl;
+		if (!t) return;
+		let n = `${Math.ceil(t.scrollHeight)}px`;
+		e.style.getPropertyValue("--scb-dropdown-panel-current-max-height").trim() !== n && e.style.setProperty("--scb-dropdown-panel-current-max-height", n);
+	}
+	_mapSpacingToken(e) {
+		let t = String(e).trim();
+		return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	_mapHostSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	_applySpacing() {
+		let e = this._mapHostSpacingToken(this.spacing), t = this._mapHostSpacingToken(this.spacingTop) ?? e, n = this._mapHostSpacingToken(this.spacingBottom) ?? e, r = this._mapHostSpacingToken(this.spacingLeft), i = this._mapHostSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-dropdown-spacing-block-start", t) : this.style.removeProperty("--scb-dropdown-spacing-block-start"), n ? this.style.setProperty("--scb-dropdown-spacing-block-end", n) : this.style.removeProperty("--scb-dropdown-spacing-block-end"), r ? this.style.setProperty("--scb-dropdown-spacing-inline-start", r) : this.style.removeProperty("--scb-dropdown-spacing-inline-start"), i ? this.style.setProperty("--scb-dropdown-spacing-inline-end", i) : this.style.removeProperty("--scb-dropdown-spacing-inline-end");
+	}
+	_syncSlottedMenu() {
+		let e = (this._slotEl?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.tagName.toLowerCase() === "scb-options-menu");
+		if (e === this._slottedMenuEl) {
+			this._syncSlottedMenuOpen();
+			return;
+		}
+		this._detachSlottedMenuListeners(), this._slottedMenuEl = e ?? null, this._slottedMenuEl && (this._slottedMenuEl.addEventListener("open", this._onSlottedMenuOpen), this._slottedMenuEl.addEventListener("close", this._onSlottedMenuClose), this._syncSlottedMenuOpen());
+	}
+	_detachSlottedMenuListeners() {
+		this._slottedMenuEl && (this._slottedMenuEl.removeEventListener("open", this._onSlottedMenuOpen), this._slottedMenuEl.removeEventListener("close", this._onSlottedMenuClose));
+	}
+	_syncSlottedMenuOpen() {
+		if (!this._slottedMenuEl) return;
+		if (this._menuCloseTimer !== null && (window.clearTimeout(this._menuCloseTimer), this._menuCloseTimer = null), this.open) {
+			this._slottedMenuEl.open = !0;
+			return;
+		}
+		let e = this._getPanelTransitionMs();
+		if (e <= 0) {
+			this._slottedMenuEl.open = !1;
+			return;
+		}
+		this._menuCloseTimer = window.setTimeout(() => {
+			this._menuCloseTimer = null, !this.open && this._slottedMenuEl && (this._slottedMenuEl.open = !1);
+		}, e);
+	}
+	_syncOverflowVisibilityByOpen() {
+		if (this._openSettledTimer !== null && (window.clearTimeout(this._openSettledTimer), this._openSettledTimer = null), this.removeAttribute("data-open-settled"), !this.open) return;
+		let e = this.renderRoot.querySelector(".panel-surface");
+		if (!e) {
+			this.setAttribute("data-open-settled", "");
+			return;
+		}
+		let t = this._getTransitionMs(e);
+		if (t <= 0) {
+			this.setAttribute("data-open-settled", "");
+			return;
+		}
+		this._openSettledTimer = window.setTimeout(() => {
+			this._openSettledTimer = null, this.open && this.setAttribute("data-open-settled", "");
+		}, t);
+	}
+	_getPanelTransitionMs() {
+		let e = this.renderRoot.querySelector(".panel-surface");
+		return e ? this._getTransitionMs(e) : 0;
+	}
+	_getTransitionMs(e) {
+		let t = getComputedStyle(e), n = t.transitionDuration.split(",").map((e) => e.trim()), r = t.transitionDelay.split(",").map((e) => e.trim()), i = (e) => {
+			let t = parseFloat(e);
+			return Number.isFinite(t) ? e.endsWith("ms") ? t : e.endsWith("s") ? t * 1e3 : t : 0;
+		}, a = Math.max(n.length, r.length), o = 0;
+		for (let e = 0; e < a; e += 1) {
+			let t = i(n[e] ?? n[n.length - 1] ?? "0s"), a = i(r[e] ?? r[r.length - 1] ?? "0s");
+			o = Math.max(o, t + a);
+		}
+		return Math.ceil(o);
+	}
+	_applyInertByOpen() {
+		let e = this.renderRoot.querySelector(".panel");
+		e && (this.open ? (e.removeAttribute("inert"), e.setAttribute("aria-hidden", "false"), this._restoreTabIndexesIfNeeded()) : (e.setAttribute("inert", ""), e.setAttribute("aria-hidden", "true"), this._removeTabIndexesIfNeeded()));
+	}
+	_supportsInert() {
+		return "inert" in HTMLElement.prototype;
+	}
+	_collectFocusableFromSlot() {
+		let e = this._slotEl;
+		if (!e) return [];
+		let t = e.assignedElements({ flatten: !0 }), n = [], r = (e) => {
+			e instanceof HTMLElement && e.matches("a,button,input,select,textarea,[tabindex]") && n.push(e);
+		};
+		return t.forEach((e) => {
+			r(e), e.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach((e) => r(e));
+		}), n;
+	}
+	_removeTabIndexesIfNeeded() {
+		this._supportsInert() || this._collectFocusableFromSlot().forEach((e) => {
+			let t = e.getAttribute("tabindex");
+			t !== null && e.setAttribute("data-scb-prev-tabindex", t), e.setAttribute("tabindex", "-1");
+		});
+	}
+	_restoreTabIndexesIfNeeded() {
+		this._supportsInert() || this._collectFocusableFromSlot().forEach((e) => {
+			let t = e.getAttribute("data-scb-prev-tabindex");
+			t === null ? e.removeAttribute("tabindex") : (e.setAttribute("tabindex", t), e.removeAttribute("data-scb-prev-tabindex"));
+		});
+	}
+	_closeAllSubMenus() {
+		let e = this.querySelectorAll("scb-options-sub-menu");
+		for (let t of e) t.removeAttribute("open");
+	}
+	focus(e) {
+		let t = this._triggerEl;
+		if (t?.focus) {
+			t.focus(e);
+			return;
+		}
+		super.focus(e);
+	}
+	_applyChevronState() {
+		if (this.hasAttribute("as-tab")) return;
+		let e = this._ensureTriggerChevronEl();
+		e && (e.open = this.open);
+	}
+	_ensureTriggerChevronEl() {
+		let e = this._triggerEl;
+		if (e?.tagName?.toLowerCase?.() !== "scb-button") return null;
+		let t = e?.shadowRoot;
+		if (!t) return null;
+		let n = t.querySelector("scb-chevron[slot=\"icon\"]");
+		if (n) return n;
+		let r = t.querySelector("md-icon[slot=\"icon\"]") ?? t.querySelector("md-icon");
+		if (!r) return null;
+		let i = document.createElement("scb-chevron");
+		i.setAttribute("slot", "icon"), i.setAttribute("aria-hidden", "true"), i.classList.add("chevron");
+		let a = getComputedStyle(r).fontSize;
+		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`
+          <div class="tab-wrap">
+            <button
+              type="button"
+              class="tab-link"
+              data-scb-dropdown-trigger
+              ?disabled=${this.disabled}
+              aria-haspopup="menu"
+              aria-expanded=${String(this.open)}
+              data-index=${n ?? i}
+              aria-current=${a}
+              @click=${this._onTriggerClick}
+            >
+              ${this.label}
+              <scb-chevron class="chevron" .open=${this.open}></scb-chevron>
+            </button>
+            <md-focus-ring></md-focus-ring>
+          </div>
+        ` : r`
+          <scb-button
+            data-scb-dropdown-trigger
+            label=${this.label}
+            variant=${this.variant}
+            size=${this.size}
+            icon="keyboard_arrow_down"
+            ?trailing-icon=${!0}
+            ?disabled=${this.disabled}
+            @click=${this._onTriggerClick}
+          ></scb-button>
+        `}
+
+      <div
+        class="panel ${e ? "has-menu" : ""}"
+        ?inert=${!this.open}
+        aria-hidden=${this.open ? "false" : "true"}
+      >
+        <div class="panel-surface">
+          <div class="panel-inner">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], c.prototype, "label", void 0), e([o({ type: String })], c.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], c.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], c.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], c.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], c.prototype, "spacingRight", void 0), e([o({
+	type: String,
+	attribute: "menu-gap"
+})], c.prototype, "menuGap", void 0), e([o({ type: String })], c.prototype, "width", void 0), e([o({
+	type: String,
+	attribute: "min-width"
+})], c.prototype, "minWidth", void 0), e([o({
+	type: String,
+	attribute: "max-width"
+})], c.prototype, "maxWidth", void 0), e([o({
+	type: String,
+	attribute: "data-index"
+})], c.prototype, "dataIndex", void 0), e([o({
+	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);
+//#endregion
+export { c as ScbDropdown };