@greypan/web-ui 3.0.1 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: pointer;\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.wui-checkbox {\n  cursor: pointer;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: calc(infinity * 1px);\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n.wui-checkbox.is-disabled {\n  cursor: not-allowed;\n  color: var(--wui-color-text-muted, #6a6a6a);\n  opacity: 0.4;\n}\n\n.wui-checkbox-box {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n\n  background-color: var(--wui-color-surface-raised, #f2f2f7);\n\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n}\n\n.is-checked .wui-checkbox-box {\n  border-color: var(--wui-color-accent, #08f);\n  background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-checkbox-icon {\n  transform: scale(0.85);\n\n  overflow: hidden;\n  display: block;\n\n  font-size: 0;\n  line-height: 0;\n\n  opacity: 0;\n\n  transition:\n    opacity var(--wui-duration-trigger, 160ms) ease,\n    transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-checkbox-icon {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.wui-checkbox-label {\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-checkbox-icon,\n  .is-checked .wui-checkbox-icon {\n    transform: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: default;\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.wui-checkbox {\n  cursor: default;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: calc(infinity * 1px);\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n.wui-checkbox.is-disabled {\n  cursor: not-allowed;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  opacity: 0.4;\n}\n\n.wui-checkbox-box {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n\n  background-color: var(--wui-color-surface-raised, #f2f2f7);\n\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease;\n}\n\n.is-checked .wui-checkbox-box {\n  border-color: var(--wui-color-accent, #08f);\n  background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-checkbox-icon {\n  transform: scale(0.85);\n\n  overflow: hidden;\n  display: block;\n\n  font-size: 0;\n  line-height: 0;\n\n  opacity: 0;\n\n  transition:\n    opacity var(--wui-duration-trigger, 160ms) ease,\n    transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-checkbox-icon {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.wui-checkbox-label {\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-checkbox-icon,\n  .is-checked .wui-checkbox-icon {\n    transform: none;\n  }\n}\n"],"mappings":""}

package/dist/components/checkbox-group/index.d.ts

@@ -6,22 +6,16 @@ export declare class WebUiCheckboxGroup extends LitElement {
     disabled: boolean;
     required: boolean;
     private _value;
-    private _formDisabled;
-    private _internals?;
-    private _initialValue;
+    private readonly _groupController;
     get value(): string[];
     set value(v: string[]);
     private get _isDisabled();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
-    private _syncFormValue;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private _syncValidity;
-    private _syncValueToChildren;
-    private _handleChildChange;
-    private _handleSlotChange;
     render(): import('lit').TemplateResult<1>;
     readonly $events: {
         input: Event;

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

@@ -1,14 +1,65 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
-import t from "./style.js";
-import { LitElement as n, html as r, unsafeCSS as i } from "lit";
-import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import { FormAssociationController as t, defineFormAssociation as n } from "../../shared/form-association/index.js";
+import { GroupController as r, defineGroupCoordinator as i } from "../../shared/group-management/index.js";
+import a from "./style.js";
+import { LitElement as o, html as s, unsafeCSS as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
 //#region src/components/checkbox-group/index.ts
-var c = class extends n {
+var f = class extends o {
 	constructor(...e) {
-		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = [], this._formDisabled = !1, this._initialValue = [];
+		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = [], this._groupController = new r(this, i({
+			host: this,
+			getItems: () => [...this.querySelectorAll("web-ui-checkbox")],
+			getValue: () => this._value,
+			setValue: (e) => {
+				this.value = e;
+			},
+			getDisabled: () => this._isDisabled,
+			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-checkbox"),
+			isItemSelected: (e, t) => t.includes(e.value),
+			getNextValue: (e, t) => e.checked ? [.../* @__PURE__ */ new Set([...t, e.value])] : t.filter((t) => t !== e.value),
+			valuesEqual: (e, t) => e.length === t.length && e.every((e, n) => e === t[n]),
+			copyValue: (e) => [...e],
+			setItemSelected: (e, t) => {
+				e.checked = t;
+			},
+			dispatchValueChange: () => {
+				this.dispatchEvent(new Event("input", {
+					bubbles: !0,
+					composed: !0
+				})), this.dispatchEvent(new Event("change", {
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		}).make()), this._formAssociation = n({
+			host: this,
+			initialize: () => {
+				let e = this.getAttribute("value");
+				e !== null && (this.value = e.split(",").filter(Boolean));
+			},
+			getState: () => this._value,
+			setState: (e) => {
+				this.value = e;
+			},
+			copyState: (e) => [...e],
+			getFormValue: () => {
+				if (!this.name || this._value.length === 0) return null;
+				let e = new FormData();
+				return this._value.forEach((t) => e.append(this.name, t)), e;
+			},
+			getFormState: () => JSON.stringify(this._value),
+			restoreState: (e) => {
+				if (typeof e == "string") try {
+					let t = JSON.parse(e);
+					Array.isArray(t) && t.every((e) => typeof e == "string") && (this.value = t);
+				} catch {}
+			},
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new t(this, this._formAssociation);
 	}
 	static {
-		this.styles = i(t);
+		this.styles = c(a);
 	}
 	static {
 		this.formAssociated = !0;
@@ -18,82 +69,45 @@ var c = class extends n {
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = [...e], this._syncFormValue(), this.requestUpdate("value", t);
+		this._value = [...e], this._formAssociation.sync(), this.requestUpdate("value", t);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled;
-	}
-	connectedCallback() {
-		super.connectedCallback(), this._internals ||= this.attachInternals();
-		let e = this.getAttribute("value");
-		e !== null && (this.value = e.split(",").filter(Boolean)), this._initialValue = [...this._value], this.addEventListener("change", this._handleChildChange, !0);
-	}
-	disconnectedCallback() {
-		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();
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	formResetCallback() {
-		this.value = [...this._initialValue];
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
+		this._formAssociation.setDisabled(e), this._groupController.sync();
 	}
-	_syncFormValue() {
-		if (!this._internals) return;
-		if (!this.name || this._value.length === 0) {
-			this._internals.setFormValue?.(null);
-			return;
-		}
-		let e = new FormData();
-		this._value.forEach((t) => e.append(this.name, t)), this._internals.setFormValue?.(e);
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
 	_syncValidity() {
-		if (!(!this._internals || typeof this._internals.setValidity != "function")) {
+		let e = this._formAssociation.getInternals();
+		if (!(!e || typeof e.setValidity != "function")) {
 			if (this._isDisabled || !this.required || this._value.length > 0) {
-				this._internals.setValidity({});
+				e.setValidity({});
 				return;
 			}
-			this._internals.setValidity({ valueMissing: !0 }, "请至少选择一项");
+			e.setValidity({ valueMissing: !0 }, "请至少选择一项");
 		}
 	}
-	_syncValueToChildren() {
-		this.querySelectorAll("web-ui-checkbox").forEach((e) => {
-			e.checked = this._value.includes(e.value), e.setGroupDisabled(this._isDisabled);
-		});
-	}
-	_handleChildChange(e) {
-		if (this._isDisabled) return;
-		let t = e.target;
-		if (!t.matches?.("web-ui-checkbox")) return;
-		let n = t, r = n.checked ? [.../* @__PURE__ */ new Set([...this._value, n.value])] : this._value.filter((e) => e !== n.value);
-		this.value = r, this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		}));
-	}
-	_handleSlotChange() {
-		this._syncValueToChildren();
-	}
 	render() {
-		return r`<div class="wui-checkbox-group"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
+		return s`<div class="wui-checkbox-group"><slot></slot></div>`;
 	}
 };
-e([o({
+e([u({
 	type: String,
 	reflect: !0
-})], c.prototype, "name", void 0), e([o({
+})], f.prototype, "name", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "disabled", void 0), e([o({
+})], f.prototype, "disabled", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "required", void 0), e([s()], c.prototype, "_value", void 0), e([s()], c.prototype, "_formDisabled", void 0), c = e([a("web-ui-checkbox-group")], c);
+})], f.prototype, "required", void 0), e([d()], f.prototype, "_value", void 0), f = e([l("web-ui-checkbox-group")], f);
 //#endregion
-export { c as WebUiCheckboxGroup };
+export { f as WebUiCheckboxGroup };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup 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  @state() private _value: string[] = []\n  @state() private _formDisabled = false\n  private _internals?: ElementInternals\n  private _initialValue: string[] = []\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.split(',').filter(Boolean)\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    if (!this._internals) return\n    if (!this.name || this._value.length === 0) {\n      this._internals.setFormValue?.(null)\n      return\n    }\n    const formData = new FormData()\n    this._value.forEach(value => formData.append(this.name, value))\n    this._internals.setFormValue?.(formData)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value.length > 0) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请至少选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox').forEach(checkbox => {\n      checkbox.checked = this._value.includes(checkbox.value)\n      checkbox.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-checkbox')) return\n\n    const checkbox = target as WebUiCheckbox\n    const next = checkbox.checked\n      ? [...new Set([...this._value, checkbox.value])]\n      : this._value.filter(v => v !== checkbox.value)\n\n    this.value = next\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-checkbox-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-checkbox-group': WebUiCheckboxGroup\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\n\nimport type { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup 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  @state() private _value: string[] = []\n\n  private readonly _groupController = new GroupController(\n    this,\n    defineGroupCoordinator<WebUiCheckbox, string[]>({\n      host: this,\n      getItems: () => [...this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox')],\n      getValue: () => this._value,\n      setValue: value => {\n        this.value = value\n      },\n      getDisabled: () => this._isDisabled,\n      isItem: (target): target is WebUiCheckbox => target instanceof HTMLElement && target.matches('web-ui-checkbox'),\n      isItemSelected: (checkbox, value) => value.includes(checkbox.value),\n      getNextValue: (checkbox, value) =>\n        checkbox.checked ? [...new Set([...value, checkbox.value])] : value.filter(item => item !== checkbox.value),\n      valuesEqual: (a, b) => a.length === b.length && a.every((value, index) => value === b[index]),\n      copyValue: value => [...value],\n      setItemSelected: (checkbox, selected) => {\n        checkbox.checked = selected\n      },\n      dispatchValueChange: () => {\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n      }\n    }).make()\n  )\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._formAssociation.sync()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formAssociation.isFormDisabled()\n  }\n\n  private readonly _formAssociation = defineFormAssociation<string[]>({\n    host: this,\n    initialize: () => {\n      const attributeValue = this.getAttribute('value')\n      if (attributeValue !== null) this.value = attributeValue.split(',').filter(Boolean)\n    },\n    getState: () => this._value,\n    setState: value => {\n      this.value = value\n    },\n    copyState: value => [...value],\n    getFormValue: () => {\n      if (!this.name || this._value.length === 0) return null\n      const formData = new FormData()\n      this._value.forEach(value => formData.append(this.name, value))\n      return formData\n    },\n    getFormState: () => JSON.stringify(this._value),\n    restoreState: state => {\n      if (typeof state !== 'string') return\n      try {\n        const value = JSON.parse(state)\n        if (Array.isArray(value) && value.every(item => typeof item === 'string')) this.value = value\n      } catch {\n        // 忽略无法解析的历史表单状态。\n      }\n    },\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  formResetCallback() {\n    this._formAssociation.reset()\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n    this._groupController.sync()\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this._formAssociation.restore(state)\n  }\n\n  private _syncValidity() {\n    const internals = this._formAssociation.getInternals()\n    if (!internals || typeof internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value.length > 0) {\n      internals.setValidity({})\n      return\n    }\n    internals.setValidity({ valueMissing: true }, '请至少选择一项')\n  }\n\n  override render() {\n    return html`<div class=\"wui-checkbox-group\"><slot></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-checkbox-group': WebUiCheckboxGroup\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/**
+ * 文档流内折叠面板：trigger 经默认 slot 提供，内容经 `slot="content"` 提供。
+ *
+ * trigger 语义完全来自 slot 进来的交互元素（原生 button / web-ui-button 等）：
+ * Enter/Space 激活走该元素的原生 click，不做 role="button" 补齐；组件把
+ * `aria-expanded` / `aria-controls` / `aria-disabled` 回写到首个 assigned
+ * element（与 popover trigger 的既定回写模式一致）。wrapper 仅负责点击代理，
+ * 不可聚焦，不承载 ARIA。
+ *
+ * 内容区在 shadow 内以 grid `0fr ↔ 1fr` track 过渡驱动高度/宽度动画（ADR-0038
+ * 选型保留）。关闭稳态三态（消费者 light DOM 永不移动，hidden 全部命令式管理，
+ * 避免渲染绑定在关闭动画起点抢先 display:none）：
+ * - 默认：content 容器 `hidden`（display:none，脱离渲染与可访问性树）；
+ * - `keep-mounted`：inner `inert`（保留在 0fr 轨道内，滚动位置与布局可测量）；
+ * - 动画进行中：inner `inert` + track pointer-events 禁用，结束后进入对应稳态。
+ */
+export declare class WebUiCollapse extends LitElement {
+    static styles: import('lit').CSSResult;
+    /** 展开状态；严格受控，唯一状态源。 */
+    open: boolean;
+    /** 禁用触发：点击忽略、aria-disabled 写入 trigger 元素；已展开内容保持现状。 */
+    disabled: boolean;
+    /** 水平方向：true 时沿宽度展开，默认沿高度。 */
+    horizontal: boolean;
+    /** 关闭稳态保持内容 `inert` 而非 `hidden`（保留滚动位置，可测量）。 */
+    keepMounted: boolean;
+    private _triggerWrapper;
+    private _contentId;
+    private readonly _userOpenChange;
+    private _exitTimer?;
+    private _generation;
+    private _lastOpen?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    show(): void;
+    close(): void;
+    toggle(): void;
+    private _dispatchChange;
+    private _onTriggerClick;
+    private _queryTrigger;
+    private readonly _onTriggerSlotChange;
+    private _syncTriggerAria;
+    private _applyOpenSteadyState;
+    private _applyClosedSteadyState;
+    private _beginExpand;
+    private _beginCollapse;
+    private _settle;
+    private _awaitTransition;
+    private _clearExitTimer;
+    private _setInnerInert;
+    private _contentContainer;
+    private _contentTrack;
+    render(): import('lit').TemplateResult<1>;
+    readonly $events: {
+        'open-change': CustomEvent<{
+            open: boolean;
+        }>;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-collapse': WebUiCollapse;
+    }
+}

package/dist/components/collapse/index.js

@@ -0,0 +1,159 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import { getTransitionDuration as t } from "../../shared/overlay/presence.js";
+import { UserChangeController as n } from "../../shared/events/user-change.js";
+import r from "./style.js";
+import { LitElement as i, html as a, unsafeCSS as o } from "lit";
+import { customElement as s, property as c, query as l } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+//#region src/components/collapse/index.ts
+var d = 80, f = 0, p = class extends i {
+	constructor(...e) {
+		super(...e), this.open = !1, this.disabled = !1, this.horizontal = !1, this.keepMounted = !1, this._contentId = `wui-collapse-content-${++f}`, this._userOpenChange = new n(), this._generation = 0, this._onTriggerClick = (e) => {
+			this.disabled || e.composedPath().includes(this._triggerWrapper) && (this._userOpenChange.mark(), this.toggle());
+		}, this._onTriggerSlotChange = () => {
+			this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = o(r);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this._onTriggerClick), this.hasUpdated && (this._generation++, this._clearExitTimer(), this._lastOpen = void 0, this.requestUpdate());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._clearExitTimer();
+	}
+	updated(e) {
+		if (this._syncTriggerAria(), this._lastOpen === void 0) {
+			this._lastOpen = this.open, this.open ? this._applyOpenSteadyState() : this._applyClosedSteadyState();
+			return;
+		}
+		e.has("keepMounted") && !this.open && this._applyClosedSteadyState(), !(!e.has("open") || this.open === this._lastOpen) && (this._lastOpen = this.open, this._userOpenChange.consume() && this._dispatchChange(this.open), this.open ? this._beginExpand() : this._beginCollapse());
+	}
+	show() {
+		this.open ||= !0;
+	}
+	close() {
+		this.open &&= !1;
+	}
+	toggle() {
+		this.open ? this.close() : this.show();
+	}
+	_dispatchChange(e) {
+		this.dispatchEvent(new CustomEvent("open-change", {
+			detail: { open: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_queryTrigger() {
+		let e = (this.shadowRoot?.querySelector(".wui-collapse-trigger-wrapper slot"))?.assignedElements()[0];
+		return e instanceof HTMLElement ? e : null;
+	}
+	_syncTriggerAria() {
+		let e = this._queryTrigger();
+		e && (e.setAttribute("aria-expanded", String(this.open)), e.setAttribute("aria-controls", this._contentId), this.disabled ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"));
+	}
+	_applyOpenSteadyState() {
+		this._generation++, this._clearExitTimer();
+		let e = this._contentContainer(), t = this._contentTrack();
+		e && (e.hidden = !1), t && (t.dataset.wuiPresence = "open", this._setInnerInert(!1));
+	}
+	_applyClosedSteadyState() {
+		this._generation++, this._clearExitTimer();
+		let e = this._contentContainer(), t = this._contentTrack();
+		if (t && delete t.dataset.wuiPresence, this.keepMounted) {
+			e && (e.hidden = !1), this._setInnerInert(!0);
+			return;
+		}
+		this._setInnerInert(!1), e && (e.hidden = !0);
+	}
+	_beginExpand() {
+		this._generation++, this._clearExitTimer();
+		let e = this._contentContainer(), t = this._contentTrack();
+		if (!e || !t) return;
+		let n = this._generation;
+		this._setInnerInert(!1), e.hidden = !1, t.offsetWidth, requestAnimationFrame(() => {
+			n !== this._generation || !this.open || (t.dataset.wuiPresence = "open", this._awaitTransition(t, n, () => this._settle(!0)));
+		});
+	}
+	_beginCollapse() {
+		this._generation++, this._clearExitTimer();
+		let e = this._contentTrack();
+		if (!e) return;
+		this._setInnerInert(!0), e.dataset.wuiPresence = "closing";
+		let t = this._generation;
+		this._awaitTransition(e, t, () => this._settle(!1));
+	}
+	_settle(e) {
+		if (this._clearExitTimer(), e) {
+			this._setInnerInert(!1);
+			return;
+		}
+		let t = this._contentTrack();
+		if (t && delete t.dataset.wuiPresence, this.keepMounted) return;
+		let n = this._contentContainer();
+		this._setInnerInert(!1), n && (n.hidden = !0);
+	}
+	_awaitTransition(e, n, r) {
+		let i = t(e, 0);
+		if (i === 0) {
+			n === this._generation && r();
+			return;
+		}
+		let a = !1, o = () => {
+			e.removeEventListener("transitionend", c), this._exitTimer === s && (this._exitTimer = void 0), clearTimeout(s), !(a || n !== this._generation) && (a = !0, r());
+		}, s = setTimeout(o, i + d);
+		this._exitTimer = s;
+		let c = (t) => {
+			t.target === e && (t.propertyName === "grid-template-rows" || t.propertyName === "grid-template-columns") && o();
+		};
+		e.addEventListener("transitionend", c);
+	}
+	_clearExitTimer() {
+		this._exitTimer !== void 0 && (clearTimeout(this._exitTimer), this._exitTimer = void 0);
+	}
+	_setInnerInert(e) {
+		this.shadowRoot?.querySelector(".wui-collapse-inner")?.toggleAttribute("inert", e);
+	}
+	_contentContainer() {
+		return this.shadowRoot?.querySelector(".wui-collapse-content") ?? null;
+	}
+	_contentTrack() {
+		return this.shadowRoot?.querySelector(".wui-collapse-track") ?? null;
+	}
+	render() {
+		let e = {
+			"wui-collapse-track": !0,
+			"is-horizontal": this.horizontal
+		};
+		return a`
+      <div class="wui-collapse-trigger-wrapper" @slotchange=${this._onTriggerSlotChange}><slot></slot></div>
+      <div class="wui-collapse-content">
+        <div class=${u(e)} id=${this._contentId}>
+          <div class="wui-collapse-inner">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([c({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "open", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "horizontal", void 0), e([c({
+	type: Boolean,
+	reflect: !0,
+	attribute: "keep-mounted"
+})], p.prototype, "keepMounted", void 0), e([l(".wui-collapse-trigger-wrapper")], p.prototype, "_triggerWrapper", void 0), p = e([s("web-ui-collapse")], p);
+//#endregion
+export { p as WebUiCollapse };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/collapse/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\n\nconst EXIT_FALLBACK_BUFFER = 80\n\nlet collapseIdCounter = 0\n\n/**\n * 文档流内折叠面板：trigger 经默认 slot 提供，内容经 `slot=\"content\"` 提供。\n *\n * trigger 语义完全来自 slot 进来的交互元素（原生 button / web-ui-button 等）：\n * Enter/Space 激活走该元素的原生 click，不做 role=\"button\" 补齐；组件把\n * `aria-expanded` / `aria-controls` / `aria-disabled` 回写到首个 assigned\n * element（与 popover trigger 的既定回写模式一致）。wrapper 仅负责点击代理，\n * 不可聚焦，不承载 ARIA。\n *\n * 内容区在 shadow 内以 grid `0fr ↔ 1fr` track 过渡驱动高度/宽度动画（ADR-0038\n * 选型保留）。关闭稳态三态（消费者 light DOM 永不移动，hidden 全部命令式管理，\n * 避免渲染绑定在关闭动画起点抢先 display:none）：\n * - 默认：content 容器 `hidden`（display:none，脱离渲染与可访问性树）；\n * - `keep-mounted`：inner `inert`（保留在 0fr 轨道内，滚动位置与布局可测量）；\n * - 动画进行中：inner `inert` + track pointer-events 禁用，结束后进入对应稳态。\n */\n@customElement('web-ui-collapse')\nexport class WebUiCollapse extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  /** 展开状态；严格受控，唯一状态源。 */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** 禁用触发：点击忽略、aria-disabled 写入 trigger 元素；已展开内容保持现状。 */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** 水平方向：true 时沿宽度展开，默认沿高度。 */\n  @property({ type: Boolean, reflect: true }) horizontal = false\n\n  /** 关闭稳态保持内容 `inert` 而非 `hidden`（保留滚动位置，可测量）。 */\n  @property({ type: Boolean, reflect: true, attribute: 'keep-mounted' }) keepMounted = false\n\n  @query('.wui-collapse-trigger-wrapper') private _triggerWrapper!: HTMLElement\n\n  private _contentId = `wui-collapse-content-${++collapseIdCounter}`\n\n  private readonly _userOpenChange = new UserChangeController()\n\n  private _exitTimer?: ReturnType<typeof setTimeout>\n  // 动画代际：每次管线启动自增，旧管线的 transitionend/兜底定时器/rAF 全部失效。\n  private _generation = 0\n  private _lastOpen?: boolean\n\n  override connectedCallback() {\n    super.connectedCallback()\n    // 点击监听与生命周期同寿（宿主移除即整体销毁），无需 disconnected 清理。\n    this.addEventListener('click', this._onTriggerClick)\n    // 断连可能打断动画管线（瞬态残留：presence='closing'、容器未 hidden）。\n    // 首次连接不必处理（初始 render 走 _lastOpen===undefined 落稳态，请求多余\n    // 渲染会触发「scheduled an update after update completed」告警）；重连时\n    // 重置同步状态并强制一轮 update，由首次同步分支重新落稳态、丢弃在途管线。\n    if (this.hasUpdated) {\n      this._generation++\n      this._clearExitTimer()\n      this._lastOpen = undefined\n      this.requestUpdate()\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._clearExitTimer()\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    // ARIA 回写不依赖 open 分支，任何渲染后都保持与宿主状态同步。\n    this._syncTriggerAria()\n\n    // 首次同步（含 open 为默认值的场景，changed map 不含默认值属性）：\n    // 直接落到正确稳态，不播动画（popover 初始 open 同款）。\n    if (this._lastOpen === undefined) {\n      this._lastOpen = this.open\n      if (this.open) this._applyOpenSteadyState()\n      else this._applyClosedSteadyState()\n      return\n    }\n\n    if (changed.has('keepMounted') && !this.open) {\n      // 运行态切换 keep-mounted：关闭稳态需在 hidden/inert 间重新落地。\n      this._applyClosedSteadyState()\n    }\n    if (!changed.has('open') || this.open === this._lastOpen) return\n\n    this._lastOpen = this.open\n    if (this._userOpenChange.consume()) this._dispatchChange(this.open)\n    if (this.open) this._beginExpand()\n    else this._beginCollapse()\n  }\n\n  show() {\n    if (this.open) return\n    this.open = true\n  }\n\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  // ===== trigger slot =====\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  /*\n   * 点击代理：冒泡路径穿过 trigger wrapper 的 click 一律切换。语义由 slot 内\n   * 的交互元素（原生 button / web-ui-button）提供；slot 放纯文本时无激活语义\n   * （README 约定）。内容区与嵌套内层 collapse 的 click 不经过本 wrapper，天然隔离。\n   */\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    if (!event.composedPath().includes(this._triggerWrapper)) return\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  /*\n   * Trigger 元素取首个 assigned element（与 popover `_queryTrigger` 同款惰性查询，\n   * 不依赖 slotchange——jsdom 不派发该事件，无法用状态缓存）。slot 为空时无回写目标。\n   */\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('.wui-collapse-trigger-wrapper slot')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  /*\n   * slot 内容增删不触发宿主响应式更新：显式请求一轮渲染，由 updated() 的\n   * ARIA 回写覆盖晚到的 trigger 元素（slotchange 在 jsdom 不派发，无法监听）。\n   */\n  private readonly _onTriggerSlotChange = () => {\n    this.requestUpdate()\n  }\n\n  // ARIA 状态回写到 trigger 元素本身（wrapper 不可聚焦，AT 读不到）。\n  private _syncTriggerAria() {\n    const trigger = this._queryTrigger()\n    if (!trigger) return\n    trigger.setAttribute('aria-expanded', String(this.open))\n    trigger.setAttribute('aria-controls', this._contentId)\n    if (this.disabled) trigger.setAttribute('aria-disabled', 'true')\n    else trigger.removeAttribute('aria-disabled')\n  }\n\n  // ===== 内容区动画管线（三态语义自 ADR-0038 迁移） =====\n\n  private _applyOpenSteadyState() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (container) container.hidden = false\n    if (track) {\n      track.dataset.wuiPresence = 'open'\n      this._setInnerInert(false)\n    }\n  }\n\n  private _applyClosedSteadyState() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted) {\n      if (container) container.hidden = false\n      this._setInnerInert(true)\n      return\n    }\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  private _beginExpand() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (!container || !track) return\n\n    const generation = this._generation\n    // 中断关闭动画时 inner 已 inert：先恢复可交互，内容随展开重新可见。\n    this._setInnerInert(false)\n    // 从 display:none 进入时无先前计算样式可过渡：提交 0fr 起点后再翻转。\n    container.hidden = false\n    void track.offsetWidth\n\n    requestAnimationFrame(() => {\n      if (generation !== this._generation || !this.open) return\n      track.dataset.wuiPresence = 'open'\n      this._awaitTransition(track, generation, () => this._settle(true))\n    })\n  }\n\n  private _beginCollapse() {\n    this._generation++\n    this._clearExitTimer()\n    const track = this._contentTrack()\n    if (!track) return\n\n    // 收起期间立即阻断交互，防止焦点落入正在消失的区域。\n    this._setInnerInert(true)\n    track.dataset.wuiPresence = 'closing'\n    const generation = this._generation\n    this._awaitTransition(track, generation, () => this._settle(false))\n  }\n\n  // 关闭稳态：keep-mounted → 内容保留在 0fr 轨道内并 inert；默认 → 容器 hidden。\n  private _settle(open: boolean) {\n    this._clearExitTimer()\n    if (open) {\n      this._setInnerInert(false)\n      return\n    }\n    // 落稳态必须清除 closing 瞬态标记：否则 track 永久保留 pointer-events:none\n    // 与 exit 过渡配置（keep-mounted 分支同样清除，避免残留）。\n    const track = this._contentTrack()\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted) return\n    const container = this._contentContainer()\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  // 等待 grid-template-rows/columns 过渡结束；时长为 0（reduced motion、jsdom）\n  // 直接稳态，transitionend 不触发时按时长 + 缓冲兜底。\n  private _awaitTransition(track: HTMLElement, generation: number, onDone: () => void) {\n    const duration = getTransitionDuration(track, 0)\n    if (duration === 0) {\n      if (generation === this._generation) onDone()\n      return\n    }\n\n    let settled = false\n    const finish = () => {\n      track.removeEventListener('transitionend', onTransitionEnd)\n      if (this._exitTimer === timer) this._exitTimer = undefined\n      clearTimeout(timer)\n      // 过渡可能被属性匹配的后续动画触发（如中断重开）：代际不符时静默退场。\n      if (settled || generation !== this._generation) return\n      settled = true\n      onDone()\n    }\n    const timer = setTimeout(finish, duration + EXIT_FALLBACK_BUFFER)\n    this._exitTimer = timer\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (\n        event.target === track &&\n        (event.propertyName === 'grid-template-rows' || event.propertyName === 'grid-template-columns')\n      )\n        finish()\n    }\n    track.addEventListener('transitionend', onTransitionEnd)\n  }\n\n  private _clearExitTimer() {\n    if (this._exitTimer !== undefined) {\n      clearTimeout(this._exitTimer)\n      this._exitTimer = undefined\n    }\n  }\n\n  private _setInnerInert(inert: boolean) {\n    this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-inner')?.toggleAttribute('inert', inert)\n  }\n\n  private _contentContainer(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-content') ?? null\n  }\n\n  private _contentTrack(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-track') ?? null\n  }\n\n  override render() {\n    // 三态由 data-wui-presence 驱动（open/closing），缺省即关闭稳态。\n    const trackClass = {\n      'wui-collapse-track': true,\n      'is-horizontal': this.horizontal\n    }\n\n    return html`\n      <div class=\"wui-collapse-trigger-wrapper\" @slotchange=${this._onTriggerSlotChange}><slot></slot></div>\n      <div class=\"wui-collapse-content\">\n        <div class=${classMap(trackClass)} id=${this._contentId}>\n          <div class=\"wui-collapse-inner\">\n            <slot name=\"content\"></slot>\n          </div>\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-collapse': WebUiCollapse\n  }\n}\n"],"mappings":"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"}

package/dist/components/collapse/style.js

@@ -0,0 +1,6 @@
+//#region src/components/collapse/style.css?inline
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.wui-collapse-track{transition:grid-template-rows var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:0fr;display:grid}.wui-collapse-track.is-horizontal{width:max-content;transition:grid-template-columns var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:none;grid-template-columns:0fr}.wui-collapse-track[data-wui-presence=open]{grid-template-rows:1fr}.wui-collapse-track[data-wui-presence=open].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-track[data-wui-presence=closing]{pointer-events:none;transition:grid-template-rows var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-presence=closing].is-horizontal{transition:grid-template-columns var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-inner{min-height:0;overflow:hidden}.is-horizontal .wui-collapse-inner{min-width:0}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/collapse/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/*\n * :host 仅限 display/contain（ADR-0003）。\n * headless 内核（ADR-0039）：不携带视觉样式，trigger 与内容的排版由消费者\n * 提供；这里只保留动画与三态关闭稳态必需的结构规则。\n */\n:host {\n  display: block;\n}\n\n/*\n * grid 0fr↔1fr 高度动画（ADR-0038 选型）：\n * 轨道行高在 0fr（收起）与 1fr（展开）间过渡，内容高度自适应、零 JS 测量；\n * inner 的 min-height/min-width 归零是轨道能收缩到 0 的必要条件，\n * overflow hidden 负责裁剪收起中的内容。\n */\n.wui-collapse-track {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--wui-duration-collapse-enter, 200ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  /*\n   * 水平方向：块级 grid 默认撑满可用宽度，1fr 列会解析为剩余空间而非内容宽度；\n   * width: max-content 让 1fr 列按内容 max-content 贡献解析（与行向 auto 高度同理），\n   * 0fr 收缩依赖 inner 的 min-width: 0。\n   */\n  &.is-horizontal {\n    grid-template-columns: 0fr;\n    grid-template-rows: none;\n    width: max-content;\n    transition: grid-template-columns var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n.wui-collapse-track[data-wui-presence='open'] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n.wui-collapse-track[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition: grid-template-rows var(--wui-duration-collapse-exit, 160ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &.is-horizontal {\n    transition: grid-template-columns var(--wui-duration-collapse-exit, 160ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n.wui-collapse-inner {\n  overflow: hidden;\n  min-height: 0;\n}\n\n.is-horizontal .wui-collapse-inner {\n  min-width: 0;\n}\n"],"mappings":""}

package/dist/components/context-menu/index.d.ts

@@ -8,16 +8,20 @@ export declare class WebUiContextMenu extends LitElement {
     private _y;
     private _activeSubmenus;
     private _activeSubmenuItems;
+    private readonly _submenuPositionEpochs;
     private readonly _closingSubmenus;
     private _submenuTimer?;
     private _ignoreOutsideClick;
     private _ignoreOutsideClickTimer?;
     private _hoverCleanupFns;
     private _menu?;
+    private readonly _menuItemAnchors;
     private readonly _scrollLock;
     private readonly _userOpenChange;
     private _restoreFocusTarget?;
     private _shouldOpenInstantly;
+    private _refreshScheduled;
+    private readonly _contentObserver;
     get isOpen(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -36,9 +40,33 @@ export declare class WebUiContextMenu extends LitElement {
      */
     close(): void;
     private readonly _closeFromUser;
+    private _scheduleRefresh;
+    private _refreshMenu;
     private _positionMenu;
+    private _positionMenuInViewport;
+    private _applyMenuPosition;
     private _focusFirstItem;
     private _setupMenuItems;
+    /**
+     * 捕获框架 v-if 注释锚点相对其后继元素的绑定，供重排后复位。
+     * 后继以 nextElementSibling 解析（跳过注释/文本，多个相邻锚点绑定同一后继）。
+     * 锚点在 content 末尾、无后继元素时记为 null（尾部锚点，复位时保持末尾）。
+     */
+    private _captureFrameworkAnchors;
+    /**
+     * 把锚点复位到捕获时其后继元素之前（尾部锚点保持末尾）。
+     * 元素重排用 insertBefore/appendChild 不会移动注释，锚点必须显式复位，
+     * 否则脱离模板位置后 Vue 下次 v-if 翻转会把新分支项插到错误插入点。
+     */
+    private _restoreFrameworkAnchors;
+    /**
+     * 全集 reconcile：以「content 现有元素 ∪ 宿主元素」为托管全集。
+     * 框架（如 Vue 的 v-if 翻转）可能不经宿主直接改写 portal 内节点——卸载旧项留下
+     * 注释锚点、把新项直接插进 content——它们都会被这里收编（补 marker + 补隐藏），
+     * 已被框架删除/移出两处的条目则被清理。
+     */
+    private _syncManagedItems;
+    private _orderMenuItems;
     private _returnItemsToSlot;
     private _closeMenuAfterPresence;
     private _hideMenuItems;
@@ -71,6 +99,7 @@ export declare class WebUiContextMenu extends LitElement {
     private _focusMenuItem;
     private _isMenuPanelEvent;
     render(): import('lit').TemplateResult<1>;
+    private _onSlotChange;
     readonly $events: {
         'open-change': CustomEvent<{
             open: boolean;