@iyulab/components 1.27.2 → 1.27.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.27.3] - 2026-08-11
+
+### Fixed
+
+- **`u-textarea`'s form submission value now stays in sync with `value` across every change
+  path**, not just on `change`. Previously, `ElementInternals.setFormValue()` was only called
+  from the `change` handler, so submitting a form before the field lost focus (an initial
+  `value` attribute or a programmatic `.value =` assignment) could send a stale or missing
+  value. Sync now happens reactively whenever `value` changes, matching `u-input`'s contract.
+- **`u-checkbox`/`u-switch`'s form submission value now stays in sync with `checked` across
+  every change path**, not just on the native `change` event. Previously,
+  `ElementInternals.setFormValue()` was only called from the click handler, so submitting a
+  form before interaction (an initial `checked` attribute or a programmatic `.checked =`
+  assignment) could send a stale or missing value. Sync now happens reactively whenever
+  `checked` (or `value`) changes.
+
 ## [1.27.2] - 2026-08-11
 
 ### Fixed

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

@@ -35,6 +35,10 @@ export declare class UCheckbox extends UFormControlElement<string> {
     checked: boolean;
     inputEl?: HTMLInputElement;
     protected shouldValidate(changed: PropertyValues): boolean;
+    /** `checked`(또는 그 값을 함께 결정하는 `value`)가 바뀌는 모든 경로(초기 속성 설정 ·
+     *  프로그램적 대입 · 사용자 클릭)에서 폼 제출값을 동기화한다 — `UInput`/`UTextarea`와
+     *  같은 경계(`DL-289-1`). */
+    protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;

package/dist/components/checkbox/UCheckbox.js

@@ -21,7 +21,6 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 			const input = e.target;
 			this.indeterminate = false;
 			this.checked = input.checked;
-			this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
 			if (!this.novalidate) this.validate();
 			this.relay(e);
 		};
@@ -32,6 +31,13 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 	shouldValidate(changed) {
 		return super.shouldValidate(changed) || changed.has("checked");
 	}
+	/** `checked`(또는 그 값을 함께 결정하는 `value`)가 바뀌는 모든 경로(초기 속성 설정 ·
+	*  프로그램적 대입 · 사용자 클릭)에서 폼 제출값을 동기화한다 — `UInput`/`UTextarea`와
+	*  같은 경계(`DL-289-1`). */
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("checked") || changedProperties.has("value")) this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
+	}
 	render() {
 		return html`
       <label class="wrapper" part="wrapper">

package/dist/components/switch/USwitch.d.ts

@@ -34,6 +34,10 @@ export declare class USwitch extends UFormControlElement<string> {
     checked: boolean;
     inputEl?: HTMLInputElement;
     protected shouldValidate(changed: PropertyValues): boolean;
+    /** `checked`(또는 그 값을 함께 결정하는 `value`)가 바뀌는 모든 경로(초기 속성 설정 ·
+     *  프로그램적 대입 · 사용자 클릭)에서 폼 제출값을 동기화한다 — `UInput`/`UTextarea`/
+     *  `UCheckbox`와 같은 경계(`DL-289-1`). */
+    protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;

package/dist/components/switch/USwitch.js

@@ -16,7 +16,6 @@ var USwitch = class USwitch extends UFormControlElement {
 			if (this.readonly || this.disabled) return;
 			const input = e.target;
 			this.checked = input.checked;
-			this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
 			if (!this.novalidate) this.validate();
 			this.relay(e);
 		};
@@ -27,6 +26,13 @@ var USwitch = class USwitch extends UFormControlElement {
 	shouldValidate(changed) {
 		return super.shouldValidate(changed) || changed.has("checked");
 	}
+	/** `checked`(또는 그 값을 함께 결정하는 `value`)가 바뀌는 모든 경로(초기 속성 설정 ·
+	*  프로그램적 대입 · 사용자 클릭)에서 폼 제출값을 동기화한다 — `UInput`/`UTextarea`/
+	*  `UCheckbox`와 같은 경계(`DL-289-1`). */
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("checked") || changedProperties.has("value")) this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
+	}
 	render() {
 		return html`
       <label class="wrapper" part="wrapper">

package/dist/components/textarea/UTextarea.js

@@ -25,7 +25,6 @@ var UTextarea = class UTextarea extends UFormControlElement {
 		};
 		this.handleTextareaChange = (e) => {
 			this.value = this.textareaEl?.value;
-			this.internals?.setFormValue(this.value || "");
 			if (!this.novalidate) this.validate();
 			this.relay(e);
 		};
@@ -35,6 +34,7 @@ var UTextarea = class UTextarea extends UFormControlElement {
 	}
 	async updated(changedProperties) {
 		super.updated(changedProperties);
+		if (changedProperties.has("value")) this.internals?.setFormValue(this.value ?? "");
 		await this.updateComplete;
 		if (this.resize === "auto" && [
 			"value",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.27.2",
+  "version": "1.27.3",
   "keywords": [
     "iyulab",
     "components",