@greypan/web-ui 2.1.7 → 3.0.0

package/dist/components/drawer/index.js

@@ -1,37 +1,40 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../assets/glass.js";
-import n from "../../icons/generated/ooui-close.js";
+import t from "../../icons/generated/ooui-close.js";
+import n from "../../assets/glass.js";
 import { normalizeLiteral as r } from "../../shared/normalize/index.js";
+import { defineScrollLockLease as i } from "../../shared/scroll-lock/scroll-lock.js";
 import "../button/index.js";
-import { createScrollLockLease as i } from "../../shared/scroll-lock/scroll-lock.js";
-import { defineNativeDialogPresence as a } from "../../shared/overlay/native-dialog-presence.js";
-import o from "./style.js";
-import { LitElement as s, html as c, nothing as l, unsafeCSS as u } from "lit";
-import { customElement as d, property as f } from "lit/decorators.js";
+import { UserChangeController as a } from "../../shared/events/user-change.js";
+import { defineNativeDialogPresence as o } from "../../shared/overlay/native-dialog-presence.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 } from "lit/decorators.js";
 //#region src/components/drawer/index.ts
-var p = [
+var m = [
 	"right",
 	"left",
 	"top",
 	"bottom"
-], m = class extends s {
+], h = class extends c {
 	constructor(...e) {
-		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._placement = "right", this.heading = "", this.closable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._scrollLock = i(), this._presence = a().make({
+		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._placement = "right", this.heading = "", this.closable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new a(), this._scrollLock = i().make(), this._presence = o().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		});
+		}), this._closeFromUser = () => {
+			this.open && (this._userOpenChange.mark(), this.close());
+		};
 	}
 	static {
-		this.styles = [u(t), u(o)];
+		this.styles = [d(n), d(s)];
 	}
 	get placement() {
 		return this._placement;
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = r(e, p, "right"), this.requestUpdate("placement", t);
+		this._placement = r(e, m, "right"), this.requestUpdate("placement", t);
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -60,13 +63,13 @@ var p = [
 		t !== this._hasFooterSlot && (this._hasFooterSlot = t, this.requestUpdate());
 	}
 	updated(e) {
-		super.updated(e), this.isConnected && (e.has("open") && (this.emitOpenChange(), this._presence.sync(this.open)), (e.has("open") || e.has("noScrollLock")) && this._syncScrollLock());
+		super.updated(e), this.isConnected && (e.has("open") && (this._userOpenChange.consume() && this.emitOpenChange(), this._presence.sync(this.open)), (e.has("open") || e.has("noScrollLock")) && this._syncScrollLock());
 	}
 	handleTransitionEnd(e) {
 		this._presence.handleTransitionEnd(e);
 	}
 	handleKeydown(e) {
-		e.key === "Escape" && (e.preventDefault(), this.close());
+		e.key === "Escape" && (e.preventDefault(), this._closeFromUser());
 	}
 	show() {
 		this.open ||= !0;
@@ -75,13 +78,13 @@ var p = [
 		this.open &&= !1;
 	}
 	handleCancel(e) {
-		e.preventDefault(), this.close();
+		e.preventDefault(), this._closeFromUser();
 	}
 	handleNativeClose() {
-		this.open &&= (this._presence.handleNativeClose(), !1);
+		this.open &&= (this._presence.handleNativeClose(), this._userOpenChange.mark(), !1);
 	}
 	handleBackdropClick(e) {
-		e.target === e.currentTarget && (this.noBackdropClose || this.close());
+		e.target === e.currentTarget && (this.noBackdropClose || this._closeFromUser());
 	}
 	emitOpenChange() {
 		this.dispatchEvent(new CustomEvent("open-change", {
@@ -95,7 +98,7 @@ var p = [
 	}
 	render() {
 		let e = this._hasHeaderSlot || !!this.heading;
-		return c`
+		return l`
       <dialog
         @cancel=${this.handleCancel}
         @close=${this.handleNativeClose}
@@ -104,13 +107,13 @@ var p = [
         @transitionend=${this.handleTransitionEnd}
       >
         <div class="wui-drawer-body wui-glass">
-          ${e ? c`
+          ${e ? l`
                 <div class="wui-drawer-header">
                   <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
-                    ${this.heading ? c`<span class="wui-drawer-heading">${this.heading}</span>` : l}
+                    ${this.heading ? l`<span class="wui-drawer-heading">${this.heading}</span>` : u}
                   </slot>
                 </div>
-              ` : l}
+              ` : u}
           <div class="wui-drawer-content">
             <slot></slot>
           </div>
@@ -118,34 +121,41 @@ var p = [
             <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
           </div>
         </div>
-        ${this.closable ? c`
-              <web-ui-button class="wui-drawer-close" @click=${this.close} aria-label="关闭" variant="secondary" icon>
-                <web-ui-icon .icon=${n}></web-ui-icon>
+        ${this.closable ? l`
+              <web-ui-button
+                class="wui-drawer-close"
+                @click=${this._closeFromUser}
+                aria-label="关闭"
+                variant="secondary"
+                icon
+                size="26"
+              >
+                <web-ui-icon .icon=${t} size="16"></web-ui-icon>
               </web-ui-button>
-            ` : l}
+            ` : u}
       </dialog>
     `;
 	}
 };
-e([f({
+e([p({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "open", void 0), e([f({
+})], h.prototype, "open", void 0), e([p({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], m.prototype, "noScrollLock", void 0), e([f({
+})], h.prototype, "noScrollLock", void 0), e([p({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], m.prototype, "noBackdropClose", void 0), e([f({
+})], h.prototype, "noBackdropClose", void 0), e([p({
 	type: String,
 	reflect: !0
-})], m.prototype, "placement", null), e([f({ type: String })], m.prototype, "heading", void 0), e([f({
+})], h.prototype, "placement", null), e([p({ type: String })], h.prototype, "heading", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "closable", void 0), m = e([d("web-ui-drawer")], m);
+})], h.prototype, "closable", void 0), h = e([f("web-ui-drawer")], h);
 //#endregion
-export { m as WebUiDrawer };
+export { h as WebUiDrawer };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { oouiClose } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { createScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['right', 'left', 'top', 'bottom'] as const\n\nexport type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number]\n\n@customElement('web-ui-drawer')\nexport class WebUiDrawer extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true, attribute: 'no-scroll-lock' }) noScrollLock = false\n  @property({ type: Boolean, reflect: true, attribute: 'no-backdrop-close' }) noBackdropClose = false\n  @property({ type: String, reflect: true })\n  get placement(): DrawerPlacement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'right')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: DrawerPlacement = 'right'\n\n  /** 标题文字（未传 header slot 时显示默认 header） */\n  @property({ type: String }) heading = ''\n\n  @property({ type: Boolean, reflect: true }) closable = false\n\n  private get dialog() {\n    return this.shadowRoot?.querySelector('dialog') ?? null\n  }\n\n  private _hasHeaderSlot = false\n  private _hasFooterSlot = false\n  private readonly _scrollLock = createScrollLockLease()\n  private readonly _presence = defineNativeDialogPresence().make({\n    getDialog: () => this.dialog,\n    isConnected: () => this.isConnected,\n    isOpen: () => this.open\n  })\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasHeaderSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'header')\n    this._hasFooterSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'footer')\n  }\n\n  override firstUpdated() {\n    this._checkSlotContent('footer')\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._presence.dispose()\n    this._scrollLock.release()\n  }\n\n  private _checkSlotContent(name: string) {\n    const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null\n    if (!slot) return\n    const has = slot.assignedNodes().length > 0\n    if (name === 'footer' && has !== this._hasFooterSlot) {\n      this._hasFooterSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  private handleHeaderSlotChange(e: Event) {\n    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n    if (has !== this._hasHeaderSlot) {\n      this._hasHeaderSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  private handleFooterSlotChange(e: Event) {\n    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n    if (has !== this._hasFooterSlot) {\n      this._hasFooterSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  protected override updated(props: PropertyValues) {\n    super.updated(props)\n    if (!this.isConnected) return\n\n    if (props.has('open')) {\n      this.emitOpenChange()\n      this._presence.sync(this.open)\n    }\n    if (props.has('open') || props.has('noScrollLock')) this._syncScrollLock()\n  }\n\n  private handleTransitionEnd(e: TransitionEvent) {\n    this._presence.handleTransitionEnd(e)\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Escape') return\n    e.preventDefault()\n    this.close()\n  }\n\n  /** 打开抽屉（命令式） */\n  show() {\n    if (this.open) return\n    this.open = true\n  }\n\n  /** 关闭抽屉（带动画） */\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  private handleCancel(e: Event) {\n    // 保留 top layer 直到 CSS 过渡结束，避免原生关闭跳过退出动画。\n    e.preventDefault()\n    this.close()\n  }\n\n  private handleNativeClose() {\n    if (!this.open) return\n\n    // 原生关闭可绕过 cancel；同步受控状态，避免 show() 误判为已打开。\n    this._presence.handleNativeClose()\n    this.open = false\n  }\n\n  private handleBackdropClick(e: MouseEvent) {\n    if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n    if (this.noBackdropClose) return\n    this.close()\n  }\n\n  private emitOpenChange() {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open: this.open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _syncScrollLock(isOpen = this.open) {\n    this._scrollLock.sync(isOpen && !this.noScrollLock)\n  }\n\n  override render() {\n    const showHeader = this._hasHeaderSlot || !!this.heading\n\n    return html`\n      <dialog\n        @cancel=${this.handleCancel}\n        @close=${this.handleNativeClose}\n        @click=${this.handleBackdropClick}\n        @keydown=${this.handleKeydown}\n        @transitionend=${this.handleTransitionEnd}\n      >\n        <div class=\"wui-drawer-body wui-glass\">\n          ${showHeader\n            ? html`\n                <div class=\"wui-drawer-header\">\n                  <slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}>\n                    ${this.heading ? html`<span class=\"wui-drawer-heading\">${this.heading}</span>` : nothing}\n                  </slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"wui-drawer-content\">\n            <slot></slot>\n          </div>\n          <div class=\"wui-drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n            <slot name=\"footer\" @slotchange=${this.handleFooterSlotChange}></slot>\n          </div>\n        </div>\n        ${this.closable\n          ? html`\n              <web-ui-button class=\"wui-drawer-close\" @click=${this.close} aria-label=\"关闭\" variant=\"secondary\" icon>\n                <web-ui-icon .icon=${oouiClose}></web-ui-icon>\n              </web-ui-button>\n            `\n          : nothing}\n      </dialog>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-drawer': WebUiDrawer\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { oouiClose } from '@/icons'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['right', 'left', 'top', 'bottom'] as const\n\nexport type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number]\n\n@customElement('web-ui-drawer')\nexport class WebUiDrawer extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true, attribute: 'no-scroll-lock' }) noScrollLock = false\n  @property({ type: Boolean, reflect: true, attribute: 'no-backdrop-close' }) noBackdropClose = false\n  @property({ type: String, reflect: true })\n  get placement(): DrawerPlacement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'right')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: DrawerPlacement = 'right'\n\n  // 标题文字（未传 header slot 时显示默认 header）\n  @property({ type: String }) heading = ''\n\n  @property({ type: Boolean, reflect: true }) closable = false\n\n  private get dialog() {\n    return this.shadowRoot?.querySelector('dialog') ?? null\n  }\n\n  private _hasHeaderSlot = false\n  private _hasFooterSlot = false\n  private readonly _userOpenChange = new UserChangeController()\n  private readonly _scrollLock = defineScrollLockLease().make()\n  private readonly _presence = defineNativeDialogPresence().make({\n    getDialog: () => this.dialog,\n    isConnected: () => this.isConnected,\n    isOpen: () => this.open\n  })\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasHeaderSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'header')\n    this._hasFooterSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'footer')\n  }\n\n  override firstUpdated() {\n    this._checkSlotContent('footer')\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._presence.dispose()\n    this._scrollLock.release()\n  }\n\n  private _checkSlotContent(name: string) {\n    const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null\n    if (!slot) return\n    const has = slot.assignedNodes().length > 0\n    if (name === 'footer' && has !== this._hasFooterSlot) {\n      this._hasFooterSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  private handleHeaderSlotChange(e: Event) {\n    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n    if (has !== this._hasHeaderSlot) {\n      this._hasHeaderSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  private handleFooterSlotChange(e: Event) {\n    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n    if (has !== this._hasFooterSlot) {\n      this._hasFooterSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  protected override updated(props: PropertyValues) {\n    super.updated(props)\n    if (!this.isConnected) return\n\n    if (props.has('open')) {\n      if (this._userOpenChange.consume()) this.emitOpenChange()\n      this._presence.sync(this.open)\n    }\n    if (props.has('open') || props.has('noScrollLock')) this._syncScrollLock()\n  }\n\n  private handleTransitionEnd(e: TransitionEvent) {\n    this._presence.handleTransitionEnd(e)\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Escape') return\n    e.preventDefault()\n    this._closeFromUser()\n  }\n\n  // 打开抽屉（命令式）\n  show() {\n    if (this.open) return\n    this.open = true\n  }\n\n  // 关闭抽屉（带动画）\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  private readonly _closeFromUser = () => {\n    if (!this.open) return\n    this._userOpenChange.mark()\n    this.close()\n  }\n\n  private handleCancel(e: Event) {\n    // 保留 top layer 直到 CSS 过渡结束，避免原生关闭跳过退出动画。\n    e.preventDefault()\n    this._closeFromUser()\n  }\n\n  private handleNativeClose() {\n    if (!this.open) return\n\n    // 原生关闭可绕过 cancel；同步受控状态，避免 show() 误判为已打开。\n    this._presence.handleNativeClose()\n    this._userOpenChange.mark()\n    this.open = false\n  }\n\n  private handleBackdropClick(e: MouseEvent) {\n    if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n    if (this.noBackdropClose) return\n    this._closeFromUser()\n  }\n\n  private emitOpenChange() {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open: this.open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _syncScrollLock(isOpen = this.open) {\n    this._scrollLock.sync(isOpen && !this.noScrollLock)\n  }\n\n  override render() {\n    const showHeader = this._hasHeaderSlot || !!this.heading\n\n    return html`\n      <dialog\n        @cancel=${this.handleCancel}\n        @close=${this.handleNativeClose}\n        @click=${this.handleBackdropClick}\n        @keydown=${this.handleKeydown}\n        @transitionend=${this.handleTransitionEnd}\n      >\n        <div class=\"wui-drawer-body wui-glass\">\n          ${showHeader\n            ? html`\n                <div class=\"wui-drawer-header\">\n                  <slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}>\n                    ${this.heading ? html`<span class=\"wui-drawer-heading\">${this.heading}</span>` : nothing}\n                  </slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"wui-drawer-content\">\n            <slot></slot>\n          </div>\n          <div class=\"wui-drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n            <slot name=\"footer\" @slotchange=${this.handleFooterSlotChange}></slot>\n          </div>\n        </div>\n        ${this.closable\n          ? html`\n              <web-ui-button\n                class=\"wui-drawer-close\"\n                @click=${this._closeFromUser}\n                aria-label=\"关闭\"\n                variant=\"secondary\"\n                icon\n                size=\"26\"\n              >\n                <web-ui-icon .icon=${oouiClose} size=\"16\"></web-ui-icon>\n              </web-ui-button>\n            `\n          : nothing}\n      </dialog>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-drawer': WebUiDrawer\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAM,IAAqB;CAAC;CAAS;CAAQ;CAAO;AAAQ,GAK/C,IAAN,cAA0B,EAAW;;EA+GF,aA5GW,KAAA,OAAA,IACqC,KAAA,eAAA,IACM,KAAA,kBAAA,IAUxD,KAAA,aAAA,SAGA,KAAA,UAAA,IAEiB,KAAA,WAAA,IAM9B,KAAA,iBAAA,IACA,KAAA,iBAAA,IACU,KAAA,kBAAA,IAAI,EAAqB,GAC7B,KAAA,cAAA,EAAsB,CAAC,CAAC,KAAK,GAC/B,KAAA,YAAA,EAA2B,CAAC,CAAC,KAAK;GAC7D,iBAAiB,KAAK;GACtB,mBAAmB,KAAK;GACxB,cAAc,KAAK;EACrB,CAAC,GA6EuC,KAAA,uBAAA;GACjC,KAAK,SACV,KAAK,gBAAgB,KAAK,GAC1B,KAAK,MAAM;EACb;;;EAlHyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAK5D,IACI,YAA6B;EAC/B,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,OAAO,GACjE,KAAK,cAAc,aAAa,CAAG;CACrC;CAQA,IAAY,SAAS;EACnB,OAAO,KAAK,YAAY,cAAc,QAAQ,KAAK;CACrD;CAYA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,MAAK,MAAS,EAAM,eAAe,MAAM,MAAM,QAAQ,GACvG,KAAK,iBAAiB,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,MAAK,MAAS,EAAM,eAAe,MAAM,MAAM,QAAQ;CACzG;CAEA,eAAwB;EACtB,KAAK,kBAAkB,QAAQ;CACjC;CAEA,uBAAgC;EAG9B,AAFA,MAAM,qBAAqB,GAC3B,KAAK,UAAU,QAAQ,GACvB,KAAK,YAAY,QAAQ;CAC3B;CAEA,kBAA0B,GAAc;EACtC,IAAM,IAAO,KAAK,YAAY,cAAc,cAAc,EAAK,GAAG;EAClE,IAAI,CAAC,GAAM;EACX,IAAM,IAAM,EAAK,cAAc,CAAC,CAAC,SAAS;EAC1C,AAAI,MAAS,YAAY,MAAQ,KAAK,mBACpC,KAAK,iBAAiB,GACtB,KAAK,cAAc;CAEvB;CAEA,uBAA+B,GAAU;EACvC,IAAM,IAAO,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EACnE,AAAI,MAAQ,KAAK,mBACf,KAAK,iBAAiB,GACtB,KAAK,cAAc;CAEvB;CAEA,uBAA+B,GAAU;EACvC,IAAM,IAAO,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EACnE,AAAI,MAAQ,KAAK,mBACf,KAAK,iBAAiB,GACtB,KAAK,cAAc;CAEvB;CAEA,QAA2B,GAAuB;EAChD,MAAM,QAAQ,CAAK,GACd,KAAK,gBAEN,EAAM,IAAI,MAAM,MACd,KAAK,gBAAgB,QAAQ,KAAG,KAAK,eAAe,GACxD,KAAK,UAAU,KAAK,KAAK,IAAI,KAE3B,EAAM,IAAI,MAAM,KAAK,EAAM,IAAI,cAAc,MAAG,KAAK,gBAAgB;CAC3E;CAEA,oBAA4B,GAAoB;EAC9C,KAAK,UAAU,oBAAoB,CAAC;CACtC;CAEA,cAAsB,GAAkB;EAClC,EAAE,QAAQ,aACd,EAAE,eAAe,GACjB,KAAK,eAAe;CACtB;CAGA,OAAO;EACD,AACJ,KAAK,SAAO;CACd;CAGA,QAAQ;EACD,AACL,KAAK,SAAO;CACd;CAQA,aAAqB,GAAU;EAG7B,AADA,EAAE,eAAe,GACjB,KAAK,eAAe;CACtB;CAEA,oBAA4B;EACrB,AAKL,KAAK,UAFL,KAAK,UAAU,kBAAkB,GACjC,KAAK,gBAAgB,KAAK,GACd;CACd;CAEA,oBAA4B,GAAe;EACrC,EAAE,WAAY,EAAE,kBAChB,KAAK,mBACT,KAAK,eAAe;CACtB;CAEA,iBAAyB;EACvB,KAAK,cACH,IAAI,YAAY,eAAe;GAC7B,QAAQ,EAAE,MAAM,KAAK,KAAK;GAC1B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB,IAAS,KAAK,MAAM;EAC1C,KAAK,YAAY,KAAK,KAAU,CAAC,KAAK,YAAY;CACpD;CAEA,SAAkB;EAChB,IAAM,IAAa,KAAK,kBAAkB,CAAC,CAAC,KAAK;EAEjD,OAAO,CAAI;;kBAEG,KAAK,aAAa;iBACnB,KAAK,kBAAkB;iBACvB,KAAK,oBAAoB;mBACvB,KAAK,cAAc;yBACb,KAAK,oBAAoB;;;YAGtC,IACE,CAAI;;oDAEkC,KAAK,uBAAuB;sBAC1D,KAAK,UAAU,CAAI,oCAAoC,KAAK,QAAQ,WAAW,EAAQ;;;kBAI/F,EAAQ;;;;mDAI6B,CAAC,KAAK,eAAe;8CAC1B,KAAK,uBAAuB;;;UAGhE,KAAK,WACH,CAAI;;;yBAGS,KAAK,eAAe;;;;;;qCAMR,EAAU;;gBAGnC,EAAQ;;;CAGlB;AAKF;AAtMG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GACtE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAoB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GACzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAYxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GArB3C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

package/dist/components/drawer/style.js

@@ -1,5 +1,5 @@
 //#region src/components/drawer/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:var(--wui-drawer-width,320px);max-width:90vw;height:100dvh;max-height:100dvh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-drawer-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;margin:0;padding:0;font-family:inherit;inset:0 0 0 auto;overflow:visible;transform:translate(100%)}dialog::backdrop{opacity:0;background:var(--wui-drawer-overlay-bg,#0000001f);transition:opacity var(--wui-duration-drawer-enter,.28s) ease}dialog[open].is-visible,:host([placement=left]) dialog[open].is-visible,:host([placement=top]) dialog[open].is-visible,:host([placement=bottom]) dialog[open].is-visible{transform:translate(0)}dialog.is-closing{pointer-events:none;transition:transform var(--wui-duration-drawer-exit,.24s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}dialog.is-closing::backdrop{transition:opacity var(--wui-duration-drawer-exit,.24s) ease}dialog[open].is-visible::backdrop{opacity:1}:host([placement=left]) dialog{left:0;right:auto;transform:translate(-100%)}:host([placement=top]) dialog,:host([placement=bottom]) dialog{width:100vw;max-width:100vw;height:var(--wui-drawer-height,300px);max-height:90dvh}:host([placement=top]) dialog{inset:0 0 auto;transform:translateY(-100%)}:host([placement=bottom]) dialog{inset:auto 0 0;transform:translateY(100%)}.wui-drawer-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);flex-direction:column;height:100%;display:flex}.wui-drawer-header{border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.4;display:flex}.wui-drawer-content{overscroll-behavior:contain;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);flex:1;padding:20px;line-height:1.5;overflow-y:auto}.wui-drawer-footer{border-top:1px solid #0000000f;flex-shrink:0;padding:16px 20px}@media (prefers-reduced-motion:reduce){dialog{transition:opacity var(--wui-duration-feedback,.1s) ease}dialog::backdrop{transition-duration:var(--wui-duration-feedback,.1s)}dialog[open].is-visible{transform:none}}.wui-drawer-footer[hidden]{display:none}.wui-drawer-close{z-index:3;position:absolute;top:8px;right:8px}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:var(--wui-drawer-width,320px);max-width:90vw;height:100dvh;max-height:100dvh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-drawer-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;margin:0;padding:0;font-family:inherit;inset:0 0 0 auto;overflow:visible;transform:translate(100%)}dialog::backdrop{opacity:0;background:var(--wui-drawer-overlay-bg,#0000001f);transition:opacity var(--wui-duration-drawer-enter,.28s) ease}dialog[open].is-visible,:host([placement=left]) dialog[open].is-visible,:host([placement=top]) dialog[open].is-visible,:host([placement=bottom]) dialog[open].is-visible{transform:translate(0)}dialog.is-closing{pointer-events:none;transition:transform var(--wui-duration-drawer-exit,.24s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}dialog.is-closing::backdrop{transition:opacity var(--wui-duration-drawer-exit,.24s) ease}dialog[open].is-visible::backdrop{opacity:1}:host([placement=left]) dialog{left:0;right:auto;transform:translate(-100%)}:host([placement=top]) dialog,:host([placement=bottom]) dialog{width:100vw;max-width:100vw;height:var(--wui-drawer-height,300px);max-height:90dvh}:host([placement=top]) dialog{inset:0 0 auto;transform:translateY(-100%)}:host([placement=bottom]) dialog{inset:auto 0 0;transform:translateY(100%)}.wui-drawer-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);flex-direction:column;height:100%;display:flex}.wui-drawer-header{border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.4;display:flex}.wui-drawer-content{overscroll-behavior:contain;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);flex:1;padding:20px;line-height:1.5;overflow-y:auto}.wui-drawer-footer{border-top:1px solid #0000000f;flex-shrink:0;padding:16px 20px}@media (prefers-reduced-motion:reduce){dialog{transition:opacity var(--wui-duration-feedback,.1s) ease}dialog::backdrop{transition-duration:var(--wui-duration-feedback,.1s)}dialog[open].is-visible{transform:none}}.wui-drawer-footer[hidden]{display:none}.wui-drawer-close{z-index:3;position:absolute;top:16px;right:16px}";
 //#endregion
 export { e as default };
 

package/dist/components/drawer/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/drawer/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: contents;\n}\n\n/* ===== Dialog 容器 ===== */\ndialog {\n  /* 默认：右侧滑出 — 需显式 left:auto 覆盖 UA dialog:modal 的 left:0 */\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: auto;\n  transform: translateX(100%);\n\n  /* 阴影属于抽屉主体，不能由同尺寸的原生 dialog 裁剪。内容滚动由 .wui-drawer-content 管理。 */\n  overflow: visible;\n\n  box-sizing: border-box;\n  width: var(--wui-drawer-width, 320px);\n  max-width: 90vw;\n  height: 100dvh;\n  max-height: 100dvh;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n\n  transition: transform var(--wui-duration-drawer-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-drawer-overlay-bg, rgb(0 0 0 / 0.12));\n    transition: opacity var(--wui-duration-drawer-enter, 280ms) ease;\n  }\n}\n\ndialog[open].is-visible {\n  transform: translate(0, 0);\n}\n\n:host([placement='left']) dialog[open].is-visible,\n:host([placement='top']) dialog[open].is-visible,\n:host([placement='bottom']) dialog[open].is-visible {\n  transform: translate(0, 0);\n}\n\ndialog.is-closing {\n  pointer-events: none;\n  transition: transform var(--wui-duration-drawer-exit, 240ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\ndialog.is-closing::backdrop {\n  transition: opacity var(--wui-duration-drawer-exit, 240ms) ease;\n}\n\ndialog[open].is-visible::backdrop {\n  opacity: 1;\n}\n\n/* ===== Placement 变体 ===== */\n\n:host([placement='left']) dialog {\n  right: auto;\n  left: 0;\n  transform: translateX(-100%);\n}\n\n:host([placement='top']) dialog,\n:host([placement='bottom']) dialog {\n  width: 100vw;\n  max-width: 100vw;\n  height: var(--wui-drawer-height, 300px);\n  max-height: 90dvh;\n}\n\n:host([placement='top']) dialog {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: 0;\n  transform: translateY(-100%);\n}\n\n:host([placement='bottom']) dialog {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateY(100%);\n}\n\n/* ===== 抽屉主体 ===== */\n\n.wui-drawer-body {\n  --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n/* ===== Header ===== */\n\n.wui-drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 16px 20px;\n  border-bottom: 1px solid rgb(0 0 0 / 0.06);\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n/* ===== 内容区 ===== */\n\n.wui-drawer-content {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n\n  padding: 20px;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== Footer ===== */\n\n.wui-drawer-footer {\n  flex-shrink: 0;\n  padding: 16px 20px;\n  border-top: 1px solid rgb(0 0 0 / 0.06);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog {\n    transition: opacity var(--wui-duration-feedback, 100ms) ease;\n  }\n\n  dialog::backdrop {\n    transition-duration: var(--wui-duration-feedback, 100ms);\n  }\n\n  dialog[open].is-visible {\n    transform: none;\n  }\n}\n\n.wui-drawer-footer[hidden] {\n  display: none;\n}\n\n/* ===== 关闭按钮（独立定位，与 header 解耦） ===== */\n\n.wui-drawer-close {\n  position: absolute;\n  z-index: 3;\n  top: 8px;\n  right: 8px;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/drawer/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: contents;\n}\n\n/* ===== Dialog 容器 ===== */\ndialog {\n  /* 默认：右侧滑出 — 需显式 left:auto 覆盖 UA dialog:modal 的 left:0 */\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: auto;\n  transform: translateX(100%);\n\n  /* 阴影属于抽屉主体，不能由同尺寸的原生 dialog 裁剪。内容滚动由 .wui-drawer-content 管理。 */\n  overflow: visible;\n\n  box-sizing: border-box;\n  width: var(--wui-drawer-width, 320px);\n  max-width: 90vw;\n  height: 100vh;\n  height: 100dvh;\n  max-height: 100vh;\n  max-height: 100dvh;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n\n  transition: transform var(--wui-duration-drawer-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-drawer-overlay-bg, rgb(0 0 0 / 0.12));\n    transition: opacity var(--wui-duration-drawer-enter, 280ms) ease;\n  }\n}\n\ndialog[open].is-visible {\n  transform: translate(0, 0);\n}\n\n:host([placement='left']) dialog[open].is-visible,\n:host([placement='top']) dialog[open].is-visible,\n:host([placement='bottom']) dialog[open].is-visible {\n  transform: translate(0, 0);\n}\n\ndialog.is-closing {\n  pointer-events: none;\n  transition: transform var(--wui-duration-drawer-exit, 240ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\ndialog.is-closing::backdrop {\n  transition: opacity var(--wui-duration-drawer-exit, 240ms) ease;\n}\n\ndialog[open].is-visible::backdrop {\n  opacity: 1;\n}\n\n/* ===== Placement 变体 ===== */\n\n:host([placement='left']) dialog {\n  right: auto;\n  left: 0;\n  transform: translateX(-100%);\n}\n\n:host([placement='top']) dialog,\n:host([placement='bottom']) dialog {\n  width: 100vw;\n  max-width: 100vw;\n  height: var(--wui-drawer-height, 300px);\n  max-height: 90dvh;\n}\n\n:host([placement='top']) dialog {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: 0;\n  transform: translateY(-100%);\n}\n\n:host([placement='bottom']) dialog {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateY(100%);\n}\n\n/* ===== 抽屉主体 ===== */\n\n.wui-drawer-body {\n  --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n/* ===== Header ===== */\n\n.wui-drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 16px 20px;\n  border-bottom: 1px solid rgb(0 0 0 / 0.06);\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n/* ===== 内容区 ===== */\n\n.wui-drawer-content {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n\n  padding: 20px;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== Footer ===== */\n\n.wui-drawer-footer {\n  flex-shrink: 0;\n  padding: 16px 20px;\n  border-top: 1px solid rgb(0 0 0 / 0.06);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog {\n    transition: opacity var(--wui-duration-feedback, 100ms) ease;\n  }\n\n  dialog::backdrop {\n    transition-duration: var(--wui-duration-feedback, 100ms);\n  }\n\n  dialog[open].is-visible {\n    transform: none;\n  }\n}\n\n.wui-drawer-footer[hidden] {\n  display: none;\n}\n\n/* ===== 关闭按钮（独立定位，与 header 解耦） ===== */\n\n.wui-drawer-close {\n  position: absolute;\n  z-index: 3;\n  top: 16px;\n  right: 16px;\n}\n"],"mappings":""}

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

@@ -21,24 +21,17 @@ export declare class WebUiDropdown extends LitElement {
     private _ignoreOutsideClickTimer?;
     private _hoverCleanupFns;
     private readonly _scrollLock;
+    private readonly _userOpenChange;
     private _restoreFocusTarget?;
     private _shouldOpenInstantly;
     get isOpen(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
-    /**
-     * 打开菜单。
-     * @returns 无返回值；打开后派发 `open-change` 事件。
-     */
     openMenu(): void;
     private _openMenu;
-    /**
-     * 关闭所有层级。
-     * @returns 无返回值；关闭后派发 `open-change` 事件。
-     */
     closeAll(): void;
-    /** 清理子菜单状态（不影响 open prop） */
+    private _closeAll;
     private _closeAllSubmenus;
     private _cleanupClosedMenu;
     private _closeRootAfterPresence;

package/dist/components/dropdown/index.js

@@ -1,18 +1,19 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
 import { normalizeLiteral as t, normalizeNumber as n } from "../../shared/normalize/index.js";
+import { defineOverlay as r } from "../../shared/overlay/overlay.js";
+import { hideOverlayPresence as i, showOverlayPresence as a } from "../../shared/overlay/presence.js";
+import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
 import "../dropdown-divider/index.js";
 import "../dropdown-header/index.js";
 import "../dropdown-item/index.js";
-import { createMenuPortalOverlay as r } from "../../shared/menu-portal/menu-portal.js";
-import { findFocusedMenuItem as i, focusMenuItem as a, getEnabledMenuItems as o, getMenuChildren as s, getMenuItemFromEvent as c, hideNestedMenuChildren as l, moveMenuChildren as u } from "../../shared/menu-portal/menu-tree.js";
-import { hideOverlayPresence as d, showOverlayPresence as f } from "../../shared/overlay/presence.js";
-import { createScrollLockLease as p } from "../../shared/scroll-lock/scroll-lock.js";
-import { defineOverlay as m } from "../../shared/overlay/overlay.js";
-import h from "./style.js";
-import { LitElement as g, html as _, unsafeCSS as v } from "lit";
-import { customElement as y, property as b, state as x } from "lit/decorators.js";
+import { UserChangeController as s } from "../../shared/events/user-change.js";
+import { createMenuPortalOverlay as c } from "../../shared/menu-portal/menu-portal.js";
+import { findFocusedMenuItem as l, focusMenuItem as u, getEnabledMenuItems as d, getMenuChildren as f, getMenuItemFromEvent as p, hideNestedMenuChildren as m, moveMenuChildren as h } from "../../shared/menu-portal/menu-tree.js";
+import g from "./style.js";
+import { LitElement as _, html as v, unsafeCSS as y } from "lit";
+import { customElement as b, property as x, state as S } from "lit/decorators.js";
 //#region src/components/dropdown/index.ts
-var S = "web-ui-menu-level-", C = [
+var C = "web-ui-menu-level-", w = [
 	"top",
 	"top-start",
 	"top-end",
@@ -25,14 +26,14 @@ var S = "web-ui-menu-level-", C = [
 	"left",
 	"left-start",
 	"left-end"
-], w = class extends g {
+], T = class extends _ {
 	constructor(...e) {
-		super(...e), this.open = !1, this.disabled = !1, this.matchWidth = !1, this.noScrollLock = !1, this._placement = "bottom-start", this._offset = 4, this._activePath = [], this._overlays = /* @__PURE__ */ new Map(), this._closingSubmenuOverlays = /* @__PURE__ */ new Map(), this._ignoreOutsideClick = !1, this._hoverCleanupFns = [], this._scrollLock = p(), this._shouldOpenInstantly = !0, this._onTriggerClick = (e) => {
-			this.disabled || (this.open ? this.closeAll() : this._openMenu(e.detail === 0));
+		super(...e), this.open = !1, this.disabled = !1, this.matchWidth = !1, this.noScrollLock = !1, this._placement = "bottom-start", this._offset = 4, this._activePath = [], this._overlays = /* @__PURE__ */ new Map(), this._closingSubmenuOverlays = /* @__PURE__ */ new Map(), this._ignoreOutsideClick = !1, this._hoverCleanupFns = [], this._scrollLock = o().make(), this._userOpenChange = new s(), this._shouldOpenInstantly = !0, this._onTriggerClick = (e) => {
+			this.disabled || (this.open ? this._closeAll(!0) : this._openMenu(e.detail === 0, !0));
 		}, this._onClickOutside = (e) => {
-			!this.isOpen || this._ignoreOutsideClick || this._isInsideShadowRoot(e) || this.closeAll();
+			!this.isOpen || this._ignoreOutsideClick || this._isInsideShadowRoot(e) || this._closeAll(!0);
 		}, this._onMenuClick = (e) => {
-			let t = c(e);
+			let t = p(e);
 			if (!t || t.hasAttribute("disabled") || !t.hasAttribute("submenu")) return;
 			let n = this._getFocusedLevel(t);
 			if (n === void 0) return;
@@ -40,8 +41,8 @@ var S = "web-ui-menu-level-", C = [
 			r >= 0 && this._toggleSubmenu(n, r, e.detail === 0);
 		}, this._onKeydown = (e) => {
 			if (this.disabled || !this.open) return;
-			if (e.key === "Escape" && e.target === this) {
-				this._activePath.length > 0 ? this._closeSubmenuFrom(this._activePath.length) : this.closeAll(), e.preventDefault();
+			if (e.key === "Escape") {
+				this._activePath.length > 0 ? this._closeSubmenuFrom(this._activePath.length) : this._closeAll(!0), e.preventDefault();
 				return;
 			}
 			let t = this._getFocusedItem(e), n = this._getFocusedLevel(t);
@@ -74,7 +75,7 @@ var S = "web-ui-menu-level-", C = [
 					t?.click();
 					break;
 				case "Escape":
-					this._activePath.length > 0 ? this._closeSubmenuFrom(this._activePath.length) : this.closeAll();
+					this._activePath.length > 0 ? this._closeSubmenuFrom(this._activePath.length) : this._closeAll(!0);
 					break;
 				default: return;
 			}
@@ -82,13 +83,13 @@ var S = "web-ui-menu-level-", C = [
 		};
 	}
 	static {
-		this.styles = v(h);
+		this.styles = y(g);
 	}
 	get placement() {
 		return this._placement;
 	}
 	set placement(e) {
-		this._placement = t(e, C, "bottom-start");
+		this._placement = t(e, w, "bottom-start");
 	}
 	get offset() {
 		return this._offset;
@@ -108,7 +109,7 @@ var S = "web-ui-menu-level-", C = [
 	updated(e) {
 		e.has("open") && (this.open ? (this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : void 0, this._ignoreCurrentOutsideClick(), this._syncScrollLock(), this._hideAllSubmenuChildren(), requestAnimationFrame(() => {
 			this.open && (this._ensureOverlay(0, this._shouldOpenInstantly), this._shouldOpenInstantly = !0, this._focusMenuItem(this._getEnabledLevelItems(0)[0]));
-		}), this._bindHoversAfterUpdate()) : (this._syncScrollLock(), this._closeRootAfterPresence()), this.dispatchEvent(new CustomEvent("open-change", {
+		}), this._bindHoversAfterUpdate()) : (this._syncScrollLock(), this._closeRootAfterPresence()), this._userOpenChange.consume() && this.dispatchEvent(new CustomEvent("open-change", {
 			detail: { open: this.open },
 			bubbles: !0,
 			composed: !0
@@ -119,13 +120,16 @@ var S = "web-ui-menu-level-", C = [
 		}), this._bindLevelHovers();
 	}
 	openMenu() {
-		this._openMenu(!0);
+		this._openMenu(!0, !1);
 	}
-	_openMenu(e) {
-		this.disabled || this.open || (this._ignoreCurrentOutsideClick(), this._shouldOpenInstantly = e, this.open = !0);
+	_openMenu(e, t) {
+		this.disabled || this.open || (this._ignoreCurrentOutsideClick(), this._shouldOpenInstantly = e, t && this._userOpenChange.mark(), this.open = !0);
 	}
 	closeAll() {
-		this.open &&= !1;
+		this._closeAll(!1);
+	}
+	_closeAll(e) {
+		this.open &&= (e && this._userOpenChange.mark(), !1);
 	}
 	_closeAllSubmenus() {
 		this._closeSubmenuFrom(1, !0), this._disposeClosingSubmenuOverlays(), this._syncActiveAttrs();
@@ -135,10 +139,10 @@ var S = "web-ui-menu-level-", C = [
 	}
 	async _closeRootAfterPresence() {
 		let e = this._overlays.get(0)?.overlay;
-		e && !await d(e) || this.open || !this.isConnected || (this._cleanupClosedMenu(), this._restoreFocusTarget?.focus(), this._restoreFocusTarget = void 0);
+		e && !await i(e) || this.open || !this.isConnected || (this._cleanupClosedMenu(), this._restoreFocusTarget?.focus(), this._restoreFocusTarget = void 0);
 	}
 	_hideAllSubmenuChildren() {
-		l(this, `${S}-hidden`);
+		m(this, `${C}-hidden`);
 	}
 	_toggleSubmenu(e, t, n = !1) {
 		if (this._activePath[e] === t) return;
@@ -168,50 +172,51 @@ var S = "web-ui-menu-level-", C = [
 	}
 	_getLevelItems(e) {
 		let t = this._overlays.get(e)?.content;
-		return t ? s(t) : [];
+		return t ? f(t) : [];
 	}
 	_populateLevel0() {
 		let e = this._overlays.get(0)?.content;
-		e && u(this, e);
+		e && h(this, e);
 	}
 	_returnLevel0Items() {
 		let e = this._overlays.get(0)?.content;
-		e && u(e, this);
+		e && h(e, this);
 	}
 	_populateOverlay(e, t) {
 		let n = this._overlays.get(e)?.content;
-		n && u(t, n);
+		n && h(t, n);
 	}
 	_depopulateOverlay(e, t) {
 		let n = this._overlays.get(e)?.content;
 		if (!n) return;
 		let r = e - 1, i = t ?? this._getLevelItems(r)[this._activePath[r]];
-		i && u(n, i);
+		i && h(n, i);
 	}
 	_ensureOverlay(e, t = !1, n) {
 		let r = n ? this._closingSubmenuOverlays.get(n) : void 0;
-		if (r) return this._closingSubmenuOverlays.delete(n), this._overlays.set(e, r), r.api.open(), f(r.overlay, { isInstant: t }), !0;
+		if (r) return this._closingSubmenuOverlays.delete(n), this._overlays.set(e, r), r.api.open(), a(r.overlay, { isInstant: t }), !0;
 		let i = this._overlays.get(e);
-		return i ? (i.api.open(), f(i.overlay, { isInstant: t }), !1) : (this._buildOverlay(e, t), !1);
+		return i ? (i.api.open(), a(i.overlay, { isInstant: t }), !1) : (this._buildOverlay(e, t), !1);
 	}
 	_buildOverlay(e, t = !1) {
-		let { panel: n, content: i } = r("dropdown-overlay");
+		let { panel: n, content: i } = c("dropdown-overlay", this);
 		n.setAttribute("role", "menu"), n.dataset.level = String(e), n.addEventListener("click", this._onMenuClick), n.addEventListener("keydown", this._onKeydown);
-		let a = e === 0 ? this._queryTriggerAnchor() : this._getSubmenuTriggerAnchor(e - 1);
-		if (a) {
-			let r = m().make({
-				anchor: a,
+		let o = e === 0 ? this._queryTriggerAnchor() : this._getSubmenuTriggerAnchor(e - 1);
+		if (o) {
+			let s = r().make({
+				anchor: o,
 				overlay: n,
 				placement: e === 0 ? this.placement : "right-start",
 				offset: e === 0 ? this.offset : 0,
+				minAnchorWidth: !0,
 				matchWidth: e === 0 && this.matchWidth,
 				strategy: "fixed"
 			});
 			this._overlays.set(e, {
-				api: r,
+				api: s,
 				overlay: n,
 				content: i
-			}), e === 0 && this._populateLevel0(), r.open(), f(n, { isInstant: t });
+			}), e === 0 && this._populateLevel0(), s.open(), a(n, { isInstant: t });
 		}
 	}
 	_disposeOverlay(e) {
@@ -222,7 +227,7 @@ var S = "web-ui-menu-level-", C = [
 		for (let e of this._overlays.keys()) this._disposeOverlay(e);
 	}
 	async _closeSubmenuAfterPresence(e, t) {
-		await d(e.overlay) && this._closingSubmenuOverlays.get(t) === e && (this._closingSubmenuOverlays.delete(t), this._restoreSubmenuItems(e, t), e.api.dispose(), e.overlay.remove());
+		await i(e.overlay) && this._closingSubmenuOverlays.get(t) === e && (this._closingSubmenuOverlays.delete(t), this._restoreSubmenuItems(e, t), e.api.dispose(), e.overlay.remove());
 	}
 	_disposeClosingSubmenuOverlays() {
 		this._closingSubmenuOverlays.forEach((e, t) => {
@@ -230,7 +235,7 @@ var S = "web-ui-menu-level-", C = [
 		}), this._closingSubmenuOverlays.clear();
 	}
 	_restoreSubmenuItems(e, t) {
-		u(e.content, t);
+		h(e.content, t);
 	}
 	_syncScrollLock(e = this.open) {
 		this._scrollLock.sync(e && !this.noScrollLock);
@@ -247,16 +252,16 @@ var S = "web-ui-menu-level-", C = [
 	}
 	_getEnabledLevelItems(e) {
 		let t = this._overlays.get(e)?.content;
-		return t ? o(t) : [];
+		return t ? d(t) : [];
 	}
 	_getFocusedItem(e) {
-		return e?.composedPath().find((e) => e instanceof HTMLElement && e.matches("web-ui-dropdown-item")) || i([...this._overlays.values()].map(({ overlay: e }) => e));
+		return e?.composedPath().find((e) => e instanceof HTMLElement && e.matches("web-ui-dropdown-item")) || l([...this._overlays.values()].map(({ overlay: e }) => e));
 	}
 	_getFocusedLevel(e = this._getFocusedItem()) {
 		if (e) return [...this._overlays.entries()].find(([, t]) => t.overlay.contains(e))?.[0];
 	}
 	_focusMenuItem(e) {
-		a(e);
+		u(e);
 	}
 	_isInsideShadowRoot(e) {
 		for (let t of e.composedPath()) if (t === this || t === this.shadowRoot || t instanceof Node && t.getRootNode() === this.shadowRoot || t instanceof Node && [...this._overlays.values()].some(({ overlay: e }) => e.contains(t))) return !0;
@@ -285,32 +290,32 @@ var S = "web-ui-menu-level-", C = [
 		requestAnimationFrame(() => this._bindLevelHovers());
 	}
 	render() {
-		return _`
+		return v`
       <div class="dropdown-trigger" @click=${this._onTriggerClick}>
         <slot name="trigger"></slot>
       </div>
     `;
 	}
 };
-e([b({
+e([x({
 	type: Boolean,
 	reflect: !0
-})], w.prototype, "open", void 0), e([b({
+})], T.prototype, "open", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], w.prototype, "disabled", void 0), e([b({
+})], T.prototype, "disabled", void 0), e([x({
 	type: Boolean,
 	reflect: !0,
 	attribute: "match-width"
-})], w.prototype, "matchWidth", void 0), e([b({
+})], T.prototype, "matchWidth", void 0), e([x({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], w.prototype, "noScrollLock", void 0), e([b({
+})], T.prototype, "noScrollLock", void 0), e([x({
 	type: String,
 	reflect: !0
-})], w.prototype, "placement", null), e([b({ type: Number })], w.prototype, "offset", null), e([x()], w.prototype, "_activePath", void 0), w = e([y("web-ui-dropdown")], w);
+})], T.prototype, "placement", null), e([x({ type: Number })], T.prototype, "offset", null), e([S()], T.prototype, "_activePath", void 0), T = e([b("web-ui-dropdown")], T);
 //#endregion
-export { w as WebUiDropdown };
+export { T as WebUiDropdown };
 
 //# sourceMappingURL=index.js.map