@greypan/web-ui 2.1.7 → 3.0.0

package/dist/components/popover/index.js

@@ -1,14 +1,15 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
 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 n from "../../assets/overlay-motion.js";
+import { normalizeLiteral as r, normalizeNumber as i } from "../../shared/normalize/index.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";
+import { defineOverlayPortal as o } from "../../shared/overlay/portal.js";
+import { UserChangeController as s } from "../../shared/events/user-change.js";
+import c from "./style.js";
+import { LitElement as l, html as u, unsafeCSS as d } from "lit";
+import { customElement as f, property as p } from "lit/decorators.js";
 //#region src/components/popover/index.ts
-var p = [
+var m = [
 	"top",
 	"top-start",
 	"top-end",
@@ -21,13 +22,13 @@ var p = [
 	"right",
 	"right-start",
 	"right-end"
-], m = [
+], h = [
 	"click",
 	"hover",
 	"manual"
-], h = 0, g = class extends c {
+], g = 0, _ = class extends l {
 	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-${++h}`, this._panel = a().make({
+		super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._userOpenChange = new s(), this._shouldOpenInstantly = !0, this._panelId = `wui-popover-panel-${++g}`, this._panel = a().make({
 			getAnchor: () => this.shadowRoot?.querySelector(".popover-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".popover-panel") ?? null,
 			getPositioning: () => ({
@@ -38,32 +39,36 @@ var p = [
 			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.disabled || (clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this.trigger !== "hover" && (this.open || (this._shouldOpenInstantly = e.detail === 0), this._userOpenChange.mark(), this.toggle()));
 		}, this._onClickOutside = (e) => {
-			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.open && this.trigger !== "manual" && this.trigger !== "hover" && (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target) || this._isInsideShadowRoot(e) || (this._userOpenChange.mark(), this.open = !1));
 		}, this._onFocusOut = () => {
 			this.trigger !== "manual" && this.trigger !== "hover" && requestAnimationFrame(() => {
-				this.open && !this.matches(":focus-within") && !this._panel.getPanel()?.matches(":focus-within") && (this.open = !1);
+				this.open && !this.matches(":focus-within") && !this._panel.getPanel()?.matches(":focus-within") && (this._userOpenChange.mark(), this.open = !1);
 			});
 		}, this._onKeydown = (e) => {
-			this.open && this.trigger !== "manual" && e.key === "Escape" && (this.open = !1, e.preventDefault());
+			this.open && this.trigger !== "manual" && e.key === "Escape" && (this._userOpenChange.mark(), this.open = !1, e.preventDefault());
 		}, this._onPointerEnter = (e) => {
 			e.pointerType !== "touch" && (this.disabled || this.trigger !== "hover" || (clearTimeout(this._hideTimer), this._showTimer = setTimeout(() => {
-				this._shouldOpenInstantly = !1, this.show();
+				this._shouldOpenInstantly = !1, !this.open && (this._userOpenChange.mark(), this.show());
 			}, 100)));
 		}, this._onPointerLeave = (e) => {
-			e.pointerType !== "touch" && (this.disabled || this.trigger !== "hover" || (clearTimeout(this._showTimer), this._hideTimer = setTimeout(() => this.close(), 100)));
+			e.pointerType !== "touch" && (this.disabled || this.trigger !== "hover" || (clearTimeout(this._showTimer), this._hideTimer = setTimeout(() => {
+				this.open && (this._userOpenChange.mark(), this.close());
+			}, 100)));
 		}, this._onPanelPointerEnter = (e) => {
 			e.pointerType !== "touch" && this.trigger === "hover" && clearTimeout(this._hideTimer);
 		}, this._onPanelPointerLeave = (e) => {
-			e.pointerType !== "touch" && this.trigger === "hover" && (this._hideTimer = setTimeout(() => this.close(), 100));
+			e.pointerType !== "touch" && this.trigger === "hover" && (this._hideTimer = setTimeout(() => {
+				this.open && (this._userOpenChange.mark(), this.close());
+			}, 100));
 		};
 	}
 	static {
 		this.styles = [
-			u(t),
-			u(i),
-			u(s)
+			d(t),
+			d(n),
+			d(c)
 		];
 	}
 	get placement() {
@@ -71,21 +76,21 @@ var p = [
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = n(e, p, "bottom"), this.requestUpdate("placement", t);
+		this._placement = r(e, m, "bottom"), this.requestUpdate("placement", t);
 	}
 	get offset() {
 		return this._offset;
 	}
 	set offset(e) {
 		let t = this._offset;
-		this._offset = r(e, 0, 100, 8), this.requestUpdate("offset", t);
+		this._offset = i(e, 0, 100, 8), this.requestUpdate("offset", t);
 	}
 	get trigger() {
 		return this._trigger;
 	}
 	set trigger(e) {
 		let t = this._trigger;
-		this._trigger = n(e, m, "click"), this.requestUpdate("trigger", t);
+		this._trigger = r(e, h, "click"), this.requestUpdate("trigger", t);
 	}
 	get isOpen() {
 		return this.open;
@@ -102,15 +107,15 @@ var p = [
 	updated(e) {
 		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);
+			this._shouldOpenInstantly = !0, requestAnimationFrame(() => this._openOverlay(e)), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
+		} else this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
 		e.has("trigger") && (this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._syncTriggerListeners());
 	}
 	show() {
-		this.disabled || this.open || (this._suppressEvent = !0, this.open = !0, this._suppressEvent = !1);
+		this.disabled || this.open || (this.open = !0);
 	}
 	close() {
-		this.open && (this._suppressEvent = !0, this.open = !1, this._suppressEvent = !1);
+		this.open &&= !1;
 	}
 	toggle() {
 		this.open ? this.close() : this.show();
@@ -126,10 +131,10 @@ var p = [
 		this._panel.open(e);
 	}
 	_createPortal() {
-		let e = o({
+		let e = o().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${i}\n${s}`,
+			style: `${t}\n${n}\n${c}`,
 			className: "popover-panel portal wui-glass wui-floating-panel"
 		});
 		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;
@@ -161,7 +166,7 @@ var p = [
 		return e instanceof HTMLElement ? e : null;
 	}
 	render() {
-		return l`
+		return u`
       <div class="popover-anchor">
         <div
           class="popover-trigger"
@@ -186,23 +191,23 @@ var p = [
     `;
 	}
 };
-e([f({
+e([p({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "open", void 0), e([f({
+})], _.prototype, "open", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "disabled", void 0), e([f({
+})], _.prototype, "disabled", void 0), e([p({
 	type: String,
 	reflect: !0
-})], g.prototype, "placement", null), e([f({ type: Number })], g.prototype, "offset", null), e([f({
+})], _.prototype, "placement", null), e([p({ type: Number })], _.prototype, "offset", null), e([p({
 	type: String,
 	reflect: !0
-})], g.prototype, "trigger", null), e([f({
+})], _.prototype, "trigger", null), e([p({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "portal", void 0), e([f({ attribute: !1 })], g.prototype, "overlayContainer", void 0), g = e([d("web-ui-popover")], g);
+})], _.prototype, "portal", void 0), e([p({ attribute: !1 })], _.prototype, "overlayContainer", void 0), _ = e([f("web-ui-popover")], _);
 //#endregion
-export { g as WebUiPopover };
+export { _ 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 { 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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"}
+{"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 { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOverlayPortal } 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 readonly _userOpenChange = new UserChangeController()\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        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (this._userOpenChange.consume()) 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.open = true\n  }\n\n  // 关闭 popover\n  close() {\n    if (!this.open) return\n    this.open = 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 = defineOverlayPortal().make({\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._userOpenChange.mark()\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._userOpenChange.mark()\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._userOpenChange.mark()\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._userOpenChange.mark()\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      if (this.open) return\n      this._userOpenChange.mark()\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(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 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(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 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/radio/index.d.ts

@@ -2,11 +2,9 @@ import { LitElement } from 'lit';
 export declare class WebUiRadio extends LitElement {
     static styles: import('lit').CSSResult;
     static formAssociated: boolean;
-    /** 内部表单关联实例（connectedCallback 中初始化） */
     private _internals?;
     private _formDisabled;
     private _groupDisabled;
-    /** 内部 checked 状态，通过 getter/setter 暴露为公共 API */
     private _checked;
     get checked(): boolean;
     set checked(v: boolean);
@@ -23,7 +21,6 @@ export declare class WebUiRadio extends LitElement {
     updated(): void;
     private _syncFormValue;
     private _syncValidity;
-    /** 用户点击选中（已选中时不重复触发） */
     private handleClick;
     private handleKeyDown;
     render(): import('lit').TemplateResult<1>;

package/dist/components/radio/index.js

@@ -55,13 +55,16 @@ var l = class extends n {
 		}
 	}
 	handleClick() {
-		this._isDisabled || this._checked || (this._checked = !0, this._syncFormValue(), this.requestUpdate("checked", !1), this.dispatchEvent(new Event("input", {
+		if (this._isDisabled || this._checked) return;
+		this._checked = !0, this._syncFormValue(), this.requestUpdate("checked", !1);
+		let e = this._isManagedByGroup ? {
+			bubbles: !1,
+			composed: !1
+		} : {
 			bubbles: !0,
 			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		})));
+		};
+		this.dispatchEvent(new Event("input", e)), this.dispatchEvent(new Event("change", e));
 	}
 	handleKeyDown(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  /** 内部表单关联实例（connectedCallback 中初始化） */\n  private _internals?: ElementInternals\n  @state() private _formDisabled = false\n  @state() private _groupDisabled = false\n\n  /** 内部 checked 状态，通过 getter/setter 暴露为公共 API */\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-radio-group') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (this._internals) return\n    this._internals = this.attachInternals()\n    if (this.hasAttribute('checked')) {\n      this._checked = true\n    }\n    this._syncFormValue()\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked')\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override updated() {\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请选择一项')\n  }\n\n  /** 用户点击选中（已选中时不重复触发） */\n  private handleClick() {\n    if (this._isDisabled || this._checked) return\n    this._checked = true\n    this._syncFormValue()\n    this.requestUpdate('checked', false)\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-radio': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"radio\"\n        aria-checked=${String(this._checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <span class=\"wui-radio-circle\">\n          <span class=\"wui-radio-dot\"></span>\n        </span>\n        <span class=\"wui-radio-label\"><slot></slot></span>\n      </label>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-radio': WebUiRadio\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  // 内部表单关联实例（connectedCallback 中初始化）\n  private _internals?: ElementInternals\n  @state() private _formDisabled = false\n  @state() private _groupDisabled = false\n\n  // 内部 checked 状态，通过 getter/setter 暴露为公共 API\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-radio-group') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (this._internals) return\n    this._internals = this.attachInternals()\n    if (this.hasAttribute('checked')) {\n      this._checked = true\n    }\n    this._syncFormValue()\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked')\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override updated() {\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请选择一项')\n  }\n\n  // 用户点击选中（已选中时不重复触发）\n  private handleClick() {\n    if (this._isDisabled || this._checked) return\n    this._checked = true\n    this._syncFormValue()\n    this.requestUpdate('checked', false)\n    // group-managed 时事件不冒泡/不组合，由 group 统一派发一次 host 事件\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('input', opts))\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-radio': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"radio\"\n        aria-checked=${String(this._checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <span class=\"wui-radio-circle\">\n          <span class=\"wui-radio-dot\"></span>\n        </span>\n        <span class=\"wui-radio-label\"><slot></slot></span>\n      </label>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-radio': WebUiRadio\n  }\n}\n"],"mappings":"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"}

package/dist/components/radio-group/index.js

@@ -26,10 +26,10 @@ var c = class extends n {
 	connectedCallback() {
 		super.connectedCallback(), this._internals ||= this.attachInternals();
 		let e = this.getAttribute("value");
-		e !== null && (this.value = e), this._initialValue = this._value, this.addEventListener("change", this._handleChildChange);
+		e !== null && (this.value = e), this._initialValue = this._value, this.addEventListener("change", this._handleChildChange, !0);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange);
+		super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange, !0);
 	}
 	updated(e) {
 		(e.has("value") || e.has("disabled") || e.has("_formDisabled")) && this._syncValueToChildren(), this._syncFormValue(), this._syncValidity();

package/dist/components/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private _internals?: ElementInternals\n  @state() private _value = ''\n  @state() private _formDisabled = false\n  private _initialValue = ''\n\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._syncFormValue()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) this._internals = this.attachInternals()\n    const attributeValue = this.getAttribute('value')\n    if (attributeValue !== null) this.value = attributeValue\n    this._initialValue = this._value\n    this.addEventListener('change', this._handleChildChange)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('change', this._handleChildChange)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('disabled') || changed.has('_formDisabled')) this._syncValueToChildren()\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  formResetCallback() {\n    this.value = this._initialValue\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(this.name && this._value ? this._value : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value) this._internals.setValidity({})\n    else this._internals.setValidity({ valueMissing: true }, '请选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiRadio>('web-ui-radio').forEach(radio => {\n      radio.checked = radio.value === this._value\n      radio.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-radio')) return\n\n    const radio = target as WebUiRadio\n    if (!radio.checked || radio.value === this._value) return\n\n    this.value = radio.value\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private _handleSlotChange() {\n    this._syncValueToChildren()\n  }\n\n  override render() {\n    return html`<div class=\"wui-radio-group\"><slot @slotchange=${this._handleSlotChange}></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-radio-group': WebUiRadioGroup\n  }\n}\n"],"mappings":";;;;;AAQO,IAAM,IAAN,cAA8B,EAAW;;EAWtB,aAP0B,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA,IAG7B,KAAA,SAAA,IACO,KAAA,gBAAA,IACT,KAAA,gBAAA;;;EAVC,KAAA,SAAA,EAAU,CAAK;;;EAChB,KAAA,iBAAA;;CAWxB,IAAI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,eAAe,GACpB,KAAK,cAAc,SAAS,CAAG;CACjC;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK;CAC/B;CAEA,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,AAAsB,KAAK,eAAa,KAAK,gBAAgB;EAC7D,IAAM,IAAiB,KAAK,aAAa,OAAO;EAGhD,AAFI,MAAmB,SAAM,KAAK,QAAQ,IAC1C,KAAK,gBAAgB,KAAK,QAC1B,KAAK,iBAAiB,UAAU,KAAK,kBAAkB;CACzD;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,UAAU,KAAK,kBAAkB;CAC5D;CAEA,QAAiB,GAA+B;EAG9C,CAFI,EAAQ,IAAI,OAAO,KAAK,EAAQ,IAAI,UAAU,KAAK,EAAQ,IAAI,eAAe,MAAG,KAAK,qBAAqB,GAC/G,KAAK,eAAe,GACpB,KAAK,cAAc;CACrB;CAEA,oBAAoB;EAClB,KAAK,QAAQ,KAAK;CACpB;CAEA,qBAAqB,GAAmB;EACtC,KAAK,gBAAgB;CACvB;CAEA,iBAAyB;EACvB,KAAK,YAAY,eAAe,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS,IAAI;CAC/E;CAEA,gBAAwB;EAClB,CAAC,KAAK,cAAc,OAAO,KAAK,WAAW,eAAgB,eAC3D,KAAK,eAAe,CAAC,KAAK,YAAY,KAAK,SAAQ,KAAK,WAAW,YAAY,CAAC,CAAC,IAChF,KAAK,WAAW,YAAY,EAAE,cAAc,GAAK,GAAG,OAAO;CAClE;CAEA,uBAA+B;EAC7B,KAAK,iBAA6B,cAAc,CAAC,CAAC,SAAQ,MAAS;GAEjE,AADA,EAAM,UAAU,EAAM,UAAU,KAAK,QACrC,EAAM,iBAAiB,KAAK,WAAW;EACzC,CAAC;CACH;CAEA,mBAA2B,GAAU;EACnC,IAAI,KAAK,aAAa;EACtB,IAAM,IAAS,EAAE;EACjB,IAAI,CAAC,EAAO,UAAU,cAAc,GAAG;EAEvC,IAAM,IAAQ;EACV,CAAC,EAAM,WAAW,EAAM,UAAU,KAAK,WAE3C,KAAK,QAAQ,EAAM,OACnB,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GACxE,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,oBAA4B;EAC1B,KAAK,qBAAqB;CAC5B;CAEA,SAAkB;EAChB,OAAO,CAAI,kDAAkD,KAAK,kBAAkB;CACtF;AAMF;AA9FG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAXR,IAAA,EAAA,CAAA,EAAc,oBAAoB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private _internals?: ElementInternals\n  @state() private _value = ''\n  @state() private _formDisabled = false\n  private _initialValue = ''\n\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._syncFormValue()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) this._internals = this.attachInternals()\n    const attributeValue = this.getAttribute('value')\n    if (attributeValue !== null) this.value = attributeValue\n    this._initialValue = this._value\n    // group-managed 子项以 bubbles:false 派发 change，须用 capture 相位才能观察到子项事件，\n    // 同时该事件不会冒泡到 group 外部的同名监听器\n    this.addEventListener('change', this._handleChildChange, true)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('change', this._handleChildChange, true)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('disabled') || changed.has('_formDisabled')) this._syncValueToChildren()\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  formResetCallback() {\n    this.value = this._initialValue\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(this.name && this._value ? this._value : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value) this._internals.setValidity({})\n    else this._internals.setValidity({ valueMissing: true }, '请选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiRadio>('web-ui-radio').forEach(radio => {\n      radio.checked = radio.value === this._value\n      radio.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-radio')) return\n\n    const radio = target as WebUiRadio\n    if (!radio.checked || radio.value === this._value) return\n\n    this.value = radio.value\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private _handleSlotChange() {\n    this._syncValueToChildren()\n  }\n\n  override render() {\n    return html`<div class=\"wui-radio-group\"><slot @slotchange=${this._handleSlotChange}></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-radio-group': WebUiRadioGroup\n  }\n}\n"],"mappings":"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"}

package/dist/components/segmented/index.js

@@ -47,13 +47,13 @@ var u = class extends r {
 	connectedCallback() {
 		super.connectedCallback(), this._internals = this.attachInternals();
 		let e = this.getAttribute("value");
-		e !== null && this._value === "" && (this._value = e), this._initialValue = e ?? "", this._internals?.setFormValue?.(this._value), this.childObserver.observe(this, { childList: !0 }), this.addEventListener("change", this._handleChildChange);
+		e !== null && this._value === "" && (this._value = e), this._initialValue = e ?? "", this._internals?.setFormValue?.(this._value), this.childObserver.observe(this, { childList: !0 }), this.addEventListener("change", this._handleChildChange, !0);
 	}
 	firstUpdated() {
 		this._syncPropsToChildren(), requestAnimationFrame(() => this._updateIndicator());
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.childObserver.disconnect(), this.removeEventListener("change", this._handleChildChange);
+		super.disconnectedCallback(), this.childObserver.disconnect(), this.removeEventListener("change", this._handleChildChange, !0);
 	}
 	_handleChildChange(e) {
 		if (this._isDisabled) return;
@@ -76,10 +76,14 @@ var u = class extends r {
 	}
 	render() {
 		return i`
-      <div class=${l({
+      <div
+        class=${l({
 			"wui-segmented": !0,
 			"is-disabled": this._isDisabled
-		})}>
+		})}
+        role="listbox"
+        aria-orientation="horizontal"
+      >
         <span class="wui-segmented-indicator wui-glass"></span>
         <slot></slot>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\n\nimport type { WebUiSegmentedTrigger } from '../segmented-trigger'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented')\nexport class WebUiSegmented extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n  static formAssociated = true\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private _internals?: ElementInternals\n  @state() private _value = ''\n  @state() private _formDisabled = false\n  private _initialValue = ''\n\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._internals?.setFormValue?.(v)\n    this.requestUpdate('value', old)\n  }\n\n  private readonly childObserver = new MutationObserver(() => {\n    this._syncPropsToChildren()\n    requestAnimationFrame(() => this._updateIndicator())\n  })\n\n  private _syncPropsToChildren() {\n    this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger').forEach(trigger => {\n      trigger.checked = trigger.value === this._value\n      trigger.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  private _updateIndicator() {\n    const triggers = this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')\n    let left = 0\n    let width = 0\n\n    triggers.forEach(trigger => {\n      if (trigger.value === this._value) {\n        const triggerRect = trigger.getBoundingClientRect()\n        const groupRect = this.getBoundingClientRect()\n        left = triggerRect.left - groupRect.left\n        width = triggerRect.width\n      }\n    })\n\n    this.style.setProperty('--indicator-left', `${left}px`)\n    this.style.setProperty('--indicator-width', `${width}px`)\n  }\n\n  override updated(props: PropertyValues) {\n    if (props.has('value') || props.has('disabled') || props.has('_formDisabled')) {\n      this._syncPropsToChildren()\n      requestAnimationFrame(() => this._updateIndicator())\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._internals = this.attachInternals()\n\n    // 仅当属性在连接前未被 property setter 设值时，才从 attribute 读取初始值\n    const attrValue = this.getAttribute('value')\n    if (attrValue !== null && this._value === '') {\n      this._value = attrValue\n    }\n    this._initialValue = attrValue ?? ''\n    this._internals?.setFormValue?.(this._value)\n\n    this.childObserver.observe(this, { childList: true })\n    this.addEventListener('change', this._handleChildChange)\n  }\n\n  override firstUpdated() {\n    this._syncPropsToChildren()\n    requestAnimationFrame(() => this._updateIndicator())\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.childObserver.disconnect()\n    this.removeEventListener('change', this._handleChildChange)\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-segmented-trigger')) return\n    const trigger = target as WebUiSegmentedTrigger\n    if (trigger.value === this._value) return\n\n    this.value = trigger.value\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  formResetCallback() {\n    this.value = this._initialValue\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override render() {\n    return html`\n      <div class=${classMap({ 'wui-segmented': true, 'is-disabled': this._isDisabled })}>\n        <span class=\"wui-segmented-indicator wui-glass\"></span>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented': WebUiSegmented\n  }\n}\n"],"mappings":";;;;;;;AAWO,IAAM,IAAN,cAA6B,EAAW;;EAwBZ,aApBiB,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA,IAG7B,KAAA,SAAA,IACO,KAAA,gBAAA,IACT,KAAA,gBAAA,IAaS,KAAA,gBAAA,IAAI,uBAAuB;GAE1D,AADA,KAAK,qBAAqB,GAC1B,4BAA4B,KAAK,iBAAiB,CAAC;EACrD,CAAC;;;EA1BwB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;;EACpC,KAAA,iBAAA;;CAWxB,IAAI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,YAAY,eAAe,CAAC,GACjC,KAAK,cAAc,SAAS,CAAG;CACjC;CAOA,uBAA+B;EAC7B,KAAK,iBAAwC,0BAA0B,CAAC,CAAC,SAAQ,MAAW;GAE1F,AADA,EAAQ,UAAU,EAAQ,UAAU,KAAK,QACzC,EAAQ,iBAAiB,KAAK,WAAW;EAC3C,CAAC;CACH;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK;CAC/B;CAEA,mBAA2B;EACzB,IAAM,IAAW,KAAK,iBAAwC,0BAA0B,GACpF,IAAO,GACP,IAAQ;EAYZ,AAVA,EAAS,SAAQ,MAAW;GAC1B,IAAI,EAAQ,UAAU,KAAK,QAAQ;IACjC,IAAM,IAAc,EAAQ,sBAAsB,GAC5C,IAAY,KAAK,sBAAsB;IAE7C,AADA,IAAO,EAAY,OAAO,EAAU,MACpC,IAAQ,EAAY;GACtB;EACF,CAAC,GAED,KAAK,MAAM,YAAY,oBAAoB,GAAG,EAAK,GAAG,GACtD,KAAK,MAAM,YAAY,qBAAqB,GAAG,EAAM,GAAG;CAC1D;CAEA,QAAiB,GAAuB;EACtC,CAAI,EAAM,IAAI,OAAO,KAAK,EAAM,IAAI,UAAU,KAAK,EAAM,IAAI,eAAe,OAC1E,KAAK,qBAAqB,GAC1B,4BAA4B,KAAK,iBAAiB,CAAC;CAEvD;CAEA,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,KAAK,aAAa,KAAK,gBAAgB;EAGvC,IAAM,IAAY,KAAK,aAAa,OAAO;EAQ3C,AAPI,MAAc,QAAQ,KAAK,WAAW,OACxC,KAAK,SAAS,IAEhB,KAAK,gBAAgB,KAAa,IAClC,KAAK,YAAY,eAAe,KAAK,MAAM,GAE3C,KAAK,cAAc,QAAQ,MAAM,EAAE,WAAW,GAAK,CAAC,GACpD,KAAK,iBAAiB,UAAU,KAAK,kBAAkB;CACzD;CAEA,eAAwB;EAEtB,AADA,KAAK,qBAAqB,GAC1B,4BAA4B,KAAK,iBAAiB,CAAC;CACrD;CAEA,uBAAgC;EAG9B,AAFA,MAAM,qBAAqB,GAC3B,KAAK,cAAc,WAAW,GAC9B,KAAK,oBAAoB,UAAU,KAAK,kBAAkB;CAC5D;CAEA,mBAA2B,GAAU;EACnC,IAAI,KAAK,aAAa;EACtB,IAAM,IAAS,EAAE;EACjB,IAAI,CAAC,EAAO,UAAU,0BAA0B,GAAG;EACnD,IAAM,IAAU;EACZ,EAAQ,UAAU,KAAK,WAE3B,KAAK,QAAQ,EAAQ,OACrB,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GACxE,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,oBAAoB;EAClB,KAAK,QAAQ,KAAK;CACpB;CAEA,qBAAqB,GAAmB;EACtC,KAAK,gBAAgB;CACvB;CAEA,SAAkB;EAChB,OAAO,CAAI;mBACI,EAAS;GAAE,iBAAiB;GAAM,eAAe,KAAK;EAAY,CAAC,EAAE;;;;;CAKtF;AAMF;AAzHG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAXR,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\n\nimport type { WebUiSegmentedTrigger } from '../segmented-trigger'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented')\nexport class WebUiSegmented extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n  static formAssociated = true\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private _internals?: ElementInternals\n  @state() private _value = ''\n  @state() private _formDisabled = false\n  private _initialValue = ''\n\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._internals?.setFormValue?.(v)\n    this.requestUpdate('value', old)\n  }\n\n  private readonly childObserver = new MutationObserver(() => {\n    this._syncPropsToChildren()\n    requestAnimationFrame(() => this._updateIndicator())\n  })\n\n  private _syncPropsToChildren() {\n    this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger').forEach(trigger => {\n      trigger.checked = trigger.value === this._value\n      trigger.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  private _updateIndicator() {\n    const triggers = this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')\n    let left = 0\n    let width = 0\n\n    triggers.forEach(trigger => {\n      if (trigger.value === this._value) {\n        const triggerRect = trigger.getBoundingClientRect()\n        const groupRect = this.getBoundingClientRect()\n        left = triggerRect.left - groupRect.left\n        width = triggerRect.width\n      }\n    })\n\n    this.style.setProperty('--indicator-left', `${left}px`)\n    this.style.setProperty('--indicator-width', `${width}px`)\n  }\n\n  override updated(props: PropertyValues) {\n    if (props.has('value') || props.has('disabled') || props.has('_formDisabled')) {\n      this._syncPropsToChildren()\n      requestAnimationFrame(() => this._updateIndicator())\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._internals = this.attachInternals()\n\n    // 仅当属性在连接前未被 property setter 设值时，才从 attribute 读取初始值\n    const attrValue = this.getAttribute('value')\n    if (attrValue !== null && this._value === '') {\n      this._value = attrValue\n    }\n    this._initialValue = attrValue ?? ''\n    this._internals?.setFormValue?.(this._value)\n\n    this.childObserver.observe(this, { childList: true })\n    // group-managed 子项以 bubbles:false 派发 change，须用 capture 相位才能观察到子项事件，\n    // 同时该事件不会冒泡到 segmented 外部的同名监听器\n    this.addEventListener('change', this._handleChildChange, true)\n  }\n\n  override firstUpdated() {\n    this._syncPropsToChildren()\n    requestAnimationFrame(() => this._updateIndicator())\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.childObserver.disconnect()\n    this.removeEventListener('change', this._handleChildChange, true)\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-segmented-trigger')) return\n    const trigger = target as WebUiSegmentedTrigger\n    if (trigger.value === this._value) return\n\n    this.value = trigger.value\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  formResetCallback() {\n    this.value = this._initialValue\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({ 'wui-segmented': true, 'is-disabled': this._isDisabled })}\n        role=\"listbox\"\n        aria-orientation=\"horizontal\"\n      >\n        <span class=\"wui-segmented-indicator wui-glass\"></span>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented': WebUiSegmented\n  }\n}\n"],"mappings":";;;;;;;AAWO,IAAM,IAAN,cAA6B,EAAW;;EAwBZ,aApBiB,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA,IAG7B,KAAA,SAAA,IACO,KAAA,gBAAA,IACT,KAAA,gBAAA,IAaS,KAAA,gBAAA,IAAI,uBAAuB;GAE1D,AADA,KAAK,qBAAqB,GAC1B,4BAA4B,KAAK,iBAAiB,CAAC;EACrD,CAAC;;;EA1BwB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;;EACpC,KAAA,iBAAA;;CAWxB,IAAI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,YAAY,eAAe,CAAC,GACjC,KAAK,cAAc,SAAS,CAAG;CACjC;CAOA,uBAA+B;EAC7B,KAAK,iBAAwC,0BAA0B,CAAC,CAAC,SAAQ,MAAW;GAE1F,AADA,EAAQ,UAAU,EAAQ,UAAU,KAAK,QACzC,EAAQ,iBAAiB,KAAK,WAAW;EAC3C,CAAC;CACH;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK;CAC/B;CAEA,mBAA2B;EACzB,IAAM,IAAW,KAAK,iBAAwC,0BAA0B,GACpF,IAAO,GACP,IAAQ;EAYZ,AAVA,EAAS,SAAQ,MAAW;GAC1B,IAAI,EAAQ,UAAU,KAAK,QAAQ;IACjC,IAAM,IAAc,EAAQ,sBAAsB,GAC5C,IAAY,KAAK,sBAAsB;IAE7C,AADA,IAAO,EAAY,OAAO,EAAU,MACpC,IAAQ,EAAY;GACtB;EACF,CAAC,GAED,KAAK,MAAM,YAAY,oBAAoB,GAAG,EAAK,GAAG,GACtD,KAAK,MAAM,YAAY,qBAAqB,GAAG,EAAM,GAAG;CAC1D;CAEA,QAAiB,GAAuB;EACtC,CAAI,EAAM,IAAI,OAAO,KAAK,EAAM,IAAI,UAAU,KAAK,EAAM,IAAI,eAAe,OAC1E,KAAK,qBAAqB,GAC1B,4BAA4B,KAAK,iBAAiB,CAAC;CAEvD;CAEA,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,KAAK,aAAa,KAAK,gBAAgB;EAGvC,IAAM,IAAY,KAAK,aAAa,OAAO;EAU3C,AATI,MAAc,QAAQ,KAAK,WAAW,OACxC,KAAK,SAAS,IAEhB,KAAK,gBAAgB,KAAa,IAClC,KAAK,YAAY,eAAe,KAAK,MAAM,GAE3C,KAAK,cAAc,QAAQ,MAAM,EAAE,WAAW,GAAK,CAAC,GAGpD,KAAK,iBAAiB,UAAU,KAAK,oBAAoB,EAAI;CAC/D;CAEA,eAAwB;EAEtB,AADA,KAAK,qBAAqB,GAC1B,4BAA4B,KAAK,iBAAiB,CAAC;CACrD;CAEA,uBAAgC;EAG9B,AAFA,MAAM,qBAAqB,GAC3B,KAAK,cAAc,WAAW,GAC9B,KAAK,oBAAoB,UAAU,KAAK,oBAAoB,EAAI;CAClE;CAEA,mBAA2B,GAAU;EACnC,IAAI,KAAK,aAAa;EACtB,IAAM,IAAS,EAAE;EACjB,IAAI,CAAC,EAAO,UAAU,0BAA0B,GAAG;EACnD,IAAM,IAAU;EACZ,EAAQ,UAAU,KAAK,WAE3B,KAAK,QAAQ,EAAQ,OACrB,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GACxE,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,oBAAoB;EAClB,KAAK,QAAQ,KAAK;CACpB;CAEA,qBAAqB,GAAmB;EACtC,KAAK,gBAAgB;CACvB;CAEA,SAAkB;EAChB,OAAO,CAAI;;gBAEC,EAAS;GAAE,iBAAiB;GAAM,eAAe,KAAK;EAAY,CAAC,EAAE;;;;;;;;CAQnF;AAMF;AA/HG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAXR,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}

package/dist/components/segmented-trigger/index.d.ts

@@ -6,6 +6,7 @@ export declare class WebUiSegmentedTrigger extends LitElement {
     disabled: boolean;
     private _groupDisabled;
     private get _isDisabled();
+    private get _isManagedByGroup();
     setGroupDisabled(disabled: boolean): void;
     private handleClick;
     private handleKeyDown;

package/dist/components/segmented-trigger/index.js

@@ -14,14 +14,23 @@ var l = class extends n {
 	get _isDisabled() {
 		return this.disabled || this._groupDisabled;
 	}
+	get _isManagedByGroup() {
+		return this.closest("web-ui-segmented") !== null;
+	}
 	setGroupDisabled(e) {
 		this._groupDisabled = e;
 	}
 	handleClick() {
-		this._isDisabled || this.checked || (this.checked = !0, this.dispatchEvent(new Event("change", {
+		if (this._isDisabled || this.checked) return;
+		this.checked = !0;
+		let e = this._isManagedByGroup ? {
+			bubbles: !1,
+			composed: !1
+		} : {
 			bubbles: !0,
 			composed: !0
-		})));
+		};
+		this.dispatchEvent(new Event("change", e));
 	}
 	handleKeyDown(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
@@ -36,7 +45,7 @@ var l = class extends n {
 		})}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="option"
-        .ariaSelected=${String(this.checked)}
+        aria-selected=${String(this.checked)}
         aria-disabled=${String(this._isDisabled)}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}

package/dist/components/segmented-trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented-trigger/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented-trigger')\nexport class WebUiSegmentedTrigger extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ type: String }) value = ''\n  @property({ type: Boolean, reflect: true }) checked = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @state() private _groupDisabled = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._groupDisabled\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  private handleClick() {\n    if (this._isDisabled || this.checked) return\n    this.checked = true\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-segmented-trigger': true,\n      'is-checked': this.checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <div\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"option\"\n        .ariaSelected=${String(this.checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented-trigger': WebUiSegmentedTrigger\n  }\n}\n"],"mappings":";;;;;;AAOO,IAAM,IAAN,cAAoC,EAAW;;EAMlB,aAHE,KAAA,QAAA,IACkB,KAAA,UAAA,IACC,KAAA,WAAA,IACrB,KAAA,iBAAA;;;EALT,KAAA,SAAA,EAAU,CAAK;;CAOxC,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK;CAC/B;CAEA,iBAAiB,GAAmB;EAClC,KAAK,iBAAiB;CACxB;CAEA,cAAsB;EAChB,KAAK,eAAe,KAAK,YAC7B,KAAK,UAAU,IACf,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,cAAsB,GAAkB;EACtC,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,KAAK,YAAY;CAErB;CAEA,SAAkB;EAOhB,OAAO,CAAI;;gBAEC,EAAS;GAPnB,yBAAyB;GACzB,cAAc,KAAK;GACnB,eAAe,KAAK;EAKD,CAAG,EAAE;mBACX,KAAK,cAAc,OAAO,IAAI;;wBAEzB,OAAO,KAAK,OAAO,EAAE;wBACrB,OAAO,KAAK,WAAW,EAAE;iBAChC,KAAK,YAAY;mBACf,KAAK,cAAc;;;;;CAKpC;AAKF;AAnDG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAPR,IAAA,EAAA,CAAA,EAAc,0BAA0B,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented-trigger/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-segmented-trigger')\nexport class WebUiSegmentedTrigger extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ type: String }) value = ''\n  @property({ type: Boolean, reflect: true }) checked = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @state() private _groupDisabled = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-segmented') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  private handleClick() {\n    if (this._isDisabled || this.checked) return\n    this.checked = true\n    // group-managed 时事件不冒泡/不组合，由 segmented 统一派发一次 host 事件\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-segmented-trigger': true,\n      'is-checked': this.checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <div\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"option\"\n        aria-selected=${String(this.checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-segmented-trigger': WebUiSegmentedTrigger\n  }\n}\n"],"mappings":";;;;;;AAOO,IAAM,IAAN,cAAoC,EAAW;;EAMlB,aAHE,KAAA,QAAA,IACkB,KAAA,UAAA,IACC,KAAA,WAAA,IACrB,KAAA,iBAAA;;;EALT,KAAA,SAAA,EAAU,CAAK;;CAOxC,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK;CAC/B;CAEA,IAAY,oBAA6B;EACvC,OAAO,KAAK,QAAQ,kBAAkB,MAAM;CAC9C;CAEA,iBAAiB,GAAmB;EAClC,KAAK,iBAAiB;CACxB;CAEA,cAAsB;EACpB,IAAI,KAAK,eAAe,KAAK,SAAS;EACtC,KAAK,UAAU;EAEf,IAAM,IAAkB,KAAK,oBACzB;GAAE,SAAS;GAAO,UAAU;EAAM,IAClC;GAAE,SAAS;GAAM,UAAU;EAAK;EACpC,KAAK,cAAc,IAAI,MAAM,UAAU,CAAI,CAAC;CAC9C;CAEA,cAAsB,GAAkB;EACtC,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,KAAK,YAAY;CAErB;CAEA,SAAkB;EAOhB,OAAO,CAAI;;gBAEC,EAAS;GAPnB,yBAAyB;GACzB,cAAc,KAAK;GACnB,eAAe,KAAK;EAKD,CAAG,EAAE;mBACX,KAAK,cAAc,OAAO,IAAI;;wBAEzB,OAAO,KAAK,OAAO,EAAE;wBACrB,OAAO,KAAK,WAAW,EAAE;iBAChC,KAAK,YAAY;mBACf,KAAK,cAAc;;;;;CAKpC;AAKF;AA3DG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAPR,IAAA,EAAA,CAAA,EAAc,0BAA0B,CAAA,GAAA,CAAA"}

package/dist/components/segmented-trigger/style.js

@@ -1,5 +1,5 @@
 //#region src/components/segmented-trigger/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed}.wui-segmented-trigger{cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;height:34px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text-muted,#6a6a6a);white-space:nowrap;transition:color var(--wui-duration-focus,.2s) ease;border-radius:2147483647px;justify-content:center;align-items:center;padding:0 16px;line-height:1;display:inline-flex;position:relative}.wui-segmented-trigger:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}.wui-segmented-trigger.is-checked{color:var(--wui-color-text,#1a1a1a)}.wui-segmented-trigger.is-disabled{cursor:not-allowed;opacity:.4}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed}.wui-segmented-trigger{--wui-segmented-trigger-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-segmented-trigger-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent);cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;height:34px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text-muted,#6a6a6a);white-space:nowrap;transition:background-color var(--wui-duration-trigger,.16s) ease, color var(--wui-duration-focus,.2s) ease;background-color:#0000;border-radius:2147483647px;justify-content:center;align-items:center;padding:0 16px;line-height:1;display:inline-flex;position:relative}.wui-segmented-trigger:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}.wui-segmented-trigger.is-checked{color:var(--wui-color-text,#1a1a1a)}@media (hover:hover) and (pointer:fine){.wui-segmented-trigger:hover:not(.is-disabled){background-color:var(--wui-segmented-trigger-bg-hover)}}.wui-segmented-trigger:active:not(.is-disabled){background-color:var(--wui-segmented-trigger-bg-active)}.wui-segmented-trigger.is-disabled{cursor:not-allowed;opacity:.4}";
 //#endregion
 export { e as default };
 

package/dist/components/segmented-trigger/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented-trigger/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.wui-segmented-trigger {\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n  z-index: 1;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  height: 34px;\n  padding: 0 16px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text-muted, #6a6a6a);\n  white-space: nowrap;\n\n  transition: color var(--wui-duration-focus, 200ms) ease;\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n\n  &.is-checked {\n    color: var(--wui-color-text, #1a1a1a);\n  }\n}\n\n.wui-segmented-trigger.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented-trigger/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.wui-segmented-trigger {\n  --wui-segmented-trigger-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-segmented-trigger-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n  z-index: 1;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  height: 34px;\n  padding: 0 16px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text-muted, #6a6a6a);\n  white-space: nowrap;\n\n  background-color: transparent;\n\n  transition:\n    background-color var(--wui-duration-trigger, 160ms) ease,\n    color var(--wui-duration-focus, 200ms) ease;\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n\n  &.is-checked {\n    color: var(--wui-color-text, #1a1a1a);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .wui-segmented-trigger:hover:not(.is-disabled) {\n    background-color: var(--wui-segmented-trigger-bg-hover);\n  }\n}\n\n.wui-segmented-trigger:active:not(.is-disabled) {\n  background-color: var(--wui-segmented-trigger-bg-active);\n}\n\n.wui-segmented-trigger.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n"],"mappings":""}

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

@@ -58,7 +58,6 @@ export declare class WebUiSelect extends LitElement {
     private _syncScrollLock;
     private _togglePopup;
     private _openOverlay;
-    private _getDesiredWidth;
     private _createPortal;
     private _closeOverlay;
     private _reconfigureOverlay;