@greypan/web-ui 3.0.1 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-button-group')\nexport class WebUiButtonGroup extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'horizontal')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal'\n\n  override updated() {\n    this.syncChildButtons()\n  }\n\n  private syncChildButtons() {\n    const buttons = this.querySelectorAll<HTMLElement & { variant: string }>('web-ui-button')\n    const isVertical = this.direction === 'vertical'\n    for (const [i, btn] of [...buttons].entries()) {\n      if (!btn.hasAttribute('group')) btn.setAttribute('group', '')\n      btn.variant = 'glass'\n      btn.style.setProperty('--wui-button-size', '32px')\n      btn.setAttribute('direction', isVertical ? 'vertical' : 'horizontal')\n      const isLast = i === buttons.length - 1\n      btn.toggleAttribute('last', isLast)\n      btn.style.setProperty('--wui-button-divider-width', isLast ? '0px' : '1px')\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-button-group-inner\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button-group': WebUiButtonGroup\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAYC,aAAA,KAAA,aAAA;;;EAXvB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,YAAY,GACtE,KAAK,cAAc,aAAa,CAAG;CACrC;CAGA,UAAmB;EACjB,KAAK,iBAAiB;CACxB;CAEA,mBAA2B;EACzB,IAAM,IAAU,KAAK,iBAAoD,eAAe,GAClF,IAAa,KAAK,cAAc;EACtC,KAAK,IAAM,CAAC,GAAG,MAAQ,CAAC,GAAG,CAAO,CAAC,CAAC,QAAQ,GAAG;GAI7C,AAHK,EAAI,aAAa,OAAO,KAAG,EAAI,aAAa,SAAS,EAAE,GAC5D,EAAI,UAAU,SACd,EAAI,MAAM,YAAY,qBAAqB,MAAM,GACjD,EAAI,aAAa,aAAa,IAAa,aAAa,YAAY;GACpE,IAAM,IAAS,MAAM,EAAQ,SAAS;GAEtC,AADA,EAAI,gBAAgB,QAAQ,CAAM,GAClC,EAAI,MAAM,YAAY,8BAA8B,IAAS,QAAQ,KAAK;EAC5E;CACF;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AACF;AApCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAJ1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { defineGroupPresentation, GroupController, type ButtonGroupContext } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiButton } from '../button'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-button-group')\nexport class WebUiButtonGroup extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'horizontal')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal'\n\n  private readonly _groupController = new GroupController(\n    this,\n    defineGroupPresentation<WebUiButton, ButtonGroupContext>({\n      getItems: () => [...this.querySelectorAll<WebUiButton>('web-ui-button')],\n      getContext: (_, index, buttons) => ({\n        direction: this.direction,\n        isLast: index === buttons.length - 1\n      })\n    }).make()\n  )\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-button-group-inner\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button-group': WebUiButtonGroup\n  }\n}\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAcX,aAFY,KAAA,aAAA,cAEZ,KAAA,mBAAA,IAAI,EACtC,MACA,EAAyD;GACvD,gBAAgB,CAAC,GAAG,KAAK,iBAA8B,eAAe,CAAC;GACvE,aAAa,GAAG,GAAO,OAAa;IAClC,WAAW,KAAK;IAChB,QAAQ,MAAU,EAAQ,SAAS;GACrC;EACF,CAAC,CAAC,CAAC,KAAK,CACV;;;EAtByB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,YAAY,GACtE,KAAK,cAAc,aAAa,CAAG;CACrC;CAcA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAJ1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}

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

@@ -2,9 +2,7 @@ import { LitElement } from 'lit';
 export declare class WebUiCheckbox extends LitElement {
     static styles: import('lit').CSSResult;
     static formAssociated: boolean;
-    private _internals?;
-    private _formDisabled;
-    private _groupDisabled;
+    private readonly _groupManagement;
     private _checked;
     get checked(): boolean;
     set checked(v: boolean);
@@ -14,12 +12,11 @@ export declare class WebUiCheckbox extends LitElement {
     required: boolean;
     private get _isDisabled();
     private get _isManagedByGroup();
-    setGroupDisabled(disabled: boolean): void;
-    connectedCallback(): void;
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
-    updated(): void;
-    private _syncFormValue;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private _syncValidity;
     private handleClick;
     private handleKeyDown;

package/dist/components/checkbox/index.js

@@ -1,17 +1,35 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/heroicons-check-16-solid.js";
-import n from "./style.js";
-import { LitElement as r, html as i, unsafeCSS as a } from "lit";
-import { customElement as o, property as s, state as c } from "lit/decorators.js";
-import { classMap as l } from "lit/directives/class-map.js";
+import { FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
+import { defineGroupManaged 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";
+import { classMap as f } from "lit/directives/class-map.js";
 //#region src/components/checkbox/index.ts
-var u = class extends r {
+var p = class extends o {
 	constructor(...e) {
-		super(...e), this._formDisabled = !1, this._groupDisabled = !1, this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1;
+		super(...e), this._groupManagement = i(this, { requestUpdate: () => this.requestUpdate() }).make(), this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1, this._formAssociation = r({
+			host: this,
+			initialize: () => {
+				this.hasAttribute("checked") && (this._checked = !0);
+			},
+			getState: () => this._checked,
+			setState: (e) => {
+				this.checked = e;
+			},
+			getFormValue: () => !this._isManagedByGroup && this._checked ? this.value || "on" : null,
+			getFormState: () => String(this._checked),
+			restoreState: (e) => {
+				typeof e == "string" && (this.checked = e === "true");
+			},
+			isStateManaged: () => this._isManagedByGroup,
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new n(this, this._formAssociation);
 	}
 	static {
-		this.styles = a(n);
+		this.styles = c(a);
 	}
 	static {
 		this.formAssociated = !0;
@@ -21,45 +39,37 @@ var u = class extends r {
 	}
 	set checked(e) {
 		let t = this._checked;
-		this._checked = e, this._syncFormValue(), this.requestUpdate("checked", t);
+		this._checked = e, this._formAssociation.sync(), this.requestUpdate("checked", t);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled || this._groupDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === !0;
 	}
 	get _isManagedByGroup() {
-		return this.closest("web-ui-checkbox-group") !== null;
-	}
-	setGroupDisabled(e) {
-		this._groupDisabled = e;
-	}
-	connectedCallback() {
-		super.connectedCallback(), !this._internals && (this._internals = this.attachInternals(), this.hasAttribute("checked") && (this._checked = !0), this._syncFormValue());
+		return this._groupManagement.getContext() !== void 0;
 	}
 	formResetCallback() {
-		this.checked = this.hasAttribute("checked");
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
-	}
-	updated() {
-		this._syncFormValue(), this._syncValidity();
+		this._formAssociation.setDisabled(e);
 	}
-	_syncFormValue() {
-		this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || "on" : null);
+	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._isManagedByGroup || !this.required || this._checked) {
-				this._internals.setValidity({});
+				e.setValidity({});
 				return;
 			}
-			this._internals.setValidity({ valueMissing: !0 }, "请选择此项");
+			e.setValidity({ valueMissing: !0 }, "请选择此项");
 		}
 	}
 	handleClick() {
 		if (this._isDisabled) return;
 		let e = this._checked;
-		this._checked = !e, this._syncFormValue(), this.requestUpdate("checked", e);
+		this._checked = !e, this._formAssociation.sync(), this.requestUpdate("checked", e);
 		let t = this._isManagedByGroup ? {
 			bubbles: !1,
 			composed: !1
@@ -73,13 +83,14 @@ var u = class extends r {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
 	}
 	render() {
-		return i`
-      <label
-        class=${l({
+		let e = {
 			"wui-checkbox": !0,
 			"is-checked": this._checked,
 			"is-disabled": this._isDisabled
-		})}
+		};
+		return s`
+      <label
+        class=${f(e)}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="checkbox"
         aria-checked=${String(this._checked)}
@@ -97,17 +108,17 @@ var u = class extends r {
     `;
 	}
 };
-e([c()], u.prototype, "_formDisabled", void 0), e([c()], u.prototype, "_groupDisabled", void 0), e([c()], u.prototype, "_checked", void 0), e([s({ type: String })], u.prototype, "value", void 0), e([s({
+e([d()], p.prototype, "_checked", void 0), e([u({ type: String })], p.prototype, "value", void 0), e([u({
 	type: String,
 	reflect: !0
-})], u.prototype, "name", void 0), e([s({
+})], p.prototype, "name", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "disabled", void 0), e([s({
+})], p.prototype, "disabled", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "required", void 0), u = e([o("web-ui-checkbox")], u);
+})], p.prototype, "required", void 0), p = e([l("web-ui-checkbox")], p);
 //#endregion
-export { u as WebUiCheckbox };
+export { p as WebUiCheckbox };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox/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 '@/components/icon'\nimport { heroiconsCheck16Solid } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox 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-checkbox-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) return\n    const old = this._checked\n    this._checked = !old\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\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-checkbox': 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=\"checkbox\"\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-checkbox-box\">\n          <span class=\"wui-checkbox-icon\"\n            ><web-ui-icon .icon=${heroiconsCheck16Solid} size=\"18\" color=\"#fff\"></web-ui-icon\n          ></span>\n        </span>\n        <span class=\"wui-checkbox-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-checkbox': WebUiCheckbox\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox/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 '@/components/icon'\nimport { heroiconsCheck16Solid } from '@/icons'\nimport { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, type SelectionGroupContext } from '@/shared/group-management'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    requestUpdate: () => this.requestUpdate()\n  }).make()\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._formAssociation.sync()\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 (\n      this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === true\n    )\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this._groupManagement.getContext() !== undefined\n  }\n\n  private readonly _formAssociation = defineFormAssociation<boolean>({\n    host: this,\n    initialize: () => {\n      if (this.hasAttribute('checked')) this._checked = true\n    },\n    getState: () => this._checked,\n    setState: checked => {\n      this.checked = checked\n    },\n    getFormValue: () => (!this._isManagedByGroup && this._checked ? this.value || 'on' : null),\n    getFormState: () => String(this._checked),\n    restoreState: state => {\n      if (typeof state === 'string') this.checked = state === 'true'\n    },\n    isStateManaged: () => this._isManagedByGroup,\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  }\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._isManagedByGroup || !this.required || this._checked) {\n      internals.setValidity({})\n      return\n    }\n    internals.setValidity({ valueMissing: true }, '请选择此项')\n  }\n\n  // 用户点击切换\n  private handleClick() {\n    if (this._isDisabled) return\n    const old = this._checked\n    this._checked = !old\n    this._formAssociation.sync()\n    this.requestUpdate('checked', old)\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-checkbox': 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=\"checkbox\"\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-checkbox-box\">\n          <span class=\"wui-checkbox-icon\"\n            ><web-ui-icon .icon=${heroiconsCheck16Solid} size=\"18\" color=\"#fff\"></web-ui-icon\n          ></span>\n        </span>\n        <span class=\"wui-checkbox-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-checkbox': WebUiCheckbox\n  }\n}\n"],"mappings":"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"}

package/dist/components/checkbox/style.js

@@ -1,5 +1,5 @@
 //#region src/components/checkbox/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}.wui-checkbox{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}.wui-checkbox:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}.wui-checkbox.is-disabled{cursor:not-allowed;color:var(--wui-color-text-muted,#6a6a6a);opacity:.4}.wui-checkbox-box{background-color:var(--wui-color-surface-raised,#f2f2f7);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .2s,border-color .2s;display:flex}.is-checked .wui-checkbox-box{border-color:var(--wui-color-accent,#08f);background-color:var(--wui-color-accent,#08f)}.wui-checkbox-icon{opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));font-size:0;line-height:0;display:block;overflow:hidden;transform:scale(.85)}.is-checked .wui-checkbox-icon{opacity:1;transform:scale(1)}.wui-checkbox-label{pointer-events:none}@media (prefers-reduced-motion:reduce){.wui-checkbox-icon,.is-checked .wui-checkbox-icon{transform:none}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}.wui-checkbox{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}.wui-checkbox:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}.wui-checkbox.is-disabled{cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}.wui-checkbox-box{background-color:var(--wui-color-surface-raised,#f2f2f7);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .2s,border-color .2s;display:flex}.is-checked .wui-checkbox-box{border-color:var(--wui-color-accent,#08f);background-color:var(--wui-color-accent,#08f)}.wui-checkbox-icon{opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));font-size:0;line-height:0;display:block;overflow:hidden;transform:scale(.85)}.is-checked .wui-checkbox-icon{opacity:1;transform:scale(1)}.wui-checkbox-label{pointer-events:none}@media (prefers-reduced-motion:reduce){.wui-checkbox-icon,.is-checked .wui-checkbox-icon{transform:none}}";
 //#endregion
 export { e as default };
 

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: 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: 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/context-menu/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import { hideOverlayPresence as t, showOverlayPresence as n } from "../../shared/overlay/presence.js";
 import { defineScrollLockLease as r } from "../../shared/scroll-lock/scroll-lock.js";
 import "../dropdown-divider/index.js";
@@ -118,7 +118,7 @@ var b = class extends m {
 		this._openAt(e, t, !0);
 	}
 	_openAt(e, t, n) {
-		return this.disabled ? !1 : (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._ignoreCurrentOutsideClick(), this._isOpen ? (requestAnimationFrame(() => this._positionMenu()), !1) : (this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : void 0, this._isOpen = !0, !0));
+		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._ignoreCurrentOutsideClick(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._restoreClosingSubmenus(), requestAnimationFrame(() => this._positionMenu()), !1) : (this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : void 0, this._isOpen = !0, !0));
 	}
 	close() {
 		this._isOpen &&= !1;
@@ -130,7 +130,7 @@ var b = class extends m {
 		let { width: t, height: n } = e.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = this._x, o = this._y;
 		a + t > r && (a = r - t - 8), o + n > i && (o = i - n - 8), a < 0 && (a = 8), o < 0 && (o = 8), e.style.left = `${a}px`, e.style.top = `${o}px`;
 		let s = a < this._x ? "right" : "left", c = o < this._y ? "bottom" : "top";
-		e.style.setProperty("--wui-overlay-transform-origin", `${c} ${s}`), e.style.visibility = "";
+		e.style.setProperty("--wui-internal-overlay-transform-origin", `${c} ${s}`), e.style.visibility = "";
 	}
 	_focusFirstItem() {
 		let e = this._menu?.content.querySelectorAll("web-ui-dropdown-item:not([disabled])")?.[0];
@@ -161,10 +161,9 @@ var b = class extends m {
 			this._closingSubmenus.delete(e), this._activeSubmenus[r] = i, this._activeSubmenuItems[r] = e, e.setAttribute("active", ""), this._positionSubmenu(e, i), n(i.panel, { isInstant: t }), this._bindLevelHovers();
 			return;
 		}
-		let o = l(e);
-		if (o.length === 0) return;
-		let s = a("context-submenu", this);
-		s.panel.dataset.level = String(r), s.panel.setAttribute("role", "menu"), s.panel.setAttribute("aria-label", "子菜单"), s.panel.style.visibility = "hidden", s.panel.addEventListener("click", this._onMenuClick), s.content.append(...o), this._activeSubmenus[r] = s, this._activeSubmenuItems[r] = e, e.setAttribute("active", ""), this._positionSubmenu(e, s), n(s.panel, { isInstant: t }), this._bindLevelHovers();
+		if (l(e).length === 0) return;
+		let o = a("context-submenu", this);
+		o.panel.dataset.level = String(r), o.panel.setAttribute("role", "menu"), o.panel.setAttribute("aria-label", "子菜单"), o.panel.style.visibility = "hidden", o.panel.addEventListener("click", this._onMenuClick), f(e, o.content), this._activeSubmenus[r] = o, this._activeSubmenuItems[r] = e, e.setAttribute("active", ""), this._positionSubmenu(e, o), n(o.panel, { isInstant: t }), this._bindLevelHovers();
 	}
 	_closeSubmenusFrom(e, t = !1) {
 		for (let n = this._activeSubmenus.length - 1; n >= e; n--) {
@@ -191,7 +190,7 @@ var b = class extends m {
 	}
 	_positionSubmenu(e, t) {
 		let n = e.getBoundingClientRect(), r = t.panel.getBoundingClientRect(), i = n.right + r.width + 8 <= window.innerWidth, a = i ? n.right : Math.max(8, n.left - r.width), o = Math.min(Math.max(8, n.top), window.innerHeight - r.height - 8);
-		t.panel.style.left = `${a}px`, t.panel.style.top = `${o}px`, t.panel.style.setProperty("--wui-overlay-transform-origin", i ? "top left" : "top right"), t.panel.style.visibility = "";
+		t.panel.style.left = `${a}px`, t.panel.style.top = `${o}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", i ? "top left" : "top right"), t.panel.style.visibility = "";
 	}
 	_dispatchChange(e) {
 		this.dispatchEvent(new CustomEvent("open-change", {