@iyulab/components 1.27.1 → 1.27.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # 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
+
+- **`u-input`'s form submission value now stays in sync with `value` across every change
+  path**, not just on blur. Previously, `ElementInternals.setFormValue()` was only called from
+  the blur handler, so submitting a form before a field lost focus (an initial `value`
+  attribute, a programmatic `.value =` assignment, or the clear button from 1.27.1) could send a
+  stale or missing value. Sync now happens reactively whenever `value` changes, matching
+  `u-select`'s existing contract.
+
 ## [1.27.1] - 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/input/UInput.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 import { UPopover } from '../popover/UPopover.js';
 export type InputType = 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
@@ -81,6 +82,12 @@ export declare class UInput extends UFormControlElement<string> {
     private options;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
+    /** `value`가 바뀌는 모든 경로(초기 속성 설정 · 프로그램적 대입 · clear 버튼)에서
+     *  폼 제출값을 동기화한다 — 종전에는 `handleInputBlur`에서만 수동으로 호출해,
+     *  blur 전에 폼이 제출되면(다른 컨트롤의 Enter 등) `FormData`가 낡은 값을 돌려줬다.
+     *  형제 `USelect`의 `updated()`+`onChangeValue()` 패턴과 같은 경계 — `T`가 이미
+     *  `string`이라 `valueAsString` 같은 변환 없이 그대로 넘긴다. */
+    protected updated(changedProperties: PropertyValues): void;
     protected setValidity(): void;
     reset(): void;
     focus(options?: FocusOptions): void;

package/dist/components/input/UInput.js

@@ -53,7 +53,6 @@ var UInput = class UInput extends UFormControlElement {
 		};
 		this.handleInputBlur = (_) => {
 			this.value = this.inputEl?.value || "";
-			this.internals?.setFormValue(this.value);
 			if (!this.novalidate) this.validate();
 			this.dispatchEvent(new Event("change", {
 				bubbles: true,
@@ -213,6 +212,15 @@ var UInput = class UInput extends UFormControlElement {
       </u-popover>
     `;
 	}
+	/** `value`가 바뀌는 모든 경로(초기 속성 설정 · 프로그램적 대입 · clear 버튼)에서
+	*  폼 제출값을 동기화한다 — 종전에는 `handleInputBlur`에서만 수동으로 호출해,
+	*  blur 전에 폼이 제출되면(다른 컨트롤의 Enter 등) `FormData`가 낡은 값을 돌려줬다.
+	*  형제 `USelect`의 `updated()`+`onChangeValue()` 패턴과 같은 경계 — `T`가 이미
+	*  `string`이라 `valueAsString` 같은 변환 없이 그대로 넘긴다. */
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("value")) this.internals?.setFormValue(this.value ?? "");
+	}
 	setValidity() {
 		const v = this.inputEl?.validity;
 		let flags = {};

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.1",
+  "version": "1.27.3",
   "keywords": [
     "iyulab",
     "components",