@greypan/web-ui 3.0.1 → 5.0.0

package/dist/components/switch/index.js

@@ -1,18 +1,37 @@
-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/lucide-loader-circle.js";
 import n from "../../assets/glass.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, state as l } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
+import { FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
+import { attachDragGesture as a } from "../../shared/gesture/drag-gesture.js";
+import { clamp as o, normalizeProgress as s } from "../../shared/gesture/physics.js";
+import c from "./style.js";
+import { LitElement as l, html as u, unsafeCSS as d } from "lit";
+import { customElement as f, property as p, state as m } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { styleMap as g } from "lit/directives/style-map.js";
 //#region src/components/switch/index.ts
-var d = class extends i {
+var _ = class extends l {
 	constructor(...e) {
-		super(...e), this._formDisabled = !1, this._checked = !1, this.name = "", this.value = "", this.disabled = !1, this.required = !1, this.loading = !1, this.pressed = !1;
+		super(...e), this._checked = !1, this.name = "", this.value = "", this.disabled = !1, this.required = !1, this.loading = !1, this._pressed = !1, this._isDragging = !1, this._dragOffset = 0, this._dragProgress = 0, this._dragged = !1, this._maxTravel = 20, this._startOffset = 0, this._dragGestureHandle = null, this._formAssociation = i({
+			host: this,
+			initialize: () => {
+				this.hasAttribute("checked") && (this._checked = !0);
+			},
+			getState: () => this._checked,
+			setState: (e) => {
+				this.checked = e;
+			},
+			getFormValue: () => this._checked ? this.value || "on" : null,
+			getFormState: () => String(this._checked),
+			restoreState: (e) => {
+				typeof e == "string" && (this.checked = e === "true");
+			},
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new r(this, this._formAssociation);
 	}
 	static {
-		this.styles = [o(n), o(r)];
+		this.styles = [d(n), d(c)];
 	}
 	static {
 		this.formAssociated = !0;
@@ -22,30 +41,35 @@ var d = class extends i {
 	}
 	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;
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null;
 	}
-	connectedCallback() {
-		super.connectedCallback(), !this._internals && (this._internals = this.attachInternals(), this.hasAttribute("checked") && (this._checked = !0), this._syncFormValue());
+	get _isDisabled() {
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	formResetCallback() {
-		this.checked = this.hasAttribute("checked");
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
+		this._formAssociation.setDisabled(e);
 	}
-	updated() {
-		this._syncFormValue(), !(!this._internals || typeof this._internals.setValidity != "function") && (this._isDisabled || !this.required || this._checked ? this._internals.setValidity({}) : this._internals.setValidity({ valueMissing: !0 }, "请启用此项"));
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
-	_syncFormValue() {
-		this._internals?.setFormValue?.(this._checked ? this.value || "on" : null);
+	_syncValidity() {
+		let e = this._formAssociation.getInternals();
+		!e || typeof e.setValidity != "function" || (this._isDisabled || !this.required || this._checked ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "请启用此项"));
 	}
 	handleClick(e) {
-		if (e.preventDefault(), this._isDisabled || this.loading) return;
+		if (e.preventDefault(), this._dragged) {
+			this._dragged = !1;
+			return;
+		}
+		if (this._isDisabled || this.loading) return;
 		let t = this._checked;
-		this._checked = !t, this._syncFormValue(), this.requestUpdate("checked", t), this.dispatchEvent(new Event("input", {
+		this._checked = !t, this._formAssociation.sync(), this.requestUpdate("checked", t), this.dispatchEvent(new Event("input", {
 			bubbles: !0,
 			composed: !0
 		})), this.dispatchEvent(new Event("change", {
@@ -53,28 +77,65 @@ var d = class extends i {
 			composed: !0
 		}));
 	}
-	handlePointerDown() {
-		this._isDisabled || this.loading || (this.pressed = !0);
+	handlePointerDown(e) {
+		if (this._isDisabled || this.loading) return;
+		this._pressed = !0;
+		let t = this.renderRoot.querySelector(".wui-switch-track");
+		if (t) {
+			let e = t.getBoundingClientRect().width || 40;
+			this._maxTravel = Math.max(1, e - 4 - 20);
+		} else this._maxTravel = 16;
+		this._startOffset = this._checked ? this._maxTravel : 0, this._dragOffset = this._startOffset, this._dragProgress = +!!this._checked, this._dragGestureHandle?.destroy(), this._dragGestureHandle = a(e, {
+			axis: "x",
+			threshold: 6,
+			onMove: (e) => {
+				this._isDragging = !0;
+				let t = o(this._startOffset + e.deltaX, 0, this._maxTravel);
+				this._dragOffset = t, this._dragProgress = s(t, 0, this._maxTravel), this.requestUpdate();
+			},
+			onEnd: (e) => {
+				let t = this._isDragging;
+				if (this._isDragging = !1, this._pressed = !1, t) {
+					this._dragged = !0;
+					let t = this._checked;
+					if (t = e.velocityX > 300 ? !0 : e.velocityX < -300 ? !1 : this._dragProgress >= .5, t !== this._checked) {
+						let e = this._checked;
+						this._checked = t, this._formAssociation.sync(), this.requestUpdate("checked", e), this.dispatchEvent(new Event("input", {
+							bubbles: !0,
+							composed: !0
+						})), this.dispatchEvent(new Event("change", {
+							bubbles: !0,
+							composed: !0
+						}));
+					} else this.requestUpdate();
+				}
+			},
+			onCancel: () => {
+				this._isDragging = !1, this._pressed = !1, this.requestUpdate();
+			}
+		});
 	}
 	handlePointerUp() {
-		this.pressed = !1;
+		this._pressed = !1;
 	}
 	handlePointerLeave() {
-		this.pressed = !1;
+		this._isDragging || (this._pressed = !1);
 	}
 	render() {
 		let e = {
 			"wui-switch-track": !0,
-			"is-open": this._checked,
+			"is-open": this._isDragging ? this._dragProgress >= .5 : this._checked,
+			"is-dragging": this._isDragging,
 			"is-disabled": this._isDisabled || this.loading
 		}, n = {
 			"wui-switch-thumb": !0,
-			"wui-glass": this.pressed,
-			"is-pressed": this.pressed
-		};
-		return a`
+			"wui-glass": this._pressed || this._isDragging,
+			"is-pressed": this._pressed || this._isDragging
+		}, r = this._isDragging ? { "--wui-switch-drag-offset": `${this._dragOffset}px` } : {};
+		return u`
       <label
-        class=${u(e)}
+        class=${h(e)}
+        style=${g(r)}
         role="switch"
         aria-checked=${String(this._checked)}
         @click=${this.handleClick}
@@ -89,29 +150,29 @@ var d = class extends i {
           ?disabled=${this._isDisabled || this.loading}
           class="sr-only"
         />
-        <div class=${u(n)}>
-          ${this.loading ? a`<div class="wui-switch-loading">
-                <web-ui-icon .icon=${t} size="14" color="#08f" spin></web-ui-icon>
-              </div>` : ""}
+        <div class=${h(n)}>
+          ${this.loading ? u`<div class="wui-switch-loading">
+                  <web-ui-icon .icon=${t} size="14" color="#08f" spin></web-ui-icon>
+                </div>` : ""}
         </div>
       </label>
     `;
 	}
 };
-e([l()], d.prototype, "_formDisabled", void 0), e([l()], d.prototype, "_checked", void 0), e([c({
+e([m()], _.prototype, "_checked", void 0), e([p({
 	type: String,
 	reflect: !0
-})], d.prototype, "name", void 0), e([c({ type: String })], d.prototype, "value", void 0), e([c({
+})], _.prototype, "name", void 0), e([p({ type: String })], _.prototype, "value", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "disabled", void 0), e([c({
+})], _.prototype, "disabled", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "required", void 0), e([c({
+})], _.prototype, "required", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "loading", void 0), e([l()], d.prototype, "pressed", void 0), d = e([s("web-ui-switch")], d);
+})], _.prototype, "loading", void 0), e([m()], _.prototype, "_pressed", void 0), e([m()], _.prototype, "_isDragging", void 0), e([m()], _.prototype, "_dragOffset", void 0), e([m()], _.prototype, "_dragProgress", void 0), _ = e([f("web-ui-switch")], _);
 //#endregion
-export { d as WebUiSwitch };
+export { _ as WebUiSwitch };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/switch/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 glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-switch')\nexport class WebUiSwitch extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n  static formAssociated = true\n\n  private _internals?: ElementInternals\n  @state() private _formDisabled = false\n\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, reflect: true }) name = ''\n  @property({ type: String }) value = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: Boolean, reflect: true }) loading = false\n  @state() private pressed = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\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    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._checked) this._internals.setValidity({})\n    else this._internals.setValidity({ valueMissing: true }, '请启用此项')\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(this._checked ? this.value || 'on' : null)\n  }\n\n  // 用户点击切换开关状态，阻止 label 默认行为避免原生 checkbox 重复触发\n  private handleClick(e: Event) {\n    e.preventDefault()\n    if (this._isDisabled || this.loading) return\n    const old = this._checked\n    this._checked = !old\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handlePointerDown() {\n    if (this._isDisabled || this.loading) return\n    this.pressed = true\n  }\n\n  private handlePointerUp() {\n    this.pressed = false\n  }\n\n  private handlePointerLeave() {\n    this.pressed = false\n  }\n\n  override render() {\n    const trackCls = {\n      'wui-switch-track': true,\n      'is-open': this._checked,\n      'is-disabled': this._isDisabled || this.loading\n    }\n    const thumbCls = {\n      'wui-switch-thumb': true,\n      'wui-glass': this.pressed,\n      'is-pressed': this.pressed\n    }\n\n    return html`\n      <label\n        class=${classMap(trackCls)}\n        role=\"switch\"\n        aria-checked=${String(this._checked)}\n        @click=${this.handleClick}\n        @pointerdown=${this.handlePointerDown}\n        @pointerup=${this.handlePointerUp}\n        @pointercancel=${this.handlePointerUp}\n        @pointerleave=${this.handlePointerLeave}\n      >\n        <input\n          type=\"checkbox\"\n          .checked=${this._checked}\n          ?disabled=${this._isDisabled || this.loading}\n          class=\"sr-only\"\n        />\n        <div class=${classMap(thumbCls)}>\n          ${this.loading\n            ? html`<div class=\"wui-switch-loading\">\n                <web-ui-icon .icon=${lucideLoaderCircle} size=\"14\" color=\"#08f\" spin></web-ui-icon>\n              </div>`\n            : ''}\n        </div>\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-switch': WebUiSwitch\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/switch/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'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp, normalizeProgress } from '@/shared/gesture/physics'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-switch')\nexport class WebUiSwitch extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n  static formAssociated = true\n\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, reflect: true }) name = ''\n  @property({ type: String }) value = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: Boolean, reflect: true }) loading = false\n  @state() private _pressed = false\n  @state() private _isDragging = false\n  @state() private _dragOffset = 0\n  @state() private _dragProgress = 0\n\n  private _dragged = false\n  private _maxTravel = 20\n  private _startOffset = 0\n  private _dragGestureHandle: DragGestureHandle | null = null\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._dragGestureHandle?.destroy()\n    this._dragGestureHandle = null\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formAssociation.isFormDisabled()\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._checked ? this.value || 'on' : null),\n    getFormState: () => String(this._checked),\n    restoreState: state => {\n      if (typeof state === 'string') this.checked = state === 'true'\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  }\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._checked) internals.setValidity({})\n    else internals.setValidity({ valueMissing: true }, '请启用此项')\n  }\n\n  // 阻止 label 默认行为，避免原生 checkbox 重复触发点击。\n  private handleClick(e: Event) {\n    e.preventDefault()\n    if (this._dragged) {\n      this._dragged = false\n      return\n    }\n    if (this._isDisabled || this.loading) return\n    const old = this._checked\n    this._checked = !old\n    this._formAssociation.sync()\n    this.requestUpdate('checked', old)\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handlePointerDown(e: PointerEvent) {\n    if (this._isDisabled || this.loading) return\n    this._pressed = true\n\n    const track = this.renderRoot.querySelector<HTMLElement>('.wui-switch-track')\n    if (track) {\n      const trackWidth = track.getBoundingClientRect().width || 40\n      // 拖拽时 thumb 的 pressed 布局盒为 20px（scale(1.5) 视觉放大），因此行程按 20px 布局盒钳制；\n      // 释放后的 checked 静止位移为 20px（16px thumb），两者由 transition 衔接。\n      this._maxTravel = Math.max(1, trackWidth - 4 - 20)\n    } else {\n      this._maxTravel = 16\n    }\n\n    this._startOffset = this._checked ? this._maxTravel : 0\n    this._dragOffset = this._startOffset\n    this._dragProgress = this._checked ? 1 : 0\n\n    this._dragGestureHandle?.destroy()\n    this._dragGestureHandle = attachDragGesture(e, {\n      axis: 'x',\n      threshold: 6,\n      onMove: info => {\n        this._isDragging = true\n        const current = clamp(this._startOffset + info.deltaX, 0, this._maxTravel)\n        this._dragOffset = current\n        this._dragProgress = normalizeProgress(current, 0, this._maxTravel)\n        this.requestUpdate()\n      },\n      onEnd: info => {\n        const wasDragging = this._isDragging\n        this._isDragging = false\n        this._pressed = false\n\n        if (wasDragging) {\n          this._dragged = true\n          let targetChecked = this._checked\n          if (info.velocityX > 300) {\n            targetChecked = true\n          } else if (info.velocityX < -300) {\n            targetChecked = false\n          } else {\n            targetChecked = this._dragProgress >= 0.5\n          }\n\n          if (targetChecked !== this._checked) {\n            const old = this._checked\n            this._checked = targetChecked\n            this._formAssociation.sync()\n            this.requestUpdate('checked', old)\n            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n          } else {\n            this.requestUpdate()\n          }\n        }\n      },\n      onCancel: () => {\n        this._isDragging = false\n        this._pressed = false\n        this.requestUpdate()\n      }\n    })\n  }\n\n  private handlePointerUp() {\n    this._pressed = false\n  }\n\n  private handlePointerLeave() {\n    if (!this._isDragging) {\n      this._pressed = false\n    }\n  }\n\n  override render() {\n    const isOpen = this._isDragging ? this._dragProgress >= 0.5 : this._checked\n    const trackCls = {\n      'wui-switch-track': true,\n      'is-open': isOpen,\n      'is-dragging': this._isDragging,\n      'is-disabled': this._isDisabled || this.loading\n    }\n    const thumbCls = {\n      'wui-switch-thumb': true,\n      'wui-glass': this._pressed || this._isDragging,\n      'is-pressed': this._pressed || this._isDragging\n    }\n    const trackStyle = this._isDragging ? { '--wui-switch-drag-offset': `${this._dragOffset}px` } : {}\n\n    return html`\n      <label\n        class=${classMap(trackCls)}\n        style=${styleMap(trackStyle)}\n        role=\"switch\"\n        aria-checked=${String(this._checked)}\n        @click=${this.handleClick}\n        @pointerdown=${this.handlePointerDown}\n        @pointerup=${this.handlePointerUp}\n        @pointercancel=${this.handlePointerUp}\n        @pointerleave=${this.handlePointerLeave}\n      >\n        <input\n          type=\"checkbox\"\n          .checked=${this._checked}\n          ?disabled=${this._isDisabled || this.loading}\n          class=\"sr-only\"\n        />\n        <div class=${classMap(thumbCls)}>\n          ${\n            this.loading\n              ? html`<div class=\"wui-switch-loading\">\n                  <web-ui-icon .icon=${lucideLoaderCircle} size=\"14\" color=\"#08f\" spin></web-ui-icon>\n                </div>`\n              : ''\n          }\n        </div>\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-switch': WebUiSwitch\n  }\n}\n"],"mappings":"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"}

package/dist/components/switch/style.js

@@ -1,5 +1,5 @@
 //#region src/components/switch/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed}.sr-only{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.wui-switch-track{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--wui-color-surface-raised-deep,#e5e5ea);outline-offset:2px;width:48px;height:24px;transition:background-color var(--wui-duration-trigger,.16s) ease;border-radius:2147483647px;outline:3px solid #0000;justify-content:space-between;align-items:center;display:flex;position:relative}.wui-switch-track:focus-within{outline-color:var(--wui-focus-ring,#08f6)}.wui-switch-track.is-open{background-color:var(--wui-color-accent,#08f)}.wui-switch-track.is-disabled{cursor:not-allowed;opacity:.4}.wui-switch-thumb{width:20px;height:20px;transition:width var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), transform var(--wui-duration-trigger,.16s) cubic-bezier(.4, 0, .2, 1), border-radius var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease;border-radius:2147483647px;position:absolute;top:2px;left:2px;overflow:hidden}.wui-switch-thumb.is-pressed{background-color:#0000;border-radius:2147483647px;width:32px}.wui-switch-thumb:not(.is-pressed){background-color:var(--wui-color-surface,#fff);box-shadow:1px 2px 6px #0003}.wui-switch-track.is-open .wui-switch-thumb{transform:translate(24px)}.wui-switch-track.is-open .wui-switch-thumb.is-pressed{transform:translate(12px)}.wui-switch-loading{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed}.sr-only{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.wui-switch-track{touch-action:pan-y;cursor:default;-webkit-user-select:none;user-select:none;background-color:var(--wui-color-surface-track,#e5e5ea);outline:var(--wui-focus-ring-width,3px) solid transparent;outline-offset:2px;width:40px;height:20px;transition:background-color var(--wui-duration-trigger,.16s) ease;border-radius:2147483647px;justify-content:space-between;align-items:center;display:flex;position:relative}.wui-switch-track:focus-within{outline-color:var(--wui-color-focus-ring,#08f6)}.wui-switch-track.is-open{background-color:var(--wui-color-accent,#08f)}.wui-switch-track.is-disabled{cursor:not-allowed;opacity:.4}.wui-switch-thumb{transform-origin:50%;width:16px;height:16px;transition:width var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), transform var(--wui-duration-trigger,.16s) cubic-bezier(.4, 0, .2, 1), border-radius var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease;border-radius:2147483647px;position:absolute;top:2px;left:2px;overflow:hidden;transform:translate(0)scale(1)}.wui-switch-thumb.is-pressed{background-color:#0000;border-radius:2147483647px;width:20px;transform:translate(0)scale(1.5)}.wui-switch-thumb:not(.is-pressed){background-color:var(--wui-color-on-control,#fff);box-shadow:1px 2px 6px #0003}.wui-switch-track.is-open .wui-switch-thumb{transform:translate(20px)scale(1)}.wui-switch-track.is-open .wui-switch-thumb.is-pressed{transform:translate(16px)scale(1.5)}.wui-switch-track.is-dragging{cursor:grabbing}.wui-switch-track.is-dragging .wui-switch-thumb,.wui-switch-track.is-dragging .wui-switch-thumb.is-pressed{transform:translateX(var(--wui-switch-drag-offset,0)) scale(1.5);transition:none}.wui-switch-loading{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/switch/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/*\n标准视觉隐藏技术（sr-only）：\n业内标准的“屏幕阅读器专用”隐藏方案。\n把复选框缩放到 1x1 像素，但保留在 dom 中，\n既让肉眼看不见，又能让读屏软件识别，并允许键盘用户通过空格键切换状态。\n*/\n.sr-only {\n  position: absolute;\n\n  overflow: hidden;\n\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n\n  white-space: nowrap;\n\n  clip-path: inset(50%);\n}\n\n.wui-switch-track {\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 48px;\n  height: 24px;\n  border-radius: calc(infinity * 1px);\n\n  background-color: var(--wui-color-surface-raised-deep, #e5e5ea);\n  outline: 3px solid transparent;\n  outline-offset: 2px;\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n  /* 实际获得焦点的是内部 sr-only 的 checkbox，track 本身不可聚焦；\n     :focus-visible 在 track 上永不匹配，需用 :focus-within 让键盘焦点环生效 */\n  &:focus-within {\n    outline-color: var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n  }\n\n  &.is-open {\n    background-color: var(--wui-color-accent, #08f);\n  }\n\n  &.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.wui-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n\n  overflow: hidden;\n\n  width: 20px;\n  height: 20px;\n  border-radius: calc(infinity * 1px);\n\n  transition:\n    width var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n    transform var(--wui-duration-trigger, 160ms) cubic-bezier(0.4, 0, 0.2, 1),\n    border-radius var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n    background-color var(--wui-duration-press, 80ms) ease;\n\n  &.is-pressed {\n    width: 32px;\n    border-radius: calc(infinity * 1px);\n    background-color: transparent;\n  }\n\n  &:not(.is-pressed) {\n    background-color: var(--wui-color-surface, #fff);\n    box-shadow: 1px 2px 6px rgb(0 0 0 / 0.2);\n  }\n}\n\n.wui-switch-track.is-open .wui-switch-thumb {\n  transform: translateX(24px);\n\n  &.is-pressed {\n    transform: translateX(12px);\n  }\n}\n\n.wui-switch-loading {\n  pointer-events: none;\n\n  position: absolute;\n  inset: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/switch/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/*\n标准视觉隐藏技术（sr-only）：\n业内标准的“屏幕阅读器专用”隐藏方案。\n把复选框缩放到 1x1 像素，但保留在 dom 中，\n既让肉眼看不见，又能让读屏软件识别，并允许键盘用户通过空格键切换状态。\n*/\n.sr-only {\n  position: absolute;\n\n  overflow: hidden;\n\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n\n  white-space: nowrap;\n\n  clip-path: inset(50%);\n}\n\n.wui-switch-track {\n  touch-action: pan-y;\n  cursor: default;\n  user-select: none;\n\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 40px;\n  height: 20px;\n  border-radius: calc(infinity * 1px);\n\n  background-color: var(--wui-color-surface-track, #e5e5ea);\n  outline: var(--wui-focus-ring-width, 3px) solid transparent;\n  outline-offset: 2px;\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n  /* 实际获得焦点的是内部 sr-only 的 checkbox，track 本身不可聚焦；\n     :focus-visible 在 track 上永不匹配，需用 :focus-within 让键盘焦点环生效 */\n  &:focus-within {\n    outline-color: var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n  }\n\n  &.is-open {\n    background-color: var(--wui-color-accent, #08f);\n  }\n\n  &.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.wui-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  transform-origin: center center;\n  transform: translateX(0) scale(1);\n\n  overflow: hidden;\n\n  width: 16px;\n  height: 16px;\n  border-radius: calc(infinity * 1px);\n\n  transition:\n    width var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n    transform var(--wui-duration-trigger, 160ms) cubic-bezier(0.4, 0, 0.2, 1),\n    border-radius var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n    background-color var(--wui-duration-press, 80ms) ease;\n\n  &.is-pressed {\n    transform: translateX(0) scale(1.5);\n    width: 20px;\n    border-radius: calc(infinity * 1px);\n    background-color: transparent;\n  }\n\n  &:not(.is-pressed) {\n    background-color: var(--wui-color-on-control, #fff);\n    box-shadow: 1px 2px 6px rgb(0 0 0 / 0.2);\n  }\n}\n\n.wui-switch-track.is-open .wui-switch-thumb {\n  transform: translateX(20px) scale(1);\n\n  &.is-pressed {\n    transform: translateX(16px) scale(1.5);\n  }\n}\n\n.wui-switch-track.is-dragging {\n  cursor: grabbing;\n}\n\n.wui-switch-track.is-dragging .wui-switch-thumb,\n.wui-switch-track.is-dragging .wui-switch-thumb.is-pressed {\n  transform: translateX(var(--wui-switch-drag-offset, 0)) scale(1.5);\n  transition: none;\n}\n\n.wui-switch-loading {\n  pointer-events: none;\n\n  position: absolute;\n  inset: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}

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

@@ -19,22 +19,21 @@ export declare class WebUiTextarea extends LitElement {
     ariaLabelledby: string | undefined;
     private _value;
     private _focused;
-    private _formDisabled;
     private _hasPrefix;
     private _hasSuffix;
     private _textarea;
     private _resizeObserver;
-    private _internals?;
     get value(): string;
     set value(v: string);
     private get _isDisabled();
-    connectedCallback(): void;
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changed: Map<string, unknown>): void;
-    formDisabledCallback(disabled: boolean): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: string | File | FormData | null): void;
     private _getTextarea;
     private _syncValidity;
     private _setupAutosize;

package/dist/components/textarea/index.js

@@ -1,37 +1,56 @@
-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/jam-close-circle-f.js";
 import n from "../../assets/glass.js";
+import { FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
 import "../button/index.js";
-import r from "./style.js";
-import { LitElement as i, html as a, nothing as o, unsafeCSS as s } from "lit";
-import { customElement as c, property as l, state as u } from "lit/decorators.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { styleMap as p } from "lit/directives/style-map.js";
+import a from "./style.js";
+import { LitElement as o, html as s, nothing as c, unsafeCSS as l } from "lit";
+import { customElement as u, property as d, state as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { styleMap as h } from "lit/directives/style-map.js";
 //#region src/components/textarea/index.ts
-var m = class extends i {
+var g = class extends o {
 	constructor(...e) {
-		super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.full = !1, this.clearable = !1, this.borderless = !1, this.rows = 3, this.autosize = !1, this.maxHeight = 0, this.ariaLabel = null, this._value = "", this._focused = !1, this._formDisabled = !1, this._hasPrefix = !1, this._hasSuffix = !1, this._textarea = null, this._resizeObserver = null;
+		super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.full = !1, this.clearable = !1, this.borderless = !1, this.rows = 3, this.autosize = !1, this.maxHeight = 0, this.ariaLabel = null, this._value = "", this._focused = !1, this._hasPrefix = !1, this._hasSuffix = !1, this._textarea = null, this._resizeObserver = null, this._formAssociation = i({
+			host: this,
+			getState: () => this._value,
+			setState: (e) => {
+				this.value = e;
+			},
+			getFormValue: () => this._value,
+			getFormState: () => this._value,
+			restoreState: (e) => {
+				typeof e == "string" && (this.value = e);
+			},
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new r(this, this._formAssociation);
 	}
 	static {
 		this.formAssociated = !0;
 	}
 	static {
-		this.styles = [s(n), s(r)];
+		this.styles = [l(n), l(a)];
 	}
 	get value() {
 		return this._value;
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = e, this._internals?.setFormValue?.(e), this.requestUpdate("value", t);
+		this._value = e, this._formAssociation.sync(), this.requestUpdate("value", t);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
-	connectedCallback() {
-		super.connectedCallback(), this._internals ||= this.attachInternals(), this._internals.setFormValue?.(this._value);
+	formResetCallback() {
+		this._formAssociation.reset();
+	}
+	formDisabledCallback(e) {
+		this._formAssociation.setDisabled(e);
+	}
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this._teardownAutosize();
@@ -46,20 +65,11 @@ var m = class extends i {
 		}
 		e.has("autosize") && (this.autosize ? this._setupAutosize() : this._teardownAutosize(!0)), this._syncValidity(), this.toggleAttribute("focused", this._focused);
 	}
-	formDisabledCallback(e) {
-		this._formDisabled = e;
-	}
-	formResetCallback() {
-		this.value = this.getAttribute("value") || "";
-	}
-	formStateRestoreCallback(e) {
-		typeof e == "string" && (this.value = e);
-	}
 	_getTextarea() {
 		return this._textarea ??= this.shadowRoot?.querySelector("textarea") ?? null, this._textarea;
 	}
 	_syncValidity() {
-		let e = this._internals, t = this._getTextarea();
+		let e = this._formAssociation.getInternals(), t = this._getTextarea();
 		if (!e || !t || typeof e.setValidity != "function") return;
 		if (this._isDisabled || t.validity.valid) {
 			e.setValidity({});
@@ -81,13 +91,10 @@ var m = class extends i {
 		this._resizeObserver?.disconnect(), this._resizeObserver = null, e && this._textarea?.style.removeProperty("height");
 	}
 	_autosize() {
-		if (!this._textarea || !this.autosize) return;
-		this._textarea.style.height = "auto";
-		let e = this.rows * 20, t = this._textarea.scrollHeight, n = Math.max(t, e);
-		this._textarea.style.height = `${n}px`;
+		!this._textarea || !this.autosize || (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
 	}
 	handleInput(e) {
-		e.target instanceof HTMLTextAreaElement && (this._value = e.target.value, this._internals?.setFormValue?.(this._value), this._syncValidity(), this._autosize());
+		e.target instanceof HTMLTextAreaElement && (this._value = e.target.value, this._formAssociation.sync(), this._syncValidity(), this._autosize());
 	}
 	handleFocus() {
 		this._isDisabled || (this._focused = !0);
@@ -96,7 +103,7 @@ var m = class extends i {
 		this._focused = !1;
 	}
 	handleNativeChange(e) {
-		e.target instanceof HTMLTextAreaElement && (this._value = e.target.value, this._internals?.setFormValue?.(this._value), this._syncValidity(), this.dispatchEvent(new Event("change", {
+		e.target instanceof HTMLTextAreaElement && (this._value = e.target.value, this._formAssociation.sync(), this._syncValidity(), this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0
 		})));
@@ -119,7 +126,7 @@ var m = class extends i {
 		t.name === "prefix" && (this._hasPrefix = n), t.name === "suffix" && (this._hasSuffix = n);
 	}
 	handleClear() {
-		this._isDisabled || this.readonly || (this._value = "", this._internals?.setFormValue?.(""), this.dispatchEvent(new Event("input", {
+		this._isDisabled || this.readonly || (this._value = "", this._formAssociation.sync(), this.dispatchEvent(new Event("input", {
 			bubbles: !0,
 			composed: !0
 		})));
@@ -129,93 +136,93 @@ var m = class extends i {
 	}
 	render() {
 		let e = this.clearable && this._value && !this.readonly;
-		return a`
+		return s`
       <div class="wui-glass wui-textarea-inner" @click=${this.focusTextarea}>
-        <slot name="prefix" class=${f({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>
+        <slot name="prefix" class=${m({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>
         <textarea
           placeholder=${this.placeholder}
           name=${this.name}
-          aria-label=${d(this.ariaLabel)}
-          aria-labelledby=${d(this.ariaLabelledby)}
+          aria-label=${p(this.ariaLabel)}
+          aria-labelledby=${p(this.ariaLabelledby)}
           .rows=${this.rows}
-          minlength=${d(this.minlength)}
-          maxlength=${d(this.maxlength)}
+          minlength=${p(this.minlength)}
+          maxlength=${p(this.maxlength)}
           ?disabled=${this._isDisabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
           .value=${this._value}
-          style=${this.maxHeight > 0 ? p({ "max-height": `${this.maxHeight}px` }) : o}
+          style=${this.maxHeight > 0 ? h({ "max-height": `${this.maxHeight}px` }) : c}
           @input=${this.handleInput}
           @change=${this.handleNativeChange}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
         ></textarea>
-        ${e ? a`<web-ui-button
-              icon
-              variant="ghost"
-              size="24"
-              aria-label="清除"
-              @pointerdown=${this.preventMouseDownBlur}
-              @click=${this.handleClear}
-            >
-              <web-ui-icon .icon=${t}></web-ui-icon>
-            </web-ui-button>` : ""}
-        <slot name="suffix" class=${f({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>
+        ${e ? s`<web-ui-button
+                icon
+                variant="ghost"
+                size="24"
+                aria-label="清除"
+                @pointerdown=${this.preventMouseDownBlur}
+                @click=${this.handleClear}
+              >
+                <web-ui-icon .icon=${t}></web-ui-icon>
+              </web-ui-button>` : ""}
+        <slot name="suffix" class=${m({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>
       </div>
     `;
 	}
 };
-e([l({
+e([d({
 	type: String,
 	reflect: !0
-})], m.prototype, "placeholder", void 0), e([l({
+})], g.prototype, "placeholder", void 0), e([d({
 	type: String,
 	reflect: !0
-})], m.prototype, "name", void 0), e([l({
+})], g.prototype, "name", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "disabled", void 0), e([l({
+})], g.prototype, "disabled", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "readonly", void 0), e([l({
+})], g.prototype, "readonly", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "required", void 0), e([l({
+})], g.prototype, "required", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "full", void 0), e([l({
+})], g.prototype, "full", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "clearable", void 0), e([l({
+})], g.prototype, "clearable", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "borderless", void 0), e([l({
+})], g.prototype, "borderless", void 0), e([d({
 	type: Number,
 	reflect: !0
-})], m.prototype, "rows", void 0), e([l({
+})], g.prototype, "rows", void 0), e([d({
 	type: Number,
 	reflect: !0
-})], m.prototype, "minlength", void 0), e([l({
+})], g.prototype, "minlength", void 0), e([d({
 	type: Number,
 	reflect: !0
-})], m.prototype, "maxlength", void 0), e([l({
+})], g.prototype, "maxlength", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "autosize", void 0), e([l({
+})], g.prototype, "autosize", void 0), e([d({
 	type: Number,
 	reflect: !0,
 	attribute: "max-height"
-})], m.prototype, "maxHeight", void 0), e([l({
+})], g.prototype, "maxHeight", void 0), e([d({
 	type: String,
 	attribute: "aria-label"
-})], m.prototype, "ariaLabel", void 0), e([l({
+})], g.prototype, "ariaLabel", void 0), e([d({
 	type: String,
 	attribute: "aria-labelledby"
-})], m.prototype, "ariaLabelledby", void 0), e([u()], m.prototype, "_value", void 0), e([u()], m.prototype, "_focused", void 0), e([u()], m.prototype, "_formDisabled", void 0), e([u()], m.prototype, "_hasPrefix", void 0), e([u()], m.prototype, "_hasSuffix", void 0), e([l({
+})], g.prototype, "ariaLabelledby", void 0), e([f()], g.prototype, "_value", void 0), e([f()], g.prototype, "_focused", void 0), e([f()], g.prototype, "_hasPrefix", void 0), e([f()], g.prototype, "_hasSuffix", void 0), e([d({
 	type: String,
 	reflect: !0
-})], m.prototype, "value", null), m = e([c("web-ui-textarea")], m);
+})], g.prototype, "value", null), g = e([u("web-ui-textarea")], g);
 //#endregion
-export { m as WebUiTextarea };
+export { g as WebUiTextarea };
 
 //# sourceMappingURL=index.js.map