@greypan/web-ui 2.1.1 → 2.1.2

package/dist/components/popover/index.js

@@ -2,14 +2,13 @@ import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate
 import t from "../../assets/glass.js";
 import { normalizeLiteral as n, normalizeNumber as r } from "../../shared/normalize/index.js";
 import i from "../../assets/overlay-motion.js";
-import { hideOverlayPresence as a, showOverlayPresence as o } from "../../shared/overlay/presence.js";
-import { withOverlay as s } from "../../shared/overlay/overlay.js";
-import { createOverlayPortal as c } from "../../shared/overlay/portal.js";
-import l from "./style.js";
-import { LitElement as u, html as d, unsafeCSS as f } from "lit";
-import { customElement as p, property as m } from "lit/decorators.js";
+import { defineAnchoredPanel as a } from "../../shared/overlay/anchored-panel.js";
+import { createOverlayPortal as o } from "../../shared/overlay/portal.js";
+import s from "./style.js";
+import { LitElement as c, html as l, unsafeCSS as u } from "lit";
+import { customElement as d, property as f } from "lit/decorators.js";
 //#region src/components/popover/index.ts
-var h = [
+var p = [
 	"top",
 	"top-start",
 	"top-end",
@@ -22,19 +21,29 @@ var h = [
 	"right",
 	"right-start",
 	"right-end"
-], g = [
+], m = [
 	"click",
 	"hover",
 	"manual"
-], _ = 0, v = class extends u {
+], h = 0, g = class extends c {
 	constructor(...e) {
-		super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._suppressEvent = !1, this._shouldOpenInstantly = !0, this._panelId = `wui-popover-panel-${++_}`, this._onTriggerClick = (e) => {
+		super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._suppressEvent = !1, this._shouldOpenInstantly = !0, this._panelId = `wui-popover-panel-${++h}`, this._panel = a().make({
+			getAnchor: () => this.shadowRoot?.querySelector(".popover-trigger") ?? null,
+			getLocalPanel: () => this.shadowRoot?.querySelector(".popover-panel") ?? null,
+			getPositioning: () => ({
+				placement: this.placement,
+				offset: this.offset,
+				strategy: this.portal ? "fixed" : "absolute"
+			}),
+			isPortal: () => this.portal,
+			createPortal: () => this._createPortal()
+		}), this._onTriggerClick = (e) => {
 			this.disabled || (clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this.trigger !== "hover" && (this.open || (this._shouldOpenInstantly = e.detail === 0), this.toggle()));
 		}, this._onClickOutside = (e) => {
-			this.open && this.trigger !== "manual" && this.trigger !== "hover" && (e.target instanceof Node && this._portal?.panel.contains(e.target) || this._isInsideShadowRoot(e) || (this.open = !1));
+			this.open && this.trigger !== "manual" && this.trigger !== "hover" && (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target) || this._isInsideShadowRoot(e) || (this.open = !1));
 		}, this._onFocusOut = () => {
 			this.trigger !== "manual" && this.trigger !== "hover" && requestAnimationFrame(() => {
-				this.open && !this.matches(":focus-within") && !this._portal?.panel.matches(":focus-within") && (this.open = !1);
+				this.open && !this.matches(":focus-within") && !this._panel.getPanel()?.matches(":focus-within") && (this.open = !1);
 			});
 		}, this._onKeydown = (e) => {
 			this.open && this.trigger !== "manual" && e.key === "Escape" && (this.open = !1, e.preventDefault());
@@ -52,9 +61,9 @@ var h = [
 	}
 	static {
 		this.styles = [
-			f(t),
-			f(i),
-			f(l)
+			u(t),
+			u(i),
+			u(s)
 		];
 	}
 	get placement() {
@@ -62,7 +71,7 @@ var h = [
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = n(e, h, "bottom"), this.requestUpdate("placement", t);
+		this._placement = n(e, p, "bottom"), this.requestUpdate("placement", t);
 	}
 	get offset() {
 		return this._offset;
@@ -76,7 +85,7 @@ var h = [
 	}
 	set trigger(e) {
 		let t = this._trigger;
-		this._trigger = n(e, g, "click"), this.requestUpdate("trigger", t);
+		this._trigger = n(e, m, "click"), this.requestUpdate("trigger", t);
 	}
 	get isOpen() {
 		return this.open;
@@ -85,13 +94,13 @@ var h = [
 		super.connectedCallback(), document.addEventListener("click", this._onClickOutside), document.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), this._syncTriggerListeners();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), document.removeEventListener("click", this._onClickOutside), document.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._disposeOverlay();
+		super.disconnectedCallback(), document.removeEventListener("click", this._onClickOutside), document.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._panel.dispose();
 	}
 	firstUpdated() {
-		this._initLocalOverlay(), this.open && (requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly)), this._shouldOpenInstantly = !0);
+		this.open && (requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly)), this._shouldOpenInstantly = !0);
 	}
 	updated(e) {
-		if ((e.has("placement") || e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("open")) if (this.open) {
+		if (e.has("portal") || e.has("overlayContainer") ? requestAnimationFrame(() => this._reconfigureOverlay()) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) if (this.open) {
 			let e = this._shouldOpenInstantly;
 			this._shouldOpenInstantly = !0, requestAnimationFrame(() => this._openOverlay(e)), this._dispatchChange(!0), this._focusPanel();
 		} else this._returnFocus(), this._closeOverlay(), this._suppressEvent || this._dispatchChange(!1);
@@ -113,55 +122,23 @@ var h = [
 	_syncTriggerListeners() {
 		this.trigger === "hover" && (this.addEventListener("pointerenter", this._onPointerEnter), this.addEventListener("pointerleave", this._onPointerLeave));
 	}
-	_initLocalOverlay() {
-		let e = this.shadowRoot?.querySelector(".popover-trigger"), t = this.shadowRoot?.querySelector(".popover-panel");
-		!e || !t || (this._overlay = s.make({
-			anchor: e,
-			overlay: t,
-			placement: this.placement,
-			offset: this.offset
-		}));
-	}
 	_openOverlay(e = !1) {
-		if (this.portal) this._openPortal(e);
-		else {
-			this._overlay?.open();
-			let t = this.shadowRoot?.querySelector(".popover-panel");
-			t && o(t, { isInstant: e });
-		}
-	}
-	_openPortal(e = !1) {
-		if (this._portal) {
-			this._overlay?.open(), o(this._portal.panel, { isInstant: e });
-			return;
-		}
-		let n = this.shadowRoot?.querySelector(".popover-trigger");
-		if (!n) return;
-		let r = c({
+		this._panel.open(e);
+	}
+	_createPortal() {
+		let e = o({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${i}\n${l}`,
+			style: `${t}\n${i}\n${s}`,
 			className: "popover-panel portal wui-glass wui-floating-panel"
 		});
-		r.panel.id = this._panelId, r.panel.setAttribute("role", "dialog"), r.panel.tabIndex = -1, r.panel.addEventListener("pointerenter", this._onPanelPointerEnter), r.panel.addEventListener("pointerleave", this._onPanelPointerLeave), r.moveContent(Array.from(this.childNodes).filter((e) => !(e instanceof HTMLElement && e.slot === "trigger"))), this._portal = r, this._overlay = s.make({
-			anchor: n,
-			overlay: r.panel,
-			placement: this.placement,
-			offset: this.offset,
-			strategy: "fixed"
-		}), this._overlay.open(), o(r.panel, { isInstant: e });
+		return e.panel.id = this._panelId, e.panel.setAttribute("role", "dialog"), e.panel.tabIndex = -1, e.panel.addEventListener("pointerenter", this._onPanelPointerEnter), e.panel.addEventListener("pointerleave", this._onPanelPointerLeave), e.moveContent(Array.from(this.childNodes).filter((e) => !(e instanceof HTMLElement && e.slot === "trigger"))), e;
 	}
 	async _closeOverlay() {
-		this._overlay?.close();
-		let e = this._portal?.panel ?? this.shadowRoot?.querySelector(".popover-panel");
-		e && !await a(e) || !this._portal || this.open || (this._portal.restoreContent(), this._portal.remove(), this._portal = void 0, this._overlay = void 0);
-	}
-	_disposeOverlay() {
-		this._overlay?.dispose(), this._overlay = void 0, this._portal?.restoreContent(), this._portal?.remove(), this._portal = void 0;
+		await this._panel.close(() => this.open);
 	}
 	_reconfigureOverlay() {
-		let e = (this._portal?.panel ?? this.shadowRoot?.querySelector(".popover-panel"))?.dataset.wuiPresence === "entering";
-		this._disposeOverlay(), this.portal || this._initLocalOverlay(), this.open && this._openOverlay(!e);
+		this._panel.reconfigure(this.open);
 	}
 	_dispatchChange(e) {
 		this.dispatchEvent(new CustomEvent("open-change", {
@@ -172,19 +149,19 @@ var h = [
 	}
 	_focusPanel() {
 		requestAnimationFrame(() => {
-			let e = (this._portal?.panel ?? this.shadowRoot?.querySelector(".popover-panel"))?.querySelector("[autofocus]");
+			let e = this._panel.getPanel()?.querySelector("[autofocus]");
 			e && !e.matches(":disabled, [disabled]") && e.focus();
 		});
 	}
 	_returnFocus() {
-		(this._portal?.panel ?? this.shadowRoot?.querySelector(".popover-panel"))?.matches(":focus-within") && this._queryTrigger()?.focus();
+		this._panel.getPanel()?.matches(":focus-within") && this._queryTrigger()?.focus();
 	}
 	_queryTrigger() {
 		let e = (this.shadowRoot?.querySelector("slot[name=\"trigger\"]"))?.assignedElements()[0];
 		return e instanceof HTMLElement ? e : null;
 	}
 	render() {
-		return d`
+		return l`
       <div class="popover-anchor">
         <div
           class="popover-trigger"
@@ -209,23 +186,23 @@ var h = [
     `;
 	}
 };
-e([m({
+e([f({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "open", void 0), e([m({
+})], g.prototype, "open", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "disabled", void 0), e([m({
+})], g.prototype, "disabled", void 0), e([f({
 	type: String,
 	reflect: !0
-})], v.prototype, "placement", null), e([m({ type: Number })], v.prototype, "offset", null), e([m({
+})], g.prototype, "placement", null), e([f({ type: Number })], g.prototype, "offset", null), e([f({
 	type: String,
 	reflect: !0
-})], v.prototype, "trigger", null), e([m({
+})], g.prototype, "trigger", null), e([f({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "portal", void 0), e([m({ attribute: !1 })], v.prototype, "overlayContainer", void 0), v = e([p("web-ui-popover")], v);
+})], g.prototype, "portal", void 0), e([f({ attribute: !1 })], g.prototype, "overlayContainer", void 0), g = e([d("web-ui-popover")], g);
 //#endregion
-export { v as WebUiPopover };
+export { g as WebUiPopover };
 
 //# sourceMappingURL=index.js.map

package/dist/components/popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { withOverlay } from '@/shared/overlay/overlay'\nimport type { OverlayApi } from '@/shared/overlay/overlay'\nimport { createOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\nimport { hideOverlayPresence, showOverlayPresence } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n  'right',\n  'right-start',\n  'right-end'\n] as const\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @property({ type: String, reflect: true })\n  get placement(): Placement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: Placement = 'bottom'\n\n  @property({ type: Number })\n  get offset(): number {\n    return this._offset\n  }\n  set offset(v: number) {\n    const old = this._offset\n    this._offset = normalizeNumber(v, 0, 100, 8)\n    this.requestUpdate('offset', old)\n  }\n  private _offset = 8\n\n  @property({ type: String, reflect: true })\n  get trigger(): 'click' | 'hover' | 'manual' {\n    return this._trigger\n  }\n  set trigger(v: string) {\n    const old = this._trigger\n    this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n    this.requestUpdate('trigger', old)\n  }\n  private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n  @property({ type: Boolean, reflect: true }) portal = false\n  @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n  private _overlay?: OverlayApi & { anchor: HTMLElement; overlay: HTMLElement }\n  private _showTimer?: ReturnType<typeof setTimeout>\n  private _hideTimer?: ReturnType<typeof setTimeout>\n  private _suppressEvent = false\n  private _portal?: OverlayPortal\n  private _shouldOpenInstantly = true\n\n  private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n\n  /** 当前是否打开 */\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._onClickOutside)\n    document.addEventListener('keydown', this._onKeydown)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    document.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._disposeOverlay()\n  }\n\n  override firstUpdated() {\n    this._initLocalOverlay()\n    if (this.open) {\n      requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('placement') || changed.has('portal') || changed.has('overlayContainer'))\n      requestAnimationFrame(() => this._reconfigureOverlay())\n\n    if (changed.has('open')) {\n      if (this.open) {\n        const isInstant = this._shouldOpenInstantly\n        this._shouldOpenInstantly = true\n        requestAnimationFrame(() => this._openOverlay(isInstant))\n        this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (!this._suppressEvent) this._dispatchChange(false)\n      }\n    }\n\n    if (changed.has('trigger')) {\n      this.removeEventListener('pointerenter', this._onPointerEnter)\n      this.removeEventListener('pointerleave', this._onPointerLeave)\n      clearTimeout(this._showTimer)\n      clearTimeout(this._hideTimer)\n      this._syncTriggerListeners()\n    }\n  }\n\n  /** 打开 popover */\n  show() {\n    if (this.disabled || this.open) return\n    this._suppressEvent = true\n    this.open = true\n    this._suppressEvent = false\n  }\n\n  /** 关闭 popover */\n  close() {\n    if (!this.open) return\n    this._suppressEvent = true\n    this.open = false\n    this._suppressEvent = false\n  }\n\n  /** 切换 popover */\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  private _isInsideShadowRoot(e: MouseEvent): boolean {\n    for (const node of e.composedPath()) {\n      if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n    }\n    return false\n  }\n\n  private _syncTriggerListeners() {\n    if (this.trigger === 'hover') {\n      this.addEventListener('pointerenter', this._onPointerEnter)\n      this.addEventListener('pointerleave', this._onPointerLeave)\n    }\n  }\n\n  private _initLocalOverlay() {\n    const anchor = this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger')\n    const panel = this.shadowRoot?.querySelector<HTMLElement>('.popover-panel')\n    if (!anchor || !panel) return\n    this._overlay = withOverlay.make({\n      anchor,\n      overlay: panel,\n      placement: this.placement,\n      offset: this.offset\n    })\n  }\n\n  private _openOverlay(isInstant = false) {\n    if (this.portal) this._openPortal(isInstant)\n    else {\n      this._overlay?.open()\n      const panel = this.shadowRoot?.querySelector<HTMLElement>('.popover-panel')\n      if (panel) showOverlayPresence(panel, { isInstant })\n    }\n  }\n\n  private _openPortal(isInstant = false) {\n    if (this._portal) {\n      this._overlay?.open()\n      showOverlayPresence(this._portal.panel, { isInstant })\n      return\n    }\n    const anchor = this.shadowRoot?.querySelector('.popover-trigger') as HTMLElement | null\n    if (!anchor) return\n    const portal = createOverlayPortal({\n      container: this.overlayContainer,\n      target: this,\n      style: `${glass}\\n${overlayMotion}\\n${style}`,\n      className: 'popover-panel portal wui-glass wui-floating-panel'\n    })\n    portal.panel.id = this._panelId\n    portal.panel.setAttribute('role', 'dialog')\n    portal.panel.tabIndex = -1\n    portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n    portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n    portal.moveContent(\n      Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n    )\n    this._portal = portal\n    this._overlay = withOverlay.make({\n      anchor,\n      overlay: portal.panel,\n      placement: this.placement,\n      offset: this.offset,\n      strategy: 'fixed'\n    })\n    this._overlay.open()\n    showOverlayPresence(portal.panel, { isInstant })\n  }\n\n  private async _closeOverlay() {\n    this._overlay?.close()\n    const panel = this._portal?.panel ?? this.shadowRoot?.querySelector<HTMLElement>('.popover-panel')\n    if (panel && !(await hideOverlayPresence(panel))) return\n    if (!this._portal || this.open) return\n    this._portal.restoreContent()\n    this._portal.remove()\n    this._portal = undefined\n    this._overlay = undefined\n  }\n\n  private _disposeOverlay() {\n    this._overlay?.dispose()\n    this._overlay = undefined\n    this._portal?.restoreContent()\n    this._portal?.remove()\n    this._portal = undefined\n  }\n\n  private _reconfigureOverlay() {\n    const panel = this._portal?.panel ?? this.shadowRoot?.querySelector<HTMLElement>('.popover-panel')\n    const shouldAnimate = panel?.dataset.wuiPresence === 'entering'\n    this._disposeOverlay()\n    if (!this.portal) this._initLocalOverlay()\n    // 已稳定显示的面板重新定位不应重播动效；正在入场的指针交互则保持原有动效。\n    if (this.open) this._openOverlay(!shouldAnimate)\n  }\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _focusPanel() {\n    requestAnimationFrame(() => {\n      const panel = this._portal?.panel ?? this.shadowRoot?.querySelector<HTMLElement>('.popover-panel')\n      const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n      if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n    })\n  }\n\n  private _returnFocus() {\n    const panel = this._portal?.panel ?? this.shadowRoot?.querySelector<HTMLElement>('.popover-panel')\n    if (!panel?.matches(':focus-within')) return\n    const trigger = this._queryTrigger()\n    trigger?.focus()\n  }\n\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    if (this.trigger === 'hover') return\n    if (!this.open) this._shouldOpenInstantly = event.detail === 0\n    this.toggle()\n  }\n\n  private _onClickOutside = (e: MouseEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n    if (e.target instanceof Node && this._portal?.panel.contains(e.target)) return\n    if (this._isInsideShadowRoot(e)) return\n    this.open = false\n  }\n\n  private _onFocusOut = () => {\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n    requestAnimationFrame(() => {\n      if (this.open && !this.matches(':focus-within') && !this._portal?.panel.matches(':focus-within')) {\n        this.open = false\n      }\n    })\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual') return\n    if (e.key === 'Escape') {\n      this.open = false\n      e.preventDefault()\n    }\n  }\n\n  private _onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n    this._showTimer = setTimeout(() => {\n      this._shouldOpenInstantly = false\n      this.show()\n    }, 100)\n  }\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._showTimer)\n    this._hideTimer = setTimeout(() => this.close(), 100)\n  }\n\n  private _onPanelPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n  }\n\n  private _onPanelPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    this._hideTimer = setTimeout(() => this.close(), 100)\n  }\n\n  override render() {\n    return html`\n      <div class=\"popover-anchor\">\n        <div\n          class=\"popover-trigger\"\n          aria-expanded=${String(this.open)}\n          aria-controls=${this._panelId}\n          @click=${this._onTriggerClick}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <div\n          id=${this._panelId}\n          class=\"popover-panel wui-glass wui-floating-panel\"\n          hidden\n          role=\"dialog\"\n          tabindex=\"-1\"\n          @pointerenter=${this._onPanelPointerEnter}\n          @pointerleave=${this._onPanelPointerLeave}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-popover': WebUiPopover\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { createOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n  'right',\n  'right-start',\n  'right-end'\n] as const\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @property({ type: String, reflect: true })\n  get placement(): Placement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: Placement = 'bottom'\n\n  @property({ type: Number })\n  get offset(): number {\n    return this._offset\n  }\n  set offset(v: number) {\n    const old = this._offset\n    this._offset = normalizeNumber(v, 0, 100, 8)\n    this.requestUpdate('offset', old)\n  }\n  private _offset = 8\n\n  @property({ type: String, reflect: true })\n  get trigger(): 'click' | 'hover' | 'manual' {\n    return this._trigger\n  }\n  set trigger(v: string) {\n    const old = this._trigger\n    this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n    this.requestUpdate('trigger', old)\n  }\n  private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n  @property({ type: Boolean, reflect: true }) portal = false\n  @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n  private _showTimer?: ReturnType<typeof setTimeout>\n  private _hideTimer?: ReturnType<typeof setTimeout>\n  private _suppressEvent = false\n  private _shouldOpenInstantly = true\n\n  private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n  private readonly _panel = defineAnchoredPanel().make({\n    getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n    getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n    getPositioning: () => ({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: this.portal ? 'fixed' : 'absolute'\n    }),\n    isPortal: () => this.portal,\n    createPortal: () => this._createPortal()\n  })\n\n  /** 当前是否打开 */\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._onClickOutside)\n    document.addEventListener('keydown', this._onKeydown)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    document.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  override firstUpdated() {\n    if (this.open) {\n      requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('portal') || changed.has('overlayContainer'))\n      requestAnimationFrame(() => this._reconfigureOverlay())\n    else if (changed.has('placement') || changed.has('offset'))\n      requestAnimationFrame(() => this._panel.updatePosition())\n\n    if (changed.has('open')) {\n      if (this.open) {\n        const isInstant = this._shouldOpenInstantly\n        this._shouldOpenInstantly = true\n        requestAnimationFrame(() => this._openOverlay(isInstant))\n        this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (!this._suppressEvent) this._dispatchChange(false)\n      }\n    }\n\n    if (changed.has('trigger')) {\n      this.removeEventListener('pointerenter', this._onPointerEnter)\n      this.removeEventListener('pointerleave', this._onPointerLeave)\n      clearTimeout(this._showTimer)\n      clearTimeout(this._hideTimer)\n      this._syncTriggerListeners()\n    }\n  }\n\n  /** 打开 popover */\n  show() {\n    if (this.disabled || this.open) return\n    this._suppressEvent = true\n    this.open = true\n    this._suppressEvent = false\n  }\n\n  /** 关闭 popover */\n  close() {\n    if (!this.open) return\n    this._suppressEvent = true\n    this.open = false\n    this._suppressEvent = false\n  }\n\n  /** 切换 popover */\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  private _isInsideShadowRoot(e: MouseEvent): boolean {\n    for (const node of e.composedPath()) {\n      if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n    }\n    return false\n  }\n\n  private _syncTriggerListeners() {\n    if (this.trigger === 'hover') {\n      this.addEventListener('pointerenter', this._onPointerEnter)\n      this.addEventListener('pointerleave', this._onPointerLeave)\n    }\n  }\n\n  private _openOverlay(isInstant = false) {\n    this._panel.open(isInstant)\n  }\n\n  private _createPortal(): OverlayPortal {\n    const portal = createOverlayPortal({\n      container: this.overlayContainer,\n      target: this,\n      style: `${glass}\\n${overlayMotion}\\n${style}`,\n      className: 'popover-panel portal wui-glass wui-floating-panel'\n    })\n    portal.panel.id = this._panelId\n    portal.panel.setAttribute('role', 'dialog')\n    portal.panel.tabIndex = -1\n    portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n    portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n    portal.moveContent(\n      Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n    )\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    this._panel.reconfigure(this.open)\n  }\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _focusPanel() {\n    requestAnimationFrame(() => {\n      const panel = this._panel.getPanel()\n      const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n      if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n    })\n  }\n\n  private _returnFocus() {\n    const panel = this._panel.getPanel()\n    if (!panel?.matches(':focus-within')) return\n    const trigger = this._queryTrigger()\n    trigger?.focus()\n  }\n\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    if (this.trigger === 'hover') return\n    if (!this.open) this._shouldOpenInstantly = event.detail === 0\n    this.toggle()\n  }\n\n  private _onClickOutside = (e: MouseEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n    if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) return\n    if (this._isInsideShadowRoot(e)) return\n    this.open = false\n  }\n\n  private _onFocusOut = () => {\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n    requestAnimationFrame(() => {\n      if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n        this.open = false\n      }\n    })\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual') return\n    if (e.key === 'Escape') {\n      this.open = false\n      e.preventDefault()\n    }\n  }\n\n  private _onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n    this._showTimer = setTimeout(() => {\n      this._shouldOpenInstantly = false\n      this.show()\n    }, 100)\n  }\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._showTimer)\n    this._hideTimer = setTimeout(() => this.close(), 100)\n  }\n\n  private _onPanelPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n  }\n\n  private _onPanelPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    this._hideTimer = setTimeout(() => this.close(), 100)\n  }\n\n  override render() {\n    return html`\n      <div class=\"popover-anchor\">\n        <div\n          class=\"popover-trigger\"\n          aria-expanded=${String(this.open)}\n          aria-controls=${this._panelId}\n          @click=${this._onTriggerClick}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <div\n          id=${this._panelId}\n          class=\"popover-panel wui-glass wui-floating-panel\"\n          hidden\n          role=\"dialog\"\n          tabindex=\"-1\"\n          @pointerenter=${this._onPanelPointerEnter}\n          @pointerleave=${this._onPanelPointerLeave}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-popover': WebUiPopover\n  }\n}\n"],"mappings":"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"}

package/dist/components/select/index.d.ts

@@ -9,7 +9,7 @@ export declare class WebUiSelect extends LitElement {
     disabled: boolean;
     required: boolean;
     portal: boolean;
-    lockScroll: boolean;
+    noScrollLock: boolean;
     overlayContainer?: OverlayContainer;
     name: string;
     private _value;
@@ -21,9 +21,8 @@ export declare class WebUiSelect extends LitElement {
     private _selectedLabel;
     private _hasTriggerSlot;
     private _options;
-    private _overlay?;
-    private _portal?;
-    private _hasScrollLock;
+    private readonly _scrollLock;
+    private readonly _panel;
     get isOpen(): boolean;
     get open(): boolean;
     private _onClickOutside;
@@ -57,12 +56,10 @@ export declare class WebUiSelect extends LitElement {
     private _notifyValueChange;
     private _syncScrollLock;
     private _togglePopup;
-    private _initLocalOverlay;
     private _openOverlay;
     private _getDesiredWidth;
-    private _openPortal;
+    private _createPortal;
     private _closeOverlay;
-    private _disposeOverlay;
     private _reconfigureOverlay;
     render(): import('lit').TemplateResult<1>;
     readonly $events: {

package/dist/components/select/index.js

@@ -2,24 +2,32 @@ import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate
 import "../icon/index.js";
 import t from "../../assets/glass.js";
 import n from "../../icons/generated/lucide-chevron-down.js";
-import { booleanWithFalseString as r } from "../../shared/property-converters/boolean-with-false-string.js";
-import i from "../../assets/overlay-motion.js";
-import { hideOverlayPresence as a, showOverlayPresence as o } from "../../shared/overlay/presence.js";
-import { lockScroll as s, unlockScroll as c } from "../../shared/scroll-lock/scroll-lock.js";
-import { withOverlay as l } from "../../shared/overlay/overlay.js";
+import r from "../../assets/overlay-motion.js";
+import { createScrollLockLease as i } from "../../shared/scroll-lock/scroll-lock.js";
 import "../option/index.js";
-import { createOverlayPortal as u } from "../../shared/overlay/portal.js";
-import d from "./style.js";
-import { LitElement as f, html as p, nothing as m, unsafeCSS as h } from "lit";
-import { customElement as g, property as _, state as v } from "lit/decorators.js";
+import { defineAnchoredPanel as a } from "../../shared/overlay/anchored-panel.js";
+import { createOverlayPortal as o } from "../../shared/overlay/portal.js";
+import s from "./style.js";
+import { LitElement as c, html as l, nothing as u, unsafeCSS as d } from "lit";
+import { customElement as f, property as p, state as m } from "lit/decorators.js";
 //#region src/components/select/index.ts
-var y = class extends f {
+var h = class extends c {
 	constructor(...e) {
-		super(...e), this._formDisabled = !1, this.placeholder = "", this.disabled = !1, this.required = !1, this.portal = !1, this.lockScroll = !0, this.name = "", this._value = "", this._isOpen = !1, this._activeIndex = -1, this._selectedLabel = "", this._hasTriggerSlot = !1, this._options = [], this._hasScrollLock = !1, this._onClickOutside = (e) => {
-			this._isOpen && e.target instanceof Node && !this.contains(e.target) && !this._portal?.panel.contains(e.target) && this._close();
+		super(...e), this._formDisabled = !1, this.placeholder = "", this.disabled = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.name = "", this._value = "", this._isOpen = !1, this._activeIndex = -1, this._selectedLabel = "", this._hasTriggerSlot = !1, this._options = [], this._scrollLock = i(), this._panel = a().make({
+			getAnchor: () => this.shadowRoot?.querySelector(".select-trigger") ?? null,
+			getLocalPanel: () => this.shadowRoot?.querySelector(".select-overlay") ?? null,
+			getPositioning: () => ({
+				placement: "bottom-start",
+				offset: 4,
+				strategy: this.portal ? "fixed" : "absolute"
+			}),
+			isPortal: () => this.portal,
+			createPortal: () => this._createPortal()
+		}), this._onClickOutside = (e) => {
+			this._isOpen && e.target instanceof Node && !this.contains(e.target) && !this._panel.getPanel()?.contains(e.target) && this._close();
 		}, this._onFocusOut = () => {
 			requestAnimationFrame(() => {
-				this._isOpen && !this.matches(":focus-within") && !this._portal?.panel.matches(":focus-within") && this._close();
+				this._isOpen && !this.matches(":focus-within") && !this._panel.getPanel()?.matches(":focus-within") && this._close();
 			});
 		}, this._onTriggerSlotChange = (e) => {
 			let t = e.target.assignedElements().length > 0;
@@ -33,7 +41,7 @@ var y = class extends f {
 			let t = e.target;
 			t.removeEventListener("click", this._handleOptionClick), t.removeEventListener("pointerover", this._handleOptionPointerOver), t.removeEventListener("pointerdown", this._handleOptionPointerDown), t.removeEventListener("option-update", this._onOptionUpdate), this._options = this._options.filter((e) => e !== t);
 		}, this._onSlotChange = () => {
-			let e = this._portal ? [...this._portal.panel.querySelectorAll("web-ui-option")] : [...this.querySelectorAll("web-ui-option")];
+			let e = this.portal && this._panel.getPanel() ? [...this._panel.getPanel().querySelectorAll("web-ui-option")] : [...this.querySelectorAll("web-ui-option")];
 			this._options = e, this._ensureOptionIds(), this._syncSelected();
 		}, this._handleOptionClick = (e) => {
 			if (!(e.currentTarget instanceof HTMLElement)) return;
@@ -67,9 +75,9 @@ var y = class extends f {
 	}
 	static {
 		this.styles = [
-			h(t),
-			h(i),
-			h(d)
+			d(t),
+			d(r),
+			d(s)
 		];
 	}
 	static {
@@ -99,18 +107,18 @@ var y = class extends f {
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("option-register", this._onOptionRegister), this.removeEventListener("option-unregister", this._onOptionUnregister), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach((e) => {
 			e.removeEventListener("click", this._handleOptionClick), e.removeEventListener("pointerover", this._handleOptionPointerOver), e.removeEventListener("pointerdown", this._handleOptionPointerDown), e.removeEventListener("option-update", this._onOptionUpdate);
-		}), this._close(), this._disposeOverlay();
+		}), this._close(), this._panel.dispose(), this._scrollLock.release();
 	}
 	firstUpdated() {
-		this._initLocalOverlay(), requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
 			this.isConnected && this._onSlotChange();
 		});
 	}
 	willUpdate() {
-		this._options = this._portal ? [...this._portal.panel.querySelectorAll("web-ui-option")] : [...this.querySelectorAll("web-ui-option")], this._ensureOptionIds(), this._syncSelected();
+		this._options = this.portal && this._panel.getPanel() ? [...this._panel.getPanel().querySelectorAll("web-ui-option")] : [...this.querySelectorAll("web-ui-option")], this._ensureOptionIds(), this._syncSelected();
 	}
 	updated(e) {
-		(e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("lockScroll") && this._syncScrollLock(), this._syncOpenAttribute(), this._syncValidity();
+		(e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this._syncOpenAttribute(), this._syncValidity();
 	}
 	formResetCallback() {
 		this.value = this.getAttribute("value") || "";
@@ -179,27 +187,14 @@ var y = class extends f {
 		}));
 	}
 	_syncScrollLock(e = this._isOpen) {
-		let t = e && this.lockScroll;
-		t !== this._hasScrollLock && (t ? s() : c(), this._hasScrollLock = t);
+		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	_togglePopup() {
 		this._isDisabled || (this._isOpen ? this._close() : this._open());
 	}
-	_initLocalOverlay() {
-		let e = this.shadowRoot?.querySelector(".select-trigger"), t = this.shadowRoot?.querySelector(".select-overlay");
-		!e || !t || (this._overlay = l.make({
-			anchor: e,
-			overlay: t,
-			placement: "bottom-start",
-			offset: 4
-		}));
-	}
 	_openOverlay(e = !1) {
-		if (this.portal) this._openPortal(e);
-		else {
-			let t = this.shadowRoot?.querySelector(".select-overlay");
-			t && (t.style.width = `${this._getDesiredWidth()}px`), this._overlay?.open(), t && o(t, { isInstant: e });
-		}
+		let t = this.portal ? null : this._panel.getPanel();
+		t && (t.style.width = `${this._getDesiredWidth()}px`), this._panel.open(e);
 	}
 	_getDesiredWidth() {
 		let e = this.shadowRoot?.querySelector(".select-trigger")?.offsetWidth || 0, t = [...this.querySelectorAll("web-ui-option")], n = 0;
@@ -208,40 +203,31 @@ var y = class extends f {
 			t > n && (n = t);
 		}), Math.max(120, e, n);
 	}
-	_openPortal(e = !1) {
-		if (this._portal) {
-			this._overlay?.open(), o(this._portal.panel, { isInstant: e });
-			return;
-		}
-		let n = this.shadowRoot?.querySelector(".select-trigger");
-		if (!n) return;
-		let r = this._getDesiredWidth(), a = u({
+	_createPortal() {
+		let e = this._getDesiredWidth(), n = o({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${i}\n${d}`,
+			style: `${t}\n${r}\n${s}`,
 			className: "wui-glass select-overlay portal wui-floating-panel"
 		});
-		a.panel.style.width = `${r}px`, a.panel.setAttribute("role", "listbox"), a.moveContent(Array.from(this.children)), this._portal = a, this._overlay = l.make({
-			anchor: n,
-			overlay: a.panel,
-			placement: "bottom-start",
-			offset: 4,
-			strategy: "fixed"
-		}), this._overlay.open(), o(a.panel, { isInstant: e });
+		n.panel.style.width = `${e}px`, n.panel.setAttribute("role", "listbox");
+		let i = document.createElement("div");
+		i.className = "select-scroll";
+		let a = document.createElement("div");
+		return a.className = "select-content", i.append(a), n.panel.append(i), n.moveContent(Array.from(this.children), a), n;
 	}
 	async _closeOverlay() {
-		this._overlay?.close();
-		let e = this._portal?.panel ?? this.shadowRoot?.querySelector(".select-overlay");
-		e && !await a(e) || !this._portal || this._isOpen || (this._portal.restoreContent(), this._portal.remove(), this._portal = void 0, this._overlay = void 0);
-	}
-	_disposeOverlay() {
-		this._overlay?.dispose(), this._overlay = void 0, this._portal?.restoreContent(), this._portal?.remove(), this._portal = void 0;
+		await this._panel.close(() => this._isOpen);
 	}
 	_reconfigureOverlay() {
-		this._disposeOverlay(), this.portal || this._initLocalOverlay(), this._isOpen && this._openOverlay();
+		if (!this.portal) {
+			let e = this._panel.getPanel();
+			e && (e.style.width = `${this._getDesiredWidth()}px`);
+		}
+		this._panel.reconfigure(this._isOpen);
 	}
 	render() {
-		return p`
+		return l`
       <div class="wui-select-inner">
         <div
           class="wui-glass select-trigger"
@@ -252,40 +238,44 @@ var y = class extends f {
           aria-expanded=${this._isOpen}
           aria-haspopup="listbox"
           aria-disabled=${String(this._isDisabled)}
-          aria-activedescendant=${this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex]?.id : m}
+          aria-activedescendant=${this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex]?.id : u}
         >
           <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
-          ${this._hasTriggerSlot ? m : p`<span class="label">${this._selectedLabel}</span>`}
+          ${this._hasTriggerSlot ? u : l`<span class="label">${this._selectedLabel}</span>`}
           <web-ui-icon class="arrow" .icon=${n}></web-ui-icon>
         </div>
         <div class="wui-glass select-overlay wui-floating-panel" hidden role="listbox">
-          <slot @slotchange=${this._onSlotChange}></slot>
+          <div class="select-scroll">
+            <div class="select-content">
+              <slot @slotchange=${this._onSlotChange}></slot>
+            </div>
+          </div>
         </div>
       </div>
     `;
 	}
 };
-e([v()], y.prototype, "_formDisabled", void 0), e([_({
+e([m()], h.prototype, "_formDisabled", void 0), e([p({
 	type: String,
 	reflect: !0
-})], y.prototype, "placeholder", void 0), e([_({
+})], h.prototype, "placeholder", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "disabled", void 0), e([_({
+})], h.prototype, "disabled", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "required", void 0), e([_({
+})], h.prototype, "required", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "portal", void 0), e([_({
+})], h.prototype, "portal", void 0), e([p({
+	type: Boolean,
 	reflect: !0,
-	attribute: "lock-scroll",
-	converter: r
-})], y.prototype, "lockScroll", void 0), e([_({ attribute: !1 })], y.prototype, "overlayContainer", void 0), e([_({
+	attribute: "no-scroll-lock"
+})], h.prototype, "noScrollLock", void 0), e([p({ attribute: !1 })], h.prototype, "overlayContainer", void 0), e([p({
 	type: String,
 	reflect: !0
-})], y.prototype, "name", void 0), e([v()], y.prototype, "_value", void 0), e([v()], y.prototype, "_isOpen", void 0), e([v()], y.prototype, "_activeIndex", void 0), e([v()], y.prototype, "_selectedLabel", void 0), e([v()], y.prototype, "_hasTriggerSlot", void 0), y = e([g("web-ui-select")], y);
+})], h.prototype, "name", void 0), e([m()], h.prototype, "_value", void 0), e([m()], h.prototype, "_isOpen", void 0), e([m()], h.prototype, "_activeIndex", void 0), e([m()], h.prototype, "_selectedLabel", void 0), e([m()], h.prototype, "_hasTriggerSlot", void 0), h = e([f("web-ui-select")], h);
 //#endregion
-export { y as WebUiSelect };
+export { h as WebUiSelect };
 
 //# sourceMappingURL=index.js.map